@amplifyup/sdk 0.1.6 → 0.1.8

package/dist/index.mjs

@@ -334,6 +334,8 @@ var AmplifyUpSDK = class {
     /** Ensures auto page() on init fires once per page load */
     this.initialPageSent = false;
     this.highlightingEnabled = false;
+    this.highlightComponentsEnabled = true;
+    this.showZonesEnabled = false;
     this.componentRegistry = [];
     this.messageListener = null;
     this.mutationObserver = null;
@@ -1128,7 +1130,7 @@ Available Console Commands:
         }
         if (event.data?.type === "GET_ELEMENT_POSITION") {
           const { componentId, slotName } = event.data;
-          const selector = slotName ? `[data-amplifyup-slot="${slotName}"]` : `[data-amplifyup-component="${componentId}"], [data-component-id="${componentId}"]`;
+          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);
           if (element) {
@@ -1266,12 +1268,62 @@ Available Console Commands:
     if (typeof document === "undefined") return;
     this.componentRegistry = componentRegistry;
     this.highlightingEnabled = true;
+    this.highlightComponentsEnabled = highlightComponents;
+    this.showZonesEnabled = showZones;
     this.disableHighlighting();
-    if (highlightComponents) {
-      this.applyComponentHighlights();
+    this.highlightingEnabled = true;
+    this.injectComposerHighlightStyles(highlightComponents, showZones);
+    if (highlightComponents || showZones) {
+      this.applyComponentHighlights(highlightComponents, showZones);
       this.setupMutationObserver();
     }
   }
+  /** Visual outlines for Composer (direct iframe path — no preview-frame proxy). */
+  injectComposerHighlightStyles(highlightComponents, showZones) {
+    if (typeof document === "undefined") return;
+    if (!highlightComponents && !showZones) return;
+    const existing = document.getElementById("amplifyup-preview-highlights");
+    if (existing) existing.remove();
+    const lines = [];
+    if (highlightComponents) {
+      lines.push(
+        "[data-amplifyup-component], [data-component-id] {",
+        "  outline: 1px dashed rgba(59, 130, 246, 0.8) !important;",
+        "  outline-offset: 2px !important;",
+        "  cursor: pointer !important;",
+        "}",
+        "[data-amplifyup-component]:hover, [data-component-id]:hover {",
+        "  outline-color: rgba(59, 130, 246, 1) !important;",
+        "}"
+      );
+    }
+    if (showZones) {
+      lines.push(
+        "[data-slot-id], [data-amplifyup-slot] {",
+        "  outline: 2px dotted rgba(34, 197, 94, 0.75) !important;",
+        "  outline-offset: 4px !important;",
+        "  min-height: 3rem !important;",
+        "  box-sizing: border-box !important;",
+        "  cursor: pointer !important;",
+        "}",
+        '[data-slot-id="main"], [data-amplifyup-slot="main"] {',
+        "  min-height: 50vh !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;",
+        "}"
+      );
+    }
+    const style = document.createElement("style");
+    style.id = "amplifyup-preview-highlights";
+    style.textContent = lines.join("\n");
+    document.head.appendChild(style);
+  }
   /**
    * Set up MutationObserver to watch for new components being added
    */
@@ -1287,14 +1339,14 @@ Available Console Commands:
         mutation.addedNodes.forEach((node) => {
           if (node.nodeType === Node.ELEMENT_NODE) {
             const el = node;
-            if (el.hasAttribute("data-amplifyup-component") || el.hasAttribute("data-component-id") || el.hasAttribute("data-amplifyup-slot") || el.querySelector("[data-amplifyup-component], [data-component-id], [data-amplifyup-slot]")) {
+            if (el.hasAttribute("data-amplifyup-component") || el.hasAttribute("data-component-id") || el.hasAttribute("data-amplifyup-slot") || el.hasAttribute("data-slot-id") || el.querySelector("[data-amplifyup-component], [data-component-id], [data-amplifyup-slot], [data-slot-id]")) {
               shouldReapply = true;
             }
           }
         });
         if (mutation.type === "attributes") {
           const target = mutation.target;
-          if (target.hasAttribute("data-amplifyup-slot") || target.hasAttribute("data-slot-empty")) {
+          if (target.hasAttribute("data-amplifyup-slot") || target.hasAttribute("data-slot-id") || target.hasAttribute("data-slot-empty")) {
             shouldReapply = true;
           }
         }
@@ -1302,7 +1354,10 @@ Available Console Commands:
       if (shouldReapply && this.highlightingEnabled) {
         setTimeout(() => {
           if (this.highlightingEnabled) {
-            this.applyComponentHighlights();
+            this.applyComponentHighlights(
+              this.highlightComponentsEnabled,
+              this.showZonesEnabled
+            );
           }
         }, 100);
       }
@@ -1311,7 +1366,7 @@ Available Console Commands:
       childList: true,
       subtree: true,
       attributes: true,
-      attributeFilter: ["data-amplifyup-component", "data-component-id", "data-amplifyup-slot", "data-slot-empty"]
+      attributeFilter: ["data-amplifyup-component", "data-component-id", "data-amplifyup-slot", "data-slot-id", "data-slot-empty"]
     });
   }
   /**
@@ -1324,6 +1379,7 @@ Available Console Commands:
       this.mutationObserver.disconnect();
       this.mutationObserver = null;
     }
+    document.getElementById("amplifyup-preview-highlights")?.remove();
     document.querySelectorAll(".amplifyup-component-highlight").forEach((el) => {
       const htmlEl = el;
       const handlers = htmlEl._amplifyupHandlers;
@@ -1339,6 +1395,7 @@ Available Console Commands:
       if (handlers) {
         if (handlers.handleClick) htmlEl.removeEventListener("click", handlers.handleClick);
         if (handlers.handleDragOver) htmlEl.removeEventListener("dragover", handlers.handleDragOver);
+        if (handlers.handleDragLeave) htmlEl.removeEventListener("dragleave", handlers.handleDragLeave);
         if (handlers.handleDrop) htmlEl.removeEventListener("drop", handlers.handleDrop);
       }
       delete htmlEl._amplifyupSlotHandlers;
@@ -1352,7 +1409,7 @@ Available Console Commands:
     const hierarchy = [];
     let current = element;
     while (current) {
-      if (current.hasAttribute("data-amplifyup-component") || current.hasAttribute("data-component-id") || current.hasAttribute("data-amplifyup-slot")) {
+      if (current.hasAttribute("data-amplifyup-component") || current.hasAttribute("data-component-id") || current.hasAttribute("data-amplifyup-slot") || current.hasAttribute("data-slot-id")) {
         hierarchy.push(current);
       }
       current = current.parentElement;
@@ -1365,11 +1422,11 @@ 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");
+    const slotName = 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");
+      const elSlotName = el.getAttribute("data-amplifyup-slot") || el.getAttribute("data-slot-id");
       const elComponentName = el.getAttribute("data-component-name");
       return {
         index,
@@ -1407,98 +1464,116 @@ Available Console Commands:
   /**
    * Apply component highlights
    */
