@amplifyup/sdk 0.2.1 → 0.2.3

package/dist/AmplifyRenderer.mjs

@@ -421,7 +421,7 @@ function isComposerPreview() {
   if (window.self !== window.top && document.referrer) {
     try {
       const refUrl = new URL(document.referrer);
-      if (refUrl.hostname === "amplifyup.ai" || refUrl.hostname.endsWith(".amplifyup.ai") || refUrl.hostname === "localhost" && refUrl.port === "5001" || refUrl.pathname.includes("/dashboard/composer") || refUrl.pathname.includes("/dashboard/routes/")) {
+      if (refUrl.hostname === "amplifyup.ai" || refUrl.hostname.endsWith(".amplifyup.ai") || refUrl.hostname === "localhost" && refUrl.port === "5001" || refUrl.pathname.includes("/dashboard/composer")) {
         return true;
       }
     } catch {
@@ -1032,7 +1032,8 @@ function layoutProviderCacheKey(opts) {
     opts.preview ? "1" : "0",
     opts.working ? "1" : "0",
     opts.zoneId || "",
-    opts.compositionId || ""
+    opts.compositionId || "",
+    opts.layoutId || ""
   ].join("|");
 }
 function getSettledLayoutProvider(key) {
@@ -1192,7 +1193,7 @@ var AmplifyUpSDK = class {
       if (document.referrer) {
         try {
           const referrerUrl = new URL(document.referrer);
-          if (referrerUrl.hostname === "localhost" && referrerUrl.port === "5001" || referrerUrl.pathname.includes("/dashboard/composer") || referrerUrl.pathname.includes("/dashboard/routes/")) {
+          if (referrerUrl.hostname === "localhost" && referrerUrl.port === "5001" || referrerUrl.pathname.includes("/dashboard/composer")) {
             return true;
           }
         } catch {
@@ -1469,11 +1470,7 @@ var AmplifyUpSDK = class {
           this.page(resumePath, { resumed: true });
           this.lastTrackedPath = resumePath;
           if (this.config?.debug) {
-            console.log(
-              "[AmplifyUp SDK] Idle resume page view",
-              resumePath,
-              `(hidden ${Math.round(idleMs / 6e4)}m)`
-            );
+            console.log("[AmplifyUp SDK] Idle resume page view", resumePath, `(hidden ${Math.round(idleMs / 6e4)}m)`);
           }
         }
         noteActivity();
@@ -1493,12 +1490,7 @@ var AmplifyUpSDK = class {
       }
       state.visibleSince = null;
     };
-    const activityEvents = [
-      "pointerdown",
-      "keydown",
-      "scroll",
-      "touchstart"
-    ];
+    const activityEvents = ["pointerdown", "keydown", "scroll", "touchstart"];
     const onActivity = () => noteActivity();
     window.addEventListener("scroll", onScroll, { passive: true });
     document.addEventListener("visibilitychange", onVisibility);
@@ -1646,11 +1638,7 @@ var AmplifyUpSDK = class {
     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"
-      );
+      console.log("[AmplifyUp SDK] Component View tracking enabled for", hosts.length, "hosts");
     }
   }
   cleanupComponentViewTracking() {
@@ -2122,6 +2110,8 @@ Available Console Commands:
         const compositionId = pageSearch.get("compositionId");
         if (zoneId) params.set("zoneId", zoneId);
         if (compositionId) params.set("compositionId", compositionId);
+        const layoutId = pageSearch.get("layoutId");
+        if (layoutId) params.set("layoutId", layoutId);
       }
     }
     if (isOnOrchestratorOrigin) {
@@ -2142,7 +2132,8 @@ Available Console Commands:
       preview,
       working: pageSearch ? isWorkingContentRequest(pageSearch) : false,
       zoneId: pageSearch?.get("zoneId"),
-      compositionId: pageSearch?.get("compositionId")
+      compositionId: pageSearch?.get("compositionId"),
+      layoutId: pageSearch?.get("layoutId")
     });
     return dedupeLayoutProviderFetch(cacheKey, async () => {
       const startedAt = Date.now();
@@ -2224,15 +2215,11 @@ Available Console Commands:
         ) : document;
         if (!scopeRoot) {
           if (this.config?.debug) {
-            console.log(
-              `[AmplifyUp SDK] Component host not found for ${eventConfig.componentId}`
-            );
+            console.log(`[AmplifyUp SDK] Component host not found for ${eventConfig.componentId}`);
           }
           return;
         }
-        targetElements = Array.from(
-          scopeRoot.querySelectorAll(eventConfig.selector)
-        );
+        targetElements = Array.from(scopeRoot.querySelectorAll(eventConfig.selector));
         if (scopeRoot instanceof Element && scopeRoot !== document.documentElement && scopeRoot.matches?.(eventConfig.selector)) {
           targetElements.unshift(scopeRoot);
         }
@@ -2265,7 +2252,9 @@ Available Console Commands:
           });
         }
         if (this.config?.debug) {
-          console.log(`[AmplifyUp SDK] Attached ${eventConfig.eventType} listener for ${eventConfig.eventName} on selector: ${eventConfig.selector}`);
+          console.log(
+            `[AmplifyUp SDK] Attached ${eventConfig.eventType} listener for ${eventConfig.eventName} on selector: ${eventConfig.selector}`
+          );
         }
       });
     });
