@amplifyup/sdk 0.1.55 → 0.1.57

package/dist/index.js

@@ -2729,7 +2729,7 @@ Available Console Commands:
     if (typeof document === "undefined") return;
     this.teardownComposerDragDrop();
     const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
-    const componentSelector = "[data-amplifyup-component], [data-component-id]";
+    const componentSelector = "[data-amplifyup-component], [data-component-id], [data-amplifyup-node], [data-node-id]";
     const clearDragOverState = () => {
       this.clearComposerDragHighlight();
     };
@@ -2778,6 +2778,7 @@ Available Console Commands:
       if (!target?.closest) return;
       const component = target.closest(componentSelector);
       const slot = target.closest(slotSelector);
+      const pageSlot = slot && slot.getAttribute("data-slot-source") === "page" ? slot : null;
       if (this.highlightComponentsEnabled && component) {
         if (!component.classList.contains("amplifyup-component-hover")) {
           clearComponentHover();
@@ -2789,7 +2790,7 @@ Available Console Commands:
         return;
       }
       clearComponentHover();
-      if (this.showZonesEnabled && slot) {
+      if (this.showZonesEnabled && slot && !pageSlot) {
         if (!slot.classList.contains("amplifyup-slot-hover")) {
           clearSlotHover();
           slot.classList.add("amplifyup-slot-hover");
@@ -2919,16 +2920,18 @@ Available Console Commands:
     const lines = [];
     if (highlightComponents) {
       lines.push(
-        "[data-amplifyup-component], [data-component-id] {",
+        "[data-amplifyup-component], [data-component-id], [data-amplifyup-node], [data-node-id] {",
         "  cursor: pointer !important;",
         "}",
-        "[data-amplifyup-component].amplifyup-selected, [data-component-id].amplifyup-selected {",
+        "[data-amplifyup-component].amplifyup-selected, [data-component-id].amplifyup-selected, [data-amplifyup-node].amplifyup-selected, [data-node-id].amplifyup-selected {",
         `  outline: 2px solid ${primary} !important;`,
         "  outline-offset: -2px !important;",
         "  box-shadow: inset 0 0 0 1px hsl(82 100% 52% / 0.25) !important;",
         "}",
         "[data-amplifyup-component].amplifyup-component-hover:not(.amplifyup-selected),",
-        "[data-component-id].amplifyup-component-hover:not(.amplifyup-selected) {",
+        "[data-component-id].amplifyup-component-hover:not(.amplifyup-selected),",
+        "[data-amplifyup-node].amplifyup-component-hover:not(.amplifyup-selected),",
+        "[data-node-id].amplifyup-component-hover:not(.amplifyup-selected) {",
         `  outline: 2px solid ${primary} !important;`,
         "  outline-offset: -2px !important;",
         "}"
@@ -3131,7 +3134,7 @@ Available Console Commands:
     let current = element;
     let sawPageSlot = false;
     while (current) {
-      if (current.hasAttribute("data-amplifyup-component") || current.hasAttribute("data-component-id") || current.hasAttribute("data-amplifyup-slot") || current.hasAttribute("data-slot-id")) {
+      if (current.hasAttribute("data-amplifyup-component") || current.hasAttribute("data-component-id") || current.hasAttribute("data-amplifyup-slot") || current.hasAttribute("data-slot-id") || current.hasAttribute("data-node-id") || current.hasAttribute("data-amplifyup-node")) {
         hierarchy.push(current);
         if (current.getAttribute("data-slot-source") === "page") {
           sawPageSlot = true;
@@ -3156,13 +3159,14 @@ Available Console Commands:
     const componentId = element.getAttribute("data-amplifyup-component") || element.getAttribute("data-component-id");
     const slotName = componentId ? null : element.getAttribute("data-amplifyup-slot") || element.getAttribute("data-slot-id");
     const componentName = element.getAttribute("data-component-name");
+    const nodeId = element.getAttribute("data-node-id") || element.closest("[data-node-id]")?.getAttribute("data-node-id") || null;
     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);
+      const nodeId2 = el.getAttribute("data-node-id") || (isSlot ? el.getAttribute("data-parent-node-id") : null);
       return {
         index,
         componentId: elComponentId,
@@ -3170,7 +3174,7 @@ Available Console Commands:
         slotName: isSlot ? elSlotName : null,
         isSlot,
         isPageSlot,
-        nodeId
+        nodeId: nodeId2
       };
     });
     const rect = element.getBoundingClientRect ? element.getBoundingClientRect() : null;
@@ -3180,6 +3184,7 @@ Available Console Commands:
       componentId,
       componentName,
       slotName,
+      nodeId,
       hierarchy: hierarchyInfo,
       selectedIndex: hierarchy.length - 1,
       ...bounds && { bounds },
@@ -3209,22 +3214,27 @@ Available Console Commands:
     }
     const doc = document;
     if (highlightComponents) {
-      const componentElements = doc.querySelectorAll("[data-amplifyup-component], [data-component-id]");
+      const componentElements = doc.querySelectorAll(
+        "[data-amplifyup-component], [data-component-id], [data-amplifyup-node], [data-node-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;
+        const isLayoutNode = htmlEl.hasAttribute("data-node-id") || htmlEl.hasAttribute("data-amplifyup-node");
+        if (!componentId && !isLayoutNode) return;
         if (htmlEl.classList.contains("amplifyup-component-highlight")) return;
-        const component = this.componentRegistry.find((c) => c.component_id === componentId);
+        const component = componentId ? this.componentRegistry.find((c) => c.component_id === componentId) : void 0;
         htmlEl.classList.add("amplifyup-component-highlight");
-        htmlEl.setAttribute("data-component-id", componentId);
-        htmlEl.setAttribute("data-component-name", component?.component_name || componentId);
+        if (componentId) {
+          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) {
+          if (componentId && window.parent && window.parent !== window) {
             window.parent.postMessage({ type: "CHECK_COMPONENT_DELETABLE", componentId }, "*");
           }
         };
@@ -3265,6 +3275,15 @@ Available Console Commands:
         htmlEl.classList.add("amplifyup-slot-highlight");
         const hierarchy = this.buildComponentHierarchy(htmlEl);
         const handleClick = (e) => {
+          const clickTarget = e.target;
+          if (htmlEl.getAttribute("data-slot-source") === "page" && clickTarget?.closest) {
+            const nested = clickTarget.closest(
+              "[data-node-id], [data-amplifyup-node], [data-amplifyup-component], [data-component-id]"
+            );
+            if (nested && nested !== htmlEl && htmlEl.contains(nested)) {
+              return;
+            }
+          }
           e.stopPropagation();
           this.sendSelectionMessage(htmlEl, hierarchy, isEmpty);
         };