@amplifyup/sdk 0.1.12 → 0.1.13

package/dist/index.mjs

@@ -340,6 +340,15 @@ var AmplifyUpSDK = class {
     this.messageListener = null;
     this.mutationObserver = null;
     this.composerDragHandlers = null;
+    /** Last slot highlighted during Composer drag — avoid clear/re-add flicker. */
+    this.lastComposerDragSlot = null;
+    /** Consecutive miss frames before clearing highlight (anti-jitter). */
+    this.composerDragMissFrames = 0;
+    /**
+     * Parent overlay is driving drag via postMessage. Native iframe dragleave must
+     * not clear highlight — overlay takeover fires a spurious document dragleave.
+     */
+    this.composerOverlayDragActive = false;
     this.isVisualEditorMode = false;
     this.eventSelectionMode = false;
     this.eventSelectionClickHandler = null;
@@ -870,6 +879,12 @@ Available Console Commands:
       }
       throw new Error(`Failed to fetch page: ${response.statusText}`);
     }
+    const contentType = response.headers.get("content-type") || "";
+    if (!contentType.includes("application/json")) {
+      throw new Error(
+        `Layout provider returned non-JSON (${contentType || "unknown"}). Check Composer preview routing.`
+      );
+    }
     const data = await response.json();
     const pageConfig = data.page;
     if (pageConfig?.eventTracking) {
@@ -1154,6 +1169,13 @@ Available Console Commands:
           }
           return;
         }
+        if (event.data?.type === "COMPOSER_DRAG_START") {
+          this.composerOverlayDragActive = true;
+          if (typeof document !== "undefined") {
+            document.body.classList.add("amplifyup-composer-dragging");
+          }
+          return;
+        }
         if (event.data?.type === "COMPOSER_DRAG_AT_POINT") {
           const { x, y } = event.data;
           if (typeof x === "number" && typeof y === "number") {
@@ -1169,36 +1191,72 @@ Available Console Commands:
           return;
         }
         if (event.data?.type === "COMPOSER_DRAG_END") {
+          this.composerOverlayDragActive = false;
           this.clearComposerDragHighlight();
           return;
         }
         if (event.data?.type === "GET_ELEMENT_POSITION") {
-          const { componentId, slotName } = event.data;
-          const selector = slotName ? `[data-amplifyup-slot="${slotName}"], [data-slot-id="${slotName}"]` : `[data-amplifyup-component="${componentId}"], [data-component-id="${componentId}"]`;
-          console.log("[AmplifyUp SDK] Finding element position:", { selector, componentId, slotName });
-          const element = document.querySelector(selector);
+          const { componentId, slotName, nodeId, isPageSlot } = event.data;
+          let element = null;
+          if (isPageSlot || slotName === "main" && !nodeId && !componentId) {
+            element = document.querySelector(
+              '[data-slot-source="page"]'
+            );
+          }
+          if (!element && nodeId && slotName) {
+            element = document.querySelector(
+              `[data-parent-node-id="${nodeId}"][data-slot-id="${slotName}"], [data-parent-node-id="${nodeId}"][data-amplifyup-slot="${slotName}"]`
+            );
+          }
+          if (!element && nodeId && !slotName) {
+            element = document.querySelector(
+              `[data-node-id="${nodeId}"]`
+            );
+          }
+          if (!element && slotName) {
+            element = document.querySelector(
+              `[data-amplifyup-slot="${slotName}"], [data-slot-id="${slotName}"]`
+            );
+          }
+          if (!element && componentId) {
+            element = document.querySelector(
+              `[data-amplifyup-component="${componentId}"], [data-component-id="${componentId}"]`
+            );
+          }
+          console.log("[AmplifyUp SDK] Finding element position:", {
+            componentId,
+            slotName,
+            nodeId,
+            isPageSlot,
+            found: !!element
+          });
           if (element) {
             const rect = element.getBoundingClientRect();
             const position = {
               x: rect.left + rect.width / 2,
-              // Center of element
               y: rect.top - 50,
-              // Position above element
               width: rect.width,
               height: rect.height
             };
-            console.log("[AmplifyUp SDK] Element position calculated:", { rect, position });
+            const bounds = {
+              top: rect.top,
+              left: rect.left,
+              width: rect.width,
+              height: rect.height
+            };
             if (window.parent && window.parent !== window) {
               window.parent.postMessage({
                 type: "ELEMENT_POSITION",
-                componentId,
-                slotName,
-                position
+                componentId: componentId || null,
+                slotName: slotName || null,
+                nodeId: nodeId || null,
+                isPageSlot: !!isPageSlot,
+                position,
+                bounds
               }, "*");
-              console.log("[AmplifyUp SDK] Sent ELEMENT_POSITION message");
             }
           } else {
-            console.warn("[AmplifyUp SDK] Element not found for selector:", selector);
+            console.warn("[AmplifyUp SDK] Element not found for position request");
           }
           return;
         }
@@ -1313,37 +1371,148 @@ Available Console Commands:
       el.classList.remove("amplifyup-drag-over-slot");
     });
     document.body.classList.remove("amplifyup-drag-no-drop");
