@thestatic-tv/dcl-sdk 2.5.11 → 2.5.13

package/dist/index.js

@@ -670,16 +670,16 @@ var UI_DIMENSIONS = {
     buttonHeightSmall: 30,
     inputHeight: 36
   },
-  // Notification banner - next to DCL native chat panel
+  // Notification banner - centered, aligned with toggle buttons
   notification: {
     width: 340,
-    height: 44,
-    bottom: 55,
-    // Above the chat input area
-    left: 400,
-    // Right of DCL native chat (chat is ~380px wide)
+    height: 36,
+    // Same as toggle buttons
+    bottom: 10,
+    // Same as toggle buttons
     borderWidth: 2,
     fontSize: 14
+    // Same as toggle buttons (14)
   },
   // Shared
   closeButton: {
@@ -2342,60 +2342,73 @@ function initNotificationSystem() {
 function NotificationBanner() {
   initNotificationSystem();
   if (!notificationVisible) return null;
-  return /* @__PURE__ */ import_react_ecs4.default.createElement(
-    import_react_ecs4.UiEntity,
-    {
-      uiTransform: {
-        positionType: "absolute",
-        position: { bottom: N.bottom, left: N.left },
-        width: N.width,
-        height: N.height,
-        flexDirection: "row",
-        alignItems: "center"
-      },
-      uiBackground: { color: C.panel }
-    },
+  return (
+    // Full-width container to center the notification
     /* @__PURE__ */ import_react_ecs4.default.createElement(
       import_react_ecs4.UiEntity,
       {
         uiTransform: {
-          width: N.borderWidth,
-          height: "100%"
-        },
-        uiBackground: { color: C.cyan }
-      }
-    ),
-    /* @__PURE__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.UiEntity,
-      {
-        uiTransform: {
-          flexGrow: 1,
-          height: "100%",
-          padding: { left: 12, right: 12 },
+          positionType: "absolute",
+          position: { bottom: N.bottom, left: 0, right: 0 },
+          height: N.height,
           justifyContent: "center",
-          alignItems: "flex-start"
+          alignItems: "center"
         }
       },
       /* @__PURE__ */ import_react_ecs4.default.createElement(
-        import_react_ecs4.Label,
+        import_react_ecs4.UiEntity,
         {
-          value: notificationText,
-          fontSize: N.fontSize,
-          color: C.white,
-          textAlign: "middle-left"
-        }
-      )
-    ),
-    /* @__PURE__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.UiEntity,
-      {
-        uiTransform: {
-          width: 6,
-          height: 6,
-          margin: { right: 12 }
+          uiTransform: {
+            width: N.width,
+            height: N.height,
+            flexDirection: "row",
+            alignItems: "center"
+          },
+          uiBackground: { color: C.panel }
         },
-        uiBackground: { color: C.cyan }
-      }
+        /* @__PURE__ */ import_react_ecs4.default.createElement(
+          import_react_ecs4.UiEntity,
+          {
+            uiTransform: {
+              width: N.borderWidth,
+              height: "100%"
+            },
+            uiBackground: { color: C.cyan }
+          }
+        ),
+        /* @__PURE__ */ import_react_ecs4.default.createElement(
+          import_react_ecs4.UiEntity,
+          {
+            uiTransform: {
+              flexGrow: 1,
+              height: "100%",
+              padding: { left: 10, right: 10 },
+              justifyContent: "center",
+              alignItems: "flex-start"
+            }
+          },
+          /* @__PURE__ */ import_react_ecs4.default.createElement(
+            import_react_ecs4.Label,
+            {
+              value: notificationText,
+              fontSize: N.fontSize,
+              color: C.white,
+              textAlign: "middle-left"
+            }
+          )
+        ),
+        /* @__PURE__ */ import_react_ecs4.default.createElement(
+          import_react_ecs4.UiEntity,
+          {
+            uiTransform: {
+              width: 5,
+              height: 5,
+              margin: { right: 10 }
+            },
+            uiBackground: { color: C.cyan }
+          }
+        )
+      )
     )
   );
 }

package/dist/index.mjs

