@amplifyup/sdk 0.1.16 → 0.1.18

package/dist/AmplifyRenderer.mjs

@@ -366,6 +366,9 @@ var AmplifyUpSDK = class {
     this.attachedEventListeners = [];
     this.trackingIntervals = [];
     this.trackingCleanup = null;
+    this.componentViewObservers = [];
+    this.componentViewSeen = /* @__PURE__ */ new Set();
+    this.pageEngagementActive = false;
     this.adapter = adapter || new AWSAdapter();
     if (typeof window !== "undefined") {
       this.isVisualEditorMode = this.detectVisualEditorMode();
@@ -538,6 +541,7 @@ var AmplifyUpSDK = class {
           this.initialPageSent = true;
           const url = window.location.pathname;
           this.page(url);
+          this.setupPageEngagement();
         }
       }
       if (this.config?.debug && this.initialized) {
@@ -570,6 +574,168 @@ var AmplifyUpSDK = class {
     }
     this.trackingIntervals.forEach((id) => clearInterval(id));
     this.trackingIntervals = [];
+    this.cleanupComponentViewTracking();
+    this.pageEngagementActive = false;
+  }
+  /** Current page path for engagement attribution. */
+  currentPath() {
+    if (typeof window === "undefined") return "/";
+    return window.location.pathname || "/";
+  }
+  /**
+   * Automatic page-level Scroll Depth + Time on Page (dwell heartbeat).
+   */
+  setupPageEngagement() {
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+    if (this.isPreviewMode() || this.pageEngagementActive) return;
+    this.pageEngagementActive = true;
+    const milestones = [25, 50, 75, 100];
+    const reached = /* @__PURE__ */ new Set();
+    let visibleMs = 0;
+    let visibleSince = document.visibilityState === "visible" ? Date.now() : null;
+    let lastDwellSecondsSent = 0;
+    let scrollRaf = null;
+    const path = () => this.currentPath();
+    const measureScrollPercent = () => {
+      const doc = document.documentElement;
+      const body = document.body;
+      const scrollTop = window.scrollY || doc.scrollTop || body?.scrollTop || 0;
+      const scrollHeight = Math.max(
+        doc.scrollHeight,
+        body?.scrollHeight || 0,
+        doc.offsetHeight,
+        body?.offsetHeight || 0
+      );
+      const clientHeight = window.innerHeight || doc.clientHeight || 0;
+      const traversable = Math.max(scrollHeight - clientHeight, 0);
+      if (traversable <= 0) return 100;
+      return Math.min(100, Math.round(scrollTop / traversable * 100));
+    };
+    const checkScroll = () => {
+      if (this.isPreviewMode()) return;
+      const pct = measureScrollPercent();
+      for (const milestone of milestones) {
+        if (pct >= milestone && !reached.has(milestone)) {
+          reached.add(milestone);
+          this.track("Scroll Depth", {
+            percentage: milestone,
+            path: path()
+          });
+        }
+      }
+    };
+    const onScroll = () => {
+      if (scrollRaf != null) return;
+      scrollRaf = window.requestAnimationFrame(() => {
+        scrollRaf = null;
+        checkScroll();
+      });
+    };
+    const accumulateVisible = () => {
+      if (visibleSince == null) return;
+      visibleMs += Date.now() - visibleSince;
+      visibleSince = Date.now();
+    };
+    const emitDwell = (force = false) => {
+      if (this.isPreviewMode()) return;
+      accumulateVisible();
+      const seconds = Math.floor(visibleMs / 1e3);
+      if (seconds <= 0) return;
+      if (!force && seconds <= lastDwellSecondsSent) return;
+      lastDwellSecondsSent = seconds;
+      this.track("Time on Page", {
+        seconds,
+        path: path()
+      });
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === "visible") {
+        visibleSince = Date.now();
+      } else {
+        emitDwell(true);
+        visibleSince = null;
+      }
+    };
+    const onPageHide = () => {
+      emitDwell(true);
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    document.addEventListener("visibilitychange", onVisibility);
+    window.addEventListener("pagehide", onPageHide);
+    checkScroll();
+    const heartbeat = setInterval(() => {
+      if (document.visibilityState === "visible") {
+        emitDwell(false);
+      }
+    }, 15e3);
+    this.trackingIntervals.push(heartbeat);
+    const previousCleanup = this.trackingCleanup;
+    this.trackingCleanup = () => {
+      window.removeEventListener("scroll", onScroll);
+      document.removeEventListener("visibilitychange", onVisibility);
+      window.removeEventListener("pagehide", onPageHide);
+      if (scrollRaf != null) {
+        window.cancelAnimationFrame(scrollRaf);
+        scrollRaf = null;
+      }
+      previousCleanup?.();
+      this.pageEngagementActive = false;
+    };
+    if (this.config?.debug) {
+      console.log("[AmplifyUp SDK] Page engagement tracking enabled");
+    }
+  }
+  /**
+   * Automatic Component View when component hosts enter the viewport.
+   */
+  setupComponentViewTracking() {
+    if (typeof document === "undefined" || typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    if (this.isPreviewMode()) return;
+    this.cleanupComponentViewTracking();
+    const hosts = document.querySelectorAll("[data-amplifyup-component]");
+    if (hosts.length === 0) {
+      if (this.config?.debug) {
+        console.log("[AmplifyUp SDK] No component hosts found for Component View");
+      }
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return;
+          const el = entry.target;
+          const componentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
+          if (!componentId || this.componentViewSeen.has(componentId)) {
+            observer.unobserve(el);
+            return;
+          }
+          this.componentViewSeen.add(componentId);
+          const componentName = el.getAttribute("data-component-name") || void 0;
+          this.track("Component View", {
+            componentId,
+            componentName,
+            path: this.currentPath()
+          });
+          observer.unobserve(el);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    hosts.forEach((host) => observer.observe(host));
+    this.componentViewObservers.push(observer);
+    if (this.config?.debug) {
+      console.log(
+        "[AmplifyUp SDK] Component View tracking enabled for",
+        hosts.length,
+        "hosts"
+      );
+    }
+  }
+  cleanupComponentViewTracking() {
+    this.componentViewObservers.forEach((obs) => obs.disconnect());
+    this.componentViewObservers = [];
   }
   /**
    * Track a page view
@@ -609,9 +775,13 @@ var AmplifyUpSDK = class {
       instanceId,
       trackingId: this.config?.trackingId,
       url: typeof window !== "undefined" ? window.location.href : void 0,
+      path: properties?.path || (typeof window !== "undefined" ? window.location.pathname : void 0),
       // Timestamp is included in event payload
       ...properties
     };
+    if (!trackProperties.path && typeof window !== "undefined") {
+      trackProperties.path = window.location.pathname;
+    }
     this.adapter.track(eventName, trackProperties);
   }
   /**
@@ -900,6 +1070,13 @@ Available Console Commands:
     if (pageConfig?.eventTracking) {
       this.setupEventTracking(pageConfig.eventTracking);
     }
+    if (typeof window !== "undefined") {
+      window.setTimeout(() => this.setupComponentViewTracking(), 150);
+      window.setTimeout(() => {
+        this.setupComponentViewTracking();
+        this.refreshEventTracking();
+      }, 800);
+    }
     return pageConfig;
   }
   /**
@@ -907,10 +1084,10 @@ Available Console Commands:
    */
   setupEventTracking(eventConfig) {
     if (typeof document === "undefined") return;
-    this.cleanupEventTracking();
-    this.eventTrackingConfig = eventConfig;
+    this.detachEventListeners();
+    this.eventTrackingConfig = Array.isArray(eventConfig) ? [...eventConfig] : [];
     if (this.config?.debug) {
-      console.log("[AmplifyUp SDK] Setting up event tracking:", eventConfig.length, "events");
+      console.log("[AmplifyUp SDK] Setting up event tracking:", this.eventTrackingConfig.length, "events");
     }
     if (document.readyState === "loading") {
       document.addEventListener("DOMContentLoaded", () => this.attachEventListeners());
@@ -925,19 +1102,35 @@ Available Console Commands:
     if (typeof document === "undefined") return;
     this.eventTrackingConfig.forEach((eventConfig) => {
       if (eventConfig.enabled === false) return;
+      if (!eventConfig.selector) {
+        if (this.config?.debug) {
+          console.warn(`[AmplifyUp SDK] Event ${eventConfig.eventName} has no selector, skipping`);
+        }
+        return;
+      }
       let targetElements = [];
-      if (eventConfig.selector) {
-        try {
-          targetElements = document.querySelectorAll(eventConfig.selector);
-        } catch (e) {
+      try {
+        const escapeAttr = (value) => typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(value) : value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+        const scopeRoot = eventConfig.componentId ? document.querySelector(
+          `[data-amplifyup-component="${escapeAttr(eventConfig.componentId)}"], [data-component-id="${escapeAttr(eventConfig.componentId)}"]`
+        ) : document;
+        if (!scopeRoot) {
           if (this.config?.debug) {
-            console.warn(`[AmplifyUp SDK] Invalid selector: ${eventConfig.selector}`, e);
+            console.log(
+              `[AmplifyUp SDK] Component host not found for ${eventConfig.componentId}`
+            );
           }
           return;
         }
-      } else {
+        targetElements = Array.from(
+          scopeRoot.querySelectorAll(eventConfig.selector)
+        );
+        if (scopeRoot instanceof Element && scopeRoot !== document.documentElement && scopeRoot.matches?.(eventConfig.selector)) {
+          targetElements.unshift(scopeRoot);
+        }
+      } catch (e) {
         if (this.config?.debug) {
-          console.warn(`[AmplifyUp SDK] Event ${eventConfig.eventName} has no selector, skipping`);
+          console.warn(`[AmplifyUp SDK] Invalid selector: ${eventConfig.selector}`, e);
         }
         return;
       }
@@ -993,8 +1186,15 @@ Available Console Commands:
   handleTrackedEvent(event, config, element) {
     const properties = {
       eventType: config.eventType,
-      selector: config.selector
+      selector: config.selector,
+      path: this.currentPath()
     };
+    if (config.componentId) {
+      properties.componentId = config.componentId;
+    }
+    if (config.componentName) {
+      properties.componentName = config.componentName;
+    }
     if (config.properties && config.properties.length > 0) {
       config.properties.forEach((prop) => {
         const dataAttrValue = element.getAttribute(`data-${prop}`);
@@ -1065,9 +1265,9 @@ Available Console Commands:
     element._amplifyupViewObserver = observer;
   }
   /**
-   * Clean up all attached event listeners
+   * Detach listeners/observers without clearing the saved event config.
    */
-  cleanupEventTracking() {
+  detachEventListeners() {
     this.attachedEventListeners.forEach(({ element, eventType, handler }) => {
       element.removeEventListener(eventType, handler);
     });
@@ -1081,6 +1281,12 @@ Available Console Commands:
         }
       });
     }
+  }
+  /**
+   * Clean up all attached event listeners and clear config
+   */
+  cleanupEventTracking() {
+    this.detachEventListeners();
     this.eventTrackingConfig = [];
     if (this.config?.debug) {
       console.log("[AmplifyUp SDK] Cleaned up event tracking");
@@ -1090,11 +1296,13 @@ Available Console Commands:
    * Manually trigger event tracking setup (useful after dynamic content loads)
    */
   refreshEventTracking() {
-    if (this.eventTrackingConfig.length > 0) {
-      this.cleanupEventTracking();
-      const config = [...this.eventTrackingConfig];
-      this.eventTrackingConfig = config;
-      this.attachEventListeners();
+    if (this.eventTrackingConfig.length === 0) return;
+    const config = [...this.eventTrackingConfig];
+    this.detachEventListeners();
+    this.eventTrackingConfig = config;
+    this.attachEventListeners();
+    if (this.config?.debug) {
+      console.log("[AmplifyUp SDK] Refreshed event tracking:", config.length, "events");
     }
   }
   /** Origins allowed to send Composer postMessage commands to the SDK. */
@@ -1205,6 +1413,10 @@ Available Console Commands:
           this.clearComposerDragHighlight();
           return;
         }
+        if (event.data?.type === "CLEAR_SELECTION") {
+          this.clearComposerSelection();
+          return;
+        }
         if (event.data?.type === "GET_ELEMENT_POSITION") {
           const { componentId, slotName, nodeId, isPageSlot } = event.data;
           let element = null;
@@ -1246,6 +1458,7 @@ Available Console Commands:
             found: !!element
           });
           if (element) {
+            this.markComposerSelection(element);
             const rect = element.getBoundingClientRect();
             const position = {
               x: rect.left + rect.width / 2,
@@ -1313,6 +1526,7 @@ Available Console Commands:
             break;
           case "SHOW_COMPONENT_TOOLTIP":
           case "HIDE_ALL_TOOLTIPS":
+            this.clearComposerSelection();
             break;
           case "ENABLE_EVENT_SELECTION":
             console.log("[AmplifyUp SDK] Enable event selection mode:", message.enabled);
@@ -1550,29 +1764,46 @@ Available Console Commands:
    */
   enableHighlighting(componentRegistry, highlightComponents, showZones) {
     if (typeof document === "undefined") return;
+    const previouslySelected = Array.from(
+      document.querySelectorAll(".amplifyup-selected")
+    );
     this.componentRegistry = componentRegistry;
     this.highlightingEnabled = true;
     this.highlightComponentsEnabled = highlightComponents;
     this.showZonesEnabled = showZones;
-    this.disableHighlighting();
+    this.disableHighlighting({ clearSelection: false });
     this.highlightingEnabled = true;
     this.injectComposerHighlightStyles(highlightComponents, showZones);
     if (highlightComponents || showZones) {
       this.applyComponentHighlights(highlightComponents, showZones);
       this.setupMutationObserver();
-    }
-    if (showZones) {
       this.setupComposerDragDrop();
     }
+    previouslySelected.forEach((el) => {
+      if (document.contains(el)) {
+        el.classList.add("amplifyup-selected");
+      }
+    });
   }
   /** Document-level drag/drop for cross-iframe drags from Composer sidebar. */
   setupComposerDragDrop() {
     if (typeof document === "undefined") return;
     this.teardownComposerDragDrop();
     const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
+    const componentSelector = "[data-amplifyup-component], [data-component-id]";
     const clearDragOverState = () => {
       this.clearComposerDragHighlight();
     };
+    const clearComponentHover = () => {
+      document.querySelectorAll(".amplifyup-component-hover").forEach((el) => {
+        el.classList.remove("amplifyup-component-hover");
+      });
+    };
+    const clearSlotHover = () => {
+      document.querySelectorAll(`${slotSelector}.amplifyup-slot-hover`).forEach((el) => {
+        el.classList.remove("amplifyup-slot-hover");
+      });
+    };
     const dragenter = (e) => {
       e.preventDefault();
     };
@@ -1603,31 +1834,59 @@ Available Console Commands:
       this.postDropOnSlot(slot);
     };
     const mouseover = (e) => {
-      if (!this.showZonesEnabled) return;
+      if (!this.highlightComponentsEnabled && !this.showZonesEnabled) return;
       const target = e.target;
-      const slot = target?.closest?.(slotSelector);
-      if (!slot) return;
-      document.querySelectorAll(`${slotSelector}.amplifyup-slot-hover`).forEach((el) => {
-        el.classList.remove("amplifyup-slot-hover");
-      });
-      slot.classList.add("amplifyup-slot-hover");
+      if (!target?.closest) return;
+      const component = target.closest(componentSelector);
+      const slot = target.closest(slotSelector);
+      if (this.highlightComponentsEnabled && component) {
+        if (!component.classList.contains("amplifyup-component-hover")) {
+          clearComponentHover();
+          component.classList.add("amplifyup-component-hover");
+        }
+        if (slot && !component.contains(slot)) {
+          clearSlotHover();
+        }
+        return;
+      }
+      clearComponentHover();
+      if (this.showZonesEnabled && slot) {
+        if (!slot.classList.contains("amplifyup-slot-hover")) {
+          clearSlotHover();
+          slot.classList.add("amplifyup-slot-hover");
+        }
+      }
     };
     const mouseout = (e) => {
-      if (!this.showZonesEnabled) return;
+      if (!this.highlightComponentsEnabled && !this.showZonesEnabled) return;
       const related = e.relatedTarget;
-      if (!related?.closest?.(slotSelector)) {
-        document.querySelectorAll(`${slotSelector}.amplifyup-slot-hover`).forEach((el) => {
-          el.classList.remove("amplifyup-slot-hover");
-        });
+      if (this.highlightComponentsEnabled) {
+        if (!related?.closest?.(componentSelector)) {
+          clearComponentHover();
+        }
+      }
+      if (this.showZonesEnabled) {
+        if (!related?.closest?.(slotSelector)) {
+          clearSlotHover();
+        }
       }
     };
-    document.addEventListener("dragenter", dragenter, false);
-    document.addEventListener("dragover", dragover, false);
-    document.addEventListener("dragleave", dragleave, false);
-    document.addEventListener("drop", drop, false);
     document.addEventListener("mouseover", mouseover, true);
     document.addEventListener("mouseout", mouseout, true);
-    this.composerDragHandlers = { dragenter, dragover, dragleave, drop, mouseover, mouseout };
+    if (this.showZonesEnabled) {
+      document.addEventListener("dragenter", dragenter, false);
+      document.addEventListener("dragover", dragover, false);
+      document.addEventListener("dragleave", dragleave, false);
+      document.addEventListener("drop", drop, false);
+    }
+    this.composerDragHandlers = {
+      dragenter,
+      dragover,
+      dragleave,
+      drop,
+      mouseover,
+      mouseout
+    };
   }
   teardownComposerDragDrop() {
     if (!this.composerDragHandlers || typeof document === "undefined") return;
@@ -1650,6 +1909,20 @@ Available Console Commands:
     document.querySelectorAll("[data-slot-id].amplifyup-slot-hover, [data-amplifyup-slot].amplifyup-slot-hover").forEach((el) => {
       el.classList.remove("amplifyup-slot-hover");
     });
+    document.querySelectorAll(".amplifyup-component-hover").forEach((el) => {
+      el.classList.remove("amplifyup-component-hover");
+    });
+  }
+  clearComposerSelection() {
+    if (typeof document === "undefined") return;
+    document.querySelectorAll(
+      "[data-slot-id].amplifyup-selected, [data-amplifyup-slot].amplifyup-selected, [data-amplifyup-component].amplifyup-selected, [data-component-id].amplifyup-selected"
+    ).forEach((el) => el.classList.remove("amplifyup-selected"));
+  }
+  markComposerSelection(element) {
+    if (typeof document === "undefined") return;
+    this.clearComposerSelection();
+    element.classList.add("amplifyup-selected");
   }
   /** Visual outlines for Composer (direct iframe path — no preview-frame proxy). */
   injectComposerHighlightStyles(highlightComponents, showZones) {
@@ -1657,16 +1930,29 @@ Available Console Commands:
     if (!highlightComponents && !showZones) return;
     const existing = document.getElementById("amplifyup-preview-highlights");
     if (existing) existing.remove();
+    const primary = "hsl(82 92% 42%)";
     const lines = [];
     if (highlightComponents) {
       lines.push(
         "[data-amplifyup-component], [data-component-id] {",
-        "  outline: 1px dashed rgba(59, 130, 246, 0.8) !important;",
-        "  outline-offset: 2px !important;",
         "  cursor: pointer !important;",
         "}",
-        "[data-amplifyup-component]:hover, [data-component-id]:hover {",
-        "  outline-color: rgba(59, 130, 246, 1) !important;",
+        "[data-amplifyup-component].amplifyup-selected, [data-component-id].amplifyup-selected {",
+        `  outline: 2px solid ${primary} !important;`,
+        "  outline-offset: -2px !important;",
+        "  box-shadow: inset 0 0 0 1px hsl(82 92% 42% / 0.25) !important;",
+        "}",
+        "[data-amplifyup-component].amplifyup-component-hover:not(.amplifyup-selected),",
+        "[data-component-id].amplifyup-component-hover:not(.amplifyup-selected) {",
+        `  outline: 2px solid ${primary} !important;`,
+        "  outline-offset: -2px !important;",
+        "}"
+      );
+    }
+    if (highlightComponents || showZones) {
+      lines.push(
+        "[data-slot-id].amplifyup-selected, [data-amplifyup-slot].amplifyup-selected {",
+        "  background-color: rgba(245, 245, 220, 0.35) !important;",
         "}"
       );
     }
@@ -1801,8 +2087,9 @@ Available Console Commands:
   /**
    * Disable component highlighting
    */
-  disableHighlighting() {
+  disableHighlighting(opts) {
     if (typeof document === "undefined") return;
+    const clearSelection = opts?.clearSelection !== false;
     this.highlightingEnabled = false;
     this.teardownComposerDragDrop();
     if (this.mutationObserver) {
@@ -1831,10 +2118,10 @@ Available Console Commands:
       delete htmlEl._amplifyupSlotHandlers;
       htmlEl.classList.remove("amplifyup-slot-highlight");
     });
+    if (clearSelection) {
+      this.clearComposerSelection();
+    }
   }
-  /**
-   * Build component hierarchy for ancestor selection
-   */
   buildComponentHierarchy(element) {
     const hierarchy = [];
     let current = element;
@@ -1898,6 +2185,7 @@ Available Console Commands:
       window.parent.postMessage(message, "*");
       console.log("[AmplifyUp SDK] Sent selection message:", message);
     }
+    this.markComposerSelection(element);
   }
   /**
    * Send component tree to orchestrator
@@ -2007,6 +2295,7 @@ function getSDK(adapter) {
   return sdkInstance;
 }
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
+var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
 createContext(null);
 var usePathname = null;
@@ -2066,6 +2355,32 @@ function AmplifyRenderer({
       });
     }
   }, [pageConfig]);
+  useEffect(() => {
+    if (!pageConfig?.eventTracking?.length) return;
+    const sdk = getSDK();
+    if (!sdk.isInitialized()) return;
+    sdk.setupEventTracking(pageConfig.eventTracking);
+    const t1 = window.setTimeout(() => {
+      sdk.setupComponentViewTracking();
+      refreshEventTracking();
+    }, 200);
+    const t2 = window.setTimeout(() => {
+      sdk.setupComponentViewTracking();
+      refreshEventTracking();
+    }, 1e3);
+    return () => {
+      window.clearTimeout(t1);
+      window.clearTimeout(t2);
+    };
+  }, [pageConfig?.id]);
+  useEffect(() => {
+    if (!pageConfig) return;
+    const t = window.setTimeout(() => {
+      getSDK().setupComponentViewTracking();
+      refreshEventTracking();
+    }, 100);
+    return () => window.clearTimeout(t);
+  }, [variantCache, pageConfig?.id]);
   useEffect(() => {
     const isVisualEditorMode = () => {
       if (typeof window === "undefined") return false;