kenobi-js 0.1.40 → 0.1.42

package/browser/dist.js

@@ -1,6 +1,6 @@
 /*!
- * Kenobi SDK v0.1.38
- * (c) 2025 Kenobi.ai
+ * Kenobi SDK v0.1.41
+ * (c) 2026 Kenobi.ai
  */
 "use strict";
 var KenobiLib = (() => {
@@ -1022,17 +1022,14 @@ var KenobiLib = (() => {
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
-      fill: "currentColor",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "3",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
       width: "16",
       height: "16",
-      children: /* @__PURE__ */ u3(
-        "path",
-        {
-          fillRule: "evenodd",
-          d: "M16.72 7.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1 0 1.06l-3.75 3.75a.75.75 0 1 1-1.06-1.06l2.47-2.47H3a.75.75 0 0 1 0-1.5h16.19l-2.47-2.47a.75.75 0 0 1 0-1.06Z",
-          clipRule: "evenodd"
-        }
-      )
+      children: /* @__PURE__ */ u3("path", { d: "M5 12h14M12 5l7 7-7 7" })
     }
   ), "ArrowRightIcon");
   var CheckIcon = /* @__PURE__ */ __name(() => /* @__PURE__ */ u3(
@@ -1112,13 +1109,33 @@ 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); }
+  :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.15); --kb-kbd-border: rgba(255, 255, 255, 0.4); --kb-kbd-text: #ffffff; --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; }
   .theme-dark { --kb-bg-container: #0f172a; --kb-border-container: #334155; --kb-shadow-container: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --kb-backdrop-blur: 0px; --kb-text-title: #f1f5f9; --kb-text-subtitle: #94a3b8; --kb-btn-dismiss-bg: #1e293b; --kb-btn-dismiss-border: #334155; --kb-btn-dismiss-text: #cbd5e1; --kb-btn-dismiss-hover-bg: #334155; --kb-btn-dismiss-hover-text: #ffffff; --kb-btn-trigger-bg: #ffffff; --kb-btn-trigger-text: #0f172a; --kb-btn-trigger-hover-bg: #f1f5f9; --kb-progress-track: #1e293b; --kb-progress-indicator: #ffffff; --kb-popover-bg: #0f172a; --kb-popover-border: #334155; --kb-popover-text: #f1f5f9; --kb-input-bg: #0f172a; --kb-input-border: #475569; --kb-input-text: #f1f5f9; --kb-input-placeholder: #94a3b8; --kb-form-label: #e2e8f0; --kb-success-color: #6ee7b7; --kb-error-text: #ef4444; --kb-kbd-bg: #1e293b; --kb-kbd-border: #334155; --kb-kbd-text: #94a3b8; --kb-watermark-text: #64748b; }
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   #cue-card-root { position: fixed; z-index: 2147483647; pointer-events: none; width: 100%; height: 0; top: 0; left: 0; isolation: isolate; }
-  .container { position: absolute; pointer-events: auto; background-color: var(--kb-bg-container); border: 1px solid var(--kb-border-container); box-shadow: var(--kb-shadow-container); backdrop-filter: blur(var(--kb-backdrop-blur)); -webkit-backdrop-filter: blur(var(--kb-backdrop-blur)); border-radius: 0.25rem; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; padding: 1rem; width: auto; min-width: 320px; max-width: 90vw; opacity: 0; z-index: 1; font-family: var(--kb-font-family); }
+  .container { position: absolute; pointer-events: auto; background-color: var(--kb-bg-container); border: 1px solid var(--kb-border-container); box-shadow: var(--kb-shadow-container); backdrop-filter: blur(var(--kb-backdrop-blur)); -webkit-backdrop-filter: blur(var(--kb-backdrop-blur)); border-radius: 0.25rem; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; padding: 1.25rem 1.5rem; width: auto; min-width: 400px; max-width: 90vw; opacity: 0; z-index: 1; font-family: var(--kb-font-family); }
   .backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: all 0.5s ease; z-index: 0; pointer-events: none; }
   .backdrop.active { background: rgba(0,0,0,0.1); backdrop-filter: blur(var(--kb-focus-blur)); -webkit-backdrop-filter: blur(var(--kb-focus-blur)); }
   .launcher { position: absolute; pointer-events: auto; background-color: var(--kb-bg-container); border: 1px solid var(--kb-border-container); box-shadow: var(--kb-shadow-container); backdrop-filter: blur(var(--kb-backdrop-blur)); -webkit-backdrop-filter: blur(var(--kb-backdrop-blur)); border-radius: 9999px; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: transform 0.2s, opacity 0.3s; opacity: 0; z-index: 1; color: var(--kb-text-title); font-weight: 500; font-size: 0.875rem; font-family: var(--kb-font-family); }
