@dcl/react-ecs 7.23.4-26723618219.commit-ea97433 → 7.23.4-26770223094.commit-52b9415

package/dist/components/ScreenInsetArea/index.d.ts

@@ -0,0 +1,22 @@
+import { ReactEcs } from '../../react-ecs';
+import { UiScreenInsetAreaProps } from './types';
+/**
+ *
+ * @public
+ * ScreenInsetArea component
+ *
+ * Constrains its children to the area inside the renderer-reported screen
+ * inset (safe margins). On mobile this is the area excluding the notch,
+ * status bar, home indicator and rounded corners. On desktop the insets are
+ * typically zero, so the container fills the canvas.
+ *
+ * The container is absolutely positioned with top/left/right/bottom matching
+ * the current `UiCanvasInformation.screenInsetArea`, so a child sized
+ * 100%x100% fills the safe area exactly.
+ *
+ * @example
+ * <ScreenInsetArea><MyHud /></ScreenInsetArea>
+ *
+ * @category Component
+ */
+export declare function ScreenInsetArea(props: UiScreenInsetAreaProps): ReactEcs.JSX.Element;

package/dist/components/ScreenInsetArea/index.js

@@ -0,0 +1,32 @@
+import { ReactEcs } from '../../react-ecs';
+import { UiEntity } from '../index';
+import { getScreenInsetArea } from '../utils';
+/**
+ *
+ * @public
+ * ScreenInsetArea component
+ *
+ * Constrains its children to the area inside the renderer-reported screen
+ * inset (safe margins). On mobile this is the area excluding the notch,
+ * status bar, home indicator and rounded corners. On desktop the insets are
+ * typically zero, so the container fills the canvas.
+ *
+ * The container is absolutely positioned with top/left/right/bottom matching
+ * the current `UiCanvasInformation.screenInsetArea`, so a child sized
+ * 100%x100% fills the safe area exactly.
+ *
+ * @example
+ * <ScreenInsetArea><MyHud /></ScreenInsetArea>
+ *
+ * @category Component
+ */
+/* @__PURE__ */
+export function ScreenInsetArea(props) {
+    const { top, left, right, bottom } = getScreenInsetArea();
+    const { uiTransform, ...otherProps } = props;
+    return (ReactEcs.createElement(UiEntity, { ...otherProps, uiTransform: {
+            ...uiTransform,
+            positionType: 'absolute',
+            position: { top, left, right, bottom }
+        } }));
+}

package/dist/components/ScreenInsetArea/types.d.ts

@@ -0,0 +1,22 @@
+import { EntityPropTypes } from '../types';
+/**
+ * ScreenInsetArea component props
+ *
+ * The container reads the current `screenInsetArea` reported by the renderer
+ * via `UiCanvasInformation` (the device safe margins — notch, status bar,
+ * home indicator, rounded corners) and constrains its children to the area
+ * inside those insets using absolute positioning. Layout props that control
+ * the container's own position (`positionType`, `position`) are owned by the
+ * component and are not configurable from props — every other layout,
+ * background and event prop is forwarded as usual.
+ *
+ * @public
+ */
+export type UiScreenInsetAreaProps = Omit<EntityPropTypes, 'uiTransform'> & {
+    /**
+     * Layout overrides forwarded to the underlying entity. The
+     * `positionType` and `position` fields are reserved by the container and
+     * any value provided here is ignored.
+     */
+    uiTransform?: Omit<NonNullable<EntityPropTypes['uiTransform']>, 'positionType' | 'position'>;
+};

package/dist/components/ScreenInsetArea/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -9,10 +9,12 @@ export * from './uiBackground/types';
 export * from './Dropdown/types';
 export * from './Label/types';
 export * from './Button/types';
+export * from './ScreenInsetArea/types';
 export { Dropdown } from './Dropdown';
 export { Input } from './Input';
 export { Label, scaleFontSize } from './Label';
 export { Button } from './Button';
+export { ScreenInsetArea } from './ScreenInsetArea';
 /**
  * @public
  * @category Component

package/dist/components/index.js

@@ -9,10 +9,12 @@ export * from './uiBackground/types';
 export * from './Dropdown/types';
 export * from './Label/types';
 export * from './Button/types';
+export * from './ScreenInsetArea/types';
 export { Dropdown } from './Dropdown';
 export { Input } from './Input';
 export { Label, scaleFontSize } from './Label';
 export { Button } from './Button';
+export { ScreenInsetArea } from './ScreenInsetArea';
 /**
  * @public
  * @category Component

package/dist/components/utils.js

@@ -3,6 +3,9 @@ import { parseUiBackground } from './uiBackground';
 import { parseUiTransform } from './uiTransform';
 let uiScaleFactor = 1;
 let uiScaleOwner = undefined;
+const ZERO_INSETS = { top: 0, left: 0, right: 0, bottom: 0 };
+let screenInsetArea = { ...ZERO_INSETS };
+let screenInsetAreaOwner = undefined;
 /**
  * @internal
  */
