@amplifyup/sdk 0.1.16 → 0.1.17

package/dist/react.js

@@ -1207,6 +1207,10 @@ Available Console Commands:
           this.clearComposerDragHighlight();
           return;
         }
+        if (event.data?.type === "CLEAR_SELECTION") {
+          this.clearComposerSelection();
+          return;
+        }
         if (event.data?.type === "GET_ELEMENT_POSITION") {
           const { componentId, slotName, nodeId, isPageSlot } = event.data;
           let element = null;
@@ -1248,6 +1252,7 @@ Available Console Commands:
             found: !!element
           });
           if (element) {
+            this.markComposerSelection(element);
             const rect = element.getBoundingClientRect();
             const position = {
               x: rect.left + rect.width / 2,
@@ -1315,6 +1320,7 @@ Available Console Commands:
             break;
           case "SHOW_COMPONENT_TOOLTIP":
           case "HIDE_ALL_TOOLTIPS":
+            this.clearComposerSelection();
             break;
           case "ENABLE_EVENT_SELECTION":
             console.log("[AmplifyUp SDK] Enable event selection mode:", message.enabled);
@@ -1552,29 +1558,46 @@ Available Console Commands:
    */
   enableHighlighting(componentRegistry, highlightComponents, showZones) {
     if (typeof document === "undefined") return;
+    const previouslySelected = Array.from(
+      document.querySelectorAll(".amplifyup-selected")
+    );
     this.componentRegistry = componentRegistry;
     this.highlightingEnabled = true;
     this.highlightComponentsEnabled = highlightComponents;
     this.showZonesEnabled = showZones;
-    this.disableHighlighting();
+    this.disableHighlighting({ clearSelection: false });
     this.highlightingEnabled = true;
     this.injectComposerHighlightStyles(highlightComponents, showZones);
     if (highlightComponents || showZones) {
       this.applyComponentHighlights(highlightComponents, showZones);
       this.setupMutationObserver();
-    }
-    if (showZones) {
       this.setupComposerDragDrop();
     }
+    previouslySelected.forEach((el) => {
+      if (document.contains(el)) {
+        el.classList.add("amplifyup-selected");
+      }
+    });
   }
   /** 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 componentSelector = "[data-amplifyup-component], [data-component-id]";
     const clearDragOverState = () => {
       this.clearComposerDragHighlight();
     };
+    const clearComponentHover = () => {
+      document.querySelectorAll(".amplifyup-component-hover").forEach((el) => {
+        el.classList.remove("amplifyup-component-hover");
+      });
+    };
+    const clearSlotHover = () => {
+      document.querySelectorAll(`${slotSelector}.amplifyup-slot-hover`).forEach((el) => {
+        el.classList.remove("amplifyup-slot-hover");
+      });
+    };
     const dragenter = (e) => {
       e.preventDefault();
     };
@@ -1605,31 +1628,59 @@ Available Console Commands:
       this.postDropOnSlot(slot);
     };
     const mouseover = (e) => {
-      if (!this.showZonesEnabled) return;
+      if (!this.highlightComponentsEnabled && !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");
+      if (!target?.closest) return;
+      const component = target.closest(componentSelector);
+      const slot = target.closest(slotSelector);
+      if (this.highlightComponentsEnabled && component) {
+        if (!component.classList.contains("amplifyup-component-hover")) {
+          clearComponentHover();
+          component.classList.add("amplifyup-component-hover");
+        }
+        if (slot && !component.contains(slot)) {
+          clearSlotHover();
+        }
+        return;
+      }
+      clearComponentHover();
+      if (this.showZonesEnabled && slot) {
+        if (!slot.classList.contains("amplifyup-slot-hover")) {
+          clearSlotHover();
+          slot.classList.add("amplifyup-slot-hover");
+        }
+      }
     };
     const mouseout = (e) => {
-      if (!this.showZonesEnabled) return;
+      if (!this.highlightComponentsEnabled && !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");
-        });
+      if (this.highlightComponentsEnabled) {
+        if (!related?.closest?.(componentSelector)) {
+          clearComponentHover();
+        }
+      }
+      if (this.showZonesEnabled) {
+        if (!related?.closest?.(slotSelector)) {
+          clearSlotHover();
+        }
       }
     };
-    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 };
+    if (this.showZonesEnabled) {
+      document.addEventListener("dragenter", dragenter, false);
+      document.addEventListener("dragover", dragover, false);
+      document.addEventListener("dragleave", dragleave, false);
+      document.addEventListener("drop", drop, false);
+    }
+    this.composerDragHandlers = {
+      dragenter,
+      dragover,
+      dragleave,
+      drop,
+      mouseover,
+      mouseout
+    };
   }
   teardownComposerDragDrop() {
     if (!this.composerDragHandlers || typeof document === "undefined") return;
@@ -1652,6 +1703,20 @@ Available Console Commands:
     document.querySelectorAll("[data-slot-id].amplifyup-slot-hover, [data-amplifyup-slot].amplifyup-slot-hover").forEach((el) => {
       el.classList.remove("amplifyup-slot-hover");
     });
+    document.querySelectorAll(".amplifyup-component-hover").forEach((el) => {
+      el.classList.remove("amplifyup-component-hover");
+    });
+  }
+  clearComposerSelection() {
+    if (typeof document === "undefined") return;
+    document.querySelectorAll(
+      "[data-slot-id].amplifyup-selected, [data-amplifyup-slot].amplifyup-selected, [data-amplifyup-component].amplifyup-selected, [data-component-id].amplifyup-selected"
+    ).forEach((el) => el.classList.remove("amplifyup-selected"));
+  }
+  markComposerSelection(element) {
+    if (typeof document === "undefined") return;
+    this.clearComposerSelection();
+    element.classList.add("amplifyup-selected");
   }
   /** Visual outlines for Composer (direct iframe path — no preview-frame proxy). */
   injectComposerHighlightStyles(highlightComponents, showZones) {
@@ -1659,16 +1724,29 @@ Available Console Commands:
     if (!highlightComponents && !showZones) return;
     const existing = document.getElementById("amplifyup-preview-highlights");
     if (existing) existing.remove();
+    const primary = "hsl(82 92% 42%)";
     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;",
+        "[data-amplifyup-component].amplifyup-selected, [data-component-id].amplifyup-selected {",
+        `  outline: 2px solid ${primary} !important;`,
+        "  outline-offset: -2px !important;",
+        "  box-shadow: inset 0 0 0 1px hsl(82 92% 42% / 0.25) !important;",
+        "}",
+        "[data-amplifyup-component].amplifyup-component-hover:not(.amplifyup-selected),",
+        "[data-component-id].amplifyup-component-hover:not(.amplifyup-selected) {",
+        `  outline: 2px solid ${primary} !important;`,
+        "  outline-offset: -2px !important;",
+        "}"
+      );
+    }
+    if (highlightComponents || showZones) {
+      lines.push(
+        "[data-slot-id].amplifyup-selected, [data-amplifyup-slot].amplifyup-selected {",
+        "  background-color: rgba(245, 245, 220, 0.35) !important;",
         "}"
       );
     }
@@ -1803,8 +1881,9 @@ Available Console Commands:
   /**
    * Disable component highlighting
    */
-  disableHighlighting() {
+  disableHighlighting(opts) {
     if (typeof document === "undefined") return;
+    const clearSelection = opts?.clearSelection !== false;
     this.highlightingEnabled = false;
     this.teardownComposerDragDrop();
     if (this.mutationObserver) {
@@ -1833,10 +1912,10 @@ Available Console Commands:
       delete htmlEl._amplifyupSlotHandlers;
       htmlEl.classList.remove("amplifyup-slot-highlight");
     });
+    if (clearSelection) {
+      this.clearComposerSelection();
+    }
   }
-  /**
-   * Build component hierarchy for ancestor selection
-   */
   buildComponentHierarchy(element) {
     const hierarchy = [];
     let current = element;
@@ -1900,6 +1979,7 @@ Available Console Commands:
       window.parent.postMessage(message, "*");
       console.log("[AmplifyUp SDK] Sent selection message:", message);
     }
+    this.markComposerSelection(element);
   }
   /**
    * Send component tree to orchestrator