@@ -1141,21 +1158,31 @@ var KenobiLib = (() => {
   .title { color: var(--kb-text-title); font-size: 1rem; font-weight: 600; line-height: 1.5; }
   .subtitle { color: var(--kb-text-title); font-size: 0.875rem; line-height: 1.25; opacity: 0.8; }
   .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem; font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; padding: 0.5rem 1rem; transition: all 0.2s; cursor: pointer; border: none; outline: none; }
-  .btn-trigger { background-color: var(--kb-btn-trigger-bg); color: var(--kb-btn-trigger-text); min-width: 8rem; gap: 0.5rem; }
+  .btn-trigger { background-color: var(--kb-btn-trigger-bg); color: var(--kb-btn-trigger-text); min-width: 8rem; gap: 0.5rem; transition: opacity 0.2s ease-out, background-color 0.2s ease-out; }
+  .btn-trigger.hidden { opacity: 0; pointer-events: none; }
   .btn-trigger:not(:disabled):hover { background-color: var(--kb-btn-trigger-hover-bg); }
   .btn-trigger:disabled { opacity: 0.8; cursor: not-allowed; }
   .btn-trigger.success { background-color: transparent; color: var(--kb-success-color); padding-right: 0.75rem; cursor: default; }
+  .status-text { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--kb-text-subtitle); opacity: 0.8; }
   .btn-trigger.success:hover { background-color: transparent; }
   .animate-spin { animation: spin 1s linear infinite; }
   @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+  @keyframes shine { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
+  @keyframes sheen-flash { 0% { opacity: 0; transform: translateX(-100%) skewX(-15deg); } 50% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(200%) skewX(-15deg); } }
+  .container-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
+  .container-sheen::after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transform: translateX(-100%) skewX(-15deg); }
+  .container-sheen.active::after { animation: sheen-flash 0.6s ease-out forwards; }
+  .launcher-shine-border { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-size: 300% 300%; animation: shine var(--shine-duration, 14s) linear infinite; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; padding: var(--shine-border-width, 1px); }
   .btn-dismiss { position: absolute; top: -0.5rem; left: -0.5rem; width: 1.5rem; height: 1.5rem; 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.3s ease-out; z-index: 10; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
   .btn-dismiss:hover { background-color: var(--kb-btn-dismiss-hover-bg); color: var(--kb-btn-dismiss-hover-text); }
-  .progress-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
-  .progress-container { position: absolute; bottom: 0; left: 0; right: 0; height: 0.25rem; background-color: var(--kb-progress-track); overflow: hidden; pointer-events: none; }
+  .progress-clip { position: absolute; inset: 0; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow: hidden; pointer-events: none; }
+  .progress-container { position: absolute; bottom: 0; left: 0; right: 0; height: 0.25rem; background-color: var(--kb-progress-track); overflow: hidden; pointer-events: none; border-radius: 0; }
   .progress-bar { height: 100%; background-color: var(--kb-progress-indicator); width: 0%; transition: width 0.3s ease; }
-  .popover { position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.375rem; background-color: var(--kb-popover-bg); border: 1px solid var(--kb-popover-border); border-radius: 0.25rem; border-top-left-radius: 0; border-top-right-radius: 0; padding: 1rem; color: var(--kb-popover-text); box-shadow: var(--kb-shadow-container); backdrop-filter: blur(var(--kb-backdrop-blur)); -webkit-backdrop-filter: blur(var(--kb-backdrop-blur)); opacity: 0; transform: translateY(-10px); pointer-events: none; visibility: hidden; transition: all 0.2s ease-out; }
+  .popover { position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.375rem; background-color: var(--kb-popover-bg); border: 1px solid var(--kb-popover-border); border-radius: 0.25rem; border-top-left-radius: 0; border-top-right-radius: 0; padding: 1rem 1.5rem; color: var(--kb-popover-text); box-shadow: var(--kb-shadow-container); backdrop-filter: blur(var(--kb-backdrop-blur)); -webkit-backdrop-filter: blur(var(--kb-backdrop-blur)); opacity: 0; transform: translateY(-10px); pointer-events: none; visibility: hidden; transition: all 0.2s ease-out; }
   .popover.open { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; }
-  .form-group { margin-bottom: 1rem; }
+  .container.popover-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+  .container.popover-open .progress-clip { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+  .form-group { margin-bottom: 0; }
   .form-label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--kb-form-label); font-weight: 500; }
   .input-row { display: flex; gap: 0.5rem; }
   .form-input { flex: 1; background-color: var(--kb-input-bg); border: 1px solid var(--kb-input-border); color: var(--kb-input-text); border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; outline: none; transition: border-color 0.2s; min-height: 44px; }
