@dcl/react-ecs 7.24.5-29247185020.commit-e92dfe6 → 7.24.5-29264961047.commit-77493c3

package/dist/components/Button/index.js

@@ -29,7 +29,7 @@ function getButtonProps(props) {
  */
 /* @__PURE__ */
 export function Button(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseDrag, onMouseDragLocked, onMouseDragEnd, onInputDown, onInputUp, onInputDrag, onInputDragLocked, onInputDragEnd, ...otherProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props;
     const buttonProps = getButtonProps(props);
     const uiBackgroundProps = parseUiBackground({
         ...buttonProps.uiBackground,
@@ -54,5 +54,5 @@ export function Button(props) {
         if (uiBackgroundProps && uiBackgroundProps.color)
             uiBackgroundProps.color.a /= 2;
     }
-    return (ReactEcs.createElement("entity", { onMouseDown: !!props.disabled ? undefined : onMouseDown, onMouseUp: !!props.disabled ? undefined : onMouseUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDrag: onMouseDrag, onMouseDragLocked: onMouseDragLocked, onMouseDragEnd: onMouseDragEnd, onInputDown: !!props.disabled ? undefined : onInputDown, onInputUp: !!props.disabled ? undefined : onInputUp, onInputDrag: onInputDrag, onInputDragLocked: onInputDragLocked, onInputDragEnd: onInputDragEnd, uiTransform: uiTransformProps, uiText: textProps, uiBackground: uiBackgroundProps }));
+    return (ReactEcs.createElement("entity", { onMouseDown: !!props.disabled ? undefined : onMouseDown, onMouseUp: !!props.disabled ? undefined : onMouseUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, uiTransform: uiTransformProps, uiText: textProps, uiBackground: uiBackgroundProps }));
 }

package/dist/components/Dropdown/index.js

@@ -34,7 +34,7 @@ function parseUiDropdown(props) {
  */
 /* @__PURE__ */
 export function Dropdown(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseDrag, onMouseDragLocked, onMouseDragEnd, onInputDown, onInputUp, onInputDrag, onInputDragLocked, onInputDragEnd, ...otherProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props;
     const dropdownProps = parseUiDropdown(otherProps);
     const commonProps = parseProps({
         uiTransform,
@@ -42,15 +42,7 @@ export function Dropdown(props) {
         onMouseDown,
         onMouseUp,
         onMouseEnter,
-        onMouseLeave,
-        onMouseDrag,
-        onMouseDragLocked,
-        onMouseDragEnd,
-        onInputDown,
-        onInputUp,
-        onInputDrag,
-        onInputDragLocked,
-        onInputDragEnd
+        onMouseLeave
     });
     return ReactEcs.createElement("entity", { ...commonProps, uiDropdown: dropdownProps });
 }

package/dist/components/Input/index.js

@@ -35,7 +35,7 @@ function parseUiInput(props) {
  * @category Component
  */ /* @__PURE__ */
 export function Input(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseDrag, onMouseDragLocked, onMouseDragEnd, onInputDown, onInputUp, onInputDrag, onInputDragLocked, onInputDragEnd, ...otherProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props;
     const inputProps = parseUiInput(otherProps);
     const commonProps = parseProps({
         uiTransform,
@@ -43,15 +43,7 @@ export function Input(props) {
         onMouseDown,
         onMouseUp,
         onMouseEnter,
-        onMouseLeave,
-        onMouseDrag,
-        onMouseDragLocked,
-        onMouseDragEnd,
-        onInputDown,
-        onInputUp,
-        onInputDrag,
-        onInputDragLocked,
-        onInputDragEnd
+        onMouseLeave
     });
     return ReactEcs.createElement("entity", { ...commonProps, uiInput: inputProps });
 }

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

@@ -0,0 +1,23 @@
+import { ReactEcs } from '../../react-ecs';
+import { UiInteractableAreaProps } from './types';
+/**
+ *
+ * @public
+ * InteractableArea component
+ *
+ * Constrains its children to the area inside the renderer-reported interactable
+ * area. This is the portion of the screen not covered by client UI such as the
+ * minimap, chat window, or other platform overlays. On the Unity desktop client
+ * the left 25% of the screen is reserved for client UI, so this container
+ * positions its children within the remaining 75%.
+ *
+ * The container is absolutely positioned with top/left/right/bottom matching
+ * the current `UiCanvasInformation.interactableArea`, so a child sized
+ * 100%x100% fills the interactable area exactly.
+ *
+ * @example
+ * <InteractableArea><MyHud /></InteractableArea>
+ *
+ * @category Component
+ */
+export declare function InteractableArea(props: UiInteractableAreaProps): ReactEcs.JSX.Element;

package/dist/components/InteractableArea/index.js

@@ -0,0 +1,33 @@
+import { ReactEcs } from '../../react-ecs';
+import { UiEntity } from '../index';
+import { getInteractableArea } from '../utils';
+/**
+ *
+ * @public
+ * InteractableArea component
+ *
+ * Constrains its children to the area inside the renderer-reported interactable
+ * area. This is the portion of the screen not covered by client UI such as the
+ * minimap, chat window, or other platform overlays. On the Unity desktop client
+ * the left 25% of the screen is reserved for client UI, so this container
+ * positions its children within the remaining 75%.
+ *
+ * The container is absolutely positioned with top/left/right/bottom matching
+ * the current `UiCanvasInformation.interactableArea`, so a child sized
+ * 100%x100% fills the interactable area exactly.
+ *
+ * @example
+ * <InteractableArea><MyHud /></InteractableArea>
+ *
+ * @category Component
+ */
+/* @__PURE__ */
+export function InteractableArea(props) {
+    const { top, left, right, bottom } = getInteractableArea();
+    const { uiTransform, ...otherProps } = props;
+    return (ReactEcs.createElement(UiEntity, { ...otherProps, uiTransform: {
+            ...uiTransform,
+            positionType: 'absolute',
+            position: { top, left, right, bottom }
+        } }));
+}

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

@@ -0,0 +1,23 @@
+import { EntityPropTypes } from '../types';
+/**
+ * InteractableArea component props
+ *
+ * The container reads the current `interactableArea` reported by the renderer
+ * via `UiCanvasInformation` (the HUD-safe zone — the portion of the screen not
+ * covered by client UI such as the minimap, chat window, or other overlays) 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 UiInteractableAreaProps = 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/InteractableArea/types.js

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

package/dist/components/Label/index.js

@@ -16,22 +16,14 @@ export { scaleFontSize } from './utils';
  */
 /* @__PURE__ */
 export function Label(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseDrag, onMouseDragLocked, onMouseDragEnd, onInputDown, onInputUp, onInputDrag, onInputDragLocked, onInputDragEnd, ...uiTextProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...uiTextProps } = props;
     const commonProps = parseProps({
         uiTransform,
         uiBackground,
         onMouseDown,
         onMouseUp,
         onMouseEnter,
-        onMouseLeave,
-        onMouseDrag,
-        onMouseDragLocked,
-        onMouseDragEnd,
-        onInputDown,
-        onInputUp,
-        onInputDrag,
-        onInputDragLocked,
-        onInputDragEnd
+        onMouseLeave
     });
     const { font, textAlign, fontSize, textWrap, ...textProps } = uiTextProps;
     const uiText = {
@@ -39,9 +31,7 @@ export function Label(props) {
         ...getFont(font),
         ...getTextAlign(textAlign),
         ...getFontSize(fontSize),
-        ...getTextWrap(textWrap),
-        outlineWidth: props.outlineWidth,
-        outlineColor: props.outlineColor
+        ...getTextWrap(textWrap)
     };
     return ReactEcs.createElement("entity", { ...commonProps, uiText: uiText });
 }

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

@@ -15,10 +15,6 @@ export interface UiLabelProps {
     textAlign?: TextAlignType | undefined;
     /** Label font type. @defaultValue 'sans-serif' */
     font?: UiFontType | undefined;
-    /** Outline width of the text. @defaultValue 0 */
-    outlineWidth?: number | undefined;
-    /** Outline color of the text. @defaultValue `{ r: 0, g: 0, b: 0, a: 1 }` */
-    outlineColor?: Color4 | undefined;
     /** Behaviour when text reached. @defaultValue 'wrap' */
     textWrap?: UiTextWrapType | undefined;
 }

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,14 @@ export * from './uiBackground/types';
 export * from './Dropdown/types';
 export * from './Label/types';
 export * from './Button/types';
+export * from './ScreenInsetArea/types';
+export * from './InteractableArea/types';
 export { Dropdown } from './Dropdown';
 export { Input } from './Input';
 export { Label, scaleFontSize } from './Label';
 export { Button } from './Button';
+export { ScreenInsetArea } from './ScreenInsetArea';
+export { InteractableArea } from './InteractableArea';
 /**
  * @public
  * @category Component

package/dist/components/index.js

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

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

@@ -1,50 +1,19 @@
-import { EventSystemCallback, InputAction } from '@dcl/ecs';
 /**
- * legacy Callback function
- *
- * @public @deprecated This type is no longer used in the sdk api, EventSystemCallback is
- * used for listeners instead
- */
-export type Callback = () => void;
-/**
- * a record object mapping `InputAction`s to functions.
- *
- * @example
- * onInputDown={{
- *   [InputAction.IA_PRIMARY]: (eventData) => { console.log("primary") },
- *   [InputAction.IA_SECONDARY]: () => { console.log("secondary") },
- * }}
- *
+ * Callback function to be triggered on a specified event
  * @public
  */
-export type MultiCallback = Partial<Record<InputAction, EventSystemCallback>>;
+export type Callback = () => void;
 /**
  * User key event Listeners
  * @public
  */
 export type Listeners = {
     /** triggered on mouse down event */
-    onMouseDown?: EventSystemCallback;
+    onMouseDown?: Callback;
     /** triggered on mouse up event */
-    onMouseUp?: EventSystemCallback;
+    onMouseUp?: Callback;
     /** triggered on mouse hover event */
-    onMouseEnter?: EventSystemCallback;
+    onMouseEnter?: Callback;
     /** triggered on mouse leave event */
-    onMouseLeave?: EventSystemCallback;
-    /** triggered on mouse drag event */
-    onMouseDrag?: EventSystemCallback;
-    /** triggered on mouse drag event */
-    onMouseDragLocked?: EventSystemCallback;
-    /** triggered on mouse drag event */
-    onMouseDragEnd?: EventSystemCallback;
-    /** triggered on input down event */
-    onInputDown?: MultiCallback;
-    /** triggered on input up event */
-    onInputUp?: MultiCallback;
-    /** triggered on input drag event */
-    onInputDrag?: MultiCallback;
-    /** triggered on input drag event */
-    onInputDragLocked?: MultiCallback;
-    /** triggered on input drag event */
-    onInputDragEnd?: MultiCallback;
+    onMouseLeave?: Callback;
 };

package/dist/components/listeners/types.js

@@ -2,15 +2,7 @@ const listeners = {
     onMouseDown: undefined,
     onMouseUp: undefined,
     onMouseEnter: undefined,
-    onMouseLeave: undefined,
-    onMouseDrag: undefined,
-    onMouseDragLocked: undefined,
-    onMouseDragEnd: undefined,
-    onInputDown: undefined,
-    onInputUp: undefined,
-    onInputDrag: undefined,
-    onInputDragLocked: undefined,
-    onInputDragEnd: undefined
+    onMouseLeave: undefined
 };
 const listenersKey = Object.keys(listeners);
 /**

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

@@ -1,4 +1,4 @@
-import { BorderRect, Entity } from '@dcl/ecs';
+import { BorderRect } from '@dcl/ecs';
 import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
 /**
  * @public
@@ -15,8 +15,6 @@ export interface UiBackgroundProps {
     uvs?: number[];
     /** AvatarTexture for the background */
     avatarTexture?: UiAvatarTexture;
-    /** VideoTexture for the background */
-    videoTexture?: UiVideoTexture;
     /** Texture for the background */
     texture?: UiTexture;
 }
@@ -29,15 +27,6 @@ export interface UiAvatarTexture {
     wrapMode?: TextureWrapType;
     filterMode?: TextureFilterType;
 }
-/**
- * Texture
- * @public
- */
-export interface UiVideoTexture {
-    videoPlayerEntity: Entity;
-    wrapMode?: TextureWrapType;
-    filterMode?: TextureFilterType;
-}
 /**
  * Texture
  * @public

package/dist/components/uiBackground/utils.js

@@ -30,14 +30,6 @@ export function getTexture(props) {
             }
         };
     }
-    if (props.videoTexture) {
-        return {
-            tex: {
-                $case: 'videoTexture',
-                videoTexture: parseTexture(props.videoTexture)
-            }
-        };
-    }
     return undefined;
 }
 function parseTexture(texture) {

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

@@ -1,5 +1,5 @@
-import { PBUiTransform } from '@dcl/ecs/dist/components';
 import { UiTransformProps } from './types';
+import { PBUiTransform } from '@dcl/ecs/dist/components';
 /**
  * @public
  */

package/dist/components/uiTransform/index.js

@@ -1,4 +1,4 @@
-import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, parseBorderColor, parseBorderRadius, parseBorderWidth, getScrollPosition, getScrollVisible, parsePosition, parseSize } from './utils';
+import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, parseBorderColor, parseBorderRadius, parseBorderWidth, parsePosition, parseSize } from './utils';
 /**
  * @internal
  */
@@ -60,7 +60,7 @@ const defaultUiTransform = {
  */
 /* @__PURE__ */
 export function parseUiTransform(props = {}) {
-    const { scrollPosition, scrollVisible, height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, borderRadius, borderWidth, borderColor, zIndex, ...otherProps } = props;
+    const { height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, borderRadius, borderWidth, borderColor, ...otherProps } = props;
     return {
         ...defaultUiTransform,
         ...otherProps,
@@ -86,9 +86,6 @@ export function parseUiTransform(props = {}) {
         ...(flexWrap && getFlexWrap(flexWrap)),
         ...(borderRadius && parseBorderRadius(borderRadius)),
         ...(borderWidth && parseBorderWidth(borderWidth)),
-        ...(borderColor && parseBorderColor(borderColor)),
-        ...(scrollPosition && getScrollPosition(scrollPosition)),
-        ...(scrollVisible && getScrollVisible(scrollVisible)),
-        ...(zIndex && { zIndex })
+        ...(borderColor && parseBorderColor(borderColor))
     };
 }

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

@@ -1,5 +1,4 @@
 import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
-import { Vector2 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/vectors.gen';
 import { ScaleUnit } from '../types';
 /**
  * unit value specified. i.e. 1 || '100%' || '1px' || '10vw'
@@ -74,11 +73,6 @@ export type PositionType = 'absolute' | 'relative';
  * The pointer filter property determines if the ui element blocks the pointer or not (elements with pointer events always block the pointer regardless of this property)
  */
 export type PointerFilterType = 'none' | 'block';
-/**
- * @public
- * The scroll-visible determines if the scrollbars are shown when the scroll overflow is enabled
- */
-export type ScrollVisibleType = 'horizontal' | 'vertical' | 'both' | 'hidden';
 /**
  * Layout props to position things in the canvas
  * @public
@@ -135,12 +129,6 @@ export interface UiTransformProps {
     borderWidth?: Partial<Position> | PositionUnit;
     /** The opacity property sets the opacity level for an element, it's accumulated across children @defaultValue 1 */
     opacity?: number;
-    /** A reference value to identify the element, default empty */
-    elementId?: string;
-    /** default position=(0,0) if it aplies, a vector or a reference-id */
-    scrollPosition?: Vector2 | string;
-    /** default ShowScrollBar.SSB_BOTH */
-    scrollVisible?: ScrollVisibleType;
     /** default 0 */
     zIndex?: number;
 }

package/dist/components/uiTransform/utils.js

@@ -244,40 +244,3 @@ const parsePointerFilter = {
     none: 0 /* PointerFilterMode.PFM_NONE */,
     block: 1 /* PointerFilterMode.PFM_BLOCK */
 };
-/**
- * @internal
- */
-export function getScrollPosition(scrollPosition) {
-    if (typeof scrollPosition === 'string') {
-        return {
-            scrollPosition: {
-                value: {
-                    $case: 'reference',
-                    reference: scrollPosition
-                }
-            }
-        };
-    }
-    else {
-        return {
-            scrollPosition: {
-                value: {
-                    $case: 'position',
-                    position: scrollPosition
-                }
-            }
-        };
-    }
-}
-const parseScrollVisible = {
-    both: 0 /* ShowScrollBar.SSB_BOTH */,
-    hidden: 3 /* ShowScrollBar.SSB_HIDDEN */,
-    horizontal: 2 /* ShowScrollBar.SSB_ONLY_HORIZONTAL */,
-    vertical: 1 /* ShowScrollBar.SSB_ONLY_VERTICAL */
-};
-/**
- * @internal
- */
-export function getScrollVisible(scrollVisible) {
-    return { scrollVisible: parseScrollVisible[scrollVisible] };
-}

package/dist/components/utils.js

@@ -3,6 +3,11 @@ 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;
+let interactableArea = { ...ZERO_INSETS };
+let interactableAreaOwner = undefined;
 /**
  * @internal
  */
@@ -54,13 +59,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 +83,85 @@ 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
+ */
+export function getInteractableArea() {
+    return { ...interactableArea };
+}
+/**
+ * Sets the global interactable area.
+ *
+ * The `owner` symbol implements a cooperative reset-protection scheme shared
+ * with {@link resetInteractableArea}:
+ *  - 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 area while another system is driving it.
+ *  - A reset called without an owner always wins (used by tests / teardown).
+ *
+ * @internal
+ */
+export function setInteractableArea(next, owner) {
+    if (owner) {
+        interactableAreaOwner = owner;
+    }
+    interactableArea = { top: next.top, left: next.left, right: next.right, bottom: next.bottom };
+}
+/**
+ * @internal
+ */
+export function resetInteractableArea(owner) {
+    // No-op for non-owners (see ownership rules on `setInteractableArea`).
+    // A reset with no owner always wins — used by tests and teardown.
+    if (owner && interactableAreaOwner !== owner)
+        return;
+    interactableAreaOwner = undefined;
+    interactableArea = { ...ZERO_INSETS };
+}
 /**
  * @internal
  */

package/dist/platform.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Injects the function used to detect whether the scene runs on a mobile
+ * platform. Called by `@dcl/sdk` with its `isMobile()` platform helper.
+ */
+export declare function setIsMobileProvider(provider: () => boolean): void;
+/**
+ * Whether the scene is running on a mobile platform, according to the
+ * injected provider. Platform detection is asynchronous on the SDK side, so
+ * this may return false during the first ticks and flip to true once the
+ * explorer information arrives.
+ */
+export declare function isMobile(): boolean;

package/dist/platform.js

@@ -0,0 +1,26 @@
+/**
+ * Platform detection hook for the UI scale system.
+ *
+ * react-ecs stays independent of the scene runtime (`~system/*` modules), so
+ * it cannot ask the explorer which platform it runs on. Instead, the host SDK
+ * injects the check at module-load time (see `@dcl/sdk/react-ecs`). Until a
+ * provider is injected — or when none ever is — the platform is assumed to be
+ * non-mobile.
+ */
+let isMobileProvider = () => false;
+/**
+ * Injects the function used to detect whether the scene runs on a mobile
+ * platform. Called by `@dcl/sdk` with its `isMobile()` platform helper.
+ */
+export function setIsMobileProvider(provider) {
+    isMobileProvider = provider;
+}
+/**
+ * Whether the scene is running on a mobile platform, according to the
+ * injected provider. Platform detection is asynchronous on the SDK side, so
+ * this may return false during the first ticks and flip to true once the
+ * explorer information arrives.
+ */
+export function isMobile() {
+    return isMobileProvider();
+}

package/dist/react-ecs.d.ts

@@ -1,5 +1,5 @@
-import { PBUiBackground, PBUiText, PBUiTransform, PBUiInput, PBUiDropdown, EventSystemCallback } from '@dcl/ecs';
-import { Key, MultiCallback } from './components';
+import { PBUiBackground, PBUiText, PBUiTransform, PBUiInput, PBUiDropdown } from '@dcl/ecs';
+import { Callback, Key } from './components';
 /**
  * @public
  */
@@ -18,18 +18,10 @@ export type EntityComponents = {
     uiBackground: PBUiBackground;
     uiInput: PBUiInput;
     uiDropdown: PBUiDropdown;
-    onMouseDown: EventSystemCallback;
-    onMouseUp: EventSystemCallback;
-    onMouseEnter: EventSystemCallback;
-    onMouseLeave: EventSystemCallback;
-    onMouseDrag: EventSystemCallback;
-    onMouseDragLocked: EventSystemCallback;
-    onMouseDragEnd: EventSystemCallback;
-    onInputDown: MultiCallback;
-    onInputUp: MultiCallback;
-    onInputDrag: MultiCallback;
-    onInputDragLocked: MultiCallback;
-    onInputDragEnd: MultiCallback;
+    onMouseDown: Callback;
+    onMouseUp: Callback;
+    onMouseEnter: Callback;
+    onMouseLeave: Callback;
 };
 /**
  * @hidden

package/dist/reconciler/index.d.ts

@@ -1,7 +1,6 @@
 import { Entity, IEngine, PointerEventsSystem } from '@dcl/ecs';
 import { ReactEcs } from '../react-ecs';
-export interface DclReconciler {
-    update: (component: ReactEcs.JSX.ReactNode) => void;
+export declare function createReconciler(engine: Pick<IEngine, 'getComponent' | 'addEntity' | 'removeEntity' | 'defineComponentFromSchema' | 'getEntitiesWith'>, pointerEvents: PointerEventsSystem): {
+    update: (component: ReactEcs.JSX.ReactNode) => number;
     getEntities: () => Entity[];
-}
-export declare function createReconciler(engine: Pick<IEngine, 'getComponent' | 'addEntity' | 'removeEntity' | 'defineComponentFromSchema' | 'getEntitiesWith'>, pointerEvents: PointerEventsSystem, rootEntity: Entity | undefined): DclReconciler;
+};

package/dist/reconciler/index.js

@@ -3,11 +3,24 @@ import Reconciler from 'react-reconciler';
 import { isListener } from '../components';
 import { CANVAS_ROOT_ENTITY } from '../components/uiTransform';
 import { componentKeys, isNotUndefined, noopConfig, propsChanged } from './utils';
-export function createReconciler(engine, pointerEvents, rootEntity) {
+function getPointerEnum(pointerKey) {
+    const pointers = {
+        onMouseDown: 1 /* PointerEventType.PET_DOWN */,
+        onMouseUp: 0 /* PointerEventType.PET_UP */,
+        onMouseEnter: 2 /* PointerEventType.PET_HOVER_ENTER */,
+        onMouseLeave: 3 /* PointerEventType.PET_HOVER_LEAVE */
+    };
+    return pointers[pointerKey];
+}
+export function createReconciler(engine, pointerEvents) {
     // Store all the entities so when we destroy the UI we can also destroy them
     const entities = new Set();
     // Store the onChange callbacks to be runned every time a Result has changed
     const changeEvents = new Map();
+    const clickEvents = new Map();
+    // Track the last value reported by the renderer for each input entity,
+    // so we can avoid echoing it back and causing keystroke drops.
+    const lastInputResultValues = new Map();
     // Initialize components
     const UiTransform = components.UiTransform(engine);
     const UiText = components.UiText(engine);
@@ -16,8 +29,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
     const UiInputResult = components.UiInputResult(engine);
     const UiDropdown = components.UiDropdown(engine);
     const UiDropdownResult = components.UiDropdownResult(engine);
-    const UiScrollResult = components.UiScrollResult(engine);
-    const Transform = components.Transform(engine);
     // Component ID Helper
     const getComponentId = {
         uiTransform: UiTransform.componentId,
@@ -26,15 +37,22 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
         uiInput: UiInput.componentId,
         uiDropdown: UiDropdown.componentId
     };
+    function pointerEventCallback(entity, pointerEvent) {
+        const callback = clickEvents.get(entity)?.get(pointerEvent);
+        if (callback)
+            callback();
+        return;
+    }
     function updateTree(instance, props) {
         upsertComponent(instance, props, 'uiTransform');
     }
     function upsertListener(instance, update) {
         if (update.type === 'delete' || !update.props) {
-            if (update.component === 'onMouseDown' || update.component === 'onInputDown') {
+            clickEvents.get(instance.entity)?.delete(getPointerEnum(update.component));
+            if (update.component === 'onMouseDown') {
                 pointerEvents.removeOnPointerDown(instance.entity);
             }
-            else if (update.component === 'onMouseUp' || update.component === 'onInputUp') {
+            else if (update.component === 'onMouseUp') {
                 pointerEvents.removeOnPointerUp(instance.entity);
             }
             else if (update.component === 'onMouseEnter') {
@@ -43,57 +61,32 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
             else if (update.component === 'onMouseLeave') {
                 pointerEvents.removeOnPointerHoverLeave(instance.entity);
             }
-            else if (update.component === 'onMouseDrag' || update.component === 'onInputDrag') {
-                pointerEvents.removeOnPointerDrag(instance.entity);
-            }
-            else if (update.component === 'onMouseDragLocked' || update.component === 'onInputDragLocked') {
-                pointerEvents.removeOnPointerDragLocked(instance.entity);
-            }
-            else if (update.component === 'onMouseDragEnd' || update.component === 'onInputDragEnd') {
-                pointerEvents.removeOnPointerDragEnd(instance.entity);
-            }
             return;
         }
         if (update.props) {
-            const pointerEventSystem = update.component === 'onMouseDown' || update.component === 'onInputDown'
+            const pointerEvent = getPointerEnum(update.component);
+            const entityEvent = clickEvents.get(instance.entity) || clickEvents.set(instance.entity, new Map()).get(instance.entity);
+            const alreadyHasPointerEvent = entityEvent.get(pointerEvent);
+            entityEvent.set(pointerEvent, update.props);
+            if (alreadyHasPointerEvent)
+                return;
+            const pointerEventSystem = update.component === 'onMouseDown'
                 ? pointerEvents.onPointerDown
-                : update.component === 'onMouseUp' || update.component === 'onInputUp'
+                : update.component === 'onMouseUp'
                     ? pointerEvents.onPointerUp
                     : update.component === 'onMouseEnter'
                         ? pointerEvents.onPointerHoverEnter
-                        : update.component === 'onMouseLeave'
-                            ? pointerEvents.onPointerHoverLeave
-                            : update.component === 'onMouseDrag' || update.component === 'onInputDrag'
-                                ? pointerEvents.onPointerDrag
-                                : update.component === 'onMouseDragLocked' || update.component === 'onInputDragLocked'
-                                    ? pointerEvents.onPointerDragLocked
-                                    : (update.component === 'onMouseDragEnd' || update.component === 'onInputDragEnd') &&
-                                        pointerEvents.onPointerDragEnd;
+                        : update.component === 'onMouseLeave' && pointerEvents.onPointerHoverLeave;
             if (pointerEventSystem) {
-                if (typeof update.props === 'function') {
-                    pointerEventSystem({
-                        entity: instance.entity,
-                        opts: {
-                            button: 0 /* InputAction.IA_POINTER */,
-                            // We add this showFeedBack so the pointerEventSystem creates a PointerEvent component with our entity
-                            // This is needed for the renderer to know which entities are clickeables
-                            showFeedback: true
-                        }
-                    }, update.props);
-                }
-                else {
-                    // force the right overload (the single arg version doesn't exist for onPointerHoverEnter or onPointerHoverLeave,
-                    // but we don't have onInputXXX components for those)
-                    ;
-                    pointerEventSystem({
-                        entity: instance.entity,
-                        optsList: Object.entries(update.props).map(([button, cb]) => ({
-                            button: Number(button),
-                            showFeedback: true,
-                            cb
-                        }))
-                    });
-                }
+                pointerEventSystem({
+                    entity: instance.entity,
+                    opts: {
+                        button: 0 /* InputAction.IA_POINTER */,
+                        // We add this showFeedBack so the pointerEventSystem creates a PointerEvent component with our entity
+                        // This is needed for the renderer to know which entities are clickeables
+                        showFeedback: true
+                    }
+                }, () => pointerEventCallback(instance.entity, pointerEvent));
             }
         }
     }
@@ -121,6 +114,15 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
             delete props.onChange;
             delete props.onSubmit;
         }
+        // Prevent keystroke drops: when React echoes back the same value the renderer
+        // reported, strip it from the props so the component isn't marked dirty for it.
+        // This avoids sending a stale value that overwrites what the user is currently typing.
+        if (componentName === 'uiInput' &&
+            'value' in props &&
+            lastInputResultValues.has(instance.entity) &&
+            props.value === lastInputResultValues.get(instance.entity)) {
+            delete props.value;
+        }
         // We check if there is any key pending to be changed to avoid updating the existing component
         if (!Object.keys(props).length) {
             return;
@@ -134,6 +136,8 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
     }
     function removeChildEntity(instance) {
         changeEvents.delete(instance.entity);
+        clickEvents.delete(instance.entity);
+        lastInputResultValues.delete(instance.entity);
         engine.removeEntity(instance.entity);
         for (const child of instance._child) {
             removeChildEntity(child);
@@ -152,11 +156,15 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
             const rightOfChild = parent._child.find((c) => c.rightOf === child.entity);
             if (rightOfChild) {
                 rightOfChild.rightOf = child.rightOf;
-                // Re-order parent._child array
-                parent._child = parent._child.filter((c) => c.entity !== child.entity);
-                parent._child.push(child);
                 updateTree(rightOfChild, { rightOf: rightOfChild.rightOf });
             }
+            // Always remove from old position and push to end for reorders.
+            // Previously, filter/push was inside the if(rightOfChild) block, so when
+            // rightOfChild was not found (child was last), the child stayed at its old
+            // position. This caused _child[length-2] to potentially be the child itself,
+            // producing a self-referencing rightOf.
+            parent._child = parent._child.filter((c) => c.entity !== child.entity);
+            parent._child.push(child);
             // Its a re-order. We are the last element, so we need to fetch the element before us.
             child.rightOf = parent._child[parent._child.length - 2]?.entity;
         }
@@ -170,13 +178,14 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
     }
     function removeChild(parentInstance, child) {
         const childIndex = parentInstance._child.findIndex((c) => c.entity === child.entity);
-        const childToModify = parentInstance._child[childIndex + 1];
-        if (childToModify) {
-            childToModify.rightOf = child.rightOf;
-            updateTree(childToModify, { rightOf: child.rightOf });
+        if (childIndex !== -1) {
+            const childToModify = parentInstance._child[childIndex + 1];
+            if (childToModify) {
+                childToModify.rightOf = child.rightOf;
+                updateTree(childToModify, { rightOf: child.rightOf });
+            }
+            parentInstance._child.splice(childIndex, 1);
         }
-        // Mutate 💀
-        parentInstance._child.splice(childIndex, 1);
         removeChildEntity(child);
     }
     function updateOnChange(entity, componentId, state) {
@@ -189,6 +198,9 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
         if (!hasEvent) {
             const resultComponentId = componentId === UiDropdown.componentId ? UiDropdownResult.componentId : UiInputResult.componentId;
             engine.getComponent(resultComponentId).onChange(entity, (value) => {
+                if (resultComponentId === UiInputResult.componentId) {
+                    lastInputResultValues.set(entity, value?.value);
+                }
                 if (value?.isSubmit) {
                     const onSubmit = changeEvents.get(entity)?.get(componentId)?.onSubmitCallback;
                     onSubmit && onSubmit(value?.value);
@@ -202,10 +214,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
         ...noopConfig,
         createInstance(type, props) {
             const entity = engine.addEntity();
-            // set root
-            if (rootEntity !== undefined) {
-                Transform.createOrReplace(entity, { parent: rootEntity });
-            }
             entities.add(entity);
             const instance = {
                 entity,
@@ -219,13 +227,11 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
                     continue;
                 }
                 if (isListener(keyTyped)) {
-                    if (props[keyTyped] !== undefined) {
-                        upsertListener(instance, {
-                            type: 'add',
-                            props: props[keyTyped],
-                            component: keyTyped
-                        });
-                    }
+                    upsertListener(instance, {
+                        type: 'add',
+                        props: props[keyTyped],
+                        component: keyTyped
+                    });
                 }
                 else {
                     upsertComponent(instance, props[keyTyped], keyTyped);
@@ -257,6 +263,23 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
             }
         },
         insertBefore(parentInstance, child, beforeChild) {
+            // Handle reorder: if child already exists in this parent, remove it from its old position
+            // and fix up the old neighbor's rightOf before inserting at the new position.
+            const existingIndex = parentInstance._child.findIndex((c) => c.entity === child.entity);
+            if (existingIndex !== -1) {
+                // If beforeChild.rightOf already points to child, child is already in the correct
+                // position in the rightOf chain. Setting child.rightOf = beforeChild.rightOf would
+                // produce a self-cycle (child.rightOf = child.entity).
+                if (beforeChild.rightOf === child.entity) {
+                    return;
+                }
+                const oldNextSibling = parentInstance._child[existingIndex + 1];
+                if (oldNextSibling) {
+                    oldNextSibling.rightOf = child.rightOf;
+                    updateTree(oldNextSibling, { rightOf: oldNextSibling.rightOf });
+                }
+                parentInstance._child.splice(existingIndex, 1);
+            }
             const beforeChildIndex = parentInstance._child.findIndex((c) => c.entity === beforeChild.entity);
             parentInstance._child = [
                 ...parentInstance._child.slice(0, beforeChildIndex),

package/dist/reconciler/utils.js

@@ -23,10 +23,10 @@ export function propsChanged(component, prevProps, nextProps) {
         }
     }
     // ...then catch keys present only in nextProps (an optional prop set for the first time,
-    // e.g. `scrollPosition` going from undefined to a value). Iterating prevProps alone would
-    // drop these. Two allocation-free loops are used instead of a Set union to keep this hot
-    // path cheap. These keys aren't in prevProps, so emitting them whenever they're defined is
-    // both cheaper than (and avoids the falsy-value trap of) an isEqual(undefined, ...) compare.
+    // e.g. an undefined value becoming defined). Iterating prevProps alone would drop these.
+    // Two allocation-free loops are used instead of a Set union to keep this hot path cheap.
+    // These keys aren't in prevProps, so emitting them whenever they're defined is both cheaper
+    // than (and avoids the falsy-value trap of) an isEqual(undefined, ...) comparison.
     for (const k in nextProps) {
         if (k in prevProps)
             continue;
@@ -49,14 +49,6 @@ const entityComponent = {
     onMouseUp: undefined,
     onMouseEnter: undefined,
     onMouseLeave: undefined,
-    onMouseDrag: undefined,
-    onMouseDragLocked: undefined,
-    onMouseDragEnd: undefined,
-    onInputDown: undefined,
-    onInputUp: undefined,
-    onInputDrag: undefined,
-    onInputDragLocked: undefined,
-    onInputDragEnd: undefined,
     uiInput: undefined,
     uiDropdown: undefined
 };

package/dist/system.d.ts

@@ -21,13 +21,13 @@ export interface ReactBasedUiSystem {
     destroy(): void;
     /**
      * Set the main UI renderer. Optional virtual size defines the global UI scale factor.
+     *
+     * When no virtual size is provided, a platform default is used: 1600x720 on
+     * mobile, 1920x1080 otherwise. Providing an invalid size (values \<= 0)
+     * disables the virtual screen (no UI scaling). On mobile, a provided 16:9
+     * virtual size is overridden to 1600x720 to fit phone screens.
      */
     setUiRenderer(ui: UiComponent, options?: UiRendererOptions): void;
-    /**
-     * Set a texture renderer for a specific entity.
-     * @deprecated Use addUiRenderer instead
-     */
-    setTextureRenderer(entity: Entity, ui: UiComponent): void;
     /**
      * Add a UI renderer associated with an entity. The UI will be automatically cleaned up
      * when the entity is removed from the engine.
@@ -40,7 +40,8 @@ export interface ReactBasedUiSystem {
      * @param entity - The entity to associate with this UI renderer. When the entity is removed,
      *                 the UI renderer is automatically cleaned up.
      * @param ui - The UI component to render
-     * @param options - Optional virtual size used for UI scale factor when main UI has none
+     * @param options - Optional virtual size used for UI scale factor when main UI has none.
+     *                  Defaults and the mobile 16:9 override behave as in {@link ReactBasedUiSystem.setUiRenderer}.
      */
     addUiRenderer(entity: Entity, ui: UiComponent, options?: UiRendererOptions): void;
     /**

package/dist/system.js

@@ -2,19 +2,44 @@ 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, resetInteractableArea, resetScreenInsetArea, resetUiScaleFactor, setInteractableArea, setScreenInsetArea, setUiScaleFactor } from './components/utils';
+import { isMobile } from './platform';
+/**
+ * Default virtual screen size used on mobile platforms, and the size 16:9
+ * virtual screens are overridden to on mobile (phone screens are much wider
+ * than 16:9, so a 16:9 virtual canvas would letterbox the UI).
+ */
+const DEFAULT_MOBILE_VIRTUAL_SIZE = { virtualWidth: 1600, virtualHeight: 720 };
+/**
+ * Default virtual screen size used on non-mobile platforms.
+ */
+const DEFAULT_VIRTUAL_SIZE = { virtualWidth: 1920, virtualHeight: 1080 };
+function isValidVirtualSize(options) {
+    return !!options && options.virtualWidth > 0 && options.virtualHeight > 0;
+}
+function is16by9(options) {
+    return options.virtualWidth * 9 === options.virtualHeight * 16;
+}
 /**
  * @public
  */
 export function createReactBasedUiSystem(engine, pointerSystem) {
-    const renderer = createReconciler(engine, pointerSystem, undefined);
+    const renderer = createReconciler(engine, pointerSystem);
     let uiComponent = undefined;
     let virtualSize = undefined;
     const additionalRenderers = new Map();
-    const textureRenderersAndUis = [];
     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');
+    // Unique owner for the interactable area module variable.
+    const interactableAreaOwner = Symbol('react-ecs-interactable-area');
+    // Last 16:9 size we already logged the mobile override for, so the log
+    // fires once per provided size instead of every tick. Tracked as raw numbers
+    // to avoid allocating a comparison string every tick.
+    let loggedMobileOverrideW = 0;
+    let loggedMobileOverrideH = 0;
     function getActiveVirtualSize() {
         // Main renderer options win; otherwise use the first additional renderer option.
         if (virtualSize)
@@ -25,6 +50,33 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
         }
         return undefined;
     }
+    /**
+     * Resolves the virtual screen to scale the UI against, or `undefined` when
+     * the virtual screen is disabled.
+     */
+    function resolveVirtualSize() {
+        const provided = getActiveVirtualSize();
+        const mobile = isMobile();
+        // No creator-provided size: fall back to the platform default.
+        if (!provided) {
+            return mobile ? DEFAULT_MOBILE_VIRTUAL_SIZE : DEFAULT_VIRTUAL_SIZE;
+        }
+        // An explicitly provided but invalid size (values <= 0) disables the
+        // virtual screen — no UI scaling at all.
+        if (!isValidVirtualSize(provided)) {
+            return undefined;
+        }
+        // On mobile, 16:9 virtual screens don't fit phone aspect ratios — override them.
+        if (mobile && is16by9(provided)) {
+            if (loggedMobileOverrideW !== provided.virtualWidth || loggedMobileOverrideH !== provided.virtualHeight) {
+                loggedMobileOverrideW = provided.virtualWidth;
+                loggedMobileOverrideH = provided.virtualHeight;
+                console.log(`Mobile platform detected: overriding 16:9 virtual screen size ${provided.virtualWidth}x${provided.virtualHeight} with ${DEFAULT_MOBILE_VIRTUAL_SIZE.virtualWidth}x${DEFAULT_MOBILE_VIRTUAL_SIZE.virtualHeight}`);
+            }
+            return DEFAULT_MOBILE_VIRTUAL_SIZE;
+        }
+        return provided;
+    }
     function ReactBasedUiSystem() {
         const components = [];
         // Add main UI component
@@ -52,26 +104,40 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
         else {
             renderer.update(null);
         }
-        // Update texture renderers (deprecated, kept for backwards compatibility)
-        for (const [textureRenderer, ui] of textureRenderersAndUis) {
-            textureRenderer.update(React.createElement(ui));
-        }
     }
     function UiScaleSystem() {
-        const activeVirtualSize = getActiveVirtualSize();
-        if (!activeVirtualSize) {
+        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);
+        }
+        // Update the interactable area module variable unconditionally.
+        if (canvasInfo?.interactableArea) {
+            setInteractableArea(canvasInfo.interactableArea, interactableAreaOwner);
+        }
+        // The virtual screen (provided or defaulted) only applies while some
+        // renderer is registered; with no UI at all the scale factor is released.
+        if (uiComponent === undefined && additionalRenderers.size === 0) {
             // Reset only if this system owns the scale factor.
             resetUiScaleFactor(uiScaleFactorOwner);
             return;
         }
-        const canvasInfo = UiCanvasInformation.getOrNull(engine.RootEntity);
+        const activeVirtualSize = resolveVirtualSize();
+        if (!activeVirtualSize) {
+            // Virtual screen explicitly disabled by an invalid provided size.
+            resetUiScaleFactor(uiScaleFactorOwner);
+            return;
+        }
         if (!canvasInfo)
             return;
-        const { width, height } = canvasInfo;
+        const { width, height, devicePixelRatio } = canvasInfo;
         const { virtualWidth, virtualHeight } = activeVirtualSize;
-        if (!virtualWidth || !virtualHeight)
-            return;
-        const nextScale = Math.min(width / virtualWidth, height / virtualHeight);
+        // Normalize by devicePixelRatio so virtual px map to logical px (matching the
+        // vw/vh path); without it the scale was inflated on high-dpr mobile screens.
+        const ratio = devicePixelRatio || 1;
+        const nextScale = Math.min(width / virtualWidth, height / virtualHeight) / ratio;
         if (Number.isFinite(nextScale) && nextScale !== getUiScaleFactor()) {
             // Track ownership when updating to avoid cross-system conflicts.
             setUiScaleFactor(nextScale, uiScaleFactorOwner);
@@ -84,22 +150,16 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
             engine.removeSystem(UiScaleSystem);
             engine.removeSystem(ReactBasedUiSystem);
             resetUiScaleFactor(uiScaleFactorOwner);
+            resetScreenInsetArea(screenInsetAreaOwner);
+            resetInteractableArea(interactableAreaOwner);
             for (const entity of renderer.getEntities()) {
                 engine.removeEntity(entity);
             }
-            for (const [textureRenderer, _] of textureRenderersAndUis) {
-                for (const entity of textureRenderer.getEntities()) {
-                    engine.removeEntity(entity);
-                }
-            }
         },
         setUiRenderer(ui, options) {
             uiComponent = ui;
             virtualSize = options;
         },
-        setTextureRenderer(entity, ui) {
-            textureRenderersAndUis.push([createReconciler(engine, pointerSystem, entity), ui]);
-        },
         addUiRenderer(entity, ui, options) {
             additionalRenderers.set(entity, { ui, options });
         },

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dcl/react-ecs",
   "description": "Decentraland ECS",
-  "version": "7.24.5-29247185020.commit-e92dfe6",
+  "version": "7.24.5-29264961047.commit-77493c3",
   "author": "DCL",
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
-    "@dcl/ecs": "7.24.5-29247185020.commit-e92dfe6",
+    "@dcl/ecs": "7.24.5-29264961047.commit-77493c3",
     "react": "^18.2.0",
     "react-reconciler": "^0.29.0"
   },
@@ -40,5 +40,5 @@
     "tsconfig": "./tsconfig.json"
   },
   "types": "./dist/index.d.ts",
-  "commit": "e92dfe6298e3d808e58add843780cdbe7eb5af7d"
+  "commit": "77493c38bf6fe58d9ece07c8f886e6b1d39438ab"
 }