@@ -625,16 +625,16 @@ var UI_DIMENSIONS = {
     buttonHeightSmall: 30,
     inputHeight: 36
   },
-  // Notification banner - next to DCL native chat panel
+  // Notification banner - centered, aligned with toggle buttons
   notification: {
     width: 340,
-    height: 44,
-    bottom: 55,
-    // Above the chat input area
-    left: 400,
-    // Right of DCL native chat (chat is ~380px wide)
+    height: 36,
+    // Same as toggle buttons
+    bottom: 10,
+    // Same as toggle buttons
     borderWidth: 2,
     fontSize: 14
+    // Same as toggle buttons (14)
   },
   // Shared
   closeButton: {
@@ -2297,60 +2297,73 @@ function initNotificationSystem() {
 function NotificationBanner() {
   initNotificationSystem();
   if (!notificationVisible) return null;
-  return /* @__PURE__ */ ReactEcs4.createElement(
-    UiEntity4,
-    {
-      uiTransform: {
-        positionType: "absolute",
-        position: { bottom: N.bottom, left: N.left },
-        width: N.width,
-        height: N.height,
-        flexDirection: "row",
-        alignItems: "center"
-      },
-      uiBackground: { color: C.panel }
-    },
+  return (
+    // Full-width container to center the notification
     /* @__PURE__ */ ReactEcs4.createElement(
       UiEntity4,
       {
         uiTransform: {
-          width: N.borderWidth,
-          height: "100%"
-        },
-        uiBackground: { color: C.cyan }
-      }
-    ),
-    /* @__PURE__ */ ReactEcs4.createElement(
-      UiEntity4,
-      {
-        uiTransform: {
-          flexGrow: 1,
-          height: "100%",
-          padding: { left: 12, right: 12 },
+          positionType: "absolute",
+          position: { bottom: N.bottom, left: 0, right: 0 },
+          height: N.height,
           justifyContent: "center",
-          alignItems: "flex-start"
+          alignItems: "center"
         }
       },
       /* @__PURE__ */ ReactEcs4.createElement(
-        Label4,
+        UiEntity4,
         {
-          value: notificationText,
-          fontSize: N.fontSize,
-          color: C.white,
-          textAlign: "middle-left"
-        }
-      )
-    ),
-    /* @__PURE__ */ ReactEcs4.createElement(
-      UiEntity4,
-      {
-        uiTransform: {
-          width: 6,
-          height: 6,
-          margin: { right: 12 }
+          uiTransform: {
+            width: N.width,
+            height: N.height,
+            flexDirection: "row",
+            alignItems: "center"
+          },
+          uiBackground: { color: C.panel }
         },
-        uiBackground: { color: C.cyan }
-      }
+        /* @__PURE__ */ ReactEcs4.createElement(
+          UiEntity4,
+          {
+            uiTransform: {
+              width: N.borderWidth,
+              height: "100%"
+            },
+            uiBackground: { color: C.cyan }
+          }
+        ),
+        /* @__PURE__ */ ReactEcs4.createElement(
+          UiEntity4,
+          {
+            uiTransform: {
+              flexGrow: 1,
+              height: "100%",
+              padding: { left: 10, right: 10 },
+              justifyContent: "center",
+              alignItems: "flex-start"
+            }
+          },
+          /* @__PURE__ */ ReactEcs4.createElement(
+            Label4,
+            {
+              value: notificationText,
+              fontSize: N.fontSize,
+              color: C.white,
+              textAlign: "middle-left"
+            }
+          )
+        ),
+        /* @__PURE__ */ ReactEcs4.createElement(
+          UiEntity4,
+          {
+            uiTransform: {
+              width: 5,
+              height: 5,
+              margin: { right: 10 }
+            },
+            uiBackground: { color: C.cyan }
+          }
+        )
+      )
     )
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thestatic-tv/dcl-sdk",
-  "version": "2.5.11",
+  "version": "2.5.13",
   "description": "Connect your Decentraland scene to thestatic.tv - full channel lineup, metrics tracking, and interactions",
   "main": "dist/index.js",
   "module": "dist/index.mjs",