@amplifyup/sdk 0.1.11 → 0.1.12

package/dist/index.d.mts

@@ -216,6 +216,14 @@ declare class AmplifyUpSDK {
      * Generate a CSS selector for an element
      */
     private generateSelectorForElement;
+    /** Clear drag-over highlight state (Composer overlay path or native drag end). */
+    private clearComposerDragHighlight;
+    /**
+     * 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.
+     */
+    private handleComposerDragAtPoint;
+    private handleComposerDropAtPoint;
     /**
      * Enable component highlighting
      */

package/dist/index.d.ts

@@ -216,6 +216,14 @@ declare class AmplifyUpSDK {
      * Generate a CSS selector for an element
      */
     private generateSelectorForElement;
+    /** Clear drag-over highlight state (Composer overlay path or native drag end). */
+    private clearComposerDragHighlight;
+    /**
+     * 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.
+     */
+    private handleComposerDragAtPoint;
+    private handleComposerDropAtPoint;
     /**
      * Enable component highlighting
      */

package/dist/index.js

@@ -1158,6 +1158,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}"]`;
@@ -1291,6 +1309,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
    */