@@ -54,13 +57,22 @@ export function getUiScaleFactor() {
     return uiScaleFactor;
 }
 /**
+ * Sets the global UI scale factor.
+ *
+ * The `owner` symbol implements a cooperative reset-protection scheme shared
+ * with {@link resetUiScaleFactor}:
+ *  - Writes always succeed — last writer claims ownership (the most recent
+ *    `owner` passed to `set` is the one allowed to `reset`).
+ *  - Resets from a non-matching owner are ignored, so a stale system can't
+ *    stomp the active scale while another system is driving it.
+ *  - A reset called without an owner always wins (used by tests / teardown).
+ *
  * @internal
  */
 export function setUiScaleFactor(nextScale, owner) {
     if (!Number.isFinite(nextScale) || nextScale < 0)
         return;
     if (owner) {
-        // Mark ownership so only that system can reset the scale.
         uiScaleOwner = owner;
     }
     uiScaleFactor = nextScale;
@@ -69,12 +81,49 @@ export function setUiScaleFactor(nextScale, owner) {
  * @internal
  */
 export function resetUiScaleFactor(owner) {
-    // Ignore resets from non-owners to avoid stomping active scale.
+    // No-op for non-owners (see ownership rules on `setUiScaleFactor`).
+    // A reset with no owner always wins — used by tests and teardown.
     if (owner && uiScaleOwner !== owner)
         return;
     uiScaleOwner = undefined;
     uiScaleFactor = 1;
 }
+/**
+ * @internal
+ */
+export function getScreenInsetArea() {
+    return { ...screenInsetArea };
+}
+/**
+ * Sets the global screen inset area.
+ *
+ * The `owner` symbol implements a cooperative reset-protection scheme shared
+ * with {@link resetScreenInsetArea}:
+ *  - Writes always succeed — last writer claims ownership (the most recent
+ *    `owner` passed to `set` is the one allowed to `reset`).
+ *  - Resets from a non-matching owner are ignored, so a stale system can't
+ *    stomp the active insets while another system is driving them.
+ *  - A reset called without an owner always wins (used by tests / teardown).
+ *
+ * @internal
+ */
+export function setScreenInsetArea(next, owner) {
+    if (owner) {
+        screenInsetAreaOwner = owner;
+    }
+    screenInsetArea = { top: next.top, left: next.left, right: next.right, bottom: next.bottom };
+}
+/**
+ * @internal
+ */
+export function resetScreenInsetArea(owner) {
+    // No-op for non-owners (see ownership rules on `setScreenInsetArea`).
+    // A reset with no owner always wins — used by tests and teardown.
+    if (owner && screenInsetAreaOwner !== owner)
+        return;
+    screenInsetAreaOwner = undefined;
+    screenInsetArea = { ...ZERO_INSETS };
+}
 /**
  * @internal
  */

package/dist/system.js

@@ -2,7 +2,7 @@ import { EntityState } from '@dcl/ecs';
 import * as ecsComponents from '@dcl/ecs/dist/components';
 import React from 'react';
 import { createReconciler } from './reconciler';
-import { getUiScaleFactor, resetUiScaleFactor, setUiScaleFactor } from './components/utils';
+import { getUiScaleFactor, resetScreenInsetArea, resetUiScaleFactor, setScreenInsetArea, setUiScaleFactor } from './components/utils';
 /**
  * @public
  */
@@ -14,6 +14,8 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
     const UiCanvasInformation = ecsComponents.UiCanvasInformation(engine);
     // Unique owner to prevent other UI systems resetting this scale factor.
     const uiScaleFactorOwner = Symbol('react-ecs-ui-scale');
+    // Unique owner for the screen inset module variable.
+    const screenInsetAreaOwner = Symbol('react-ecs-screen-inset-area');
     function getActiveVirtualSize() {
         // Main renderer options win; otherwise use the first additional renderer option.
         if (virtualSize)
@@ -53,13 +55,19 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
         }
     }
     function UiScaleSystem() {
+        const canvasInfo = UiCanvasInformation.getOrNull(engine.RootEntity);
+        // Update the screen inset module variable unconditionally — it is
+        // independent of the virtual size and useful even when the renderer has no
+        // virtual canvas.
+        if (canvasInfo?.screenInsetArea) {
+            setScreenInsetArea(canvasInfo.screenInsetArea, screenInsetAreaOwner);
+        }
         const activeVirtualSize = getActiveVirtualSize();
         if (!activeVirtualSize) {
             // Reset only if this system owns the scale factor.
             resetUiScaleFactor(uiScaleFactorOwner);
             return;
         }
-        const canvasInfo = UiCanvasInformation.getOrNull(engine.RootEntity);
         if (!canvasInfo)
             return;
         const { width, height } = canvasInfo;
@@ -79,6 +87,7 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
             engine.removeSystem(UiScaleSystem);
             engine.removeSystem(ReactBasedUiSystem);
             resetUiScaleFactor(uiScaleFactorOwner);
+            resetScreenInsetArea(screenInsetAreaOwner);
             for (const entity of renderer.getEntities()) {
                 engine.removeEntity(entity);
             }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dcl/react-ecs",
   "description": "Decentraland ECS",
-  "version": "7.23.4-26723618219.commit-ea97433",
+  "version": "7.23.4-26770223094.commit-52b9415",
   "author": "DCL",
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
-    "@dcl/ecs": "7.23.4-26723618219.commit-ea97433",
+    "@dcl/ecs": "7.23.4-26770223094.commit-52b9415",
     "react": "^18.2.0",
     "react-reconciler": "^0.29.0"
   },
@@ -40,5 +40,5 @@
     "tsconfig": "./tsconfig.json"
   },
   "types": "./dist/index.d.ts",
-  "commit": "ea974331caffe948877a5bfadb0dc458ae60e15a"
+  "commit": "52b9415ebab8c77313e9fbc0725fd2e5f916d3c3"
 }