kenobi-js 0.1.39 → 0.1.41

package/browser/dist.js

@@ -1,5 +1,5 @@
 /*!
- * Kenobi SDK v0.1.38
+ * Kenobi SDK v0.1.40
  * (c) 2025 Kenobi.ai
  */
 "use strict";
@@ -1112,6 +1112,26 @@ var KenobiLib = (() => {
       ]
     }
   ), "LogoIcon");
+  var ArrowPathIcon = /* @__PURE__ */ __name(() => /* @__PURE__ */ u3(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      strokeWidth: 1.5,
+      stroke: "currentColor",
+      width: "16",
+      height: "16",
+      children: /* @__PURE__ */ u3(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+        }
+      )
+    }
+  ), "ArrowPathIcon");
   var STYLES = `
   :host { --kb-font-family: system-ui, -apple-system, sans-serif; --kb-bg-container: rgba(255, 255, 255, 0.05); --kb-border-container: rgba(255, 255, 255, 0.2); --kb-shadow-container: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --kb-backdrop-blur: 16px; --kb-text-title: #ffffff; --kb-text-subtitle: rgba(255, 255, 255, 0.7); --kb-btn-dismiss-bg: rgba(0, 0, 0, 0.7); --kb-btn-dismiss-border: rgba(255, 255, 255, 0.2); --kb-btn-dismiss-text: rgba(255, 255, 255, 0.8); --kb-btn-dismiss-hover-bg: rgba(0, 0, 0, 0.9); --kb-btn-dismiss-hover-text: #ffffff; --kb-btn-trigger-bg: #ffffff; --kb-btn-trigger-text: #000000; --kb-btn-trigger-hover-bg: rgba(255, 255, 255, 0.9); --kb-progress-track: rgba(255, 255, 255, 0.2); --kb-progress-indicator: #ffffff; --kb-popover-bg: rgba(255, 255, 255, 0.05); --kb-popover-border: rgba(255, 255, 255, 0.2); --kb-popover-text: #ffffff; --kb-input-bg: transparent;   --kb-input-border: rgba(255, 255, 255, 0.3); --kb-input-text: #ffffff; --kb-input-placeholder: rgba(255, 255, 255, 0.6); --kb-form-label: #ffffff; --kb-success-color: #6ee7b7; --kb-error-text: #ef4444; --kb-focus-blur: 10px; --kb-kbd-bg: rgba(255, 255, 255, 0.1); --kb-kbd-border: rgba(255, 255, 255, 0.2); --kb-kbd-text: rgba(255, 255, 255, 0.6); --kb-watermark-text: rgba(255, 255, 255, 0.4); font-family: var(--kb-font-family); }
   .theme-light { --kb-bg-container: #ffffff; --kb-border-container: #e2e8f0; --kb-shadow-container: 0 20px 25px -5px rgba(0, 0, 0, 0.1); --kb-backdrop-blur: 0px; --kb-text-title: #0f172a; --kb-text-subtitle: #475569; --kb-btn-dismiss-bg: #ffffff; --kb-btn-dismiss-border: #e2e8f0; --kb-btn-dismiss-text: #64748b; --kb-btn-dismiss-hover-bg: #f1f5f9; --kb-btn-dismiss-hover-text: #0f172a; --kb-btn-trigger-bg: #0f172a; --kb-btn-trigger-text: #ffffff; --kb-btn-trigger-hover-bg: #1e293b; --kb-progress-track: #e2e8f0; --kb-progress-indicator: #0f172a; --kb-popover-bg: #ffffff; --kb-popover-border: #e2e8f0; --kb-popover-text: #0f172a; --kb-input-bg: #ffffff; --kb-input-border: #cbd5e1; --kb-input-text: #0f172a; --kb-input-placeholder: #94a3b8; --kb-form-label: #334155; --kb-success-color: #059669; --kb-error-text: #ef4444; --kb-kbd-bg: #f1f5f9; --kb-kbd-border: #e2e8f0; --kb-kbd-text: #64748b; --kb-watermark-text: #94a3b8; }
@@ -1189,6 +1209,13 @@ var KenobiLib = (() => {
     .launcher .kbd-hint { display: none; }
     .launcher .btn-dismiss.launcher-dismiss { opacity: 1; }
   }
+  /* Toggle personalization button */
+  .btn-toggle-personalization { position: relative; width: 1.75rem; height: 1.75rem; padding: 0; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background-color: var(--kb-btn-dismiss-bg); border: 1px solid var(--kb-btn-dismiss-border); color: var(--kb-btn-dismiss-text); cursor: pointer; transition: all 0.2s ease-out; flex-shrink: 0; margin-left: 0.25rem; }
+  .btn-toggle-personalization:hover { background-color: var(--kb-btn-dismiss-hover-bg); color: var(--kb-btn-dismiss-hover-text); transform: scale(1.05); }
+  .btn-toggle-personalization svg { width: 14px; height: 14px; }
+  /* Custom tooltip for toggle button */
+  .btn-toggle-personalization .toggle-tooltip { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; background-color: var(--kb-bg-container); border: 1px solid var(--kb-border-container); color: var(--kb-text-title); font-size: 0.7rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 4px; opacity: 0; visibility: hidden; transition: opacity 0.15s ease-out, visibility 0.15s ease-out; pointer-events: none; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
+  .btn-toggle-personalization:hover .toggle-tooltip { opacity: 1; visibility: visible; }
 `;
   var useEnterExitAnimation = /* @__PURE__ */ __name((ref, isVisible, config) => {
     const hasEnteredRef = A2(false);
@@ -1277,8 +1304,8 @@ var KenobiLib = (() => {
     const formRef = A2(null);
     const [mode, setMode] = d2("card");
     const [isDismissed, setIsDismissed] = d2(false);
+    const [hasHadSuccess, setHasHadSuccess] = d2(false);
     const hasEnteredRef = A2(false);
-    const hasHadSuccessRef = A2(false);
     const isShowingInitialSuccessRef = A2(false);
     const justReopenedRef = A2(false);
     const previousModeRef = A2("card");
@@ -1318,7 +1345,7 @@ var KenobiLib = (() => {
     y2(() => {
       const wasLauncher = previousModeRef.current === "launcher";
       const isCard = mode === "card";
-      if (wasLauncher && isCard && hasHadSuccessRef.current) {
+      if (wasLauncher && isCard && hasHadSuccess) {
         justReopenedRef.current = true;
         setTimeout(() => {
           justReopenedRef.current = false;
@@ -1335,7 +1362,7 @@ var KenobiLib = (() => {
     }, [mode, setTimerProgress, timerEnabled]);
     y2(() => {
       if (config.status === "success") {
-        hasHadSuccessRef.current = true;
+        setHasHadSuccess(true);
         if (config.enableLauncher && mode === "card" && isShowingInitialSuccessRef.current) {
           const timer = setTimeout(() => {
             setMode("launcher");
@@ -1361,7 +1388,7 @@ var KenobiLib = (() => {
     }
     y2(() => {
       if (isOpen) {
-        if (hasHadSuccessRef.current && formRef.current) {
+        if (hasHadSuccess && formRef.current) {
           formRef.current.reset();
         }
         const shouldSkipFocus = skipFocusRef.current;
@@ -1525,7 +1552,7 @@ var KenobiLib = (() => {
       if (isSuccess && isShowingInitialSuccessRef.current) {
         return txt.btnSuccess || "Personalised";
       }
-      if (hasHadSuccessRef.current) {
+      if (hasHadSuccess) {
         return "Show me again";
       }
       return txt.btnResting || "Show me";
@@ -1862,7 +1889,22 @@ var KenobiLib = (() => {
               }
             ),
             /* @__PURE__ */ u3("div", { class: "launcher-logo", children: /* @__PURE__ */ u3(LogoIcon, {}) }),
-            config.textOverrides?.launcherLabel || (hasHadSuccessRef.current ? "Personalize again" : "Personalize"),
+            config.textOverrides?.launcherLabel || (hasHadSuccess ? "Personalize again" : "Personalize"),
+            config.enableUndoToggle && hasHadSuccess && /* @__PURE__ */ u3(
+              "button",
+              {
+                class: "btn-toggle-personalization",
+                "aria-label": config.isPersonalized ? "Show original" : "Show personalized",
+                onClick: (e3) => {
+                  e3.stopPropagation();
+                  config.onTogglePersonalization?.();
+                },
+                children: [
+                  /* @__PURE__ */ u3(ArrowPathIcon, {}),
+                  /* @__PURE__ */ u3("span", { class: "toggle-tooltip", children: config.isPersonalized ? "Show original" : "Show personalized" })
+                ]
+              }
+            ),
             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)) }) })
           ]
         }
@@ -2439,7 +2481,9 @@ var KenobiLib = (() => {
       __publicField(this, "currentUrl");
       __publicField(this, "navTicking", false);
       __publicField(this, "transitionDefaults");
-      __publicField(this, "cueCardPaths");
+      // Undo toggle state
+      __publicField(this, "lastAppliedTransformations", []);
+      __publicField(this, "isPersonalized", false);
       __publicField(this, "startAutoTransform", /* @__PURE__ */ __name(async () => {
         try {
           this.syncChangeStack();
@@ -2572,18 +2616,6 @@ 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 (exact match only).
-       */
-      __publicField(this, "matchesPathPattern", /* @__PURE__ */ __name((path, pattern) => {
-        const normalizedPath = path === "/" ? "/" : path.replace(/\/$/, "");
-        const normalizedPattern = pattern === "/" ? "/" : pattern.replace(/\/$/, "");
-        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;
@@ -2952,6 +2984,9 @@ var KenobiLib = (() => {
             );
           }
         }
+        this.lastAppliedTransformations = transformations;
+        this.isPersonalized = true;
+        this.updateCueCardPersonalizationState();
       }, "applyTransformations"));
       /**
        * Creates or updates an entry in the change stack for a "Replace" action,
@@ -3040,6 +3075,34 @@ var KenobiLib = (() => {
       __publicField(this, "undoAll", /* @__PURE__ */ __name(() => {
         this.changeStack.forEach((_2, ident) => this.undo(ident));
       }, "undoAll"));
+      /**
+       * Toggles between personalized and original content.
+       * Updates CueCard state accordingly.
+       */
+      __publicField(this, "toggleTransformations", /* @__PURE__ */ __name(async () => {
+        if (this.isPersonalized) {
+          this.undoAll();
+          this.isPersonalized = false;
+          this.log("debug", "Toggled to original content");
+        } else {
+          if (this.lastAppliedTransformations.length > 0) {
+            await this.applyTransformations(this.lastAppliedTransformations, {
+              shouldConsolidate: true
+            });
+          }
+          this.isPersonalized = true;
+          this.log("debug", "Toggled to personalized content");
+        }
+        this.updateCueCardPersonalizationState();
+      }, "toggleTransformations"));
+      /**
+       * Updates the CueCard's isPersonalized state to sync the toggle button.
+       */
+      __publicField(this, "updateCueCardPersonalizationState", /* @__PURE__ */ __name(() => {
+        if (this.cueCardInstance) {
+          this.cueCardInstance.update({ isPersonalized: this.isPersonalized });
+        }
+      }, "updateCueCardPersonalizationState"));
       __publicField(this, "setInputValue", /* @__PURE__ */ __name((el, value) => {
         const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : el instanceof HTMLInputElement ? HTMLInputElement.prototype : HTMLSelectElement.prototype;
         const descriptor = Object.getOwnPropertyDescriptor(proto, "value");
@@ -3102,13 +3165,6 @@ 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;
-        }
         const configResponse = await this.fetchCueCardConfig(this.currentPath);
         if (!configResponse || !configResponse.enabled) {
           this.log(
@@ -3140,6 +3196,8 @@ var KenobiLib = (() => {
           enableLauncher: serverConfig?.enableLauncher ?? true,
           customTheme: serverConfig?.customTheme,
           textOverrides: serverConfig?.textOverrides,
+          enableUndoToggle: serverConfig?.enableUndoToggle ?? false,
+          isPersonalized: this.isPersonalized,
           onDismiss: /* @__PURE__ */ __name(() => {
             this.log("debug", "CueCard dismissed by user");
           }, "onDismiss"),
@@ -3149,33 +3207,28 @@ var KenobiLib = (() => {
           }, "onSubmitPersonalization"),
           onOpenChange: /* @__PURE__ */ __name((isOpen) => {
             this.log("debug", "CueCard open state changed:", isOpen);
-          }, "onOpenChange")
+          }, "onOpenChange"),
+          onTogglePersonalization: /* @__PURE__ */ __name(() => {
+            this.log("debug", "CueCard toggle personalization");
+            void this.toggleTransformations();
+          }, "onTogglePersonalization")
         });
         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 and active template exists, unmounts if not.
+       * Checks with the server if an active template exists for the new path.
        * Called after navigation changes.
        */
-      __publicField(this, "syncCueCardVisibility", /* @__PURE__ */ __name(() => {
+      __publicField(this, "syncCueCardVisibility", /* @__PURE__ */ __name(async () => {
         if (!this.config.publicKey) return;
-        const isAllowed = this.isPathAllowedForCueCard(this.currentPath);
-        if (isAllowed && !this.cueCardInstance) {
-          this.log(
-            "debug",
-            `Navigated to allowed path "${this.currentPath}", checking for active template...`
-          );
-          void this.initCueCard();
-        } else if (!isAllowed && this.cueCardInstance) {
-          this.log(
-            "debug",
-            `Navigated away from allowed paths to "${this.currentPath}", unmounting CueCard`
-          );
+        if (this.cueCardInstance) {
+          this.log("debug", `Navigation detected, unmounting CueCard`);
           this.cueCardInstance.unmount();
           this.cueCardInstance = null;
         }
+        void this.initCueCard();
       }, "syncCueCardVisibility"));
       /**
        * Triggers personalization by calling the API with the provided input.
@@ -3255,7 +3308,6 @@ var KenobiLib = (() => {
         this.config.transitionDefaults
       );
       this.orchestrator = new TransitionOrchestrator();
-      this.cueCardPaths = this.config.cueCardPaths ?? ["/"];
       this.syncVisitorKey();
       this.currentPath = this.getCurrentPath();
       this.currentUrl = this.getCurrentUrl();