@amplifyup/sdk 0.1.12 → 0.1.14

package/dist/react.js

@@ -352,6 +352,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;
@@ -882,6 +891,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) {
@@ -1166,6 +1181,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") {
@@ -1181,36 +1203,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;
         }
@@ -1325,37 +1383,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
@@ -1383,35 +1552,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();
@@ -1419,20 +1578,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;
@@ -1471,7 +1620,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");
     });
@@ -1512,21 +1665,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;",
@@ -1542,7 +1706,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 {",
@@ -1669,18 +1833,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;
@@ -1717,7 +1886,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");
@@ -1778,52 +1946,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 };
       });
     }
   }
@@ -1918,7 +2042,9 @@ function AmplifyRenderer({
     if (!pageConfig) {
       return;
     }
-    if (!pageConfig.layoutTree || Array.isArray(pageConfig.layoutTree) && pageConfig.layoutTree.length === 0) {
+    const rawTree2 = pageConfig.layoutTree;
+    const normalizedTree = Array.isArray(rawTree2) ? rawTree2 : rawTree2 && typeof rawTree2 === "object" && rawTree2.componentId ? [rawTree2] : [];
+    if (normalizedTree.length === 0) {
       if (typeof window !== "undefined" && window.parent && window.parent !== window) {
         window.parent.postMessage({
           type: "COMPONENT_TREE",
@@ -1930,6 +2056,7 @@ function AmplifyRenderer({
     const convertLayoutTreeToComponentTree = (nodes, parentId = null) => {
       const result = [];
       nodes.forEach((node) => {
+        if (!node) return;
         const treeNode = {
           id: node.id,
           componentId: node.componentId,
@@ -1940,8 +2067,9 @@ function AmplifyRenderer({
         };
         if (node.slots && node.slots.length > 0) {
           node.slots.forEach((slot) => {
-            if (slot.children && slot.children.length > 0) {
-              const slotChildren = convertLayoutTreeToComponentTree(slot.children, node.id);
+            const kids = Array.isArray(slot?.children) ? slot.children : [];
+            if (kids.length > 0) {
+              const slotChildren = convertLayoutTreeToComponentTree(kids, node.id);
               treeNode.children.push(...slotChildren);
             }
           });
@@ -1950,7 +2078,7 @@ function AmplifyRenderer({
       });
       return result;
     };
-    const layoutTree2 = pageConfig.layoutTree;
+    const layoutTree2 = normalizedTree;
     const componentTree = convertLayoutTreeToComponentTree(layoutTree2);
     const describeLayoutTree = (nodes, depth = 0) => {
       if (!nodes?.length) return "";
@@ -2123,18 +2251,21 @@ function AmplifyRenderer({
             childrenCount: childrenToRender.length
           });
         } else {
-          childrenToRender = slot.children;
+          childrenToRender = Array.isArray(slot.children) ? slot.children : [];
           console.log(`[AmplifyRenderer] Using direct children for slot ${slot.slotId}`, {
             childrenCount: childrenToRender.length
           });
         }
+        const safeChildren = Array.isArray(childrenToRender) ? childrenToRender : [];
         slotChildren[slot.slotId] = /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             "data-slot-id": slot.slotId,
             "data-amplifyup-slot": slot.slotId,
             "data-zone-id": slot.zoneId || void 0,
-            children: childrenToRender.map((child) => renderNode(child))
+            "data-parent-node-id": node.id,
+            "data-parent-component-id": node.componentId,
+            children: safeChildren.filter(Boolean).map((child) => renderNode(child))
           },
           slot.slotId
         );
@@ -2149,17 +2280,25 @@ function AmplifyRenderer({
       hasSlots: !!slotsToPass,
       slotKeys: slotsToPass ? Object.keys(slotsToPass) : []
     });
-    return renderComponent(
-      node.componentId,
-      node.props || {},
-      slotsToPass
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-node-id": node.id, "data-amplifyup-node": "", children: renderComponent(node.componentId, node.props || {}, slotsToPass, {
+      layoutNodeId: node.id
+    }) });
   };
-  const layoutTree = pageConfig.layoutTree;
-  if (!layoutTree || layoutTree.length === 0) {
+  const rawTree = pageConfig.layoutTree;
+  const layoutTree = Array.isArray(rawTree) ? rawTree : rawTree && typeof rawTree === "object" && rawTree.componentId ? [rawTree] : [];
+  if (layoutTree.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("main", { children: emptyComponent || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "No content configured for this page." }) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("main", { children: layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderNode(node) }, node.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { children: isComposerPreview() ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot-id": "main",
+      "data-amplifyup-slot": "main",
+      "data-slot-source": "page",
+      "data-slot-empty": layoutTree.length === 0 ? "true" : void 0,
+      children: layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderNode(node) }, node.id))
+    }
+  ) : layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderNode(node) }, node.id)) });
 }
 function defaultPreviewCanvas() {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2167,8 +2306,10 @@ function defaultPreviewCanvas() {
     {
       "data-slot-id": "main",
       "data-amplifyup-slot": "main",
+      "data-slot-source": "page",
       "data-slot-empty": "true",
-      style: { minHeight: "50vh", width: "100%", display: "block" }
+      style: { minHeight: "50vh", width: "100%", display: "block", position: "relative" },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "amplifyup-slot-placeholder", children: "Drop components here" })
     }
   );
 }
