kenobi-js 0.1.28 → 0.1.29

package/dist/kenobi.js

@@ -1128,9 +1128,9 @@ var KenobiLib = (() => {
     }
   ), "LogoIcon");
   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-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-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-kbd-bg: #1e293b; --kb-kbd-border: #334155; --kb-kbd-text: #94a3b8; --kb-watermark-text: #64748b; }
+  :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; }
+  .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); }
@@ -1176,6 +1176,9 @@ var KenobiLib = (() => {
   .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; }
   .form-input::placeholder { color: var(--kb-input-placeholder); }
   .form-input:focus { border-color: var(--kb-progress-indicator); }
+  .form-input.error { border-color: var(--kb-error-text); }
+  .form-label.error { color: var(--kb-error-text); }
+  .form-message { color: var(--kb-error-text); font-size: 0.75rem; margin-top: 0.25rem; font-weight: 500; }
   .btn-submit { background-color: var(--kb-btn-trigger-bg); color: var(--kb-btn-trigger-text); padding: 0.5rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
   .btn-submit:disabled { opacity: 0.7; cursor: not-allowed; }
   .kbd-hint { display: flex; align-items: center; gap: 0.5rem; position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; white-space: nowrap; }
@@ -1288,6 +1291,7 @@ var KenobiLib = (() => {
     const timerRafRef = A2(null);
     const hasTimerCompletedRef = A2(false);
     const [isHovering, setIsHovering] = d2(false);
+    const [errors, setErrors] = d2({});
     const [timerProgress, setTimerProgressState] = d2(0);
     const timerProgressRef = A2(0);
     const timerEnabled = config.enableTimer !== false;
@@ -1508,17 +1512,81 @@ var KenobiLib = (() => {
       }
       return txt.btnResting || "Show me";
     })();
+    const validateField = /* @__PURE__ */ __name((name, value, fieldConfig) => {
+      if (!fieldConfig) return null;
+      if (fieldConfig.required && !value.trim()) {
+        return fieldConfig.errorMessage || `${fieldConfig.label} is required`;
+      }
+      if (!value) return null;
+      if (fieldConfig.type === "email") {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(value)) {
+          return fieldConfig.errorMessage || "Please enter a valid email address";
+        }
+      }
+      if (fieldConfig.type === "url") {
+        try {
+          new URL(value);
+        } catch {
+          return fieldConfig.errorMessage || "Please enter a valid URL (e.g., https://example.com)";
+        }
+      }
+      if (fieldConfig.minLength && value.length < fieldConfig.minLength) {
+        return fieldConfig.errorMessage || `Must be at least ${fieldConfig.minLength} characters`;
+      }
+      if (fieldConfig.maxLength && value.length > fieldConfig.maxLength) {
+        return fieldConfig.errorMessage || `Must be at most ${fieldConfig.maxLength} characters`;
+      }
+      if (fieldConfig.pattern) {
+        const regex = new RegExp(fieldConfig.pattern);
+        if (!regex.test(value)) {
+          return fieldConfig.errorMessage || "Invalid format";
+        }
+      }
+      return null;
+    }, "validateField");
     const handleSubmit = /* @__PURE__ */ __name((e3) => {
       e3.preventDefault();
       if (isPending) return;
       const formData = new FormData(e3.target);
       const values = {};
+      const newErrors = {};
+      let hasErrors = false;
       formData.forEach((value, key) => {
-        values[key] = value.toString();
+        const strValue = value.toString();
+        values[key] = strValue;
+        const fieldConfig = config.fields.find((f4) => f4.name === key);
+        const error = validateField(key, strValue, fieldConfig);
+        if (error) {
+          newErrors[key] = error;
+          hasErrors = true;
+        }
       });
+      if (hasErrors) {
+        setErrors(newErrors);
+        return;
+      }
+      setErrors({});
       setIsOpen(false);
       config.onSubmitPersonalization?.(values);
     }, "handleSubmit");
+    const handleInput = /* @__PURE__ */ __name((e3) => {
+      const target = e3.target;
+      const name = target.name;
+      if (errors[name]) {
+        const fieldConfig = config.fields.find((f4) => f4.name === name);
+        const error = validateField(name, target.value, fieldConfig);
+        setErrors((prev) => {
+          const next = { ...prev };
+          if (error) {
+            next[name] = error;
+          } else {
+            delete next[name];
+          }
+          return next;
+        });
+      }
+    }, "handleInput");
     const togglePopover = /* @__PURE__ */ __name((e3) => {
       e3.stopPropagation();
       if (isPending || isSuccess) return;
@@ -1659,17 +1727,24 @@ var KenobiLib = (() => {
                 children: [
                   /* @__PURE__ */ u3("form", { onSubmit: handleSubmit, ref: formRef, children: [
                     config.fields.map((field, idx) => /* @__PURE__ */ u3("div", { class: "form-group", children: [
-                      /* @__PURE__ */ u3("label", { class: "form-label", children: field.label }),
+                      /* @__PURE__ */ u3(
+                        "label",
+                        {
+                          class: `form-label ${errors[field.name] ? "error" : ""}`,
+                          children: field.label
+                        }
+                      ),
                       /* @__PURE__ */ u3("div", { class: "input-row", children: [
                         /* @__PURE__ */ u3(
                           "input",
                           {
                             ref: idx === 0 ? firstInputRef : void 0,
-                            class: "form-input",
+                            class: `form-input ${errors[field.name] ? "error" : ""}`,
                             name: field.name,
                             type: field.type || "text",
                             placeholder: field.placeholder,
-                            required: field.required
+                            required: field.required,
+                            onInput: handleInput
                           }
                         ),
                         config.fields.length === 1 && /* @__PURE__ */ u3(
@@ -1681,7 +1756,8 @@ var KenobiLib = (() => {
                             children: isPending ? /* @__PURE__ */ u3(LoaderIcon, {}) : /* @__PURE__ */ u3(ArrowRightIcon, {})
                           }
                         )
-                      ] })
+                      ] }),
+                      errors[field.name] && /* @__PURE__ */ u3("div", { class: "form-message", children: errors[field.name] })
                     ] }, field.name)),
                     config.fields.length > 1 && /* @__PURE__ */ u3(
                       "button",
@@ -1844,6 +1920,10 @@ var KenobiLib = (() => {
     setTheme(theme) {
       this.update({ theme });
     }
+    openForm() {
+      this.isOpen = true;
+      this.render();
+    }
     render() {
       const mountPoint = this.shadow.lastElementChild;
       G(
@@ -1875,7 +1955,9 @@ var KenobiLib = (() => {
     durationMs: 300,
     delayMs: 0,
     easing: "ease",
-    animateSize: true
+    animateSize: true,
+    overflow: "hidden"
+    // Default to hidden for clean size animations; use "visible" for gradient text
   };
   var createNormalizedTransitionConfig = /* @__PURE__ */ __name((config) => ({
     enabled: config?.enabled ?? DEFAULT_TRANSITION_CONFIG.enabled,
@@ -1883,6 +1965,7 @@ var KenobiLib = (() => {
     delayMs: config?.delayMs ?? DEFAULT_TRANSITION_CONFIG.delayMs,
     easing: config?.easing ?? DEFAULT_TRANSITION_CONFIG.easing,
     animateSize: config?.animateSize ?? DEFAULT_TRANSITION_CONFIG.animateSize,
+    overflow: config?.overflow ?? DEFAULT_TRANSITION_CONFIG.overflow,
     textAnimation: config?.textAnimation,
     enter: config?.enter,
     exit: config?.exit
@@ -1893,6 +1976,7 @@ var KenobiLib = (() => {
     delayMs: override?.delayMs ?? base.delayMs,
     easing: override?.easing ?? base.easing,
     animateSize: override?.animateSize ?? base.animateSize,
+    overflow: override?.overflow ?? base.overflow,
     textAnimation: override?.textAnimation ?? base.textAnimation,
     enter: override?.enter ?? base.enter,
     exit: override?.exit ?? base.exit
@@ -1905,6 +1989,7 @@ var KenobiLib = (() => {
     return false;
   }, "isAnimatableElement");
   var isEasing = /* @__PURE__ */ __name((value) => typeof value === "string", "isEasing");
+  var isTransitionOverflow = /* @__PURE__ */ __name((value) => value === "hidden" || value === "visible" || value === "clip", "isTransitionOverflow");
   var isAnimationSplitTarget = /* @__PURE__ */ __name((value) => value === "line" || value === "word" || value === "character", "isAnimationSplitTarget");
   var isKeyframeDefinition = /* @__PURE__ */ __name((value) => {
     if (typeof value !== "object" || value === null) return false;
@@ -1934,11 +2019,12 @@ var KenobiLib = (() => {
       delayMs,
       easing,
       animateSize,
+      overflow,
       textAnimation,
       enter,
       exit
     } = candidate;
-    return (enabled === void 0 || typeof enabled === "boolean") && (durationMs === void 0 || typeof durationMs === "number") && (delayMs === void 0 || typeof delayMs === "number") && (easing === void 0 || isEasing(easing)) && (animateSize === void 0 || typeof animateSize === "boolean") && (textAnimation === void 0 || isTextAnimationConfig(textAnimation)) && (enter === void 0 || isAnimationSettings(enter)) && (exit === void 0 || isAnimationSettings(exit));
+    return (enabled === void 0 || typeof enabled === "boolean") && (durationMs === void 0 || typeof durationMs === "number") && (delayMs === void 0 || typeof delayMs === "number") && (easing === void 0 || isEasing(easing)) && (animateSize === void 0 || typeof animateSize === "boolean") && (overflow === void 0 || isTransitionOverflow(overflow)) && (textAnimation === void 0 || isTextAnimationConfig(textAnimation)) && (enter === void 0 || isAnimationSettings(enter)) && (exit === void 0 || isAnimationSettings(exit));
   }, "isTransitionConfig");
   var _TransitionOrchestrator = class _TransitionOrchestrator {
     constructor() {
@@ -1959,7 +2045,7 @@ var KenobiLib = (() => {
       __publicField(this, "replaceWithTransition", /* @__PURE__ */ __name(async (oldElement, newMarkup, config) => {
         const wrapper = document.createElement("div");
         wrapper.style.position = "relative";
-        wrapper.style.overflow = "hidden";
+        wrapper.style.overflow = config.overflow;
         const oldRect = oldElement.getBoundingClientRect();
         const oldStyle = window.getComputedStyle(oldElement);
         wrapper.style.display = oldStyle.display;
@@ -2147,17 +2233,70 @@ var KenobiLib = (() => {
             if (text.trim().length === 0) {
               return currentDelay;
             }
+            if (config.by === "character") {
+              const words = text.split(/(\s+)/);
+              const fragment2 = document.createDocumentFragment();
+              let delay2 = currentDelay;
+              words.forEach((word) => {
+                if (word.length === 0) return;
+                if (word.trim().length === 0) {
+                  fragment2.appendChild(document.createTextNode(word));
+                  return;
+                }
+                const wordWrapper = document.createElement("span");
+                wordWrapper.style.display = "inline-block";
+                wordWrapper.style.whiteSpace = "nowrap";
+                if (isBackgroundClippedToText2) {
+                  wordWrapper.style.setProperty("background", "inherit");
+                  wordWrapper.style.setProperty("-webkit-background-clip", "text");
+                  wordWrapper.style.setProperty("background-clip", "text");
+                  wordWrapper.style.setProperty("color", "transparent");
+                }
+                const chars = word.split("");
+                chars.forEach((char) => {
+                  const span = document.createElement("span");
+                  span.textContent = char;
+                  span.style.display = "inline-block";
+                  span.style.opacity = "0";
+                  if (isBackgroundClippedToText2) {
+                    span.style.setProperty("background", "inherit");
+                    span.style.setProperty("-webkit-background-clip", "text");
+                    span.style.setProperty("background-clip", "text");
+                    span.style.setProperty("color", "transparent");
+                    span.style.paddingBottom = "0.1em";
+                    span.style.marginBottom = "-0.1em";
+                  }
+                  const keyframes = this.resolveKeyframes(config.keyframes);
+                  const duration = config.durationMs ?? transitionConfig.durationMs ?? 300;
+                  const easing = transitionConfig.easing ?? "ease";
+                  const animation = span.animate(keyframes, {
+                    duration,
+                    easing,
+                    delay: delay2,
+                    fill: "forwards"
+                  });
+                  animation.addEventListener("finish", () => {
+                    animation.commitStyles();
+                    animation.cancel();
+                  });
+                  wordWrapper.appendChild(span);
+                  delay2 += config.staggerMs ?? 50;
+                });
+                fragment2.appendChild(wordWrapper);
+              });
+              node.parentNode?.replaceChild(fragment2, node);
+              return delay2;
+            }
             let segments;
             switch (config.by) {
-              case "character":
-                segments = text.split("");
-                break;
               case "word":
                 segments = text.split(/(\s+)/);
                 break;
               case "line":
                 segments = text.split("\n");
                 break;
+              default:
+                segments = text.split("");
             }
             const fragment = document.createDocumentFragment();
             let delay = currentDelay;
@@ -2244,6 +2383,7 @@ var KenobiLib = (() => {
       __publicField(this, "changeStack", /* @__PURE__ */ new Map());
       __publicField(this, "visitorKey", null);
       __publicField(this, "orchestrator");
+      __publicField(this, "cueCardInstance", null);
       //
       __publicField(this, "currentPath");
       __publicField(this, "currentUrl");
@@ -2831,6 +2971,122 @@ var KenobiLib = (() => {
         el.dispatchEvent(new Event("input", { bubbles: true }));
         el.dispatchEvent(new Event("change", { bubbles: true }));
       }, "setInputValue"));
+      /*
+      ----
+      --   CUE CARD AUTO-MOUNT & PERSONALIZATION
+      ----
+      */
+      /**
+       * Initializes and mounts a CueCard with default configuration.
+       * Called automatically when publishableKey is provided.
+       *
+       * Default config matches the template editor settings.
+       * Future: This config will be fetched per-org from the database.
+       */
+      __publicField(this, "initCueCard", /* @__PURE__ */ __name(() => {
+        if (this.cueCardInstance) {
+          this.log("warn", "CueCard already initialized, skipping...");
+          return;
+        }
+        this.cueCardInstance = new CueCard({
+          theme: "light",
+          position: "top-center",
+          fields: [
+            {
+              name: "companyDomain",
+              label: "Company Name or Domain",
+              placeholder: "example.com",
+              required: true,
+              minLength: 3,
+              errorMessage: "Company name or domain is required"
+            }
+          ],
+          hasPersonalization: true,
+          isVisible: true,
+          enableFocusMode: true,
+          showKeyboardHints: true,
+          focusBlurIntensity: "8px",
+          focusDelayMs: 2e3,
+          enableLauncher: true,
+          onSubmitPersonalization: /* @__PURE__ */ __name((values) => {
+            this.log("debug", "CueCard submitted:", values);
+            void this.personalize(values);
+          }, "onSubmitPersonalization"),
+          onOpenChange: /* @__PURE__ */ __name((isOpen) => {
+            this.log("debug", "CueCard open state changed:", isOpen);
+          }, "onOpenChange")
+        });
+        this.cueCardInstance.mount();
+        this.log("debug", "CueCard mounted successfully");
+      }, "initCueCard"));
+      /**
+       * Triggers personalization by calling the API with the provided input.
+       * Updates CueCard status during the flow and applies transformations.
+       *
+       * @param input - User-provided fields (e.g., { companyDomain: "acme.com" })
+       */
+      __publicField(this, "personalize", /* @__PURE__ */ __name(async (input) => {
+        if (!this.config.publishableKey) {
+          this.log("error", "Cannot personalize: publishableKey not configured");
+          return;
+        }
+        const startTime = /* @__PURE__ */ new Date();
+        this.log("debug", "Starting personalization with input:", input);
+        if (this.cueCardInstance) {
+          this.cueCardInstance.update({ status: "starting", progressPct: 10 });
+        }
+        try {
+          const response = await fetch(`${this.config.apiHost}/v1/personalize`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+              publishableKey: this.config.publishableKey,
+              input,
+              pagePath: this.currentPath
+            })
+          });
+          if (this.cueCardInstance) {
+            this.cueCardInstance.update({ progressPct: 50 });
+          }
+          if (!response.ok) {
+            const errorBody = await response.json().catch(() => ({}));
+            throw new Error(errorBody.error || `API error: ${response.status}`);
+          }
+          const result = await response.json();
+          this.log("debug", "Personalization API response:", result);
+          if (this.cueCardInstance) {
+            this.cueCardInstance.update({ progressPct: 80 });
+          }
+          if (result.transformations && Array.isArray(result.transformations)) {
+            await this.applyTransformations(result.transformations, {
+              shouldConsolidate: true
+            });
+          }
+          if (this.cueCardInstance) {
+            this.cueCardInstance.update({ status: "success", progressPct: 100 });
+          }
+          const endTime = /* @__PURE__ */ new Date();
+          const duration = this.getDurationInMilliseconds(startTime, endTime);
+          this.log(
+            "debug",
+            `Personalization complete, took ${this.formatThousands(duration)} ms`
+          );
+        } catch (error) {
+          this.log("error", "Personalization failed:", error);
+          if (this.cueCardInstance) {
+            this.cueCardInstance.update({ status: "error", progressPct: 0 });
+          }
+        }
+      }, "personalize"));
+      /**
+       * Returns the CueCard instance if one was auto-mounted.
+       * Useful for external control of the CueCard state.
+       */
+      __publicField(this, "getCueCard", /* @__PURE__ */ __name(() => {
+        return this.cueCardInstance;
+      }, "getCueCard"));
       this.config = {
         apiHost: "https://kenobi.ai/api",
         debug: false,
@@ -2858,6 +3114,10 @@ var KenobiLib = (() => {
         this.log("debug", "Auto-transform is requested... Starting...");
         void this.startAutoTransform();
       }
+      if (this.config.publishableKey) {
+        this.log("debug", "PublishableKey provided, auto-mounting CueCard...");
+        this.initCueCard();
+      }
     }
   };
   __name(_Kenobi, "Kenobi");