+    document.body.classList.remove("amplifyup-composer-dragging");
+    this.lastComposerDragSlot = null;
+    this.composerDragMissFrames = 0;
+  }
+  /** Re-apply drag-over class only if missing (avoids classList churn / flicker). */
+  ensureDragOverClass(slot) {
+    if (!slot.classList.contains("amplifyup-drag-over-slot")) {
+      slot.classList.add("amplifyup-drag-over-slot");
+    }
+    if (document.body.classList.contains("amplifyup-drag-no-drop")) {
+      document.body.classList.remove("amplifyup-drag-no-drop");
+    }
   }
   /**
-   * Hit-test a slot at iframe-local coordinates (Composer overlay drag path).
-   * Required for cross-origin drags: the browser blocks native drop inside the iframe.
+   * Composer drag targets the innermost (most specific) slot under the cursor.
+   * e.g. FullWidthGrid's main wins over a page-level main that wraps it.
    */
-  handleComposerDragAtPoint(x, y) {
-    if (typeof document === "undefined") return;
+  resolveSlotAtPoint(x, y) {
+    if (typeof document === "undefined") return null;
     const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
-    this.clearComposerDragHighlight();
-    const el = document.elementFromPoint(x, y)?.closest?.(slotSelector);
-    if (el) {
-      el.classList.add("amplifyup-drag-over-slot");
-    } else {
+    const containing = [];
+    document.querySelectorAll(slotSelector).forEach((node) => {
+      const el = node;
+      const r = el.getBoundingClientRect();
+      if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) {
+        containing.push(el);
+      }
+    });
+    if (containing.length === 0) return null;
+    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;
+    for (const el of innermost) {
+      const r = el.getBoundingClientRect();
+      const area = Math.max(1, r.width) * Math.max(1, r.height);
+      if (area < bestArea) {
+        bestArea = area;
+        best = el;
+      }
+    }
+    return best;
+  }
+  /** Parent layout node that owns this slot (null for page-level code main). */
+  parentComponentForSlot(slotEl) {
+    let componentId = slotEl.getAttribute("data-parent-component-id");
+    let nodeId = slotEl.getAttribute("data-parent-node-id");
+    let el = slotEl.parentElement;
+    while (el && (!nodeId || !componentId)) {
+      if (!nodeId && el.hasAttribute("data-node-id")) {
+        nodeId = el.getAttribute("data-node-id");
+      }
+      if (!componentId) {
+        componentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
+      }
+      if (nodeId) break;
+      el = el.parentElement;
+    }
+    return { componentId, nodeId };
+  }
+  pointInRect(x, y, el, pad = 8) {
+    const r = el.getBoundingClientRect();
+    return x >= r.left - pad && x <= r.right + pad && y >= r.top - pad && y <= r.bottom + pad;
+  }
+  setComposerDragHighlight(slot, x, y) {
+    if (slot && slot === this.lastComposerDragSlot) {
+      this.composerDragMissFrames = 0;
+      this.ensureDragOverClass(slot);
+      return;
+    }
+    if (slot && this.lastComposerDragSlot && this.lastComposerDragSlot.contains(slot) && slot !== this.lastComposerDragSlot) {
+      this.composerDragMissFrames = 0;
+      this.lastComposerDragSlot.classList.remove("amplifyup-drag-over-slot");
+      this.lastComposerDragSlot = slot;
+      this.ensureDragOverClass(slot);
+      return;
+    }
+    if (this.lastComposerDragSlot && typeof x === "number" && typeof y === "number" && this.pointInRect(x, y, this.lastComposerDragSlot)) {
+      if (!slot || slot.contains(this.lastComposerDragSlot) || slot === this.lastComposerDragSlot) {
+        this.composerDragMissFrames = 0;
+        this.ensureDragOverClass(this.lastComposerDragSlot);
+        return;
+      }
+    }
+    if (slot) {
+      this.composerDragMissFrames = 0;
+      if (this.lastComposerDragSlot && this.lastComposerDragSlot !== slot) {
+        this.lastComposerDragSlot.classList.remove("amplifyup-drag-over-slot");
+      }
+      this.lastComposerDragSlot = slot;
+      this.ensureDragOverClass(slot);
+      return;
+    }
+    this.composerDragMissFrames += 1;
+    if (this.lastComposerDragSlot && this.composerDragMissFrames < 8) {
+      this.ensureDragOverClass(this.lastComposerDragSlot);
+      return;
+    }
+    if (this.lastComposerDragSlot) {
+      this.lastComposerDragSlot.classList.remove("amplifyup-drag-over-slot");
+      this.lastComposerDragSlot = null;
+    }
+    if (!document.body.classList.contains("amplifyup-drag-no-drop")) {
       document.body.classList.add("amplifyup-drag-no-drop");
     }
   }
+  handleComposerDragAtPoint(x, y) {
+    this.composerOverlayDragActive = true;
+    if (!document.body.classList.contains("amplifyup-composer-dragging")) {
+      document.body.classList.add("amplifyup-composer-dragging");
+    }
+    this.setComposerDragHighlight(this.resolveSlotAtPoint(x, y), x, y);
+  }
+  postDropOnSlot(slotEl) {
+    const win = window;
+    if (!win.parent || win.parent === win) return;
+    const slotName = slotEl.getAttribute("data-amplifyup-slot") || slotEl.getAttribute("data-slot-id");
+    if (!slotName) return;
+    const { componentId, nodeId } = this.parentComponentForSlot(slotEl);
+    const isEmpty = slotEl.getAttribute("data-slot-empty") === "true";
+    win.parent.postMessage(
+      {
+        type: "DROP_ON_SLOT",
+        slotName,
+        slotElement: {
+          path: slotEl.getAttribute("data-slot-path"),
+          isEmpty,
+          parentComponentId: componentId,
+          parentNodeId: nodeId
+        }
+      },
+      "*"
+    );
+  }
   handleComposerDropAtPoint(x, y) {
     if (typeof document === "undefined") return;
-    const win = window;
-    const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
+    const htmlEl = this.resolveSlotAtPoint(x, y);
     this.clearComposerDragHighlight();
-    const htmlEl = document.elementFromPoint(x, y)?.closest?.(slotSelector);
-    if (!htmlEl || !win.parent || win.parent === win) return;
-    const slotName = htmlEl.getAttribute("data-amplifyup-slot") || htmlEl.getAttribute("data-slot-id");
-    if (!slotName) return;
-    const isEmpty = htmlEl.getAttribute("data-slot-empty") === "true";
-    win.parent.postMessage({
-      type: "DROP_ON_SLOT",
-      slotName,
-      slotElement: { path: htmlEl.getAttribute("data-slot-path"), isEmpty }
-    }, "*");
+    if (!htmlEl) return;
+    this.postDropOnSlot(htmlEl);
   }
   /**
    * Enable component highlighting
@@ -1371,35 +1540,25 @@ Available Console Commands:
     this.teardownComposerDragDrop();
     const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
     const clearDragOverState = () => {
-      document.querySelectorAll(`${slotSelector}.amplifyup-drag-over-slot`).forEach((el) => {
-        el.classList.remove("amplifyup-drag-over-slot");
-      });
-      document.body.classList.remove("amplifyup-drag-no-drop");
+      this.clearComposerDragHighlight();
     };
     const dragenter = (e) => {
       e.preventDefault();
-      if (e.dataTransfer?.types?.length) {
-        document.body.classList.add("amplifyup-drag-no-drop");
-      }
     };
     const dragover = (e) => {
       e.preventDefault();
-      const target = e.target;
-      const slot = target?.closest?.(slotSelector);
+      if (this.composerOverlayDragActive) {
+        if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+        return;
+      }
+      const slot = this.resolveSlotAtPoint(e.clientX, e.clientY);
       if (e.dataTransfer) {
         e.dataTransfer.dropEffect = slot ? "copy" : "none";
       }
-      document.querySelectorAll(`${slotSelector}.amplifyup-drag-over-slot`).forEach((el) => {
-        el.classList.remove("amplifyup-drag-over-slot");
-      });
-      if (slot) {
-        slot.classList.add("amplifyup-drag-over-slot");
-        document.body.classList.remove("amplifyup-drag-no-drop");
-      } else {
-        document.body.classList.add("amplifyup-drag-no-drop");
-      }
+      this.setComposerDragHighlight(slot, e.clientX, e.clientY);
     };
     const dragleave = (e) => {
+      if (this.composerOverlayDragActive) return;
       const related = e.relatedTarget;
       if (!related || !document.body.contains(related)) {
         clearDragOverState();
@@ -1407,20 +1566,10 @@ Available Console Commands:
     };
     const drop = (e) => {
       e.preventDefault();
-      const target = e.target;
-      const slot = target?.closest?.(slotSelector);
+      const slot = this.resolveSlotAtPoint(e.clientX, e.clientY);
       clearDragOverState();
       if (!slot || !this.isVisualEditorMode) return;
-      const slotName = slot.getAttribute("data-amplifyup-slot") || slot.getAttribute("data-slot-id");
-      const isEmpty = slot.getAttribute("data-slot-empty") === "true";
-      const win = window;
-      if (slotName && win.parent && win.parent !== win) {
-        win.parent.postMessage({
-          type: "DROP_ON_SLOT",
-          slotName,
-          slotElement: { path: slot.getAttribute("data-slot-path"), isEmpty }
-        }, "*");
-      }
+      this.postDropOnSlot(slot);
     };
     const mouseover = (e) => {
       if (!this.showZonesEnabled) return;
@@ -1459,7 +1608,11 @@ Available Console Commands:
     document.removeEventListener("mouseover", h.mouseover, true);
     document.removeEventListener("mouseout", h.mouseout, true);
     this.composerDragHandlers = null;
+    this.composerOverlayDragActive = false;
+    this.lastComposerDragSlot = null;
+    this.composerDragMissFrames = 0;
     document.body.classList.remove("amplifyup-drag-no-drop");
+    document.body.classList.remove("amplifyup-composer-dragging");
     document.querySelectorAll("[data-slot-id].amplifyup-drag-over-slot, [data-amplifyup-slot].amplifyup-drag-over-slot").forEach((el) => {
       el.classList.remove("amplifyup-drag-over-slot");
     });
@@ -1500,21 +1653,32 @@ Available Console Commands:
         '[data-slot-id="main"], [data-amplifyup-slot="main"] {',
         "  min-height: 50vh !important;",
         "}",
-        '[data-slot-id="main"][data-slot-empty="true"]::before,',
-        '[data-amplifyup-slot="main"][data-slot-empty="true"]::before {',
-        '  content: "Drop components here" !important;',
-        "  position: absolute !important;",
-        "  top: 50% !important; left: 50% !important;",
-        "  transform: translate(-50%, -50%) !important;",
-        "  font-size: 14px !important; font-weight: 500 !important;",
-        "  color: rgba(34, 197, 94, 0.65) !important;",
+        /* Single empty-state hint — Slot React label uses .amplifyup-slot-placeholder */
+        ".amplifyup-slot-placeholder {",
+        "  display: flex !important;",
+        "  align-items: center !important;",
+        "  justify-content: center !important;",
+        "  min-height: inherit !important;",
+        "  color: rgba(34, 197, 94, 0.75) !important;",
+        "  font-size: 14px !important;",
+        "  font-weight: 500 !important;",
         "  pointer-events: none !important;",
-        "  white-space: nowrap !important;",
+        "  text-align: center !important;",
         "}",
         "[data-slot-id].amplifyup-slot-hover, [data-amplifyup-slot].amplifyup-slot-hover {",
         "  outline-color: rgba(34, 197, 94, 1) !important;",
         "  background: rgba(34, 197, 94, 0.06) !important;",
         "}",
+        /* During any Composer drag, hide idle slot labels so they don't flash
+           when the active drag-over class briefly changes */
+        "body.amplifyup-composer-dragging .amplifyup-slot-placeholder {",
+        "  visibility: hidden !important;",
+        "  opacity: 0 !important;",
+        "}",
+        "body.amplifyup-composer-dragging [data-slot-id]::before,",
+        "body.amplifyup-composer-dragging [data-amplifyup-slot]::before {",
+        "  content: none !important;",
+        "}",
         "[data-slot-id].amplifyup-drag-over-slot, [data-amplifyup-slot].amplifyup-drag-over-slot {",
         "  outline: 2px solid rgba(34, 197, 94, 1) !important;",
         "  background: rgba(34, 197, 94, 0.18) !important;",
@@ -1530,7 +1694,7 @@ Available Console Commands:
         "  color: rgb(22, 163, 74) !important;",
         "  pointer-events: none !important;",
         "  white-space: nowrap !important;",
-        "  z-index: 1 !important;",
+        "  z-index: 2 !important;",
         "}",
         "body.amplifyup-drag-no-drop { cursor: no-drop !important; }",
         "body.amplifyup-drag-no-drop::before {",
@@ -1657,18 +1821,23 @@ Available Console Commands:
   sendSelectionMessage(element, hierarchy, isEmpty) {
     if (!this.isVisualEditorMode) return;
     const componentId = element.getAttribute("data-amplifyup-component") || element.getAttribute("data-component-id");
-    const slotName = element.getAttribute("data-amplifyup-slot") || element.getAttribute("data-slot-id");
+    const slotName = componentId ? null : element.getAttribute("data-amplifyup-slot") || element.getAttribute("data-slot-id");
     const componentName = element.getAttribute("data-component-name");
     const hierarchyInfo = hierarchy.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 elComponentName = el.getAttribute("data-component-name");
+      const isSlot = !elComponentId && !!elSlotName;
+      const isPageSlot = isSlot && el.getAttribute("data-slot-source") === "page";
+      const nodeId = el.getAttribute("data-node-id") || (isSlot ? el.getAttribute("data-parent-node-id") : null);
       return {
         index,
         componentId: elComponentId,
-        componentName: elComponentName,
-        slotName: elSlotName,
-        isSlot: !!elSlotName
+        componentName: isPageSlot ? "Page" : elComponentName,
+        slotName: isSlot ? elSlotName : null,
+        isSlot,
+        isPageSlot,
+        nodeId
       };
     });
     const rect = element.getBoundingClientRect ? element.getBoundingClientRect() : null;