@@ -2275,16 +2264,16 @@ Available Console Commands:
    */
   mapEventType(eventType) {
     const eventMap = {
-      "click": "click",
-      "submit": "submit",
-      "focus": "focus",
-      "blur": "blur",
-      "hover": "mouseenter",
-      "change": "change",
-      "scroll": "scroll",
-      "view": "view",
+      click: "click",
+      submit: "submit",
+      focus: "focus",
+      blur: "blur",
+      hover: "mouseenter",
+      change: "change",
+      scroll: "scroll",
+      view: "view",
       // Handled separately with IntersectionObserver
-      "custom": "custom"
+      custom: "custom"
     };
     return eventMap[eventType] || eventType;
   }
@@ -2360,11 +2349,7 @@ Available Console Commands:
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            this.handleTrackedEvent(
-              new CustomEvent("view"),
-              config,
-              element
-            );
+            this.handleTrackedEvent(new CustomEvent("view"), config, element);
             observer.unobserve(element);
           }
         });
@@ -2507,21 +2492,15 @@ Available Console Commands:
           return;
         }
         if (event.data?.type === "AMPLIFYUP_FIELD_PATCH") {
-          window.dispatchEvent(
-            new CustomEvent("amplifyup:field-patch", { detail: event.data })
-          );
+          window.dispatchEvent(new CustomEvent("amplifyup:field-patch", { detail: event.data }));
           return;
         }
         if (event.data?.type === "AMPLIFYUP_PROPS_PATCH") {
-          window.dispatchEvent(
-            new CustomEvent("amplifyup:props-patch", { detail: event.data })
-          );
+          window.dispatchEvent(new CustomEvent("amplifyup:props-patch", { detail: event.data }));
           return;
         }
         if (event.data?.type === "AMPLIFYUP_LAYOUT_PATCH") {
-          window.dispatchEvent(
-            new CustomEvent("amplifyup:layout-patch", { detail: event.data })
-          );
+          window.dispatchEvent(new CustomEvent("amplifyup:layout-patch", { detail: event.data }));
           return;
         }
         if (event.data?.type === "COMPONENT_DELETABLE_STATUS") {
@@ -2584,9 +2563,7 @@ Available Console Commands:
           const { componentId, slotName, nodeId, isPageSlot } = event.data;
           let element = null;
           if (isPageSlot || slotName === "main" && !nodeId && !componentId) {
-            element = document.querySelector(
-              '[data-slot-source="page"]'
-            );
+            element = document.querySelector('[data-slot-source="page"]');
           }
           if (!element && nodeId && slotName) {
             element = document.querySelector(
@@ -2594,9 +2571,7 @@ Available Console Commands:
             );
           }
           if (!element && nodeId && !slotName) {
-            element = document.querySelector(
-              `[data-node-id="${nodeId}"]`
-            );
+            element = document.querySelector(`[data-node-id="${nodeId}"]`);
           }
           if (!element && slotName) {
             element = document.querySelector(
@@ -2637,30 +2612,33 @@ Available Console Commands:
             };
             if (window.parent && window.parent !== window) {
               const hierarchyEls = this.buildComponentHierarchy(element);
-              window.parent.postMessage({
-                type: "ELEMENT_POSITION",
-                componentId: componentId || null,
-                slotName: slotName || null,
-                nodeId: nodeId || null,
-                isPageSlot: !!isPageSlot || element.getAttribute("data-slot-source") === "page",
-                hierarchy: hierarchyEls.map((el, index) => {
-                  const elComponentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
-                  const elSlotName = el.getAttribute("data-amplifyup-slot") || el.getAttribute("data-slot-id");
-                  const isSlot = !elComponentId && !!elSlotName;
-                  const pageSlot = isSlot && el.getAttribute("data-slot-source") === "page";
-                  return {
-                    index,
-                    componentId: elComponentId,
-                    componentName: pageSlot ? "Page" : el.getAttribute("data-component-name"),
-                    slotName: isSlot ? elSlotName : null,
-                    isSlot,
-                    isPageSlot: pageSlot,
-                    nodeId: el.getAttribute("data-node-id") || (isSlot ? el.getAttribute("data-parent-node-id") : null)
-                  };
-                }),
-                position,
-                bounds
-              }, "*");
+              window.parent.postMessage(
+                {
+                  type: "ELEMENT_POSITION",
+                  componentId: componentId || null,
+                  slotName: slotName || null,
+                  nodeId: nodeId || null,
+                  isPageSlot: !!isPageSlot || element.getAttribute("data-slot-source") === "page",
+                  hierarchy: hierarchyEls.map((el, index) => {
+                    const elComponentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
+                    const elSlotName = el.getAttribute("data-amplifyup-slot") || el.getAttribute("data-slot-id");
+                    const isSlot = !elComponentId && !!elSlotName;
+                    const pageSlot = isSlot && el.getAttribute("data-slot-source") === "page";
+                    return {
+                      index,
+                      componentId: elComponentId,
+                      componentName: pageSlot ? "Page" : el.getAttribute("data-component-name"),
+                      slotName: isSlot ? elSlotName : null,
+                      isSlot,
+                      isPageSlot: pageSlot,
+                      nodeId: el.getAttribute("data-node-id") || (isSlot ? el.getAttribute("data-parent-node-id") : null)
+                    };
+                  }),
+                  position,
+                  bounds
+                },
+                "*"
+              );
             }
           } else {
             console.warn("[AmplifyUp SDK] Element not found for position request");
@@ -2676,7 +2654,11 @@ Available Console Commands:
         switch (message.type) {
           case "ENABLE_HIGHLIGHTING":
           case "UPDATE_HIGHLIGHTING":
-            console.log("[AmplifyUp SDK] Enabling highlighting with registry:", message.componentRegistry?.length || 0, "components");
+            console.log(
+              "[AmplifyUp SDK] Enabling highlighting with registry:",
+              message.componentRegistry?.length || 0,
+              "components"
+            );
             this.enableHighlighting(
               message.componentRegistry || [],
               message.highlightComponents ?? true,
@@ -2736,12 +2718,15 @@ Available Console Commands:
         const tagName = target.tagName.toLowerCase();
         const text = (target.textContent || "").replace(/\s+/g, " ").trim().substring(0, 80);
         if (window.parent && window.parent !== window) {
-          window.parent.postMessage({
-            type: "ELEMENT_CLICKED_FOR_EVENT",
-            selector,
-            tagName,
-            text
-          }, "*");
+          window.parent.postMessage(
+            {
+              type: "ELEMENT_CLICKED_FOR_EVENT",
+              selector,
+              tagName,
+              text
+            },
+            "*"
+          );
         }
       };
       document.addEventListener("click", this.eventSelectionClickHandler, true);
@@ -2767,9 +2752,7 @@ Available Console Commands:
       return "[" + attr.name + '="' + attr.value + '"]';
     }
     if (el.className && typeof el.className === "string") {
-      const classes = el.className.split(" ").filter(
-        (c) => c && !c.startsWith("has-") && !c.includes("selectable") && !c.includes("selected")
-      );
+      const classes = el.className.split(" ").filter((c) => c && !c.startsWith("has-") && !c.includes("selectable") && !c.includes("selected"));
       if (classes.length > 0) {
         return el.tagName.toLowerCase() + "." + classes[0];
       }
@@ -2819,9 +2802,7 @@ Available Console Commands:
       }
     });
     if (containing.length === 0) return null;