-  applyComponentHighlights() {
+  applyComponentHighlights(highlightComponents = true, showZones = true) {
     if (typeof document === "undefined") return;
     if (!this.isVisualEditorMode) {
       return;
     }
     const doc = document;
     const win = window;
-    const componentElements = doc.querySelectorAll("[data-amplifyup-component], [data-component-id]");
-    console.log("[AmplifyUp SDK] Found", componentElements.length, "components to highlight");
-    this.sendComponentTree();
-    const slotElements = doc.querySelectorAll("[data-amplifyup-slot]");
-    console.log("[AmplifyUp SDK] Found", slotElements.length, "slots to highlight");
-    componentElements.forEach((el) => {
-      const htmlEl = el;
-      const componentId = htmlEl.getAttribute("data-amplifyup-component") || htmlEl.getAttribute("data-component-id");
-      if (!componentId) return;
-      if (htmlEl.classList.contains("amplifyup-component-highlight")) return;
-      const component = this.componentRegistry.find((c) => c.component_id === componentId);
-      htmlEl.classList.add("amplifyup-component-highlight");
-      htmlEl.setAttribute("data-component-id", componentId);
-      htmlEl.setAttribute("data-component-name", component?.component_name || componentId);
-      const hierarchy = this.buildComponentHierarchy(htmlEl);
-      const handleClick = (e) => {
-        e.stopPropagation();
-        this.sendSelectionMessage(htmlEl, hierarchy);
-        if (window.parent && window.parent !== window) {
-          window.parent.postMessage({ type: "CHECK_COMPONENT_DELETABLE", componentId }, "*");
-        }
-      };
-      htmlEl.addEventListener("click", handleClick);
-      htmlEl._amplifyupHandlers = { handleClick };
-    });
-    this.componentRegistry.forEach((component) => {
-      if (!component.data_attribute) return;
-      const elements = doc.querySelectorAll(`[${component.data_attribute}]`);
-      elements.forEach((el) => {
+    if (highlightComponents) {
+      const componentElements = doc.querySelectorAll("[data-amplifyup-component], [data-component-id]");
+      console.log("[AmplifyUp SDK] Found", componentElements.length, "components to highlight");
+      componentElements.forEach((el) => {
         const htmlEl = el;
+        const componentId = htmlEl.getAttribute("data-amplifyup-component") || htmlEl.getAttribute("data-component-id");
+        if (!componentId) return;
         if (htmlEl.classList.contains("amplifyup-component-highlight")) return;
+        const component = this.componentRegistry.find((c) => c.component_id === componentId);
         htmlEl.classList.add("amplifyup-component-highlight");
-        htmlEl.setAttribute("data-component-id", component.component_id);
-        htmlEl.setAttribute("data-component-name", component.component_name);
+        htmlEl.setAttribute("data-component-id", componentId);
+        htmlEl.setAttribute("data-component-name", component?.component_name || componentId);
         const hierarchy = this.buildComponentHierarchy(htmlEl);
         const handleClick = (e) => {
           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 }, "*");
           }
         };
         htmlEl.addEventListener("click", handleClick);
         htmlEl._amplifyupHandlers = { handleClick };
       });
-    });
-    slotElements.forEach((el) => {
-      const htmlEl = el;
-      const slotName = htmlEl.getAttribute("data-amplifyup-slot");
-      const isEmpty = htmlEl.getAttribute("data-slot-empty") === "true";
-      if (!slotName) return;
-      if (htmlEl.classList.contains("amplifyup-slot-highlight")) return;
-      htmlEl.classList.add("amplifyup-slot-highlight");
-      const hierarchy = this.buildComponentHierarchy(htmlEl);
-      const handleClick = (e) => {
-        e.stopPropagation();
-        this.sendSelectionMessage(htmlEl, hierarchy, isEmpty);
-      };
-      const handleDrop = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        try {
-          const data = JSON.parse(e.dataTransfer.getData("application/json"));
-          if (data.type === "component" && win.parent && win.parent !== win) {
-            win.parent.postMessage({
-              type: "COMPONENT_DROPPED",
-              componentId: data.componentId,
-              componentName: data.componentName,
-              slotName,
-              slotElement: { path: htmlEl.getAttribute("data-slot-path"), isEmpty }
-            }, "*");
+      this.componentRegistry.forEach((component) => {
+        if (!component.data_attribute) return;
+        const elements = doc.querySelectorAll(`[${component.data_attribute}]`);
+        elements.forEach((el) => {
+          const htmlEl = el;
+          if (htmlEl.classList.contains("amplifyup-component-highlight")) return;
+          htmlEl.classList.add("amplifyup-component-highlight");
+          htmlEl.setAttribute("data-component-id", component.component_id);
+          htmlEl.setAttribute("data-component-name", component.component_name);
+          const hierarchy = this.buildComponentHierarchy(htmlEl);
+          const handleClick = (e) => {
+            e.stopPropagation();
+            this.sendSelectionMessage(htmlEl, hierarchy);
+            if (window.parent && window.parent !== window) {
+              window.parent.postMessage({ type: "CHECK_COMPONENT_DELETABLE", componentId: component.component_id }, "*");
+            }
+          };
+          htmlEl.addEventListener("click", handleClick);
+          htmlEl._amplifyupHandlers = { handleClick };
+        });
+      });
+    }
+    if (showZones) {
+      const slotElements = doc.querySelectorAll("[data-amplifyup-slot], [data-slot-id]");
+      console.log("[AmplifyUp SDK] Found", slotElements.length, "slots to highlight");
+      slotElements.forEach((el) => {
+        const htmlEl = el;
+        const slotName = htmlEl.getAttribute("data-amplifyup-slot") || htmlEl.getAttribute("data-slot-id");
+        const isEmpty = htmlEl.getAttribute("data-slot-empty") === "true";
+        if (!slotName) return;
+        if (htmlEl.classList.contains("amplifyup-slot-highlight")) return;
+        htmlEl.classList.add("amplifyup-slot-highlight");
+        const hierarchy = this.buildComponentHierarchy(htmlEl);
+        const handleClick = (e) => {
+          e.stopPropagation();
+          this.sendSelectionMessage(htmlEl, hierarchy, isEmpty);
+        };
+        const handleDrop = (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          htmlEl.classList.remove("amplifyup-drag-over-slot");
+          try {
+            const data = JSON.parse(e.dataTransfer.getData("application/json"));
+            if (data.type === "component" && win.parent && win.parent !== win) {
+              win.parent.postMessage({
+                type: "COMPONENT_DROPPED",
+                componentId: data.componentId,
+                componentName: data.componentName,
+                slotName,
+                slotElement: { path: htmlEl.getAttribute("data-slot-path"), isEmpty }
+              }, "*");
+              win.parent.postMessage({ type: "DROP_ON_SLOT", slotName }, "*");
+            }
+          } catch (_err) {
           }
-        } catch (_err) {
-        }
-      };
-      const handleDragOver = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        e.dataTransfer.dropEffect = "copy";
-      };
-      htmlEl.addEventListener("click", handleClick);
-      htmlEl.addEventListener("dragover", handleDragOver);
-      htmlEl.addEventListener("drop", handleDrop);
-      htmlEl._amplifyupSlotHandlers = { handleClick, handleDragOver, handleDrop };
-    });
+        };
+        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
+        };
+      });
+    }
   }
   /**
    * Cleanup: Remove message listener and observers