@returningai/widget-sdk 1.8.11 → 1.8.13

package/dist/rai-widget.js

@@ -13365,6 +13365,90 @@ class WidgetCallbackRegistry {
     return { ...this.registeredCallbacks };
   }
 }
+const loadedGoogleFontFamilies = /* @__PURE__ */ new Set();
+const LOCAL_OR_SYSTEM_FONT_FAMILIES = /* @__PURE__ */ new Set([
+  "aeonik",
+  "courier",
+  "courier new",
+  "monaco",
+  "monospace",
+  "sans-serif",
+  "serif",
+  "system-ui"
+]);
+const SERIF_FONT_FAMILIES = /* @__PURE__ */ new Set(["lora", "playfair display", "prata"]);
+const GOOGLE_FONT_VARIANTS = ":ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,700";
+function normalizeFontFamily(family) {
+  return family.trim() === "Noto" ? "Noto Sans" : family.trim();
+}
+function getFontStack(family) {
+  const normalizedFamily = normalizeFontFamily(family);
+  if (normalizedFamily.includes(",")) return normalizedFamily;
+  const normalizedKey = normalizedFamily.toLowerCase();
+  switch (normalizedKey) {
+    case "monospace":
+      return "monospace";
+    case "courier":
+    case "courier new":
+      return '"Courier New", Courier, monospace';
+    case "monaco":
+      return "Monaco, Menlo, Consolas, monospace";
+    case "system-ui":
+      return "system-ui, -apple-system, sans-serif";
+    case "sans-serif":
+    case "serif":
+      return normalizedKey;
+    default:
+      return `'${normalizedFamily.replace(/[\\']/g, "\\\\$&")}', ${SERIF_FONT_FAMILIES.has(normalizedKey) ? "Georgia, 'Times New Roman', serif" : "system-ui, -apple-system, sans-serif"}`;
+  }
+}
+function ensureGoogleFontPreconnect() {
+  if (!document.getElementById("rai-fonts-preconnect")) {
+    const link = document.createElement("link");
+    link.id = "rai-fonts-preconnect";
+    link.rel = "preconnect";
+    link.href = "https://fonts.googleapis.com";
+    document.head.appendChild(link);
+  }
+  if (!document.getElementById("rai-fonts-static-preconnect")) {
+    const link = document.createElement("link");
+    link.id = "rai-fonts-static-preconnect";
+    link.rel = "preconnect";
+    link.href = "https://fonts.gstatic.com";
+    link.crossOrigin = "anonymous";
+    document.head.appendChild(link);
+  }
+}
+function ensureGoogleFontLoaded(family) {
+  const normalizedFamily = normalizeFontFamily(family);
+  const fontKey = normalizedFamily.toLowerCase();
+  if (!normalizedFamily || normalizedFamily.includes(",") || LOCAL_OR_SYSTEM_FONT_FAMILIES.has(fontKey)) {
+    return;
+  }
+  if (loadedGoogleFontFamilies.has(fontKey)) return;
+  ensureGoogleFontPreconnect();
+  const linkId = `rai-font-${normalizedFamily.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
+  const fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(
+    normalizedFamily
+  )}${GOOGLE_FONT_VARIANTS}&display=swap`;
+  let link = document.getElementById(linkId);
+  if (link && link.href !== fontUrl) {
+    link.remove();
+    link = null;
+  }
+  if (!link) {
+    link = document.createElement("link");
+    link.id = linkId;
+    link.rel = "stylesheet";
+    link.href = fontUrl;
+    document.head.appendChild(link);
+  }
+  loadedGoogleFontFamilies.add(fontKey);
+  link.onerror = () => {
+    loadedGoogleFontFamilies.delete(fontKey);
+    link == null ? void 0 : link.remove();
+  };
+}
 const STORE_CALLBACK_FIELD_OPTIONS_SCOPE = "store.callback_field_options";
 const STORE_CALLBACK_FIELD_OPTIONS_CALLBACK_NAME = "callbackFieldOptions";
 const STORE_CALLBACK_FIELD_OPTIONS_TIMEOUT_MS = 15e3;
