@prosdevlab/experience-sdk-plugins 0.1.4 → 0.3.0

package/dist/index.js

@@ -1,11 +1,14 @@
 import { storagePlugin } from '@lytics/sdk-kit-plugins';
 
 // src/utils/sanitize.ts
-var ALLOWED_TAGS = ["strong", "em", "a", "br", "span", "b", "i", "p"];
+var ALLOWED_TAGS = ["strong", "em", "a", "br", "span", "b", "i", "p", "div", "ul", "li"];
 var ALLOWED_ATTRIBUTES = {
   a: ["href", "class", "style", "title"],
   span: ["class", "style"],
-  p: ["class", "style"]
+  p: ["class", "style"],
+  div: ["class", "style"],
+  ul: ["class", "style"],
+  li: ["class", "style"]
   // Other tags have no attributes allowed
 };
 function sanitizeHTML(html) {
@@ -42,7 +45,7 @@ function sanitizeHTML(html) {
           }
         }
       }
-      const attrString = attrs.length > 0 ? " " + attrs.join(" ") : "";
+      const attrString = attrs.length > 0 ? ` ${attrs.join(" ")}` : "";
       let innerHTML = "";
       for (const child of Array.from(element.childNodes)) {
         innerHTML += sanitizeNode(child);
@@ -115,15 +118,15 @@ var bannerPlugin = (plugin, instance, config) => {
         left: 0;
         right: 0;
         width: 100%;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        font-size: 14px;
-        line-height: 1.5;
+        font-family: var(--xp-banner-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+        font-size: var(--xp-banner-font-size, 14px);
+        line-height: var(--xp-banner-line-height, 1.5);
         box-sizing: border-box;
-        z-index: 10000;
-        background: #ffffff;
-        color: #111827;
-        border-bottom: 1px solid #e5e7eb;
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+        z-index: var(--xp-banner-z-index, 10000);
+        background: var(--xp-banner-bg, #ffffff);
+        color: var(--xp-banner-color, #111827);
+        border-bottom: var(--xp-banner-border-width, 1px) solid var(--xp-banner-border-color, #e5e7eb);
+        box-shadow: var(--xp-banner-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.05));
       }
       
       .xp-banner--top {
@@ -133,17 +136,17 @@ var bannerPlugin = (plugin, instance, config) => {
       .xp-banner--bottom {
         bottom: 0;
         border-bottom: none;
-        border-top: 1px solid #e5e7eb;
-        box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.05);
+        border-top: var(--xp-banner-border-width, 1px) solid var(--xp-banner-border-color, #e5e7eb);
+        box-shadow: var(--xp-banner-shadow-bottom, 0 -1px 3px 0 rgba(0, 0, 0, 0.05));
       }
       
       .xp-banner__container {
         display: flex;
         align-items: center;
-        gap: 16px;
-        max-width: 1280px;
+        gap: var(--xp-banner-gap, 16px);
+        max-width: var(--xp-banner-max-width, 1280px);
         margin: 0 auto;
-        padding: 14px 24px;
+        padding: var(--xp-banner-padding, 14px 24px);
       }
       
       .xp-banner__content {
@@ -151,36 +154,37 @@ var bannerPlugin = (plugin, instance, config) => {
         min-width: 0;
         display: flex;
         flex-direction: column;
-        gap: 4px;
+        gap: var(--xp-banner-content-gap, 4px);
       }
       
       .xp-banner__title {
-        font-weight: 600;
+        font-weight: var(--xp-banner-title-weight, 600);
         margin: 0;
-        font-size: 15px;
-        line-height: 1.4;
+        font-size: var(--xp-banner-title-size, 15px);
+        line-height: var(--xp-banner-title-line-height, 1.4);
+        color: var(--xp-banner-title-color, inherit);
       }
       
       .xp-banner__message {
         margin: 0;
-        font-size: 14px;
-        line-height: 1.5;
-        color: #6b7280;
+        font-size: var(--xp-banner-message-size, 14px);
+        line-height: var(--xp-banner-message-line-height, 1.5);
+        color: var(--xp-banner-message-color, #6b7280);
       }
       
       .xp-banner__buttons {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: var(--xp-banner-buttons-gap, 8px);
         flex-shrink: 0;
       }
       
       .xp-banner__button {
-        padding: 8px 16px;
+        padding: var(--xp-banner-button-padding, 8px 16px);
         border: none;
-        border-radius: 6px;
-        font-size: 14px;
-        font-weight: 500;
+        border-radius: var(--xp-banner-button-radius, 6px);
+        font-size: var(--xp-banner-button-font-size, 14px);
+        font-weight: var(--xp-banner-button-font-weight, 500);
         cursor: pointer;
         transition: all 0.2s;
         text-decoration: none;
@@ -191,64 +195,64 @@ var bannerPlugin = (plugin, instance, config) => {
       }
       
       .xp-banner__button--primary {
-        background: #2563eb;
-        color: #ffffff;
+        background: var(--xp-banner-button-primary-bg, #2563eb);
+        color: var(--xp-banner-button-primary-color, #ffffff);
       }
       
       .xp-banner__button--primary:hover {
-        background: #1d4ed8;
+        background: var(--xp-banner-button-primary-bg-hover, #1d4ed8);
       }
       
       .xp-banner__button--secondary {
-        background: #f3f4f6;
-        color: #374151;
-        border: 1px solid #e5e7eb;
+        background: var(--xp-banner-button-secondary-bg, #f3f4f6);
+        color: var(--xp-banner-button-secondary-color, #374151);
+        border: var(--xp-banner-border-width, 1px) solid var(--xp-banner-button-secondary-border, #e5e7eb);
       }
       
       .xp-banner__button--secondary:hover {
-        background: #e5e7eb;
+        background: var(--xp-banner-button-secondary-bg-hover, #e5e7eb);
       }
       
       .xp-banner__button--link {
         background: transparent;
-        color: #2563eb;
-        padding: 6px 12px;
-        font-weight: 400;
+        color: var(--xp-banner-button-link-color, #2563eb);
+        padding: var(--xp-banner-button-link-padding, 6px 12px);
+        font-weight: var(--xp-banner-button-link-font-weight, 400);
       }
       
       .xp-banner__button--link:hover {
-        background: #f3f4f6;
+        background: var(--xp-banner-button-link-bg-hover, #f3f4f6);
         text-decoration: underline;
       }
       
       .xp-banner__close {
         background: transparent;
         border: none;
-        color: #9ca3af;
-        font-size: 20px;
+        color: var(--xp-banner-close-color, #9ca3af);
+        font-size: var(--xp-banner-close-size, 20px);
         line-height: 1;
         cursor: pointer;
-        padding: 4px;
+        padding: var(--xp-banner-close-padding, 4px);
         margin: 0;
         transition: color 0.2s;
         flex-shrink: 0;
-        width: 28px;
-        height: 28px;
+        width: var(--xp-banner-close-width, 28px);
+        height: var(--xp-banner-close-height, 28px);
         display: flex;
         align-items: center;
         justify-content: center;
-        border-radius: 4px;
+        border-radius: var(--xp-banner-close-radius, 4px);
       }
       
       .xp-banner__close:hover {
-        color: #111827;
-        background: #f3f4f6;
+        color: var(--xp-banner-close-color-hover, #111827);
+        background: var(--xp-banner-close-bg-hover, #f3f4f6);
       }
       
       @media (max-width: 640px) {
         .xp-banner__container {
           flex-wrap: wrap;
-          padding: 14px 16px;
+          padding: var(--xp-banner-padding-mobile, 14px 16px);
           position: relative;
         }
         
@@ -273,55 +277,55 @@ var bannerPlugin = (plugin, instance, config) => {
         }
       }
       
-      /* Dark mode support */
+      /* Dark mode support - override CSS variables */
       @media (prefers-color-scheme: dark) {
         .xp-banner {
-          background: #111827;
-          color: #f9fafb;
-          border-bottom-color: #1f2937;
+          background: var(--xp-banner-bg-dark, #111827);
+          color: var(--xp-banner-color-dark, #f9fafb);
+          border-bottom-color: var(--xp-banner-border-color-dark, #1f2937);
         }
         
         .xp-banner--bottom {
-          border-top-color: #1f2937;
+          border-top-color: var(--xp-banner-border-color-dark, #1f2937);
         }
         
         .xp-banner__message {
-          color: #9ca3af;
+          color: var(--xp-banner-message-color-dark, #9ca3af);
         }
         
         .xp-banner__button--primary {
-          background: #3b82f6;
+          background: var(--xp-banner-button-primary-bg-dark, #3b82f6);
         }
         
         .xp-banner__button--primary:hover {
-          background: #2563eb;
+          background: var(--xp-banner-button-primary-bg-hover-dark, #2563eb);
         }
         
         .xp-banner__button--secondary {
-          background: #1f2937;
-          color: #f9fafb;
-          border-color: #374151;
+          background: var(--xp-banner-button-secondary-bg-dark, #1f2937);
+          color: var(--xp-banner-button-secondary-color-dark, #f9fafb);
+          border-color: var(--xp-banner-button-secondary-border-dark, #374151);
         }
         
         .xp-banner__button--secondary:hover {
-          background: #374151;
+          background: var(--xp-banner-button-secondary-bg-hover-dark, #374151);
         }
         
         .xp-banner__button--link {
-          color: #60a5fa;
+          color: var(--xp-banner-button-link-color-dark, #60a5fa);
         }
         
         .xp-banner__button--link:hover {
-          background: #1f2937;
+          background: var(--xp-banner-button-link-bg-hover-dark, #1f2937);
         }
         
         .xp-banner__close {
-          color: #6b7280;
+          color: var(--xp-banner-close-color-dark, #6b7280);
         }
         
         .xp-banner__close:hover {
-          color: #f9fafb;
-          background: #1f2937;
+          color: var(--xp-banner-close-color-hover-dark, #f9fafb);
+          background: var(--xp-banner-close-bg-hover-dark, #1f2937);
         }
       }
     `;
@@ -561,6 +565,175 @@ var debugPlugin = (plugin, instance, config) => {
     });
   }
 };
+
+// src/exit-intent/exit-intent.ts
+function isMobileDevice(userAgent) {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+}
+function hasMinTimeElapsed(pageLoadTime, minTime, currentTime) {
+  return currentTime - pageLoadTime >= minTime;
+}
+function addPositionToHistory(positions, newPosition, maxSize) {
+  const updated = [...positions, newPosition];
+  if (updated.length > maxSize) {
+    return updated.slice(1);
+  }
+  return updated;
+}
+function calculateVelocity(lastY, previousY) {
+  return Math.abs(lastY - previousY);
+}
+function shouldTriggerExitIntent(positions, sensitivity, relatedTarget) {
+  if (positions.length < 2) {
+    return { shouldTrigger: false, lastY: 0, previousY: 0, velocity: 0 };
+  }
+  if (relatedTarget && relatedTarget.nodeName !== "HTML") {
+    return { shouldTrigger: false, lastY: 0, previousY: 0, velocity: 0 };
+  }
+  const lastY = positions[positions.length - 1].y;
+  const previousY = positions[positions.length - 2].y;
+  const velocity = calculateVelocity(lastY, previousY);
+  const isMovingUp = lastY < previousY;
+  const isNearTop = lastY - velocity <= sensitivity;
+  return {
+    shouldTrigger: isMovingUp && isNearTop,
+    lastY,
+    previousY,
+    velocity
+  };
+}
+function createExitIntentEvent(lastY, previousY, velocity, pageLoadTime, timestamp) {
+  return {
+    timestamp,
+    lastY,
+    previousY,
+    velocity,
+    timeOnPage: timestamp - pageLoadTime
+  };
+}
+var exitIntentPlugin = (plugin, instance, config) => {
+  plugin.ns("experiences.exitIntent");
+  plugin.defaults({
+    exitIntent: {
+      sensitivity: 50,
+      minTimeOnPage: 2e3,
+      delay: 0,
+      positionHistorySize: 30,
+      disableOnMobile: true
+    }
+  });
+  const exitIntentConfig = config.get("exitIntent");
+  if (!exitIntentConfig) {
+    return;
+  }
+  let positions = [];
+  let triggered = false;
+  const pageLoadTime = Date.now();
+  let mouseMoveListener = null;
+  let mouseOutListener = null;
+  function shouldDisable() {
+    if (!exitIntentConfig?.disableOnMobile) {
+      return false;
+    }
+    return isMobileDevice(navigator.userAgent);
+  }
+  function trackPosition(e) {
+    const newPosition = { x: e.clientX, y: e.clientY };
+    const maxSize = exitIntentConfig?.positionHistorySize ?? 30;
+    positions = addPositionToHistory(positions, newPosition, maxSize);
+  }
+  function handleExitIntent(e) {
+    if (triggered) {
+      return;
+    }
+    const minTime = exitIntentConfig?.minTimeOnPage ?? 2e3;
+    if (!hasMinTimeElapsed(pageLoadTime, minTime, Date.now())) {
+      return;
+    }
+    const sensitivity = exitIntentConfig?.sensitivity ?? 50;
+    const relatedTarget = e.relatedTarget || e.toElement;
+    const result = shouldTriggerExitIntent(positions, sensitivity, relatedTarget);
+    if (result.shouldTrigger) {
+      triggered = true;
+      const eventPayload = createExitIntentEvent(
+        result.lastY,
+        result.previousY,
+        result.velocity,
+        pageLoadTime,
+        Date.now()
+      );
+      const delay = exitIntentConfig?.delay ?? 0;
+      if (delay > 0) {
+        setTimeout(() => {
+          instance.emit("trigger:exitIntent", eventPayload);
+        }, delay);
+      } else {
+        instance.emit("trigger:exitIntent", eventPayload);
+      }
+      try {
+        sessionStorage.setItem("xp:exitIntent:triggered", Date.now().toString());
+      } catch (_e) {
+      }
+      cleanup();
+    }
+  }
+  function cleanup() {
+    if (mouseMoveListener) {
+      document.removeEventListener("mousemove", mouseMoveListener);
+      mouseMoveListener = null;
+    }
+    if (mouseOutListener) {
+      document.removeEventListener("mouseout", mouseOutListener);
+      mouseOutListener = null;
+    }
+  }
+  function initialize() {
+    if (shouldDisable()) {
+      return;
+    }
+    try {
+      const storedTrigger = sessionStorage.getItem("xp:exitIntent:triggered");
+      if (storedTrigger) {
+        triggered = true;
+        return;
+      }
+    } catch (_e) {
+    }
+    mouseMoveListener = trackPosition;
+    mouseOutListener = handleExitIntent;
+    document.addEventListener("mousemove", mouseMoveListener);
+    document.addEventListener("mouseout", mouseOutListener);
+  }
+  plugin.expose({
+    exitIntent: {
+      /**
+       * Check if exit intent has been triggered
+       */
+      isTriggered: () => triggered,
+      /**
+       * Reset exit intent state (useful for testing)
+       */
+      reset: () => {
+        triggered = false;
+        positions = [];
+        try {
+          sessionStorage.removeItem("xp:exitIntent:triggered");
+        } catch (_e) {
+        }
+        cleanup();
+        initialize();
+      },
+      /**
+       * Get current position history
+       */
+      getPositions: () => [...positions]
+    }
+  });
+  initialize();
+  instance.on("sdk:destroy", () => {
+    cleanup();
+  });
+};
 var frequencyPlugin = (plugin, instance, config) => {
   plugin.ns("frequency");
   plugin.defaults({
@@ -689,6 +862,1677 @@ var frequencyPlugin = (plugin, instance, config) => {
   }
 };
 
-export { bannerPlugin, debugPlugin, frequencyPlugin };
+// src/inline/insertion.ts
+function insertContent(selector, content, position, experienceId) {
+  const target = document.querySelector(selector);
+  if (!target) {
+    return null;
+  }
+  const wrapper = document.createElement("div");
+  wrapper.className = "xp-inline";
+  wrapper.setAttribute("data-xp-id", experienceId);
+  wrapper.innerHTML = content;
+  switch (position) {
+    case "replace":
+      target.innerHTML = "";
+      target.appendChild(wrapper);
+      break;
+    case "append":
+      target.appendChild(wrapper);
+      break;
+    case "prepend":
+      target.insertBefore(wrapper, target.firstChild);
+      break;
+    case "before":
+      target.parentElement?.insertBefore(wrapper, target);
+      break;
+    case "after":
+      target.parentElement?.insertBefore(wrapper, target.nextSibling);
+      break;
+  }
+  return wrapper;
+}
+function removeContent(experienceId) {
+  const element = document.querySelector(`[data-xp-id="${experienceId}"]`);
+  if (!element) {
+    return false;
+  }
+  element.remove();
+  return true;
+}
+
+// src/inline/inline.ts
+var inlinePlugin = (plugin, instance, config) => {
+  plugin.ns("experiences.inline");
+  plugin.defaults({
+    inline: {
+      retry: false,
+      retryTimeout: 5e3
+    }
+  });
+  if (!instance.storage) {
+    instance.use(storagePlugin);
+  }
+  const sdkInstance = instance;
+  if (typeof document !== "undefined") {
+    const styleId = "xp-inline-styles";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = getInlineStyles();
+      document.head.appendChild(style);
+    }
+  }
+  const activeInlines = /* @__PURE__ */ new Map();
+  const show = (experience) => {
+    const { id, content } = experience;
+    if (activeInlines.has(id)) {
+      return;
+    }
+    if (content.persist && content.dismissable && sdkInstance.storage) {
+      const dismissed = sdkInstance.storage.get(`xp-inline-dismissed-${id}`);
+      if (dismissed) {
+        instance.emit("experiences:inline:dismissed", {
+          experienceId: id,
+          reason: "previously-dismissed",
+          timestamp: Date.now()
+        });
+        return;
+      }
+    }
+    const element = insertContent(
+      content.selector,
+      sanitizeHTML(content.message),
+      content.position || "replace",
+      id
+    );
+    if (!element) {
+      instance.emit("experiences:inline:error", {
+        experienceId: id,
+        error: "selector-not-found",
+        selector: content.selector,
+        timestamp: Date.now()
+      });
+      const retryEnabled = config.get("inline.retry") ?? false;
+      const retryTimeout = config.get("inline.retryTimeout") ?? 5e3;
+      if (retryEnabled) {
+        setTimeout(() => {
+          show(experience);
+        }, retryTimeout);
+      }
+      return;
+    }
+    activeInlines.set(id, element);
+    if (content.className) {
+      element.classList.add(content.className);
+    }
+    if (content.style) {
+      Object.assign(element.style, content.style);
+    }
+    if (content.dismissable) {
+      const closeBtn = document.createElement("button");
+      closeBtn.className = "xp-inline__close";
+      closeBtn.setAttribute("aria-label", "Close");
+      closeBtn.textContent = "\xD7";
+      closeBtn.onclick = () => {
+        remove(id);
+        if (content.persist && sdkInstance.storage) {
+          sdkInstance.storage.set(`xp-inline-dismissed-${id}`, true);
+        }
+        instance.emit("experiences:dismissed", {
+          experienceId: id,
+          timestamp: Date.now()
+        });
+      };
+      element.prepend(closeBtn);
+    }
+    instance.emit("experiences:shown", {
+      experienceId: id,
+      type: "inline",
+      selector: content.selector,
+      position: content.position || "replace",
+      timestamp: Date.now()
+    });
+  };
+  const remove = (experienceId) => {
+    const element = activeInlines.get(experienceId);
+    if (!element) return;
+    removeContent(experienceId);
+    activeInlines.delete(experienceId);
+  };
+  const isShowing = (experienceId) => {
+    if (experienceId) {
+      return activeInlines.has(experienceId);
+    }
+    return activeInlines.size > 0;
+  };
+  plugin.expose({
+    inline: {
+      show,
+      remove,
+      isShowing
+    }
+  });
+  instance.on("experiences:evaluated", (data) => {
+    if (data.decision?.show && data.experience?.type === "inline") {
+      show(data.experience);
+    }
+  });
+  instance.on("sdk:destroy", () => {
+    for (const id of Array.from(activeInlines.keys())) {
+      remove(id);
+    }
+  });
+};
+function getInlineStyles() {
+  return `
+    :root {
+      --xp-inline-close-size: 24px;
+      --xp-inline-close-color: #666;
+      --xp-inline-close-hover-color: #111;
+      --xp-inline-close-bg: transparent;
+      --xp-inline-close-hover-bg: rgba(0, 0, 0, 0.05);
+      --xp-inline-close-border-radius: 4px;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --xp-inline-close-color: #9ca3af;
+        --xp-inline-close-hover-color: #f9fafb;
+        --xp-inline-close-hover-bg: rgba(255, 255, 255, 0.1);
+      }
+    }
+
+    .xp-inline {
+      position: relative;
+      animation: xp-inline-enter 0.4s ease-out forwards;
+    }
+
+    @keyframes xp-inline-enter {
+      from {
+        opacity: 0;
+        transform: translateY(-8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Respect user's motion preferences */
+    @media (prefers-reduced-motion: reduce) {
+      .xp-inline {
+        animation: xp-inline-enter-reduced 0.2s ease-out forwards;
+      }
+      
+      @keyframes xp-inline-enter-reduced {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    }
+
+    .xp-inline__close {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      width: var(--xp-inline-close-size);
+      height: var(--xp-inline-close-size);
+      padding: 0;
+      border: none;
+      background: var(--xp-inline-close-bg);
+      color: var(--xp-inline-close-color);
+      font-size: 20px;
+      line-height: 1;
+      cursor: pointer;
+      border-radius: var(--xp-inline-close-border-radius);
+      transition: all 0.2s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+    }
+
+    .xp-inline__close:hover {
+      background: var(--xp-inline-close-hover-bg);
+      color: var(--xp-inline-close-hover-color);
+    }
+  `;
+}
+
+// src/modal/form-styles.ts
+function getFormStyles() {
+  return `
+    margin-top: var(--xp-form-spacing, 16px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--xp-form-gap, 16px);
+  `.trim();
+}
+function getFieldStyles() {
+  return `
+    display: flex;
+    flex-direction: column;
+    gap: var(--xp-field-gap, 6px);
+  `.trim();
+}
+function getLabelStyles() {
+  return `
+    font-size: var(--xp-label-font-size, 14px);
+    font-weight: var(--xp-label-font-weight, 500);
+    color: var(--xp-label-color, #374151);
+    line-height: 1.5;
+  `.trim();
+}
+function getRequiredStyles() {
+  return `
+    color: var(--xp-required-color, #ef4444);
+  `.trim();
+}
+function getInputStyles() {
+  return `
+    padding: var(--xp-input-padding, 8px 12px);
+    font-size: var(--xp-input-font-size, 14px);
+    line-height: 1.5;
+    color: var(--xp-input-color, #111827);
+    background-color: var(--xp-input-bg, white);
+    border: var(--xp-input-border-width, 1px) solid var(--xp-input-border-color, #d1d5db);
+    border-radius: var(--xp-input-radius, 6px);
+    transition: all 0.15s ease-in-out;
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+  `.trim();
+}
+function getInputErrorStyles() {
+  return `
+    border-color: var(--xp-input-error-border, #ef4444);
+  `.trim();
+}
+function getErrorMessageStyles() {
+  return `
+    font-size: var(--xp-error-font-size, 13px);
+    color: var(--xp-error-color, #ef4444);
+    line-height: 1.4;
+    min-height: 18px;
+  `.trim();
+}
+function getSubmitButtonStyles() {
+  return `
+    margin-top: var(--xp-submit-margin-top, 8px);
+    padding: var(--xp-submit-padding, 10px 20px);
+    font-size: var(--xp-submit-font-size, 14px);
+    font-weight: var(--xp-submit-font-weight, 500);
+    color: var(--xp-submit-color, white);
+    background-color: var(--xp-submit-bg, #2563eb);
+    border: none;
+    border-radius: var(--xp-submit-radius, 6px);
+    cursor: pointer;
+    transition: all 0.2s;
+    width: 100%;
+  `.trim();
+}
+function getSubmitButtonHoverBg() {
+  return "var(--xp-submit-bg-hover, #1d4ed8)";
+}
+function getFormStateStyles() {
+  return `
+    padding: var(--xp-state-padding, 16px);
+    border-radius: var(--xp-state-radius, 8px);
+    text-align: center;
+  `.trim();
+}
+function getSuccessStateStyles() {
+  return `
+    background-color: var(--xp-success-bg, #f0fdf4);
+    border: var(--xp-state-border-width, 1px) solid var(--xp-success-border, #86efac);
+  `.trim();
+}
+function getErrorStateStyles() {
+  return `
+    background-color: var(--xp-error-bg, #fef2f2);
+    border: var(--xp-state-border-width, 1px) solid var(--xp-error-border, #fca5a5);
+  `.trim();
+}
+function getStateTitleStyles() {
+  return `
+    font-size: var(--xp-state-title-font-size, 16px);
+    font-weight: var(--xp-state-title-font-weight, 600);
+    margin: 0 0 var(--xp-state-title-margin-bottom, 8px) 0;
+    color: var(--xp-state-title-color, #111827);
+  `.trim();
+}
+function getStateMessageStyles() {
+  return `
+    font-size: var(--xp-state-message-font-size, 14px);
+    line-height: 1.5;
+    color: var(--xp-state-message-color, #374151);
+    margin: 0;
+  `.trim();
+}
+function getStateButtonsStyles() {
+  return `
+    margin-top: var(--xp-state-buttons-margin-top, 16px);
+    display: flex;
+    gap: var(--xp-state-buttons-gap, 8px);
+    justify-content: center;
+    flex-wrap: wrap;
+  `.trim();
+}
+
+// src/modal/form-rendering.ts
+function renderForm(experienceId, config) {
+  const form = document.createElement("form");
+  form.className = "xp-modal__form";
+  form.style.cssText = getFormStyles();
+  form.dataset.xpExperienceId = experienceId;
+  form.setAttribute("novalidate", "");
+  config.fields.forEach((field) => {
+    const fieldElement = renderFormField(experienceId, field);
+    form.appendChild(fieldElement);
+  });
+  const submitButton = renderSubmitButton(config.submitButton);
+  form.appendChild(submitButton);
+  return form;
+}
+function renderFormField(experienceId, field) {
+  const wrapper = document.createElement("div");
+  wrapper.className = "xp-form__field";
+  wrapper.style.cssText = getFieldStyles();
+  if (field.label) {
+    const label = document.createElement("label");
+    label.className = "xp-form__label";
+    label.style.cssText = getLabelStyles();
+    label.htmlFor = `${experienceId}-${field.name}`;
+    label.textContent = field.label;
+    if (field.required) {
+      const required = document.createElement("span");
+      required.className = "xp-form__required";
+      required.style.cssText = getRequiredStyles();
+      required.textContent = " *";
+      required.setAttribute("aria-label", "required");
+      label.appendChild(required);
+    }
+    wrapper.appendChild(label);
+  }
+  const input = field.type === "textarea" ? document.createElement("textarea") : document.createElement("input");
+  input.className = "xp-form__input";
+  input.style.cssText = getInputStyles();
+  input.id = `${experienceId}-${field.name}`;
+  input.name = field.name;
+  if (input instanceof HTMLInputElement) {
+    input.type = field.type;
+  }
+  if (field.placeholder) {
+    input.placeholder = field.placeholder;
+  }
+  if (field.required) {
+    input.required = true;
+  }
+  if (field.pattern && input instanceof HTMLInputElement) {
+    input.setAttribute("pattern", field.pattern);
+  }
+  input.setAttribute("aria-invalid", "false");
+  input.setAttribute("aria-describedby", `${experienceId}-${field.name}-error`);
+  if (field.className) {
+    input.className += ` ${field.className}`;
+  }
+  if (field.style) {
+    Object.assign(input.style, field.style);
+  }
+  wrapper.appendChild(input);
+  const error = document.createElement("div");
+  error.className = "xp-form__error";
+  error.style.cssText = getErrorMessageStyles();
+  error.id = `${experienceId}-${field.name}-error`;
+  error.setAttribute("role", "alert");
+  error.setAttribute("aria-live", "polite");
+  wrapper.appendChild(error);
+  return wrapper;
+}
+function renderSubmitButton(buttonConfig) {
+  const button = document.createElement("button");
+  button.type = "submit";
+  button.className = "xp-form__submit xp-modal__button";
+  button.style.cssText = getSubmitButtonStyles();
+  if (buttonConfig.variant) {
+    button.className += ` xp-modal__button--${buttonConfig.variant}`;
+  }
+  if (buttonConfig.className) {
+    button.className += ` ${buttonConfig.className}`;
+  }
+  button.textContent = buttonConfig.text;
+  const hoverBg = getSubmitButtonHoverBg();
+  button.onmouseover = () => {
+    button.style.backgroundColor = hoverBg;
+  };
+  button.onmouseout = () => {
+    button.style.backgroundColor = "";
+  };
+  if (buttonConfig.style) {
+    Object.assign(button.style, buttonConfig.style);
+  }
+  return button;
+}
+function renderFormState(state, stateConfig) {
+  const stateEl = document.createElement("div");
+  stateEl.className = `xp-form__state xp-form__state--${state}`;
+  const baseStyles = getFormStateStyles();
+  const stateStyles = state === "success" ? getSuccessStateStyles() : getErrorStateStyles();
+  stateEl.style.cssText = `${baseStyles}; ${stateStyles}`;
+  if (stateConfig.title) {
+    const title = document.createElement("h3");
+    title.className = "xp-form__state-title";
+    title.style.cssText = getStateTitleStyles();
+    title.textContent = stateConfig.title;
+    stateEl.appendChild(title);
+  }
+  const message = document.createElement("div");
+  message.className = "xp-form__state-message";
+  message.style.cssText = getStateMessageStyles();
+  message.textContent = stateConfig.message;
+  stateEl.appendChild(message);
+  if (stateConfig.buttons && stateConfig.buttons.length > 0) {
+    const buttonContainer = document.createElement("div");
+    buttonContainer.className = "xp-form__state-buttons";
+    buttonContainer.style.cssText = getStateButtonsStyles();
+    stateConfig.buttons.forEach((btnConfig) => {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "xp-modal__button";
+      if (btnConfig.variant) {
+        btn.className += ` xp-modal__button--${btnConfig.variant}`;
+      }
+      if (btnConfig.className) {
+        btn.className += ` ${btnConfig.className}`;
+      }
+      btn.textContent = btnConfig.text;
+      if (btnConfig.style) {
+        Object.assign(btn.style, btnConfig.style);
+      }
+      if (btnConfig.action) {
+        btn.dataset.action = btnConfig.action;
+      }
+      if (btnConfig.dismiss) {
+        btn.dataset.dismiss = "true";
+      }
+      buttonContainer.appendChild(btn);
+    });
+    stateEl.appendChild(buttonContainer);
+  }
+  return stateEl;
+}
+
+// src/modal/form-validation.ts
+function validateField(field, value) {
+  const errors = {};
+  if (field.required && (!value || value.trim() === "")) {
+    errors[field.name] = field.errorMessage || `${field.label || field.name} is required`;
+    return { valid: false, errors };
+  }
+  if (!value || value.trim() === "") {
+    return { valid: true };
+  }
+  switch (field.type) {
+    case "email": {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(value)) {
+        errors[field.name] = field.errorMessage || "Please enter a valid email address";
+      }
+      break;
+    }
+    case "url": {
+      try {
+        new URL(value);
+      } catch {
+        errors[field.name] = field.errorMessage || "Please enter a valid URL";
+      }
+      break;
+    }
+    case "tel": {
+      const phoneRegex = /^[\d\s\-()+]+$/;
+      if (!phoneRegex.test(value)) {
+        errors[field.name] = field.errorMessage || "Please enter a valid phone number";
+      }
+      break;
+    }
+    case "number": {
+      if (Number.isNaN(Number(value))) {
+        errors[field.name] = field.errorMessage || "Please enter a valid number";
+      }
+      break;
+    }
+  }
+  if (field.pattern && value) {
+    try {
+      const regex = new RegExp(field.pattern);
+      if (!regex.test(value)) {
+        errors[field.name] = field.errorMessage || `Invalid format for ${field.label || field.name}`;
+      }
+    } catch (_error) {
+      console.warn(`Invalid regex pattern for field ${field.name}:`, field.pattern);
+    }
+  }
+  return {
+    valid: Object.keys(errors).length === 0,
+    errors: Object.keys(errors).length > 0 ? errors : void 0
+  };
+}
+function validateForm(config, data) {
+  const errors = {};
+  config.fields.forEach((field) => {
+    const value = data[field.name] || "";
+    const result = validateField(field, value);
+    if (!result.valid && result.errors) {
+      Object.assign(errors, result.errors);
+    }
+  });
+  if (config.validate) {
+    try {
+      const customResult = config.validate(data);
+      if (!customResult.valid && customResult.errors) {
+        Object.assign(errors, customResult.errors);
+      }
+    } catch (error) {
+      console.error("Custom validation function threw an error:", error);
+    }
+  }
+  return {
+    valid: Object.keys(errors).length === 0,
+    errors: Object.keys(errors).length > 0 ? errors : void 0
+  };
+}
+
+// src/modal/modal-styles.ts
+function getBackdropStyles() {
+  return `
+    position: absolute;
+    inset: 0;
+    background-color: var(--xp-modal-backdrop-bg, rgba(0, 0, 0, 0.5));
+  `.trim();
+}
+function getDialogStyles(params) {
+  return `
+    position: relative;
+    background: var(--xp-modal-dialog-bg, white);
+    border-radius: var(--xp-modal-dialog-radius, ${params.borderRadius});
+    box-shadow: var(--xp-modal-dialog-shadow, 0 4px 6px rgba(0, 0, 0, 0.1));
+    max-width: ${params.width};
+    width: ${params.maxWidth};
+    height: ${params.height};
+    max-height: ${params.maxHeight};
+    overflow-y: auto;
+    padding: ${params.padding};
+  `.trim();
+}
+function getHeroImageStyles(params) {
+  return `
+    width: 100%;
+    height: auto;
+    max-height: ${params.maxHeight}px;
+    object-fit: cover;
+    border-radius: ${params.borderRadius};
+    display: block;
+    margin: 0;
+  `.trim();
+}
+function getCloseButtonStyles() {
+  return `
+    position: absolute;
+    top: var(--xp-modal-close-top, 16px);
+    right: var(--xp-modal-close-right, 16px);
+    background: none;
+    border: none;
+    font-size: var(--xp-modal-close-size, 24px);
+    line-height: 1;
+    cursor: pointer;
+    padding: var(--xp-modal-close-padding, 4px 8px);
+    color: var(--xp-modal-close-color, #666);
+    opacity: var(--xp-modal-close-opacity, 0.7);
+    transition: opacity 0.2s;
+  `.trim();
+}
+function getCloseButtonHoverOpacity() {
+  return "var(--xp-modal-close-hover-opacity, 1)";
+}
+function getCloseButtonDefaultOpacity() {
+  return "var(--xp-modal-close-opacity, 0.7)";
+}
+function getContentWrapperStyles(padding) {
+  return `padding: ${padding};`;
+}
+function getTitleStyles() {
+  return `
+    margin: 0 0 var(--xp-modal-title-margin-bottom, 16px) 0;
+    font-size: var(--xp-modal-title-size, 20px);
+    font-weight: var(--xp-modal-title-weight, 600);
+    color: var(--xp-modal-title-color, #111);
+  `.trim();
+}
+function getMessageStyles() {
+  return `
+    margin: 0 0 var(--xp-modal-message-margin-bottom, 20px) 0;
+    font-size: var(--xp-modal-message-size, 14px);
+    line-height: var(--xp-modal-message-line-height, 1.5);
+    color: var(--xp-modal-message-color, #444);
+  `.trim();
+}
+function getButtonContainerStyles() {
+  return `
+    display: flex;
+    gap: var(--xp-modal-buttons-gap, 8px);
+    flex-wrap: wrap;
+  `.trim();
+}
+function getPrimaryButtonStyles() {
+  return `
+    padding: var(--xp-button-padding, 10px 20px);
+    font-size: var(--xp-button-font-size, 14px);
+    font-weight: var(--xp-button-font-weight, 500);
+    border-radius: var(--xp-button-radius, 6px);
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+    background: var(--xp-button-primary-bg, #2563eb);
+    color: var(--xp-button-primary-color, white);
+  `.trim();
+}
+function getPrimaryButtonHoverBg() {
+  return "var(--xp-button-primary-bg-hover, #1d4ed8)";
+}
+function getPrimaryButtonDefaultBg() {
+  return "var(--xp-button-primary-bg, #2563eb)";
+}
+function getSecondaryButtonStyles() {
+  return `
+    padding: var(--xp-button-padding, 10px 20px);
+    font-size: var(--xp-button-font-size, 14px);
+    font-weight: var(--xp-button-font-weight, 500);
+    border-radius: var(--xp-button-radius, 6px);
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+    background: var(--xp-button-secondary-bg, #f3f4f6);
+    color: var(--xp-button-secondary-color, #374151);
+  `.trim();
+}
+function getSecondaryButtonHoverBg() {
+  return "var(--xp-button-secondary-bg-hover, #e5e7eb)";
+}
+function getSecondaryButtonDefaultBg() {
+  return "var(--xp-button-secondary-bg, #f3f4f6)";
+}
+
+// src/modal/modal.ts
+var modalPlugin = (plugin, instance) => {
+  plugin.ns("experiences.modal");
+  plugin.defaults({
+    modal: {
+      dismissable: true,
+      backdropDismiss: true,
+      zIndex: 10001,
+      size: "md",
+      mobileFullscreen: false,
+      position: "center",
+      animation: "fade",
+      animationDuration: 200
+    }
+  });
+  const activeModals = /* @__PURE__ */ new Map();
+  const previouslyFocusedElement = /* @__PURE__ */ new Map();
+  const formData = /* @__PURE__ */ new Map();
+  const getFocusableElements = (container) => {
+    const selector = 'a[href], button, textarea, input, select, details, [tabindex]:not([tabindex="-1"])';
+    return Array.from(container.querySelectorAll(selector)).filter(
+      (el) => !el.hasAttribute("disabled")
+    );
+  };
+  const createFocusTrap = (container) => {
+    const focusable = getFocusableElements(container);
+    if (focusable.length === 0) return () => {
+    };
+    const firstFocusable = focusable[0];
+    const lastFocusable = focusable[focusable.length - 1];
+    const handleKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      if (e.shiftKey) {
+        if (document.activeElement === firstFocusable) {
+          e.preventDefault();
+          lastFocusable.focus();
+        }
+      } else {
+        if (document.activeElement === lastFocusable) {
+          e.preventDefault();
+          firstFocusable.focus();
+        }
+      }
+    };
+    container.addEventListener("keydown", handleKeyDown);
+    firstFocusable.focus();
+    return () => {
+      container.removeEventListener("keydown", handleKeyDown);
+    };
+  };
+  const getSizeWidth = (size) => {
+    switch (size) {
+      case "sm":
+        return "400px";
+      case "md":
+        return "600px";
+      case "lg":
+        return "800px";
+      case "fullscreen":
+        return "100vw";
+      case "auto":
+        return "auto";
+      default:
+        return "600px";
+    }
+  };
+  const isMobile = () => {
+    return typeof window !== "undefined" && window.innerWidth < 640;
+  };
+  const renderModal = (experienceId, content) => {
+    const modalConfig = instance.get("modal") || {};
+    const zIndex = modalConfig.zIndex || 10001;
+    const size = modalConfig.size || "md";
+    const position = modalConfig.position || "center";
+    const animation = modalConfig.animation || "fade";
+    const animationDuration = modalConfig.animationDuration || 200;
+    const mobileFullscreen = modalConfig.mobileFullscreen !== void 0 ? modalConfig.mobileFullscreen : size === "lg";
+    const shouldBeFullscreen = size === "fullscreen" || mobileFullscreen && isMobile();
+    const container = document.createElement("div");
+    const sizeClass = shouldBeFullscreen ? "fullscreen" : size;
+    const positionClass = position === "bottom" ? "xp-modal--bottom" : "xp-modal--center";
+    const animationClass = animation !== "none" ? `xp-modal--${animation}` : "";
+    container.className = `xp-modal xp-modal--${sizeClass} ${positionClass} ${animationClass} ${content.className || ""}`.trim();
+    container.setAttribute("data-xp-id", experienceId);
+    container.setAttribute("role", "dialog");
+    container.setAttribute("aria-modal", "true");
+    if (content.title) {
+      container.setAttribute("aria-labelledby", `xp-modal-title-${experienceId}`);
+    }
+    const alignItems = position === "bottom" ? "flex-end" : "center";
+    container.style.cssText = `position: fixed; inset: 0; z-index: ${zIndex}; display: flex; align-items: ${alignItems}; justify-content: center;`;
+    if (animation !== "none") {
+      container.style.opacity = "0";
+      container.style.transition = `opacity ${animationDuration}ms ease-in-out`;
+      if (animation === "slide-up") {
+        container.style.transform = "translateY(100%)";
+        container.style.transition += `, transform ${animationDuration}ms ease-out`;
+      }
+    }
+    if (content.style) {
+      Object.entries(content.style).forEach(([key, value]) => {
+        container.style.setProperty(key, String(value));
+      });
+    }
+    const backdrop = document.createElement("div");
+    backdrop.className = "xp-modal__backdrop";
+    backdrop.style.cssText = getBackdropStyles();
+    container.appendChild(backdrop);
+    const dialog = document.createElement("div");
+    const dialogWidth = shouldBeFullscreen ? "100%" : size === "auto" ? "none" : getSizeWidth(size);
+    const dialogHeight = shouldBeFullscreen ? "100%" : "auto";
+    const dialogMaxWidth = shouldBeFullscreen ? "100%" : size === "auto" ? "none" : "90%";
+    const dialogBorderRadius = shouldBeFullscreen ? "0" : "8px";
+    const dialogPadding = content.image ? "0" : "24px";
+    dialog.className = `xp-modal__dialog${content.image ? " xp-modal__dialog--has-image" : ""}`;
+    dialog.style.cssText = getDialogStyles({
+      width: dialogWidth,
+      maxWidth: dialogMaxWidth,
+      height: dialogHeight,
+      maxHeight: shouldBeFullscreen ? "100%" : "90vh",
+      borderRadius: dialogBorderRadius,
+      padding: dialogPadding
+    });
+    container.appendChild(dialog);
+    if (content.image) {
+      const img = document.createElement("img");
+      img.className = "xp-modal__hero-image";
+      img.src = content.image.src;
+      img.alt = content.image.alt;
+      img.loading = "lazy";
+      const maxHeight = content.image.maxHeight || (isMobile() ? 200 : 300);
+      img.style.cssText = getHeroImageStyles({
+        maxHeight,
+        borderRadius: shouldBeFullscreen ? "0" : "8px 8px 0 0"
+      });
+      dialog.appendChild(img);
+    }
+    if (modalConfig.dismissable !== false) {
+      const closeButton = document.createElement("button");
+      closeButton.className = "xp-modal__close";
+      closeButton.setAttribute("aria-label", "Close dialog");
+      closeButton.innerHTML = "&times;";
+      closeButton.style.cssText = getCloseButtonStyles();
+      closeButton.onmouseover = () => {
+        closeButton.style.opacity = getCloseButtonHoverOpacity();
+      };
+      closeButton.onmouseout = () => {
+        closeButton.style.opacity = getCloseButtonDefaultOpacity();
+      };
+      closeButton.onclick = () => removeModal(experienceId);
+      dialog.appendChild(closeButton);
+    }
+    const contentWrapper = document.createElement("div");
+    contentWrapper.className = "xp-modal__content";
+    const contentPadding = content.image ? "24px" : "24px 24px 0 24px";
+    contentWrapper.style.cssText = getContentWrapperStyles(contentPadding);
+    if (content.title) {
+      const title = document.createElement("h2");
+      title.id = `xp-modal-title-${experienceId}`;
+      title.className = "xp-modal__title";
+      title.textContent = content.title;
+      title.style.cssText = getTitleStyles();
+      contentWrapper.appendChild(title);
+    }
+    const message = document.createElement("div");
+    message.className = "xp-modal__message";
+    message.innerHTML = sanitizeHTML(content.message);
+    message.style.cssText = getMessageStyles();
+    contentWrapper.appendChild(message);
+    if (content.form) {
+      const form = renderForm(experienceId, content.form);
+      contentWrapper.appendChild(form);
+      container.__formConfig = content.form;
+      const data = {};
+      content.form.fields.forEach((field) => {
+        data[field.name] = "";
+      });
+      formData.set(experienceId, data);
+      content.form.fields.forEach((field) => {
+        const input = form.querySelector(`#${experienceId}-${field.name}`);
+        const errorEl = form.querySelector(`#${experienceId}-${field.name}-error`);
+        if (!input) return;
+        input.addEventListener("input", () => {
+          const currentData = formData.get(experienceId) || {};
+          currentData[field.name] = input.value;
+          formData.set(experienceId, currentData);
+          instance.emit("experiences:modal:form:change", {
+            experienceId,
+            field: field.name,
+            value: input.value,
+            formData: { ...currentData },
+            timestamp: Date.now()
+          });
+        });
+        input.addEventListener("blur", () => {
+          const currentData = formData.get(experienceId) || {};
+          const result = validateField(field, currentData[field.name] || "");
+          if (!result.valid && result.errors) {
+            input.style.cssText += `; ${getInputErrorStyles()}`;
+            input.setAttribute("aria-invalid", "true");
+            errorEl.textContent = result.errors[field.name] || "";
+            instance.emit("experiences:modal:form:validation", {
+              experienceId,
+              field: field.name,
+              valid: false,
+              errors: result.errors,
+              timestamp: Date.now()
+            });
+          } else {
+            input.style.cssText = input.style.cssText.replace(getInputErrorStyles(), "");
+            input.setAttribute("aria-invalid", "false");
+            errorEl.textContent = "";
+            instance.emit("experiences:modal:form:validation", {
+              experienceId,
+              field: field.name,
+              valid: true,
+              timestamp: Date.now()
+            });
+          }
+        });
+      });
+      form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        if (!content.form) return;
+        const currentData = formData.get(experienceId) || {};
+        const result = validateForm(content.form, currentData);
+        if (!result.valid && result.errors) {
+          content.form.fields.forEach((field) => {
+            if (result.errors?.[field.name]) {
+              const input = form.querySelector(
+                `#${experienceId}-${field.name}`
+              );
+              const errorEl = form.querySelector(
+                `#${experienceId}-${field.name}-error`
+              );
+              if (input) {
+                input.style.cssText += `; ${getInputErrorStyles()}`;
+                input.setAttribute("aria-invalid", "true");
+              }
+              if (errorEl) {
+                errorEl.textContent = result.errors[field.name] || "";
+              }
+            }
+          });
+          instance.emit("experiences:modal:form:validation", {
+            experienceId,
+            valid: false,
+            errors: result.errors,
+            timestamp: Date.now()
+          });
+          return;
+        }
+        const submitButton = form.querySelector('button[type="submit"]');
+        if (submitButton) {
+          submitButton.disabled = true;
+          submitButton.textContent = "Submitting...";
+        }
+        instance.emit("experiences:modal:form:submit", {
+          experienceId,
+          formData: { ...currentData },
+          timestamp: Date.now()
+        });
+      });
+    } else if (content.buttons && content.buttons.length > 0) {
+      const buttonContainer = document.createElement("div");
+      buttonContainer.className = "xp-modal__buttons";
+      buttonContainer.style.cssText = getButtonContainerStyles();
+      content.buttons.forEach((button) => {
+        const btn = document.createElement("button");
+        btn.className = `xp-modal__button xp-modal__button--${button.variant || "secondary"}`;
+        btn.textContent = button.text;
+        if (button.variant === "primary") {
+          btn.style.cssText = getPrimaryButtonStyles();
+          btn.onmouseover = () => {
+            btn.style.background = getPrimaryButtonHoverBg();
+          };
+          btn.onmouseout = () => {
+            btn.style.background = getPrimaryButtonDefaultBg();
+          };
+        } else {
+          btn.style.cssText = getSecondaryButtonStyles();
+          btn.onmouseover = () => {
+            btn.style.background = getSecondaryButtonHoverBg();
+          };
+          btn.onmouseout = () => {
+            btn.style.background = getSecondaryButtonDefaultBg();
+          };
+        }
+        btn.onclick = () => {
+          instance.emit("experiences:action", {
+            experienceId,
+            action: button.action,
+            button,
+            timestamp: Date.now()
+          });
+          if (button.dismiss) {
+            removeModal(experienceId);
+          }
+          if (button.url) {
+            window.location.href = button.url;
+          }
+        };
+        buttonContainer.appendChild(btn);
+      });
+      contentWrapper.appendChild(buttonContainer);
+    }
+    dialog.appendChild(contentWrapper);
+    if (modalConfig.backdropDismiss !== false) {
+      backdrop.onclick = () => removeModal(experienceId);
+    }
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && modalConfig.dismissable !== false) {
+        removeModal(experienceId);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    container.__cleanupEscape = () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+    return container;
+  };
+  const showModal = (experience) => {
+    const experienceId = experience.id;
+    if (activeModals.has(experienceId)) return;
+    if (activeModals.size > 0) {
+      const existingIds = Array.from(activeModals.keys());
+      for (const id of existingIds) {
+        removeModal(id);
+      }
+    }
+    previouslyFocusedElement.set(experienceId, document.activeElement);
+    const modal = renderModal(experienceId, experience.content);
+    document.body.appendChild(modal);
+    activeModals.set(experienceId, modal);
+    const modalConfig = instance.get("modal") || {};
+    const animation = modalConfig.animation || "fade";
+    if (animation !== "none") {
+      requestAnimationFrame(() => {
+        modal.style.opacity = "1";
+        if (animation === "slide-up") {
+          modal.style.transform = "translateY(0)";
+        }
+      });
+    }
+    const cleanupFocusTrap = createFocusTrap(modal);
+    modal.__cleanupFocusTrap = cleanupFocusTrap;
+    instance.emit("experiences:shown", {
+      experienceId,
+      timestamp: Date.now()
+    });
+    instance.emit("trigger:modal", {
+      experienceId,
+      timestamp: Date.now(),
+      shown: true
+    });
+  };
+  const removeModal = (experienceId) => {
+    const modal = activeModals.get(experienceId);
+    if (!modal) return;
+    if (modal.__cleanupFocusTrap) {
+      modal.__cleanupFocusTrap();
+    }
+    if (modal.__cleanupEscape) {
+      modal.__cleanupEscape();
+    }
+    const previousElement = previouslyFocusedElement.get(experienceId);
+    if (previousElement && document.body.contains(previousElement)) {
+      previousElement.focus();
+    }
+    previouslyFocusedElement.delete(experienceId);
+    modal.remove();
+    activeModals.delete(experienceId);
+    instance.emit("experiences:dismissed", {
+      experienceId,
+      timestamp: Date.now()
+    });
+  };
+  const isShowing = (experienceId) => {
+    if (experienceId) {
+      return activeModals.has(experienceId);
+    }
+    return activeModals.size > 0;
+  };
+  const showFormState = (experienceId, state) => {
+    const modal = activeModals.get(experienceId);
+    if (!modal) return;
+    const form = modal.querySelector(".xp-modal__form");
+    if (!form) return;
+    const formConfig = modal.__formConfig;
+    if (!formConfig) return;
+    const stateConfig = state === "success" ? formConfig.successState : formConfig.errorState;
+    if (!stateConfig) return;
+    const stateEl = renderFormState(state, stateConfig);
+    form.replaceWith(stateEl);
+    instance.emit("experiences:modal:form:state", {
+      experienceId,
+      state,
+      timestamp: Date.now()
+    });
+  };
+  const resetForm = (experienceId) => {
+    const modal = activeModals.get(experienceId);
+    if (!modal) return;
+    const form = modal.querySelector(".xp-modal__form");
+    if (!form) return;
+    form.reset();
+    const data = formData.get(experienceId);
+    if (data) {
+      Object.keys(data).forEach((key) => {
+        data[key] = "";
+      });
+    }
+    const errors = form.querySelectorAll(".xp-form__error");
+    errors.forEach((error) => {
+      error.textContent = "";
+    });
+    const inputs = form.querySelectorAll(".xp-form__input");
+    inputs.forEach((input) => {
+      input.setAttribute("aria-invalid", "false");
+      input.style.cssText = input.style.cssText.replace(getInputErrorStyles(), "");
+    });
+  };
+  const getFormData = (experienceId) => {
+    return formData.get(experienceId) || null;
+  };
+  plugin.expose({
+    modal: {
+      show: showModal,
+      remove: removeModal,
+      isShowing,
+      showFormState,
+      resetForm,
+      getFormData
+    }
+  });
+  instance.on("experiences:evaluated", (data) => {
+    const { decision, experience } = data;
+    if (decision.show && decision.experienceId && experience) {
+      if (experience.type === "modal") {
+        showModal(experience);
+      }
+    }
+  });
+  instance.on("sdk:destroy", () => {
+    activeModals.forEach((_, id) => {
+      removeModal(id);
+    });
+  });
+};
+function respectsDNT() {
+  if (typeof navigator === "undefined") return false;
+  return navigator.doNotTrack === "1" || navigator.msDoNotTrack === "1" || window.doNotTrack === "1";
+}
+function createVisitsEvent(isFirstVisit, totalVisits, sessionVisits, firstVisitTime, lastVisitTime, timestamp) {
+  return {
+    isFirstVisit,
+    totalVisits,
+    sessionVisits,
+    firstVisitTime,
+    lastVisitTime,
+    timestamp
+  };
+}
+var pageVisitsPlugin = (plugin, instance, config) => {
+  plugin.ns("pageVisits");
+  plugin.defaults({
+    pageVisits: {
+      enabled: true,
+      respectDNT: true,
+      sessionKey: "pageVisits:session",
+      totalKey: "pageVisits:total",
+      ttl: void 0,
+      autoIncrement: true
+    }
+  });
+  if (!instance.storage) {
+    console.warn("[PageVisits] Storage plugin not found, auto-loading...");
+    instance.use(storagePlugin);
+  }
+  const sdkInstance = instance;
+  let sessionCount = 0;
+  let totalCount = 0;
+  let firstVisitTime;
+  let lastVisitTime;
+  let isFirstVisitFlag = false;
+  let initialized = false;
+  function loadData() {
+    const sessionKey = config.get("pageVisits.sessionKey") ?? "pageVisits:session";
+    const totalKey = config.get("pageVisits.totalKey") ?? "pageVisits:total";
+    const storedSession = sdkInstance.storage.get(sessionKey, {
+      backend: "sessionStorage"
+    });
+    sessionCount = storedSession ?? 0;
+    const storedTotal = sdkInstance.storage.get(totalKey, {
+      backend: "localStorage"
+    });
+    if (storedTotal) {
+      totalCount = storedTotal.count ?? 0;
+      firstVisitTime = storedTotal.first;
+      lastVisitTime = storedTotal.last;
+      isFirstVisitFlag = false;
+    } else {
+      totalCount = 0;
+      firstVisitTime = void 0;
+      lastVisitTime = void 0;
+      isFirstVisitFlag = true;
+    }
+  }
+  function saveData() {
+    const sessionKey = config.get("pageVisits.sessionKey") ?? "pageVisits:session";
+    const totalKey = config.get("pageVisits.totalKey") ?? "pageVisits:total";
+    const ttl = config.get("pageVisits.ttl");
+    sdkInstance.storage.set(sessionKey, sessionCount, {
+      backend: "sessionStorage"
+    });
+    const totalData = {
+      count: totalCount,
+      first: firstVisitTime ?? Date.now(),
+      last: lastVisitTime ?? Date.now()
+    };
+    sdkInstance.storage.set(totalKey, totalData, {
+      backend: "localStorage",
+      ...ttl && { ttl }
+    });
+  }
+  function increment() {
+    if (!initialized) {
+      loadData();
+      initialized = true;
+    }
+    sessionCount += 1;
+    totalCount += 1;
+    const now = Date.now();
+    if (isFirstVisitFlag) {
+      firstVisitTime = now;
+    }
+    lastVisitTime = now;
+    saveData();
+    const event = createVisitsEvent(
+      isFirstVisitFlag,
+      totalCount,
+      sessionCount,
+      firstVisitTime,
+      lastVisitTime,
+      now
+    );
+    plugin.emit("pageVisits:incremented", event);
+    if (isFirstVisitFlag) {
+      isFirstVisitFlag = false;
+    }
+  }
+  function reset() {
+    const sessionKey = config.get("pageVisits.sessionKey") ?? "pageVisits:session";
+    const totalKey = config.get("pageVisits.totalKey") ?? "pageVisits:total";
+    sdkInstance.storage.remove(sessionKey, { backend: "sessionStorage" });
+    sdkInstance.storage.remove(totalKey, { backend: "localStorage" });
+    sessionCount = 0;
+    totalCount = 0;
+    firstVisitTime = void 0;
+    lastVisitTime = void 0;
+    isFirstVisitFlag = false;
+    initialized = false;
+    plugin.emit("pageVisits:reset");
+  }
+  function getState() {
+    return createVisitsEvent(
+      isFirstVisitFlag,
+      totalCount,
+      sessionCount,
+      firstVisitTime,
+      lastVisitTime,
+      Date.now()
+    );
+  }
+  function initialize() {
+    const enabled = config.get("pageVisits.enabled") ?? true;
+    const respectDNTConfig = config.get("pageVisits.respectDNT") ?? true;
+    const autoIncrement = config.get("pageVisits.autoIncrement") ?? true;
+    if (respectDNTConfig && respectsDNT()) {
+      plugin.emit("pageVisits:disabled", { reason: "dnt" });
+      return;
+    }
+    if (!enabled) {
+      plugin.emit("pageVisits:disabled", { reason: "config" });
+      return;
+    }
+    if (autoIncrement) {
+      increment();
+    }
+  }
+  instance.on("sdk:ready", initialize);
+  plugin.expose({
+    pageVisits: {
+      getTotalCount: () => totalCount,
+      getSessionCount: () => sessionCount,
+      isFirstVisit: () => isFirstVisitFlag,
+      getFirstVisitTime: () => firstVisitTime,
+      getLastVisitTime: () => lastVisitTime,
+      increment,
+      reset,
+      getState
+    }
+  });
+};
+
+// src/scroll-depth/scroll-depth.ts
+function detectDevice() {
+  if (typeof window === "undefined") return "desktop";
+  const ua = navigator.userAgent;
+  const isMobile = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
+  const isTablet = /iPad|Android(?!.*Mobile)/i.test(ua);
+  const width = window.innerWidth;
+  if (width < 768) return "mobile";
+  if (width < 1024) return "tablet";
+  if (isMobile) return "mobile";
+  if (isTablet) return "tablet";
+  return "desktop";
+}
+function throttle(func, wait) {
+  let timeout = null;
+  let previous = 0;
+  return function throttled(...args) {
+    const now = Date.now();
+    const remaining = wait - (now - previous);
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      func(...args);
+    } else if (!timeout) {
+      timeout = setTimeout(() => {
+        previous = Date.now();
+        timeout = null;
+        func(...args);
+      }, remaining);
+    }
+  };
+}
+function calculateScrollPercent(includeViewportHeight) {
+  if (typeof document === "undefined") return 0;
+  const scrollingElement = document.scrollingElement || document.documentElement;
+  const scrollTop = scrollingElement.scrollTop;
+  const scrollHeight = scrollingElement.scrollHeight;
+  const clientHeight = scrollingElement.clientHeight;
+  if (scrollHeight <= clientHeight) {
+    return 100;
+  }
+  if (includeViewportHeight) {
+    return Math.min((scrollTop + clientHeight) / scrollHeight * 100, 100);
+  }
+  return Math.min(scrollTop / (scrollHeight - clientHeight) * 100, 100);
+}
+function calculateEngagementScore(velocity, fastScrollThreshold, directionChanges, timeScrollingUp, totalTime) {
+  const velocityScore = Math.min(velocity / fastScrollThreshold * 50, 50);
+  const directionScore = Math.min(directionChanges / 5 * 30, 30);
+  const seekingScore = Math.min(timeScrollingUp / totalTime * 20, 20);
+  return Math.max(0, 100 - (velocityScore + directionScore + seekingScore));
+}
+var scrollDepthPlugin = (plugin, instance, config) => {
+  plugin.ns("experiences.scrollDepth");
+  plugin.defaults({
+    scrollDepth: {
+      thresholds: [25, 50, 75, 100],
+      throttle: 100,
+      includeViewportHeight: true,
+      recalculateOnResize: true,
+      trackAdvancedMetrics: false,
+      fastScrollVelocityThreshold: 3,
+      disableOnMobile: false
+    }
+  });
+  const scrollConfig = config.get("scrollDepth");
+  if (!scrollConfig) return;
+  const cfg = scrollConfig;
+  const device = detectDevice();
+  if (cfg.disableOnMobile && device === "mobile") {
+    return;
+  }
+  let maxScrollPercent = 0;
+  const triggeredThresholds = /* @__PURE__ */ new Set();
+  const pageLoadTime = Date.now();
+  let lastScrollPosition = 0;
+  let lastScrollTime = Date.now();
+  let lastScrollDirection = null;
+  let directionChangesSinceLastThreshold = 0;
+  let timeScrollingUp = 0;
+  const thresholdTimes = /* @__PURE__ */ new Map();
+  function handleScroll() {
+    const currentPercent = calculateScrollPercent(cfg.includeViewportHeight ?? true);
+    const now = Date.now();
+    const scrollingElement = document.scrollingElement || document.documentElement;
+    const currentPosition = scrollingElement.scrollTop;
+    let velocity = 0;
+    if (cfg.trackAdvancedMetrics) {
+      const timeDelta = now - lastScrollTime;
+      const positionDelta = currentPosition - lastScrollPosition;
+      velocity = timeDelta > 0 ? Math.abs(positionDelta) / timeDelta : 0;
+      const currentDirection = positionDelta > 0 ? "down" : positionDelta < 0 ? "up" : lastScrollDirection;
+      if (currentDirection && lastScrollDirection && currentDirection !== lastScrollDirection) {
+        directionChangesSinceLastThreshold++;
+      }
+      if (currentDirection === "up" && timeDelta > 0) {
+        timeScrollingUp += timeDelta;
+      }
+      lastScrollDirection = currentDirection;
+      lastScrollPosition = currentPosition;
+      lastScrollTime = now;
+    }
+    maxScrollPercent = Math.max(maxScrollPercent, currentPercent);
+    for (const threshold of cfg.thresholds || []) {
+      if (currentPercent >= threshold && !triggeredThresholds.has(threshold)) {
+        triggeredThresholds.add(threshold);
+        if (cfg.trackAdvancedMetrics) {
+          thresholdTimes.set(threshold, now - pageLoadTime);
+        }
+        const eventPayload = {
+          triggered: true,
+          timestamp: now,
+          percent: Math.round(currentPercent * 100) / 100,
+          maxPercent: Math.round(maxScrollPercent * 100) / 100,
+          threshold,
+          thresholdsCrossed: Array.from(triggeredThresholds).sort((a, b) => a - b),
+          device
+        };
+        if (cfg.trackAdvancedMetrics) {
+          const fastScrollThreshold = cfg.fastScrollVelocityThreshold || 3;
+          const isFastScrolling = velocity > fastScrollThreshold;
+          const engagementScore = calculateEngagementScore(
+            velocity,
+            fastScrollThreshold,
+            directionChangesSinceLastThreshold,
+            timeScrollingUp,
+            now - pageLoadTime
+          );
+          eventPayload.advanced = {
+            timeToThreshold: now - pageLoadTime,
+            velocity: Math.round(velocity * 1e3) / 1e3,
+            // Round to 3 decimals
+            isFastScrolling,
+            directionChanges: directionChangesSinceLastThreshold,
+            timeScrollingUp,
+            engagementScore: Math.round(engagementScore)
+          };
+          directionChangesSinceLastThreshold = 0;
+        }
+        instance.emit("trigger:scrollDepth", eventPayload);
+      }
+    }
+  }
+  const throttledScrollHandler = throttle(handleScroll, cfg.throttle || 100);
+  const throttledResizeHandler = throttle(handleScroll, cfg.throttle || 100);
+  function initialize() {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+    window.addEventListener("scroll", throttledScrollHandler, { passive: true });
+    if (cfg.recalculateOnResize) {
+      window.addEventListener("resize", throttledResizeHandler, { passive: true });
+    }
+  }
+  function cleanup() {
+    window.removeEventListener("scroll", throttledScrollHandler);
+    window.removeEventListener("resize", throttledResizeHandler);
+  }
+  instance.on("sdk:destroy", () => {
+    cleanup();
+  });
+  plugin.expose({
+    scrollDepth: {
+      /**
+       * Get the maximum scroll percentage reached during the session
+       */
+      getMaxPercent: () => maxScrollPercent,
+      /**
+       * Get the current scroll percentage
+       */
+      getCurrentPercent: () => calculateScrollPercent(cfg.includeViewportHeight ?? true),
+      /**
+       * Get all thresholds that have been crossed
+       */
+      getThresholdsCrossed: () => Array.from(triggeredThresholds).sort((a, b) => a - b),
+      /**
+       * Get the detected device type
+       */
+      getDevice: () => device,
+      /**
+       * Get advanced metrics (only available when trackAdvancedMetrics is enabled)
+       */
+      getAdvancedMetrics: () => {
+        if (!cfg.trackAdvancedMetrics) return null;
+        const now = Date.now();
+        return {
+          timeOnPage: now - pageLoadTime,
+          directionChanges: directionChangesSinceLastThreshold,
+          timeScrollingUp,
+          thresholdTimes: Object.fromEntries(thresholdTimes)
+        };
+      },
+      /**
+       * Reset scroll depth tracking
+       * Clears all triggered thresholds, max scroll, and advanced metrics
+       */
+      reset: () => {
+        maxScrollPercent = 0;
+        triggeredThresholds.clear();
+        directionChangesSinceLastThreshold = 0;
+        timeScrollingUp = 0;
+        thresholdTimes.clear();
+        lastScrollDirection = null;
+      }
+    }
+  });
+  if (typeof window !== "undefined") {
+    setTimeout(initialize, 0);
+  }
+  return () => {
+    cleanup();
+  };
+};
+
+// src/time-delay/time-delay.ts
+function calculateElapsed(startTime, pausedDuration) {
+  return Date.now() - startTime - pausedDuration;
+}
+function isDocumentHidden() {
+  if (typeof document === "undefined") return false;
+  return document.hidden || false;
+}
+function createTimeDelayEvent(startTime, pausedDuration, wasPaused, visibilityChanges) {
+  const timestamp = Date.now();
+  const elapsed = timestamp - startTime;
+  const activeElapsed = elapsed - pausedDuration;
+  return {
+    timestamp,
+    elapsed,
+    activeElapsed,
+    wasPaused,
+    visibilityChanges
+  };
+}
+var timeDelayPlugin = (plugin, instance, config) => {
+  plugin.ns("experiences.timeDelay");
+  plugin.defaults({
+    timeDelay: {
+      delay: 0,
+      pauseWhenHidden: true
+    }
+  });
+  const timeDelayConfig = config.get("timeDelay");
+  if (!timeDelayConfig) return;
+  const delay = timeDelayConfig.delay ?? 0;
+  const pauseWhenHidden = timeDelayConfig.pauseWhenHidden ?? true;
+  if (delay <= 0) return;
+  const startTime = Date.now();
+  let triggered = false;
+  let paused = false;
+  let pausedDuration = 0;
+  let lastPauseTime = 0;
+  let visibilityChanges = 0;
+  let timer = null;
+  let visibilityListener = null;
+  function trigger() {
+    if (triggered) return;
+    triggered = true;
+    const eventPayload = createTimeDelayEvent(
+      startTime,
+      pausedDuration,
+      visibilityChanges > 0,
+      visibilityChanges
+    );
+    instance.emit("trigger:timeDelay", eventPayload);
+    cleanup();
+  }
+  function scheduleTimer(remainingDelay) {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      trigger();
+    }, remainingDelay);
+  }
+  function handleVisibilityChange() {
+    const hidden = isDocumentHidden();
+    if (hidden && !paused) {
+      paused = true;
+      lastPauseTime = Date.now();
+      visibilityChanges++;
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    } else if (!hidden && paused) {
+      paused = false;
+      const pauseDuration = Date.now() - lastPauseTime;
+      pausedDuration += pauseDuration;
+      visibilityChanges++;
+      const elapsed = calculateElapsed(startTime, pausedDuration);
+      const remaining = delay - elapsed;
+      if (remaining > 0) {
+        scheduleTimer(remaining);
+      } else {
+        trigger();
+      }
+    }
+  }
+  function cleanup() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    if (visibilityListener && typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", visibilityListener);
+      visibilityListener = null;
+    }
+  }
+  function initialize() {
+    if (pauseWhenHidden && isDocumentHidden()) {
+      paused = true;
+      lastPauseTime = Date.now();
+      visibilityChanges++;
+    } else {
+      scheduleTimer(delay);
+    }
+    if (pauseWhenHidden && typeof document !== "undefined") {
+      visibilityListener = handleVisibilityChange;
+      document.addEventListener("visibilitychange", visibilityListener);
+    }
+  }
+  plugin.expose({
+    timeDelay: {
+      getElapsed: () => {
+        return Date.now() - startTime;
+      },
+      getActiveElapsed: () => {
+        let currentPausedDuration = pausedDuration;
+        if (paused) {
+          currentPausedDuration += Date.now() - lastPauseTime;
+        }
+        return calculateElapsed(startTime, currentPausedDuration);
+      },
+      getRemaining: () => {
+        if (triggered) return 0;
+        const elapsed = calculateElapsed(startTime, pausedDuration);
+        const remaining = delay - elapsed;
+        return Math.max(0, remaining);
+      },
+      isPaused: () => paused,
+      isTriggered: () => triggered,
+      reset: () => {
+        triggered = false;
+        paused = false;
+        pausedDuration = 0;
+        lastPauseTime = 0;
+        visibilityChanges = 0;
+        cleanup();
+        initialize();
+      }
+    }
+  });
+  initialize();
+  instance.on("sdk:destroy", () => {
+    cleanup();
+  });
+};
+
+export { bannerPlugin, debugPlugin, exitIntentPlugin, frequencyPlugin, inlinePlugin, insertContent, modalPlugin, pageVisitsPlugin, removeContent, scrollDepthPlugin, timeDelayPlugin };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map