@amplifyup/sdk 0.1.55 → 0.1.57

package/dist/AmplifyRenderer.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { createContext, memo, useState, useEffect, useContext, Fragment as Fragment$1, Component } from 'react';
+import { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, Component } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import 'marked';
 
@@ -2414,7 +2414,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();
     };
@@ -2463,6 +2463,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();
@@ -2474,7 +2475,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");
@@ -2604,16 +2605,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;",
         "}"
@@ -2816,7 +2819,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;
@@ -2841,13 +2844,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,
@@ -2855,7 +2859,7 @@ Available Console Commands:
         slotName: isSlot ? elSlotName : null,
         isSlot,
         isPageSlot,
-        nodeId
+        nodeId: nodeId2
       };
     });
     const rect = element.getBoundingClientRect ? element.getBoundingClientRect() : null;
@@ -2865,6 +2869,7 @@ Available Console Commands:
       componentId,
       componentName,
       slotName,
+      nodeId,
       hierarchy: hierarchyInfo,
       selectedIndex: hierarchy.length - 1,
       ...bounds && { bounds },
@@ -2894,22 +2899,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 }, "*");
           }
         };
@@ -2950,6 +2960,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);
         };
@@ -3463,23 +3482,32 @@ function AmplifyRendererInner({
       }
     }
     const slotsToPass = Object.keys(slotChildren).length > 0 ? slotChildren : void 0;
-    return /* @__PURE__ */ jsx("div", { "data-node-id": node.id, "data-amplifyup-node": "", children: /* @__PURE__ */ jsx(
-      ComponentRenderBoundary,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        componentId: node.componentId,
-        nodeId: node.id,
+        "data-node-id": node.id,
+        "data-amplifyup-node": "",
+        "data-component-id": node.componentId,
+        "data-amplifyup-component": node.componentId,
         children: /* @__PURE__ */ jsx(
-          LiveNodeRender,
+          ComponentRenderBoundary,
           {
-            nodeId: node.id,
             componentId: node.componentId,
-            props: nodeRenderProps(node),
-            slots: slotsToPass,
-            renderComponent
+            nodeId: node.id,
+            children: /* @__PURE__ */ jsx(
+              LiveNodeRender,
+              {
+                nodeId: node.id,
+                componentId: node.componentId,
+                props: nodeRenderProps(node),
+                slots: slotsToPass,
+                renderComponent
+              }
+            )
           }
         )
       }
-    ) });
+    );
   };
   const rawTree = pageConfig.layoutTree;
   const layoutTree = Array.isArray(rawTree) ? rawTree : rawTree && typeof rawTree === "object" && rawTree.componentId ? [rawTree] : [];
@@ -3493,9 +3521,9 @@ function AmplifyRendererInner({
       "data-amplifyup-slot": "main",
       "data-slot-source": "page",
       "data-slot-empty": layoutTree.length === 0 ? "true" : void 0,
-      children: layoutTree.map((node) => /* @__PURE__ */ jsx("div", { children: renderNode(node) }, node.id))
+      children: layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id))
     }
-  ) : layoutTree.map((node) => /* @__PURE__ */ jsx("div", { children: renderNode(node) }, node.id)) });
+  ) : layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id)) });
 }
 var AmplifyRenderer = memo(AmplifyRendererInner);