-    const innermost = containing.filter(
-      (el) => !containing.some((other) => other !== el && el.contains(other))
-    );
+    const innermost = containing.filter((el) => !containing.some((other) => other !== el && el.contains(other)));
     if (innermost.length === 1) return innermost[0];
     let best = innermost[0];
     let bestArea = Infinity;
@@ -2938,9 +2919,7 @@ Available Console Commands:
    */
   enableHighlighting(componentRegistry, highlightComponents, showZones) {
     if (typeof document === "undefined") return;
-    const previouslySelected = Array.from(
-      document.querySelectorAll(".amplifyup-selected")
-    );
+    const previouslySelected = Array.from(document.querySelectorAll(".amplifyup-selected"));
     this.componentRegistry = componentRegistry;
     this.highlightingEnabled = true;
     this.highlightComponentsEnabled = highlightComponents;
@@ -3313,10 +3292,7 @@ Available Console Commands:
       if (shouldReapply && this.highlightingEnabled) {
         setTimeout(() => {
           if (this.highlightingEnabled) {
-            this.applyComponentHighlights(
-              this.highlightComponentsEnabled,
-              this.showZonesEnabled
-            );
+            this.applyComponentHighlights(this.highlightComponentsEnabled, this.showZonesEnabled);
           }
         }, 100);
       }
@@ -3325,7 +3301,13 @@ Available Console Commands:
       childList: true,
       subtree: true,
       attributes: true,
-      attributeFilter: ["data-amplifyup-component", "data-component-id", "data-amplifyup-slot", "data-slot-id", "data-slot-empty"]
+      attributeFilter: [
+        "data-amplifyup-component",
+        "data-component-id",
+        "data-amplifyup-slot",
+        "data-slot-id",
+        "data-slot-empty"
+      ]
     });
   }
   /**
@@ -3339,9 +3321,7 @@ Available Console Commands:
     this.teardownComposerDragDrop();
     if (opts?.clearSelection !== false && typeof window !== "undefined") {
       window.__AMPLIFYUP_COMPOSER_EDIT__ = false;
-      window.dispatchEvent(
-        new CustomEvent("amplifyup:composer-edit", { detail: { enabled: false } })
-      );
+      window.dispatchEvent(new CustomEvent("amplifyup:composer-edit", { detail: { enabled: false } }));
     }
     if (this.mutationObserver) {
       this.mutationObserver.disconnect();
@@ -3499,7 +3479,10 @@ Available Console Commands:
             e.stopPropagation();
             this.sendSelectionMessage(htmlEl, hierarchy);
             if (window.parent && window.parent !== window) {
-              window.parent.postMessage({ type: "CHECK_COMPONENT_DELETABLE", componentId: component.component_id }, "*");
+              window.parent.postMessage(
+                { type: "CHECK_COMPONENT_DELETABLE", componentId: component.component_id },
+                "*"
+              );
             }
           };
           htmlEl.addEventListener("click", handleClick);
@@ -3719,13 +3702,7 @@ function ComponentContextProvider({
   componentId
 }) {
   const next = hydratePageResourceProps(props || {}, getPageResourceFields());
-  return /* @__PURE__ */ jsx(
-    ComponentContext.Provider,
-    {
-      value: { slots, props: next, layoutNodeId, componentId },
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(ComponentContext.Provider, { value: { slots, props: next, layoutNodeId, componentId }, children });
 }
 var REGISTRY_BRAND = Symbol.for("amplifyup.componentRegistry");
 var isComponentRegistry = (value) => !!value && typeof value === "object" && value[REGISTRY_BRAND] === true;