@amplifyup/sdk 0.1.10 → 0.1.12

package/dist/react.mjs

@@ -349,6 +349,7 @@ var AmplifyUpSDK = class {
     this.componentRegistry = [];
     this.messageListener = null;
     this.mutationObserver = null;
+    this.composerDragHandlers = null;
     this.isVisualEditorMode = false;
     this.eventSelectionMode = false;
     this.eventSelectionClickHandler = null;
@@ -1163,6 +1164,24 @@ Available Console Commands:
           }
           return;
         }
+        if (event.data?.type === "COMPOSER_DRAG_AT_POINT") {
+          const { x, y } = event.data;
+          if (typeof x === "number" && typeof y === "number") {
+            this.handleComposerDragAtPoint(x, y);
+          }
+          return;
+        }
+        if (event.data?.type === "COMPOSER_DROP_AT_POINT") {
+          const { x, y } = event.data;
+          if (typeof x === "number" && typeof y === "number") {
+            this.handleComposerDropAtPoint(x, y);
+          }
+          return;
+        }
+        if (event.data?.type === "COMPOSER_DRAG_END") {
+          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}"]`;
@@ -1296,6 +1315,46 @@ Available Console Commands:
     }
     return el.tagName.toLowerCase();
   }
+  /** Clear drag-over highlight state (Composer overlay path or native drag end). */
+  clearComposerDragHighlight() {
+    if (typeof document === "undefined") return;
+    const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
+    document.querySelectorAll(`${slotSelector}.amplifyup-drag-over-slot`).forEach((el) => {
+      el.classList.remove("amplifyup-drag-over-slot");
+    });
+    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.
+   */
+  handleComposerDragAtPoint(x, y) {
+    if (typeof document === "undefined") return;
+    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 {
+      document.body.classList.add("amplifyup-drag-no-drop");
+    }
+  }
+  handleComposerDropAtPoint(x, y) {
+    if (typeof document === "undefined") return;
+    const win = window;
+    const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
+    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 }
+    }, "*");
+  }
   /**
    * Enable component highlighting
    */
@@ -1312,6 +1371,111 @@ Available Console Commands:
       this.applyComponentHighlights(highlightComponents, showZones);
       this.setupMutationObserver();
     }
+    if (showZones) {
+      this.setupComposerDragDrop();
+    }
+  }
+  /** 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 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");
+    };
+    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 (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");
+      }
+    };
+    const dragleave = (e) => {
+      const related = e.relatedTarget;
+      if (!related || !document.body.contains(related)) {
+        clearDragOverState();
+      }
+    };
+    const drop = (e) => {
+      e.preventDefault();
+      const target = e.target;
+      const slot = target?.closest?.(slotSelector);
+      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 }
+        }, "*");
+      }
+    };
+    const mouseover = (e) => {
+      if (!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");
+    };
+    const mouseout = (e) => {
+      if (!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");
+        });
+      }
+    };
+    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 };
+  }
+  teardownComposerDragDrop() {
+    if (!this.composerDragHandlers || typeof document === "undefined") return;
+    const h = this.composerDragHandlers;
+    document.removeEventListener("dragenter", h.dragenter, false);
+    document.removeEventListener("dragover", h.dragover, false);
+    document.removeEventListener("dragleave", h.dragleave, false);
+    document.removeEventListener("drop", h.drop, false);
+    document.removeEventListener("mouseover", h.mouseover, true);
+    document.removeEventListener("mouseout", h.mouseout, true);
+    this.composerDragHandlers = null;
+    document.body.classList.remove("amplifyup-drag-no-drop");
+    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");
+    });
+    document.querySelectorAll("[data-slot-id].amplifyup-slot-hover, [data-amplifyup-slot].amplifyup-slot-hover").forEach((el) => {
+      el.classList.remove("amplifyup-slot-hover");
+    });
   }
   /** Visual outlines for Composer (direct iframe path — no preview-frame proxy). */
   injectComposerHighlightStyles(highlightComponents, showZones) {
@@ -1338,19 +1502,64 @@ Available Console Commands:
         "  outline: 2px dotted rgba(34, 197, 94, 0.75) !important;",
         "  outline-offset: 4px !important;",
         "  min-height: 3rem !important;",
+        "  padding: 20px !important;",
         "  box-sizing: border-box !important;",
         "  cursor: pointer !important;",
+        "  position: relative !important;",
         "}",
         '[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;",
+        "  pointer-events: none !important;",
+        "  white-space: nowrap !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;",
         "}",
         "[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.1) !important;",
+        "  background: rgba(34, 197, 94, 0.18) !important;",
+        "  position: relative !important;",
+        "}",
+        "[data-slot-id].amplifyup-drag-over-slot::after,",
+        "[data-amplifyup-slot].amplifyup-drag-over-slot::after {",
+        '  content: "\\2713  Drop here" !important;',
+        "  position: absolute !important;",
+        "  top: 50% !important; left: 50% !important;",
+        "  transform: translate(-50%, -50%) !important;",
+        "  font-size: 14px !important; font-weight: 600 !important;",
+        "  color: rgb(22, 163, 74) !important;",
+        "  pointer-events: none !important;",
+        "  white-space: nowrap !important;",
+        "  z-index: 1 !important;",
+        "}",
+        "body.amplifyup-drag-no-drop { cursor: no-drop !important; }",
+        "body.amplifyup-drag-no-drop::before {",
+        '  content: "" !important;',
+        "  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;",
+        "  background: rgba(239, 68, 68, 0.06) !important;",
+        "  pointer-events: none !important;",
+        "  z-index: 2147483646 !important;",
+        "}",
+        "body.amplifyup-drag-no-drop::after {",
+        '  content: "\\2717  Not a drop zone" !important;',
+        "  position: fixed !important; bottom: 12px !important; right: 12px !important;",
+        "  font-size: 12px !important; font-weight: 600 !important;",
+        "  color: rgb(185, 28, 28) !important;",
+        "  background: rgba(254, 226, 226, 0.95) !important;",
+        "  padding: 6px 10px !important; border-radius: 6px !important;",
+        "  pointer-events: none !important;",
+        "  z-index: 2147483647 !important;",
+        "  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;",
         "}"
       );
     }
@@ -1410,6 +1619,7 @@ Available Console Commands:
   disableHighlighting() {
     if (typeof document === "undefined") return;
     this.highlightingEnabled = false;
+    this.teardownComposerDragDrop();
     if (this.mutationObserver) {
       this.mutationObserver.disconnect();
       this.mutationObserver = null;
@@ -1570,9 +1780,15 @@ Available Console Commands:
           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 && win.parent !== win) {
+            if (data.type === "component") {
               win.parent.postMessage({
                 type: "COMPONENT_DROPPED",
                 componentId: data.componentId,
@@ -1580,7 +1796,6 @@ Available Console Commands:
                 slotName,
                 slotElement: { path: htmlEl.getAttribute("data-slot-path"), isEmpty }
               }, "*");
-              win.parent.postMessage({ type: "DROP_ON_SLOT", slotName }, "*");
             }
           } catch (_err) {
           }
@@ -1951,7 +2166,7 @@ function defaultPreviewCanvas() {
       "data-slot-id": "main",
       "data-amplifyup-slot": "main",
       "data-slot-empty": "true",
-      className: "min-h-[50vh] w-full"
+      style: { minHeight: "50vh", width: "100%", display: "block" }
     }
   );
 }