kenobi-js 0.1.35 → 0.1.37

package/browser/dist.js

@@ -1,5 +1,5 @@
 /*!
- * Kenobi SDK v0.1.33
+ * Kenobi SDK v0.1.35
  * (c) 2025 Kenobi.ai
  */
 "use strict";
@@ -1097,7 +1097,7 @@ var KenobiLib = (() => {
       xmlns: "http://www.w3.org/2000/svg",
       children: [
         /* @__PURE__ */ u3("circle", { cx: "446", cy: "450", r: "424", fill: "black" }),
-        /* @__PURE__ */ u3("circle", { cx: "450", cy: "450", r: "357", fill: "url(#paint0_linear_1_41)" }),
+        /* @__PURE__ */ u3("circle", { cx: "450", cy: "450", r: "357", fill: "#E8E8E8" }),
         /* @__PURE__ */ u3(
           "ellipse",
           {
@@ -1108,22 +1108,7 @@ var KenobiLib = (() => {
             transform: "rotate(-46.2324 579.85 294.451)",
             fill: "black"
           }
-        ),
-        /* @__PURE__ */ u3("defs", { children: /* @__PURE__ */ u3(
-          "linearGradient",
-          {
-            id: "paint0_linear_1_41",
-            x1: "807",
-            y1: "93",
-            x2: "93",
-            y2: "807",
-            gradientUnits: "userSpaceOnUse",
-            children: [
-              /* @__PURE__ */ u3("stop", { "stop-color": "#FAFAFA" }),
-              /* @__PURE__ */ u3("stop", { offset: "1", "stop-color": "#CACACA" })
-            ]
-          }
-        ) })
+        )
       ]
     }
   ), "LogoIcon");