@@ -14003,89 +14087,6 @@ function resolveWidgetServerUrl(domainKey) {
 function resolveV2ApiUrl(domainKey) {
   return DOMAIN_KEY_TO_V2_API_URL[domainKey] || DOMAIN_KEY_TO_V2_API_URL.PROD;
 }
-const loadedGoogleFontFamilies = /* @__PURE__ */ new Set();
-const LOCAL_OR_SYSTEM_FONT_FAMILIES = /* @__PURE__ */ new Set([
-  "aeonik",
-  "courier",
-  "courier new",
-  "monaco",
-  "monospace",
-  "sans-serif",
-  "serif",
-  "system-ui"
-]);
-const SERIF_FONT_FAMILIES = /* @__PURE__ */ new Set(["lora", "playfair display", "prata"]);
-const GOOGLE_FONT_VARIANTS = ":ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,700";
-function normalizeFontFamily(family) {
-  return family.trim() === "Noto" ? "Noto Sans" : family.trim();
-}
-function getFontStack(family) {
-  const normalizedFamily = normalizeFontFamily(family);
-  const normalizedKey = normalizedFamily.toLowerCase();
-  switch (normalizedKey) {
-    case "monospace":
-      return "monospace";
-    case "courier":
-    case "courier new":
-      return '"Courier New", Courier, monospace';
-    case "monaco":
-      return "Monaco, Menlo, Consolas, monospace";
-    case "system-ui":
-      return "system-ui, -apple-system, sans-serif";
-    case "sans-serif":
-    case "serif":
-      return normalizedKey;
-    default:
-      return `'${normalizedFamily.replace(/[\\']/g, "\\\\$&")}', ${SERIF_FONT_FAMILIES.has(normalizedKey) ? "Georgia, 'Times New Roman', serif" : "system-ui, -apple-system, sans-serif"}`;
-  }
-}
-function ensureGoogleFontPreconnect() {
-  if (!document.getElementById("rai-fonts-preconnect")) {
-    const link = document.createElement("link");
-    link.id = "rai-fonts-preconnect";
-    link.rel = "preconnect";
-    link.href = "https://fonts.googleapis.com";
-    document.head.appendChild(link);
-  }
-  if (!document.getElementById("rai-fonts-static-preconnect")) {
-    const link = document.createElement("link");
-    link.id = "rai-fonts-static-preconnect";
-    link.rel = "preconnect";
-    link.href = "https://fonts.gstatic.com";
-    link.crossOrigin = "anonymous";
-    document.head.appendChild(link);
-  }
-}
-function ensureGoogleFontLoaded(family) {
-  const normalizedFamily = normalizeFontFamily(family);
-  const fontKey = normalizedFamily.toLowerCase();
-  if (!normalizedFamily || LOCAL_OR_SYSTEM_FONT_FAMILIES.has(fontKey)) {
-    return;
-  }
-  if (loadedGoogleFontFamilies.has(fontKey)) return;
-  ensureGoogleFontPreconnect();
-  const linkId = `rai-font-${normalizedFamily.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
-  const fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(
-    normalizedFamily
-  )}${GOOGLE_FONT_VARIANTS}&display=swap`;
-  let link = document.getElementById(linkId);
-  if (link && link.href !== fontUrl) {
-    link.remove();
-    link = null;
-  }
-  if (!link) {
-    link = document.createElement("link");
-    link.id = linkId;
-    link.rel = "stylesheet";
-    link.href = fontUrl;
-    document.head.appendChild(link);
-  }
-  loadedGoogleFontFamilies.add(fontKey);
-  link.onerror = () => {
-    loadedGoogleFontFamilies.delete(fontKey);
-    link == null ? void 0 : link.remove();
-  };
-}
 const DANGEROUS_ELEMENTS = ["script", "iframe", "object", "embed"];
 const URL_ATTRS = ["src", "href", "xlink:href"];
 function sanitizeLoaderHtml(html2) {
@@ -14303,6 +14304,8 @@ class BaseWidget extends HTMLElement {
     return [
       "embed-token",
       "data-embed-token",
+      "theme",
+      "data-theme",
       "language",
       "data-language",
       "locale",
@@ -14325,16 +14328,8 @@ class BaseWidget extends HTMLElement {
     const style = document.createElement("style");
     style.textContent = widgetCSS;
     this.shadow.appendChild(style);
-    const theme = this.config.theme;
-    const accentColor = theme === "dark" ? "#ffffff" : "#000000";
-    const text4Color = theme === "dark" ? "#9ca3af" : "#6b7280";
-    const bgColor = theme === "dark" ? "#1a1a1a" : "#ffffff";
     this.style.width = this.config.width;
     this.style.height = this.config.height;
-    this.style.setProperty("--rai-accent", accentColor);
-    this.style.setProperty("--rai-text4", text4Color);
-    this.style.setProperty("--rai-loader-bg", bgColor);
-    this.style.setProperty("--rai-error-bg", bgColor);
     this.applyFirstPaintColors();
     this.renderShell();
     if (this.hasAttribute("eager")) {
@@ -14377,6 +14372,8 @@ class BaseWidget extends HTMLElement {
         void this.reload();
       } else {
         this.config = readConfig(this, this.config.communityId);
+        this.applyFirstPaintColors();
+        this.renderLoaderAnimation();
       }
     }
   }
@@ -14452,6 +14449,17 @@ class BaseWidget extends HTMLElement {
       }
     }
     const theme = this.config.theme === "dark" ? "dark" : "light";
+    this.style.setProperty(
+      "--rai-accent",
+      theme === "dark" ? "#ffffff" : "#000000"
+    );
+    this.style.setProperty(
+      "--rai-text4",
+      theme === "dark" ? "#9ca3af" : "#6b7280"
+    );
+    const bgColor = theme === "dark" ? "#1a1a1a" : "#ffffff";
+    this.style.setProperty("--rai-loader-bg", bgColor);
+    this.style.setProperty("--rai-error-bg", bgColor);
     const cachedPalette = (_a = cached == null ? void 0 : cached.themePalette) == null ? void 0 : _a[theme];
     if (cachedPalette) this.applyPalette(cachedPalette);
     const cachedFont = typeof (cached == null ? void 0 : cached.font) === "string" ? cached.font : void 0;
@@ -14535,19 +14543,7 @@ class BaseWidget extends HTMLElement {
     }
   }
   renderShell() {
-    this.loaderEl = document.createElement("div");
-    this.loaderEl.className = "rai-loader";
-    if (this.config.widgetType === "custom" && !loadErrorSettingsFromStorage(this.config)) {
-      this.loaderEl.classList.add("rai-loader-pending-settings");
-    }
-    const textEl = document.createElement("h1");
-    textEl.className = "rai-loader-text";
-    textEl.textContent = this.config.loadingText;
-    this.loaderEl.appendChild(textEl);
-    this.shadow.appendChild(this.loaderEl);
-    this.freezeIframeLoaderHeight();
-    this.applyLoadingSettings();
-    this.fetchAndRenderLoader();
+    this.showLoader();
     this.errorEl = document.createElement("div");
     this.errorEl.className = "rai-error";
     this.msgEl = document.createElement("span");
@@ -14562,6 +14558,26 @@ class BaseWidget extends HTMLElement {
     this.errorEl.appendChild(btn);
     this.shadow.appendChild(this.errorEl);
   }
+  showLoader() {
+    var _a;
+    this.clearLottieInstances();
+    this.shadow.querySelectorAll(".rai-loader").forEach((el2) => el2.remove());
+    (_a = this.errorEl) == null ? void 0 : _a.classList.remove("visible");
+    this.shadow.querySelectorAll(".rai-custom-error").forEach((el2) => el2.remove());
+    this.loaderEl = document.createElement("div");
+    this.loaderEl.className = "rai-loader";
+    if (this.config.widgetType === "custom" && !loadErrorSettingsFromStorage(this.config)) {
+      this.loaderEl.classList.add("rai-loader-pending-settings");
+    }
+    const textEl = document.createElement("h1");
+    textEl.className = "rai-loader-text";
+    textEl.textContent = this.config.loadingText;
+    this.loaderEl.appendChild(textEl);
+    this.shadow.appendChild(this.loaderEl);
+    this.freezeIframeLoaderHeight();
+    this.applyLoadingSettings();
+    void this.fetchAndRenderLoader();
+  }
   /**
    * Loads the community loading animation + theme palette from cache or API
    * and renders the configured animation above the loading text.
@@ -14572,6 +14588,7 @@ class BaseWidget extends HTMLElement {
    */
   async fetchAndRenderLoader() {
     var _a;
+    const loaderEl = this.loaderEl;
     const cached = loadErrorSettingsFromStorage(this.config);
     if (cached) {
       applyErrorSettingsToState(this.state, cached);
@@ -14583,8 +14600,7 @@ class BaseWidget extends HTMLElement {
       await fetchErrorSettings(this.config, this.state);
     } catch {
     }
-    const loaderEl = this.loaderEl;
-    if (!loaderEl) return;
+    if (!loaderEl || loaderEl !== this.loaderEl || !this.isConnected) return;
     if (!this.config.themeExplicit && (this.state.defaultColorSchema === "light" || this.state.defaultColorSchema === "dark") && this.state.defaultColorSchema !== this.config.theme) {
       this.config.theme = this.state.defaultColorSchema;
     }
@@ -14689,7 +14705,7 @@ class BaseWidget extends HTMLElement {
     setTimeout(() => {
       loader.remove();
       lottieInstances.forEach((instance) => instance.destroy());
-      this.restoreLoaderHeight();
+      if (!this.loaderEl) this.restoreLoaderHeight();
     }, 300);
     this.loaderEl = null;
   }
@@ -15435,6 +15451,8 @@ class BaseWidget extends HTMLElement {
     this.teardownMountedWidget();
     this.removeBanner();
     clearState(this.state);
+    this.applyFirstPaintColors();
+    this.showLoader();
     await this.init();
   }
   async logoutPublic() {
@@ -15570,7 +15588,7 @@ class CustomWidget extends BaseWidget {
     }
   }
 }
-console.log(`[rai-widget] v${"1.8.11"}`);
+console.log(`[rai-widget] v${"1.8.13"}`);
 class StoreWidgetCompat extends StoreWidget {
 }
 const WIDGET_REGISTRY = [
@@ -15634,7 +15652,7 @@ function exposePublicApi() {
   })();
   const widget = container == null ? void 0 : container.querySelector(ALL_WIDGET_SELECTOR);
   window.ReturningAIWidget = {
-    version: "1.8.11",
+    version: "1.8.13",
     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

@@ -59,6 +59,7 @@ export declare abstract class BaseWidget extends HTMLElement {
     private applyPalette;
     private applyLoadingSettings;
     private renderShell;
+    private showLoader;
     /**
      * Loads the community loading animation + theme palette from cache or API
      * and renders the configured animation above the loading text.

package/dist/types/core/fonts.d.ts

@@ -0,0 +1,3 @@
+export declare function normalizeFontFamily(family: string): string;
+export declare function getFontStack(family: string): string;
+export declare function ensureGoogleFontLoaded(family: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@returningai/widget-sdk",
-  "version": "1.8.11",
+  "version": "1.8.13",
   "description": "Shadow DOM isolated widget SDK for ReturningAI",
   "main": "dist/rai-widget.iife.js",
   "module": "dist/rai-widget.js",
@@ -42,7 +42,7 @@
     "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 src/react18.d.ts src/react19.d.ts dist/types/",
-    "test": "npm run test:host-callback && npm run test:bundle-readiness && npm run test:bundle-runtime-cache && npm run test:bundle-token-sync && npm run test:auth-bootstrap && npm run test:auth-error-reporting && npm run test:auth-refresh-state && npm run test:auth-renewal-recovery && npm run test:auth-session-coordinator && npm run test:startup-performance && npm run test:widget-error-presentation && 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:bundle-token-sync && npm run test:auth-bootstrap && npm run test:auth-error-reporting && npm run test:auth-refresh-state && npm run test:auth-renewal-recovery && npm run test:auth-session-coordinator && npm run test:startup-performance && npm run test:widget-error-presentation && npm run test:fonts && npm run test:jsx-types && npm run test:loader-lifecycle",
     "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",
@@ -54,11 +54,13 @@
     "test:auth-session-coordinator": "rm -rf test/.tmp && tsc -p test/tsconfig.json && node test/.tmp/test/auth-session-coordinator.test.js",
     "test:startup-performance": "rm -rf test/.tmp && tsc -p test/tsconfig.json && node test/.tmp/test/startup-performance.test.js",
     "test:widget-error-presentation": "rm -rf test/.tmp && tsc -p test/tsconfig.json && node test/.tmp/test/widget-error-presentation.test.js",
+    "test:fonts": "rm -rf test/.tmp && tsc -p test/tsconfig.json && node test/.tmp/test/fonts.test.js",
     "test:jsx-types": "npm run types && node --test test/jsx/declaration-shape.test.mjs test/jsx/packed-consumer.test.mjs && tsc -p test/jsx/tsconfig.react.json && tsc -p test/jsx/tsconfig.vue.json",
     "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"
+    "prepublishOnly": "npm run build:all:min && npm run types",
+    "test:loader-lifecycle": "node --test test/loader-lifecycle.test.mjs"
   },
   "devDependencies": {
     "@types/react": "^19.1.10",