@@ -2258,7 +2399,9 @@ var ComponentContext = react.createContext(null);
 function ComponentContextProvider({
   children,
   slots,
-  props
+  props,
+  layoutNodeId,
+  componentId
 }) {
   console.log("[ComponentContextProvider] Providing context", {
     hasSlots: !!slots,
@@ -2269,9 +2412,11 @@ function ComponentContextProvider({
       contentType: slots[key] ? typeof slots[key] : "null"
     })) : [],
     hasProps: !!props,
-    propKeys: props ? Object.keys(props) : []
+    propKeys: props ? Object.keys(props) : [],
+    layoutNodeId,
+    componentId
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ComponentContext.Provider, { value: { slots, props }, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(ComponentContext.Provider, { value: { slots, props, layoutNodeId, componentId }, children });
 }
 function Slot({
   name,
@@ -2322,33 +2467,50 @@ function Slot({
     {
       className,
       "data-slot-name": name,
+      "data-slot-id": name,
       "data-amplifyup-slot": name,
       "data-slot-empty": isEmpty ? "true" : void 0,
+      "data-parent-node-id": context.layoutNodeId || void 0,
+      "data-parent-component-id": context.componentId || void 0,
       style: {
         // Only add minimum height when empty (for drop target visibility)
         minHeight: isEmpty ? "60px" : void 0,
         // Only add position relative for overlay positioning in editor mode
         position: isEditorMode ? "relative" : void 0
       },
-      children: isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-        // Only style the empty state indicator, not the container
-        minHeight: "60px",
-        color: "#9ca3af",
-        fontSize: "14px",
-        pointerEvents: "none"
-      }, children: isEditorMode ? `[Slot: ${name}]` : `Empty slot: ${name}` }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        isEditorMode && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-          position: "absolute",
-          top: "4px",
-          left: "4px",
-          fontSize: "10px",
-          color: "#9ca3af",
-          pointerEvents: "none",
-          zIndex: 1
-        }, children: [
-          "Slot: ",
-          name
-        ] }),
+      children: isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "amplifyup-slot-placeholder",
+          style: {
+            minHeight: "60px",
+            color: "#9ca3af",
+            fontSize: "14px",
+            pointerEvents: "none"
+          },
+          children: isEditorMode ? `Drop components here` : `Empty slot: ${name}`
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        isEditorMode && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "amplifyup-slot-placeholder",
+            style: {
+              position: "absolute",
+              top: "4px",
+              left: "4px",
+              fontSize: "10px",
+              color: "#9ca3af",
+              pointerEvents: "none",
+              zIndex: 1,
+              minHeight: "auto"
+            },
+            children: [
+              "Slot: ",
+              name
+            ]
+          }
+        ),
         slotContent
       ] })
     }
@@ -2400,7 +2562,8 @@ function AmplifyUpProvider({ children, config }) {
       return routeFromQuery;
     }
     const actualRoute = window.__AMPLIFYUP_ACTUAL_ROUTE__;
-    if (actualRoute && typeof actualRoute === "string" && (currentPath === "/api/pages/proxy" || currentPath.startsWith("/api/pages/proxy"))) {
+    const inComposerShell = currentPath === "/api/pages/proxy" || currentPath.startsWith("/api/pages/proxy") || currentPath.includes("/preview-frame");
+    if (actualRoute && typeof actualRoute === "string" && inComposerShell) {
       return actualRoute;
     }
     return currentPath;