@@ -1705,7 +1874,6 @@ Available Console Commands:
       return;
     }
     const doc = document;
-    const win = window;
     if (highlightComponents) {
       const componentElements = doc.querySelectorAll("[data-amplifyup-component], [data-component-id]");
       console.log("[AmplifyUp SDK] Found", componentElements.length, "components to highlight");
@@ -1766,52 +1934,8 @@ Available Console Commands:
           e.stopPropagation();
           this.sendSelectionMessage(htmlEl, hierarchy, isEmpty);
         };
-        const handleDrop = (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          htmlEl.classList.remove("amplifyup-drag-over-slot");
-          if (!win.parent || win.parent === win) return;
-          win.parent.postMessage({
-            type: "DROP_ON_SLOT",
-            slotName,
-            slotElement: { path: htmlEl.getAttribute("data-slot-path"), isEmpty }
-          }, "*");
-          try {
-            const data = JSON.parse(e.dataTransfer.getData("application/json"));
-            if (data.type === "component") {
-              win.parent.postMessage({
-                type: "COMPONENT_DROPPED",
-                componentId: data.componentId,
-                componentName: data.componentName,
-                slotName,
-                slotElement: { path: htmlEl.getAttribute("data-slot-path"), isEmpty }
-              }, "*");
-            }
-          } catch (_err) {
-          }
-        };
-        const handleDragOver = (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          e.dataTransfer.dropEffect = "copy";
-          htmlEl.classList.add("amplifyup-drag-over-slot");
-        };
-        const handleDragLeave = (e) => {
-          const related = e.relatedTarget;
-          if (!related || !htmlEl.contains(related)) {
-            htmlEl.classList.remove("amplifyup-drag-over-slot");
-          }
-        };
         htmlEl.addEventListener("click", handleClick);
-        htmlEl.addEventListener("dragover", handleDragOver);
-        htmlEl.addEventListener("dragleave", handleDragLeave);
-        htmlEl.addEventListener("drop", handleDrop);
-        htmlEl._amplifyupSlotHandlers = {
-          handleClick,
-          handleDragOver,
-          handleDragLeave,
-          handleDrop
-        };
+        htmlEl._amplifyupSlotHandlers = { handleClick };
       });
     }
   }