@@ -1196,6 +1181,14 @@ var KenobiLib = (() => {
   /* Launcher dismiss button */
   .launcher .btn-dismiss.launcher-dismiss { top: -0.375rem; left: -0.375rem; width: 1.25rem; height: 1.25rem; opacity: 0; transition: opacity 0.2s ease-out, background-color 0.3s ease-out, color 0.3s ease-out; }
   .launcher:hover .btn-dismiss.launcher-dismiss { opacity: 1; }
+  /* Launcher logo */
+  .launcher-logo { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+  .launcher-logo svg { width: 20px; height: 20px; }
+  /* Mobile: hide keyboard hints, show dismiss button */
+  @media (max-width: 768px) {
+    .launcher .kbd-hint { display: none; }
+    .launcher .btn-dismiss.launcher-dismiss { opacity: 1; }
+  }
 `;
   var useEnterExitAnimation = /* @__PURE__ */ __name((ref, isVisible, config) => {
     const hasEnteredRef = A2(false);
@@ -1680,14 +1673,27 @@ var KenobiLib = (() => {
     }, []);
     const clampedProgress = Math.max(0, Math.min(100, config.progressPct ?? 0));
     const displayedProgress = timerEnabled ? timerProgress : clampedProgress;
+    const isContainerVisible = !!config.isVisible && mode === "card" && !isDismissed;
+    const isLauncherVisible = !!config.isVisible && mode === "launcher" && !isDismissed;
+    const isAnythingVisible = isContainerVisible || isLauncherVisible;
     return /* @__PURE__ */ u3(k, { children: [
-      /* @__PURE__ */ u3("div", { ref: backdropRef, class: "backdrop" }),
+      /* @__PURE__ */ u3(
+        "div",
+        {
+          ref: backdropRef,
+          class: "backdrop",
+          style: { display: isAnythingVisible ? "block" : "none" }
+        }
+      ),
       /* @__PURE__ */ u3(
         "div",
         {
           ref: containerRef,
           class: `container theme-${config.theme || "glass"} pos-${config.position || "top-center"}`,
-          style: getThemeStyles(config.customTheme),
+          style: {
+            ...getThemeStyles(config.customTheme),
+            pointerEvents: isContainerVisible ? "auto" : "none"
+          },
           onClick: () => !isOpen && !isPending && !isSuccess && setIsOpen(true),
           onMouseEnter: () => setIsHovering(true),
           onMouseLeave: () => setIsHovering(false),
@@ -1829,9 +1835,13 @@ var KenobiLib = (() => {
         {
           ref: launcherRef,
           class: `launcher theme-${config.theme || "glass"} pos-${config.position || "top-center"}`,
-          style: getThemeStyles(config.customTheme),
+          style: {
+            ...getThemeStyles(config.customTheme),
+            pointerEvents: isLauncherVisible ? "auto" : "none"
+          },
           onClick: (e3) => {
             e3.stopPropagation();
+            setIsDismissed(false);
             setMode("card");
             setIsOpen(true);
           },
@@ -1851,20 +1861,7 @@ var KenobiLib = (() => {
                 children: /* @__PURE__ */ u3(XMarkIcon, {})
               }
             ),
-            /* @__PURE__ */ u3(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  width: "20px",
-                  height: "20px",
-                  overflow: "hidden",
-                  alignItems: "center",
-                  justifyContent: "center"
-                },
-                children: /* @__PURE__ */ u3("div", { style: { transform: "scale(0.6)" }, children: /* @__PURE__ */ u3(LogoIcon, {}) })
-              }
-            ),
+            /* @__PURE__ */ u3("div", { class: "launcher-logo", children: /* @__PURE__ */ u3(LogoIcon, {}) }),
             config.textOverrides?.launcherLabel || (hasHadSuccessRef.current ? "Personalize again" : "Personalize"),
             config.showKeyboardHints && /* @__PURE__ */ u3("div", { class: "kbd-hint visible", children: /* @__PURE__ */ u3("div", { class: "kbd-group", children: shortcutDisplay.map((k3, i3) => /* @__PURE__ */ u3("div", { class: "kbd", children: k3 }, i3)) }) })
           ]
@@ -2437,6 +2434,7 @@ var KenobiLib = (() => {
       __publicField(this, "currentUrl");
       __publicField(this, "navTicking", false);
       __publicField(this, "transitionDefaults");
+      __publicField(this, "cueCardPaths");
       __publicField(this, "startAutoTransform", /* @__PURE__ */ __name(async () => {
         try {
           this.syncChangeStack();
@@ -2569,6 +2567,23 @@ var KenobiLib = (() => {
       __publicField(this, "getDurationInMilliseconds", /* @__PURE__ */ __name((start, end) => +end - +start, "getDurationInMilliseconds"));
       __publicField(this, "formatThousands", /* @__PURE__ */ __name((number) => new Intl.NumberFormat("en-US").format(number), "formatThousands"));
       __publicField(this, "setDebug", /* @__PURE__ */ __name((value) => this.config.debug = value, "setDebug"));
+      /**
+       * Checks if a path matches a pattern.
+       * Supports exact matches ("/pricing") and wildcard suffixes ("/blog/*").
+       */
+      __publicField(this, "matchesPathPattern", /* @__PURE__ */ __name((path, pattern) => {
+        const normalizedPath = path === "/" ? "/" : path.replace(/\/$/, "");
+        const normalizedPattern = pattern === "/" ? "/" : pattern.replace(/\/$/, "");
+        if (normalizedPattern.endsWith("/*")) {
+          const base = normalizedPattern.slice(0, -2);
+          return normalizedPath === base || normalizedPath.startsWith(base + "/");
+        }
+        return normalizedPath === normalizedPattern;
+      }, "matchesPathPattern"));
+      /**
+       * Checks if the given path matches any of the configured cueCardPaths.
+       */
+      __publicField(this, "isPathAllowedForCueCard", /* @__PURE__ */ __name((path) => this.cueCardPaths.some((pattern) => this.matchesPathPattern(path, pattern)), "isPathAllowedForCueCard"));
       __publicField(this, "isInputElement", /* @__PURE__ */ __name((el) => {
         if (!(el instanceof HTMLInputElement) && !(el instanceof HTMLTextAreaElement) && !(el instanceof HTMLSelectElement))
           return false;
@@ -2678,6 +2693,7 @@ var KenobiLib = (() => {
                 this.undoAll();
                 void this.startAutoTransform();
               }
+              this.syncCueCardVisibility();
             }
           });
         }, "schedule");
@@ -3051,6 +3067,13 @@ var KenobiLib = (() => {
           this.log("warn", "CueCard already initialized, skipping...");
           return;
         }
+        if (!this.isPathAllowedForCueCard(this.currentPath)) {
+          this.log(
+            "debug",
+            `CueCard not mounted: path "${this.currentPath}" not in allowed paths`
+          );
+          return;
+        }
         this.cueCardInstance = new CueCard({
           theme: "light",
           position: "top-center",
@@ -3083,6 +3106,29 @@ var KenobiLib = (() => {
         this.cueCardInstance.mount();
         this.log("debug", "CueCard mounted successfully");
       }, "initCueCard"));
+      /**
+       * Syncs CueCard visibility based on the current path.
+       * Mounts CueCard if on an allowed path, unmounts if not.
+       * Called after navigation changes.
+       */
+      __publicField(this, "syncCueCardVisibility", /* @__PURE__ */ __name(() => {
+        if (!this.config.publicKey) return;
+        const isAllowed = this.isPathAllowedForCueCard(this.currentPath);
+        if (isAllowed && !this.cueCardInstance) {
+          this.log(
+            "debug",
+            `Navigated to allowed path "${this.currentPath}", mounting CueCard`
+          );
+          this.initCueCard();
+        } else if (!isAllowed && this.cueCardInstance) {
+          this.log(
+            "debug",
+            `Navigated away from allowed paths to "${this.currentPath}", unmounting CueCard`
+          );
+          this.cueCardInstance.unmount();
+          this.cueCardInstance = null;
+        }
+      }, "syncCueCardVisibility"));
       /**
        * Triggers personalization by calling the API with the provided input.
        * Updates CueCard status during the flow and applies transformations.
@@ -3161,6 +3207,7 @@ var KenobiLib = (() => {
         this.config.transitionDefaults
       );
       this.orchestrator = new TransitionOrchestrator();
+      this.cueCardPaths = this.config.cueCardPaths ?? ["/"];
       this.syncVisitorKey();
       this.currentPath = this.getCurrentPath();
       this.currentUrl = this.getCurrentUrl();