@amplifyup/sdk 0.1.16 → 0.1.18

package/dist/index.mjs

@@ -356,6 +356,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();
@@ -528,6 +531,7 @@ var AmplifyUpSDK = class {
           this.initialPageSent = true;
           const url = window.location.pathname;
           this.page(url);
+          this.setupPageEngagement();
         }
       }
       if (this.config?.debug && this.initialized) {
@@ -560,6 +564,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
@@ -599,9 +765,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);
   }
   /**
@@ -890,6 +1060,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;
   }
   /**
@@ -897,10 +1074,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());
@@ -915,19 +1092,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;
       }
@@ -983,8 +1176,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}`);
@@ -1055,9 +1255,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);
     });
@@ -1071,6 +1271,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");
@@ -1080,11 +1286,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. */
@@ -1195,6 +1403,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;
@@ -1236,6 +1448,7 @@ Available Console Commands:
             found: !!element
           });
           if (element) {
+            this.markComposerSelection(element);
             const rect = element.getBoundingClientRect();
             const position = {
               x: rect.left + rect.width / 2,
@@ -1303,6 +1516,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);
@@ -1540,29 +1754,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();
     };
@@ -1593,31 +1824,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;
@@ -1640,6 +1899,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) {
@@ -1647,16 +1920,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;",
         "}"
       );
     }
@@ -1791,8 +2077,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) {
@@ -1821,10 +2108,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;
@@ -1888,6 +2175,7 @@ Available Console Commands:
       window.parent.postMessage(message, "*");
       console.log("[AmplifyUp SDK] Sent selection message:", message);
     }
+    this.markComposerSelection(element);
   }
   /**
    * Send component tree to orchestrator
@@ -2020,6 +2308,7 @@ var fetchPageConfig = (route, preview) => getSDK().fetchPageConfig(route, previe
 var setupEventTracking = (config) => getSDK().setupEventTracking(config);
 var cleanupEventTracking = () => getSDK().cleanupEventTracking();
 var refreshEventTracking = () => getSDK().refreshEventTracking();
+var setupComponentViewTracking = () => getSDK().setupComponentViewTracking();
 var getDiagnostics = () => getSDK().getDiagnostics();
 var getStatus = () => {
   const status = getSDK().getStatus();
@@ -2035,6 +2324,6 @@ var verifyAWSConnection = () => {
 };
 var index_default = getSDK();
 
-export { AmplifyUpSDK, buildLayoutProviderUrl, buildPageRenderUrl, cleanupEventTracking, index_default as default, fetchPageConfig, getDiagnostics, getInstanceId2 as getInstanceId, getOrchestratorUrl, getSDK, getStatus, getTarget, getTrackingId, getUserId2 as getUserId, identify, init, isAmplifyUpTarget, isComposerPreview, isPreviewRequest, normalizeAmplifyUpTarget, page, refreshEventTracking, reset, resolveAmplifyUpTarget, resolveAmplifyUpUrls, setupEventTracking, testTracking, track, trackClick, trackContentEngagement, trackContentView, trackFormFieldInteraction, trackFormSubmit, verifyAWSConnection };
+export { AmplifyUpSDK, buildLayoutProviderUrl, buildPageRenderUrl, cleanupEventTracking, index_default as default, fetchPageConfig, getDiagnostics, getInstanceId2 as getInstanceId, getOrchestratorUrl, getSDK, getStatus, getTarget, getTrackingId, getUserId2 as getUserId, identify, init, isAmplifyUpTarget, isComposerPreview, isPreviewRequest, normalizeAmplifyUpTarget, page, refreshEventTracking, reset, resolveAmplifyUpTarget, resolveAmplifyUpUrls, setupComponentViewTracking, setupEventTracking, testTracking, track, trackClick, trackContentEngagement, trackContentView, trackFormFieldInteraction, trackFormSubmit, verifyAWSConnection };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map