kenobi-js 0.1.34 → 0.1.36

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);
@@ -1283,6 +1276,7 @@ var KenobiLib = (() => {
     const firstInputRef = A2(null);
     const formRef = A2(null);
     const [mode, setMode] = d2("card");
+    const [isDismissed, setIsDismissed] = d2(false);
     const hasEnteredRef = A2(false);
     const hasHadSuccessRef = A2(false);
     const isShowingInitialSuccessRef = A2(false);
@@ -1307,6 +1301,7 @@ var KenobiLib = (() => {
       if (config.isVisible) {
         setMode("card");
         hasEnteredRef.current = false;
+        setIsDismissed(false);
       }
     }, [config.isVisible]);
     if (mode === "card" && previousModeRef.current === "launcher") {
@@ -1390,22 +1385,26 @@ var KenobiLib = (() => {
       }
     }, [isOpen, mode]);
     if (!isInline) {
-      useEnterExitAnimation(containerRef, !!config.isVisible && mode === "card", {
-        direction: config.direction || "top-to-bottom",
-        position: config.position || "top-center",
-        entranceDelayMs: hasEnteredRef.current ? 0 : config.entranceDelayMs || 0,
-        exitDelayMs: 75,
-        onEntranceComplete: /* @__PURE__ */ __name(() => {
-          config.onEntranceComplete?.();
-          hasEnteredRef.current = true;
-        }, "onEntranceComplete"),
-        onExitComplete: /* @__PURE__ */ __name(() => {
-          if (!config.isVisible) config.onExitComplete?.();
-        }, "onExitComplete")
-      });
+      useEnterExitAnimation(
+        containerRef,
+        !!config.isVisible && mode === "card" && !isDismissed,
+        {
+          direction: config.direction || "top-to-bottom",
+          position: config.position || "top-center",
+          entranceDelayMs: hasEnteredRef.current ? 0 : config.entranceDelayMs || 0,
+          exitDelayMs: 75,
+          onEntranceComplete: /* @__PURE__ */ __name(() => {
+            config.onEntranceComplete?.();
+            hasEnteredRef.current = true;
+          }, "onEntranceComplete"),
+          onExitComplete: /* @__PURE__ */ __name(() => {
+            if (!config.isVisible || isDismissed) config.onExitComplete?.();
+          }, "onExitComplete")
+        }
+      );
       useEnterExitAnimation(
         launcherRef,
-        !!config.isVisible && mode === "launcher",
+        !!config.isVisible && mode === "launcher" && !isDismissed,
         {
           direction: config.direction || "top-to-bottom",
           position: config.position || "top-center",
@@ -1674,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),
@@ -1823,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);
           },
@@ -1839,25 +1855,13 @@ var KenobiLib = (() => {
                 "aria-label": "Dismiss",
                 onClick: (e3) => {
                   e3.stopPropagation();
+                  setIsDismissed(true);
                   config.onDismiss?.();
                 },
                 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)) }) })
           ]
@@ -3062,6 +3066,9 @@ var KenobiLib = (() => {
           showWatermark: false,
           showKeyboardHints: true,
           enableLauncher: true,
+          onDismiss: /* @__PURE__ */ __name(() => {
+            this.log("debug", "CueCard dismissed by user");
+          }, "onDismiss"),
           onSubmitPersonalization: /* @__PURE__ */ __name((values) => {
             this.log("debug", "CueCard submitted:", values);
             void this.personalize(values);