@@ -1174,6 +1201,9 @@ var KenobiLib = (() => {
   .watermark { text-align: center; font-size: 0.625rem; color: var(--kb-watermark-text); opacity: 0.8; font-weight: 500; letter-spacing: 0.025em; }
   .watermark a { color: inherit; text-decoration: none; cursor: pointer; }
   .watermark a:hover { text-decoration: underline; text-decoration-color: var(--kb-watermark-text); }
+  .popover-watermark { position: absolute; top: 100%; left: 0; right: 0; text-align: center; font-size: 0.625rem; color: var(--kb-watermark-text); opacity: 0.6; font-weight: 500; letter-spacing: 0.025em; padding-top: 0.5rem; }
+  .popover-watermark a { color: inherit; text-decoration: none; cursor: pointer; }
+  .popover-watermark a:hover { text-decoration: underline; opacity: 1; }
   /* Launcher hint positioning */
   .launcher .kbd-hint { position: static; transform: none; opacity: 0.6; transition: opacity 0.2s; }
   .launcher:hover .kbd-hint { opacity: 1; }
@@ -1189,17 +1219,30 @@ 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);
+    const currentAnimRef = A2(null);
     y2(() => {
       const element = ref.current;
       if (!element) return;
+      if (currentAnimRef.current) {
+        currentAnimRef.current.cancel();
+        currentAnimRef.current = null;
+      }
       const isTopDown = config.direction === "top-to-bottom";
       const initialTransform = isTopDown ? `translateY(-60px)` : `translateX(60px)`;
       const exitTransform = isTopDown ? `translateY(-20px)` : `translateX(20px)`;
       const finalTransform = "translate(0, 0)";
       if (isVisible) {
+        element.style.visibility = "visible";
         hasEnteredRef.current = true;
         const anim = element.animate(
           [
@@ -1213,7 +1256,11 @@ var KenobiLib = (() => {
             fill: "forwards"
           }
         );
-        anim.onfinish = () => config.onEntranceComplete?.();
+        currentAnimRef.current = anim;
+        anim.onfinish = () => {
+          currentAnimRef.current = null;
+          config.onEntranceComplete?.();
+        };
       } else {
         if (hasEnteredRef.current) {
           const anim = element.animate(
@@ -1228,10 +1275,16 @@ var KenobiLib = (() => {
               fill: "forwards"
             }
           );
-          anim.onfinish = () => config.onExitComplete?.();
+          currentAnimRef.current = anim;
+          anim.onfinish = () => {
+            element.style.visibility = "hidden";
+            currentAnimRef.current = null;
+            config.onExitComplete?.();
+          };
         } else {
           element.style.opacity = "0";
           element.style.transform = exitTransform;
+          element.style.visibility = "hidden";
         }
       }
     }, [isVisible, config.direction]);
@@ -1277,8 +1330,9 @@ var KenobiLib = (() => {
     const formRef = A2(null);
     const [mode, setMode] = d2("card");
     const [isDismissed, setIsDismissed] = d2(false);
+    const [hasHadSuccess, setHasHadSuccess] = d2(false);
+    const [isExitingToLauncher, setIsExitingToLauncher] = d2(false);
     const hasEnteredRef = A2(false);
-    const hasHadSuccessRef = A2(false);
     const isShowingInitialSuccessRef = A2(false);
     const justReopenedRef = A2(false);
     const previousModeRef = A2("card");
@@ -1288,6 +1342,7 @@ var KenobiLib = (() => {
     const timerRafRef = A2(null);
     const hasTimerCompletedRef = A2(false);
     const [isHovering, setIsHovering] = d2(false);
+    const [sheenActive, setSheenActive] = d2(false);
     const [errors, setErrors] = d2({});
     const [timerProgress, setTimerProgressState] = d2(0);
     const timerProgressRef = A2(0);
@@ -1318,7 +1373,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 +1390,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 +1416,7 @@ var KenobiLib = (() => {
     }
     y2(() => {
       if (isOpen) {
-        if (hasHadSuccessRef.current && formRef.current) {
+        if (hasHadSuccess && formRef.current) {
           formRef.current.reset();
         }
         const shouldSkipFocus = skipFocusRef.current;
@@ -1384,6 +1439,9 @@ var KenobiLib = (() => {
         setMode("card");
       }
     }, [isOpen, mode]);
+    const isFirstAppearance = !hasEnteredRef.current;
+    const wasLauncherPreviously = previousModeRef.current === "launcher";
+    const cardEntranceDelay = isFirstAppearance ? config.entranceDelayMs || 0 : wasLauncherPreviously && mode === "card" ? 400 : 0;
     if (!isInline) {
       useEnterExitAnimation(
         containerRef,
@@ -1391,7 +1449,7 @@ var KenobiLib = (() => {
         {
           direction: config.direction || "top-to-bottom",
           position: config.position || "top-center",
-          entranceDelayMs: hasEnteredRef.current ? 0 : config.entranceDelayMs || 0,
+          entranceDelayMs: cardEntranceDelay,
           exitDelayMs: 75,
           onEntranceComplete: /* @__PURE__ */ __name(() => {
             config.onEntranceComplete?.();
@@ -1402,13 +1460,14 @@ var KenobiLib = (() => {
           }, "onExitComplete")
         }
       );
+      const launcherEntranceDelay = 400;
       useEnterExitAnimation(
         launcherRef,
         !!config.isVisible && mode === "launcher" && !isDismissed,
         {
           direction: config.direction || "top-to-bottom",
           position: config.position || "top-center",
-          entranceDelayMs: 0,
+          entranceDelayMs: launcherEntranceDelay,
           exitDelayMs: 75
         }
       );
@@ -1416,8 +1475,8 @@ var KenobiLib = (() => {
     y2(() => {
       const el = backdropRef.current;
       if (!el) return;
-      const isSuccess2 = config.status === "success";
-      if (config.enableFocusMode && mode === "card" && config.isVisible && !isSuccess2) {
+      const isShowingSuccessState = config.status === "success" && isShowingInitialSuccessRef.current;
+      if (config.enableFocusMode && mode === "card" && config.isVisible && !isShowingSuccessState) {
         const timer = setTimeout(() => {
           el.classList.add("active");
         }, config.focusDelayMs || 500);
@@ -1436,14 +1495,16 @@ var KenobiLib = (() => {
       if (!config.isVisible) return;
       const handleKey = /* @__PURE__ */ __name((e3) => {
         if (e3.key === "Escape") {
-          if (isOpen) {
-            setIsOpen(false);
-            return;
-          }
           if (mode === "card") {
             if (config.enableLauncher) {
+              setIsExitingToLauncher(true);
               setMode("launcher");
+              setTimeout(() => {
+                setIsOpen(false);
+                setIsExitingToLauncher(false);
+              }, 500);
             } else {
+              setIsOpen(false);
               config.onDismiss?.();
             }
           }
@@ -1525,7 +1586,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";
@@ -1608,7 +1669,12 @@ var KenobiLib = (() => {
     const togglePopover = /* @__PURE__ */ __name((e3) => {
       e3.stopPropagation();
       if (isPending || isSuccess) return;
-      setIsOpen(!isOpen);
+      const opening = !isOpen;
+      setIsOpen(opening);
+      if (opening && config.enableClickSheen) {
+        setSheenActive(true);
+        setTimeout(() => setSheenActive(false), 600);
+      }
     }, "togglePopover");
     y2(() => {
       if (!timerEnabled) return;
@@ -1689,7 +1755,7 @@ var KenobiLib = (() => {
         "div",
         {
           ref: containerRef,
-          class: `container theme-${config.theme || "glass"} pos-${config.position || "top-center"}`,
+          class: `container theme-${config.theme || "glass"} pos-${config.position || "top-center"}${isOpen ? " popover-open" : ""}`,
           style: {
             ...getThemeStyles(config.customTheme),
             pointerEvents: isContainerVisible ? "auto" : "none"
@@ -1698,6 +1764,7 @@ var KenobiLib = (() => {
           onMouseEnter: () => setIsHovering(true),
           onMouseLeave: () => setIsHovering(false),
           children: [
+            config.enableClickSheen && /* @__PURE__ */ u3("div", { class: `container-sheen${sheenActive ? " active" : ""}` }),
             /* @__PURE__ */ u3(
               "button",
               {
@@ -1715,32 +1782,29 @@ var KenobiLib = (() => {
                 children: /* @__PURE__ */ u3(XMarkIcon, {})
               }
             ),
-            /* @__PURE__ */ u3("div", { class: "content-wrapper", children: [
-              /* @__PURE__ */ u3("div", { class: "logo", children: /* @__PURE__ */ u3(LogoIcon, {}) }),
-              /* @__PURE__ */ u3("div", { class: "text-content", children: /* @__PURE__ */ u3("div", { class: "text-row", children: [
-                /* @__PURE__ */ u3("div", { children: [
-                  /* @__PURE__ */ u3("div", { class: "title", children: titleText }),
-                  /* @__PURE__ */ u3("div", { class: "subtitle", children: subtitleText })
-                ] }),
-                /* @__PURE__ */ u3(
-                  "button",
-                  {
-                    class: `btn btn-trigger ${showAsSuccess ? "success" : ""}`,
-                    disabled: isPending || showAsSuccess,
-                    onClick: togglePopover,
-                    children: isPending ? /* @__PURE__ */ u3(k, { children: [
-                      /* @__PURE__ */ u3(LoaderIcon, {}),
-                      " ",
-                      buttonText
-                    ] }) : showAsSuccess ? /* @__PURE__ */ u3(k, { children: [
-                      /* @__PURE__ */ u3(CheckIcon, {}),
-                      " ",
-                      buttonText
-                    ] }) : buttonText
-                  }
-                )
-              ] }) })
-            ] }),
+            /* @__PURE__ */ u3("div", { class: "content-wrapper", children: /* @__PURE__ */ u3("div", { class: "text-content", children: /* @__PURE__ */ u3("div", { class: "text-row", children: [
+              /* @__PURE__ */ u3("div", { children: [
+                /* @__PURE__ */ u3("div", { class: "title", children: titleText }),
+                /* @__PURE__ */ u3("div", { class: "subtitle", children: subtitleText })
+              ] }),
+              isPending ? /* @__PURE__ */ u3("span", { class: "status-text", children: [
+                /* @__PURE__ */ u3(LoaderIcon, {}),
+                " ",
+                buttonText
+              ] }) : /* @__PURE__ */ u3(
+                "button",
+                {
+                  class: `btn btn-trigger ${showAsSuccess ? "success" : ""}${isOpen || isExitingToLauncher ? " hidden" : ""}`,
+                  disabled: showAsSuccess,
+                  onClick: togglePopover,
+                  children: showAsSuccess ? /* @__PURE__ */ u3(k, { children: [
+                    /* @__PURE__ */ u3(CheckIcon, {}),
+                    " ",
+                    buttonText
+                  ] }) : buttonText
+                }
+              )
+            ] }) }) }),
             /* @__PURE__ */ u3("div", { class: "progress-clip", children: /* @__PURE__ */ u3("div", { class: "progress-container", children: /* @__PURE__ */ u3(
               "div",
               {
@@ -1801,7 +1865,7 @@ var KenobiLib = (() => {
                       }
                     )
                   ] }),
-                  config.showWatermark && /* @__PURE__ */ u3("div", { class: "watermark", children: [
+                  config.showWatermark && /* @__PURE__ */ u3("div", { class: "popover-watermark", children: [
                     "Powered by",
                     " ",
                     /* @__PURE__ */ u3(
@@ -1837,6 +1901,7 @@ var KenobiLib = (() => {
           class: `launcher theme-${config.theme || "glass"} pos-${config.position || "top-center"}`,
           style: {
             ...getThemeStyles(config.customTheme),
+            ...config.launcherStyles,
             pointerEvents: isLauncherVisible ? "auto" : "none"
           },
           onClick: (e3) => {
@@ -1848,6 +1913,17 @@ var KenobiLib = (() => {
           role: "button",
           tabIndex: 0,
           children: [
+            config.launcherShineBorder?.enabled && /* @__PURE__ */ u3(
+              "div",
+              {
+                class: "launcher-shine-border",
+                style: {
+                  "--shine-duration": `${config.launcherShineBorder.duration || 14}s`,
+                  "--shine-border-width": `${config.launcherShineBorder.borderWidth || 1}px`,
+                  backgroundImage: `radial-gradient(transparent, transparent, ${Array.isArray(config.launcherShineBorder.color) ? config.launcherShineBorder.color.join(",") : config.launcherShineBorder.color || "rgba(255,255,255,0.5)"}, transparent, transparent)`
+                }
+              }
+            ),
             /* @__PURE__ */ u3(
               "button",
               {
@@ -1861,8 +1937,23 @@ var KenobiLib = (() => {
                 children: /* @__PURE__ */ u3(XMarkIcon, {})
               }
             ),
-            /* @__PURE__ */ u3("div", { class: "launcher-logo", children: /* @__PURE__ */ u3(LogoIcon, {}) }),
-            config.textOverrides?.launcherLabel || (hasHadSuccessRef.current ? "Personalize again" : "Personalize"),
+            config.showLauncherLogo !== false && /* @__PURE__ */ u3("div", { class: "launcher-logo", children: /* @__PURE__ */ u3(LogoIcon, {}) }),
+            hasHadSuccess ? config.textOverrides?.launcherLabelSuccess || config.textOverrides?.launcherLabel || "Personalize again" : config.textOverrides?.launcherLabel || "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)) }) })
           ]
         }
@@ -1912,6 +2003,7 @@ var KenobiLib = (() => {
     applyHostStyles() {
       const isInline = this.config.mountMode === "inline";
       this.host.classList.toggle("kb-inline", isInline);
+      const focusBlur = this.config.focusBlurIntensity ?? "10px";
       if (isInline) {
         this.host.style.cssText = `
         position: relative !important;
@@ -1923,6 +2015,7 @@ var KenobiLib = (() => {
         pointer-events: auto !important;
         isolation: auto !important;
         display: block !important;
+        --kb-focus-blur: ${focusBlur};
       `;
         return;
       }
@@ -1935,6 +2028,7 @@ var KenobiLib = (() => {
       height: 0 !important;
       pointer-events: none !important;
       isolation: isolate !important;
+      --kb-focus-blur: ${focusBlur};
     `;
     }
     mount(target) {
@@ -2439,6 +2533,9 @@ var KenobiLib = (() => {
       __publicField(this, "currentUrl");
       __publicField(this, "navTicking", false);
       __publicField(this, "transitionDefaults");
+      // Undo toggle state
+      __publicField(this, "lastAppliedTransformations", []);
+      __publicField(this, "isPersonalized", false);
       __publicField(this, "startAutoTransform", /* @__PURE__ */ __name(async () => {
         try {
           this.syncChangeStack();
@@ -2939,6 +3036,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,
@@ -3027,6 +3127,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");
@@ -3120,8 +3248,13 @@ 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");
+            this.dispatchKenobiEvent("cuecard:dismiss", {
+              pagePath: this.currentPath
+            });
           }, "onDismiss"),
           onSubmitPersonalization: /* @__PURE__ */ __name((values) => {
             this.log("debug", "CueCard submitted:", values);
@@ -3129,7 +3262,19 @@ var KenobiLib = (() => {
           }, "onSubmitPersonalization"),
           onOpenChange: /* @__PURE__ */ __name((isOpen) => {
             this.log("debug", "CueCard open state changed:", isOpen);
-          }, "onOpenChange")
+            this.dispatchKenobiEvent("cuecard:openchange", {
+              isOpen,
+              pagePath: this.currentPath
+            });
+          }, "onOpenChange"),
+          onTogglePersonalization: /* @__PURE__ */ __name(() => {
+            this.log("debug", "CueCard toggle personalization");
+            void this.toggleTransformations();
+            this.dispatchKenobiEvent("cuecard:toggle", {
+              isPersonalized: this.isPersonalized,
+              pagePath: this.currentPath
+            });
+          }, "onTogglePersonalization")
         });
         this.cueCardInstance.mount();
         this.log("debug", "CueCard mounted successfully");
@@ -3148,10 +3293,27 @@ var KenobiLib = (() => {
         }
         void this.initCueCard();
       }, "syncCueCardVisibility"));
+      /**
+       * Dispatches a custom event on window for external listeners.
+       * Events are prefixed with "kenobi:" for namespacing.
+       */
+      __publicField(this, "dispatchKenobiEvent", /* @__PURE__ */ __name((eventName, detail) => {
+        const event = new CustomEvent(`kenobi:${eventName}`, {
+          detail,
+          bubbles: true
+        });
+        window.dispatchEvent(event);
+        this.log("debug", `Dispatched event: kenobi:${eventName}`, detail);
+      }, "dispatchKenobiEvent"));
       /**
        * Triggers personalization by calling the API with the provided input.
        * Updates CueCard status during the flow and applies transformations.
        *
+       * Dispatches events:
+       * - `kenobi:personalization:start` - when personalization begins
+       * - `kenobi:personalization:complete` - when personalization succeeds
+       * - `kenobi:personalization:error` - when personalization fails
+       *
        * @param input - User-provided fields (e.g., { companyDomain: "acme.com" })
        */
       __publicField(this, "personalize", /* @__PURE__ */ __name(async (input) => {
@@ -3161,6 +3323,10 @@ var KenobiLib = (() => {
         }
         const startTime = /* @__PURE__ */ new Date();
         this.log("debug", "Starting personalization with input:", input);
+        this.dispatchKenobiEvent("personalization:start", {
+          input,
+          pagePath: this.currentPath
+        });
         if (this.cueCardInstance) {
           this.cueCardInstance.update({ status: "starting", progressPct: 10 });
         }
@@ -3202,11 +3368,23 @@ var KenobiLib = (() => {
             "debug",
             `Personalization complete, took ${this.formatThousands(duration)} ms`
           );
+          this.dispatchKenobiEvent("personalization:complete", {
+            input,
+            pagePath: this.currentPath,
+            durationMs: duration,
+            transformationsCount: result.transformations?.length ?? 0,
+            metadata: result.metadata
+          });
         } catch (error) {
           this.log("error", "Personalization failed:", error);
           if (this.cueCardInstance) {
             this.cueCardInstance.update({ status: "error", progressPct: 0 });
           }
+          this.dispatchKenobiEvent("personalization:error", {
+            input,
+            pagePath: this.currentPath,
+            error: error instanceof Error ? error.message : String(error)
+          });
         }
       }, "personalize"));
       /**
@@ -3243,7 +3421,7 @@ var KenobiLib = (() => {
         this.log("debug", "Auto-transform is requested... Starting...");
         void this.startAutoTransform();
       }
-      if (this.config.publicKey) {
+      if (this.config.publicKey && !this.config.skipCueCardAutoMount) {
         this.log("debug", "Public key provided, checking for active template...");
         void this.initCueCard();
       }