@amplifyup/sdk 0.1.37 → 0.1.39

package/dist/AmplifyRenderer.js

@@ -1658,6 +1658,12 @@ Available Console Commands:
           );
           return;
         }
+        if (event.data?.type === "AMPLIFYUP_PROPS_PATCH") {
+          window.dispatchEvent(
+            new CustomEvent("amplifyup:props-patch", { detail: event.data })
+          );
+          return;
+        }
         if (event.data?.type === "COMPONENT_DELETABLE_STATUS") {
           const { componentId, deletable, nodeId } = event.data;
           const element = document.querySelector(`[data-component-id="${componentId}"]`);
@@ -2293,7 +2299,7 @@ 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 primary = "hsl(82 100% 52%)";
     const lines = [];
     if (highlightComponents) {
       lines.push(
@@ -2303,7 +2309,7 @@ Available Console Commands:
         "[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;",
+        "  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) {",
@@ -2315,7 +2321,7 @@ Available Console Commands:
     if (highlightComponents || showZones) {
       lines.push(
         "[data-slot-id].amplifyup-selected, [data-amplifyup-slot].amplifyup-selected {",
-        "  background-color: rgba(245, 245, 220, 0.35) !important;",
+        "  background-color: hsl(82 100% 52% / 0.12) !important;",
         "}"
       );
     }
@@ -2674,25 +2680,46 @@ function useLiveComposerProps(layoutNodeId, props) {
     setLive(props);
   }, [props]);
   react.useEffect(() => {
-    const apply = (fieldName, value, nodeId) => {
-      if (!fieldName || typeof fieldName !== "string") return;
+    const matchesNode = (nodeId) => {
       if (nodeId && layoutNodeId && String(nodeId) !== String(layoutNodeId)) {
-        return;
+        return false;
       }
+      return true;
+    };
+    const applyField = (fieldName, value, nodeId) => {
+      if (!fieldName || typeof fieldName !== "string") return;
+      if (!matchesNode(nodeId)) return;
       setLive((prev) => ({ ...prev, [fieldName]: value }));
     };
+    const applyProps = (nextProps, nodeId) => {
+      if (!nextProps || typeof nextProps !== "object" || Array.isArray(nextProps)) {
+        return;
+      }
+      if (!matchesNode(nodeId)) return;
+      setLive(nextProps);
+    };
     const onPatch = (event) => {
       const detail = event.detail || {};
-      apply(detail.fieldName, detail.value, detail.layoutNodeId);
+      applyField(detail.fieldName, detail.value, detail.layoutNodeId);
+    };
+    const onPropsPatch = (event) => {
+      const detail = event.detail || {};
+      applyProps(detail.props, detail.layoutNodeId);
     };
     const onMessage = (event) => {
+      if (event.data?.type === "AMPLIFYUP_PROPS_PATCH") {
+        applyProps(event.data.props, event.data.layoutNodeId);
+        return;
+      }
       if (event.data?.type !== "AMPLIFYUP_FIELD_PATCH") return;
-      apply(event.data.fieldName, event.data.value, event.data.layoutNodeId);
+      applyField(event.data.fieldName, event.data.value, event.data.layoutNodeId);
     };
     window.addEventListener("amplifyup:field-patch", onPatch);
+    window.addEventListener("amplifyup:props-patch", onPropsPatch);
     window.addEventListener("message", onMessage);
     return () => {
       window.removeEventListener("amplifyup:field-patch", onPatch);
+      window.removeEventListener("amplifyup:props-patch", onPropsPatch);
       window.removeEventListener("message", onMessage);
     };
   }, [layoutNodeId]);