@dcl/playground-assets 7.0.6-3803395793.commit-999a6b9 → 7.0.6-3808564125.commit-7a2650b

package/dist/index.js

@@ -10576,6 +10576,150 @@
         }
     };
 
+    exports.PointerEventType = void 0;
+    (function (PointerEventType) {
+        PointerEventType[PointerEventType["PET_UP"] = 0] = "PET_UP";
+        PointerEventType[PointerEventType["PET_DOWN"] = 1] = "PET_DOWN";
+        PointerEventType[PointerEventType["PET_HOVER_ENTER"] = 2] = "PET_HOVER_ENTER";
+        PointerEventType[PointerEventType["PET_HOVER_LEAVE"] = 3] = "PET_HOVER_LEAVE";
+    })(exports.PointerEventType || (exports.PointerEventType = {}));
+    function createBasePBPointerEvents() {
+        return { pointerEvents: [] };
+    }
+    /**
+     * Internal
+     */
+    const PBPointerEvents = {
+        encode(message, writer = minimalExports.Writer.create()) {
+            for (const v of message.pointerEvents) {
+                PBPointerEvents_Entry.encode(v, writer.uint32(10).fork()).ldelim();
+            }
+            return writer;
+        },
+        decode(input, length) {
+            const reader = input instanceof minimalExports.Reader ? input : new minimalExports.Reader(input);
+            let end = length === undefined ? reader.len : reader.pos + length;
+            const message = createBasePBPointerEvents();
+            while (reader.pos < end) {
+                const tag = reader.uint32();
+                switch (tag >>> 3) {
+                    case 1:
+                        message.pointerEvents.push(PBPointerEvents_Entry.decode(reader, reader.uint32()));
+                        break;
+                    default:
+                        reader.skipType(tag & 7);
+                        break;
+                }
+            }
+            return message;
+        }
+    };
+    function createBasePBPointerEvents_Info() {
+        return { button: undefined, hoverText: undefined, maxDistance: undefined, showFeedback: undefined };
+    }
+    /**
+     * Internal
+     */
+    const PBPointerEvents_Info = {
+        encode(message, writer = minimalExports.Writer.create()) {
+            if (message.button !== undefined) {
+                writer.uint32(8).int32(message.button);
+            }
+            if (message.hoverText !== undefined) {
+                writer.uint32(18).string(message.hoverText);
+            }
+            if (message.maxDistance !== undefined) {
+                writer.uint32(29).float(message.maxDistance);
+            }
+            if (message.showFeedback !== undefined) {
+                writer.uint32(32).bool(message.showFeedback);
+            }
+            return writer;
+        },
+        decode(input, length) {
+            const reader = input instanceof minimalExports.Reader ? input : new minimalExports.Reader(input);
+            let end = length === undefined ? reader.len : reader.pos + length;
+            const message = createBasePBPointerEvents_Info();
+            while (reader.pos < end) {
+                const tag = reader.uint32();
+                switch (tag >>> 3) {
+                    case 1:
+                        message.button = reader.int32();
+                        break;
+                    case 2:
+                        message.hoverText = reader.string();
+                        break;
+                    case 3:
+                        message.maxDistance = reader.float();
+                        break;
+                    case 4:
+                        message.showFeedback = reader.bool();
+                        break;
+                    default:
+                        reader.skipType(tag & 7);
+                        break;
+                }
+            }
+            return message;
+        }
+    };
+    function createBasePBPointerEvents_Entry() {
+        return { eventType: 0, eventInfo: undefined };
+    }
+    /**
+     * Internal
+     */
+    const PBPointerEvents_Entry = {
+        encode(message, writer = minimalExports.Writer.create()) {
+            if (message.eventType !== 0) {
+                writer.uint32(8).int32(message.eventType);
+            }
+            if (message.eventInfo !== undefined) {
+                PBPointerEvents_Info.encode(message.eventInfo, writer.uint32(18).fork()).ldelim();
+            }
+            return writer;
+        },
+        decode(input, length) {
+            const reader = input instanceof minimalExports.Reader ? input : new minimalExports.Reader(input);
+            let end = length === undefined ? reader.len : reader.pos + length;
+            const message = createBasePBPointerEvents_Entry();
+            while (reader.pos < end) {
+                const tag = reader.uint32();
+                switch (tag >>> 3) {
+                    case 1:
+                        message.eventType = reader.int32();
+                        break;
+                    case 2:
+                        message.eventInfo = PBPointerEvents_Info.decode(reader, reader.uint32());
+                        break;
+                    default:
+                        reader.skipType(tag & 7);
+                        break;
+                }
+            }
+            return message;
+        }
+    };
+
+    /**
+     *
+     */
+    const PointerEventsSchema = {
+        COMPONENT_ID: 1062,
+        serialize(value, builder) {
+            const writer = PBPointerEvents.encode(value);
+            const buffer = new Uint8Array(writer.finish(), 0, writer.len);
+            builder.writeBuffer(buffer, false);
+        },
+        deserialize(reader) {
+            return PBPointerEvents.decode(reader.buffer(), reader.remainingBytes());
+        },
+        create() {
+            // TODO: this is a hack.
+            return PBPointerEvents.decode(new Uint8Array());
+        }
+    };
+
     /* eslint-disable */
     function createBasePBRaycastResult() {
         return { timestamp: 0, origin: undefined, direction: undefined, hits: [] };
@@ -10829,150 +10973,6 @@
         }
     };
 
-    exports.PointerEventType = void 0;
-    (function (PointerEventType) {
-        PointerEventType[PointerEventType["PET_UP"] = 0] = "PET_UP";
-        PointerEventType[PointerEventType["PET_DOWN"] = 1] = "PET_DOWN";
-        PointerEventType[PointerEventType["PET_HOVER_ENTER"] = 2] = "PET_HOVER_ENTER";
-        PointerEventType[PointerEventType["PET_HOVER_LEAVE"] = 3] = "PET_HOVER_LEAVE";
-    })(exports.PointerEventType || (exports.PointerEventType = {}));
-    function createBasePBPointerHoverFeedback() {
-        return { pointerEvents: [] };
-    }
-    /**
-     * Internal
-     */
-    const PBPointerHoverFeedback = {
-        encode(message, writer = minimalExports.Writer.create()) {
-            for (const v of message.pointerEvents) {
-                PBPointerHoverFeedback_Entry.encode(v, writer.uint32(10).fork()).ldelim();
-            }
-            return writer;
-        },
-        decode(input, length) {
-            const reader = input instanceof minimalExports.Reader ? input : new minimalExports.Reader(input);
-            let end = length === undefined ? reader.len : reader.pos + length;
-            const message = createBasePBPointerHoverFeedback();
-            while (reader.pos < end) {
-                const tag = reader.uint32();
-                switch (tag >>> 3) {
-                    case 1:
-                        message.pointerEvents.push(PBPointerHoverFeedback_Entry.decode(reader, reader.uint32()));
-                        break;
-                    default:
-                        reader.skipType(tag & 7);
-                        break;
-                }
-            }
-            return message;
-        }
-    };
-    function createBasePBPointerHoverFeedback_Info() {
-        return { button: undefined, hoverText: undefined, maxDistance: undefined, showFeedback: undefined };
-    }
-    /**
-     * Internal
-     */
-    const PBPointerHoverFeedback_Info = {
-        encode(message, writer = minimalExports.Writer.create()) {
-            if (message.button !== undefined) {
-                writer.uint32(8).int32(message.button);
-            }
-            if (message.hoverText !== undefined) {
-                writer.uint32(18).string(message.hoverText);
-            }
-            if (message.maxDistance !== undefined) {
-                writer.uint32(29).float(message.maxDistance);
-            }
-            if (message.showFeedback !== undefined) {
-                writer.uint32(32).bool(message.showFeedback);
-            }
-            return writer;
-        },
-        decode(input, length) {
-            const reader = input instanceof minimalExports.Reader ? input : new minimalExports.Reader(input);
-            let end = length === undefined ? reader.len : reader.pos + length;
-            const message = createBasePBPointerHoverFeedback_Info();
-            while (reader.pos < end) {
-                const tag = reader.uint32();
-                switch (tag >>> 3) {
-                    case 1:
-                        message.button = reader.int32();
-                        break;
-                    case 2:
-                        message.hoverText = reader.string();
-                        break;
-                    case 3:
-                        message.maxDistance = reader.float();
-                        break;
-                    case 4:
-                        message.showFeedback = reader.bool();
-                        break;
-                    default:
-                        reader.skipType(tag & 7);
-                        break;
-                }
-            }
-            return message;
-        }
-    };
-    function createBasePBPointerHoverFeedback_Entry() {
-        return { eventType: 0, eventInfo: undefined };
-    }
-    /**
-     * Internal
-     */
-    const PBPointerHoverFeedback_Entry = {
-        encode(message, writer = minimalExports.Writer.create()) {
-            if (message.eventType !== 0) {
-                writer.uint32(8).int32(message.eventType);
-            }
-            if (message.eventInfo !== undefined) {
-                PBPointerHoverFeedback_Info.encode(message.eventInfo, writer.uint32(18).fork()).ldelim();
-            }
-            return writer;
-        },
-        decode(input, length) {
-            const reader = input instanceof minimalExports.Reader ? input : new minimalExports.Reader(input);
-            let end = length === undefined ? reader.len : reader.pos + length;
-            const message = createBasePBPointerHoverFeedback_Entry();
-            while (reader.pos < end) {
-                const tag = reader.uint32();
-                switch (tag >>> 3) {
-                    case 1:
-                        message.eventType = reader.int32();
-                        break;
-                    case 2:
-                        message.eventInfo = PBPointerHoverFeedback_Info.decode(reader, reader.uint32());
-                        break;
-                    default:
-                        reader.skipType(tag & 7);
-                        break;
-                }
-            }
-            return message;
-        }
-    };
-
-    /**
-     *
-     */
-    const PointerHoverFeedbackSchema = {
-        COMPONENT_ID: 1062,
-        serialize(value, builder) {
-            const writer = PBPointerHoverFeedback.encode(value);
-            const buffer = new Uint8Array(writer.finish(), 0, writer.len);
-            builder.writeBuffer(buffer, false);
-        },
-        deserialize(reader) {
-            return PBPointerHoverFeedback.decode(reader.buffer(), reader.remainingBytes());
-        },
-        create() {
-            // TODO: this is a hack.
-            return PBPointerHoverFeedback.decode(new Uint8Array());
-        }
-    };
-
     /* eslint-disable */
     function createBasePBPointerLock() {
         return { isPointerLocked: false };
@@ -11313,28 +11313,444 @@
     };
 
     /* eslint-disable */
-    function createBasePBUiBackground() {
-        return { backgroundColor: undefined };
+    function createBaseBorderRect() {
+        return { top: 0, left: 0, right: 0, bottom: 0 };
     }
     /**
      * Internal
      */
-    const PBUiBackground = {
+    const BorderRect = {
         encode(message, writer = minimalExports.Writer.create()) {
-            if (message.backgroundColor !== undefined) {
-                Color4.encode(message.backgroundColor, writer.uint32(10).fork()).ldelim();
+            if (message.top !== 0) {
+                writer.uint32(13).float(message.top);
+            }
+            if (message.left !== 0) {
+                writer.uint32(21).float(message.left);
+            }
+            if (message.right !== 0) {
+                writer.uint32(29).float(message.right);
+            }
+            if (message.bottom !== 0) {
+                writer.uint32(37).float(message.bottom);
+            }
+            return writer;
+        },
+        decode(input, length) {
+            const reader = input instanceof minimalExports.Reader ? input : new minimalExports.Reader(input);
+            let end = length === undefined ? reader.len : reader.pos + length;
+            const message = createBaseBorderRect();
+            while (reader.pos < end) {
+                const tag = reader.uint32();
+                switch (tag >>> 3) {
+                    case 1:
+                        message.top = reader.float();
+                        break;
+                    case 2:
+                        message.left = reader.float();
+                        break;
+                    case 3:
+                        message.right = reader.float();
+                        break;
+                    case 4:
+                        message.bottom = reader.float();
+                        break;
+                    default:
+                        reader.skipType(tag & 7);
+                        break;
+                }
+            }
+            return message;
+        }
+    };
+
+    /* eslint-disable */
+    exports.BackgroundTextureMode = void 0;
+    (function (BackgroundTextureMode) {
+        /**
+         * NINE_SLICES - https://docs.unity3d.com/Manual/UIE-USS-SupportedProperties.html (Slicing section)
+         * https://forum.unity.com/threads/how-does-slicing-in-ui-tookkit-works.1235863/
+         * https://docs.unity3d.com/Manual/9SliceSprites.html
+         * https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
+         */
+        BackgroundTextureMode[BackgroundTextureMode["NINE_SLICES"] = 0] = "NINE_SLICES";
+        /**
+         * CENTER - CENTER enables the texture to be rendered centered in relation to the
+         * element. If the element is smaller than the texture then the background
+         * should use the element as stencil to cut off the out-of-bounds area
+         */
+        BackgroundTextureMode[BackgroundTextureMode["CENTER"] = 1] = "CENTER";
+        /**
+         * STRETCH - STRETCH enables the texture to cover all the area of the container,
+         * adopting its aspect ratio.
+         */
+        BackgroundTextureMode[BackgroundTextureMode["STRETCH"] = 2] = "STRETCH";
+    })(exports.BackgroundTextureMode || (exports.BackgroundTextureMode = {}));
+    function createBasePBUiBackground() {
+        return { color: undefined, texture: undefined, textureMode: 0, textureSlices: undefined, uvs: [] };
+    }
+    /**
+     * Internal
+     */
+    const PBUiBackground = {
+        encode(message, writer = minimalExports.Writer.create()) {
+            if (message.color !== undefined) {
+                Color4.encode(message.color, writer.uint32(10).fork()).ldelim();
+            }
+            if (message.texture !== undefined) {
+                TextureUnion.encode(message.texture, writer.uint32(18).fork()).ldelim();
+            }
+            if (message.textureMode !== 0) {
+                writer.uint32(24).int32(message.textureMode);
+            }
+            if (message.textureSlices !== undefined) {
+                BorderRect.encode(message.textureSlices, writer.uint32(34).fork()).ldelim();
+            }
+            writer.uint32(42).fork();
+            for (const v of message.uvs) {
+                writer.float(v);
+            }
+            writer.ldelim();
+            return writer;
+        },
+        decode(input, length) {
+            const reader = input instanceof minimalExports.Reader ? input : new minimalExports.Reader(input);
+            let end = length === undefined ? reader.len : reader.pos + length;
+            const message = createBasePBUiBackground();
+            while (reader.pos < end) {
+                const tag = reader.uint32();
+                switch (tag >>> 3) {
+                    case 1:
+                        message.color = Color4.decode(reader, reader.uint32());
+                        break;
+                    case 2:
+                        message.texture = TextureUnion.decode(reader, reader.uint32());
+                        break;
+                    case 3:
+                        message.textureMode = reader.int32();
+                        break;
+                    case 4:
+                        message.textureSlices = BorderRect.decode(reader, reader.uint32());
+                        break;
+                    case 5:
+                        if ((tag & 7) === 2) {
+                            const end2 = reader.uint32() + reader.pos;
+                            while (reader.pos < end2) {
+                                message.uvs.push(reader.float());
+                            }
+                        }
+                        else {
+                            message.uvs.push(reader.float());
+                        }
+                        break;
+                    default:
+                        reader.skipType(tag & 7);
+                        break;
+                }
+            }
+            return message;
+        }
+    };
+
+    /**
+     *
+     */
+    const UiBackgroundSchema = {
+        COMPONENT_ID: 1053,
+        serialize(value, builder) {
+            const writer = PBUiBackground.encode(value);
+            const buffer = new Uint8Array(writer.finish(), 0, writer.len);
+            builder.writeBuffer(buffer, false);
+        },
+        deserialize(reader) {
+            return PBUiBackground.decode(reader.buffer(), reader.remainingBytes());
+        },
+        create() {
+            // TODO: this is a hack.
+            return PBUiBackground.decode(new Uint8Array());
+        }
+    };
+
+    /* eslint-disable */
+    function createBasePBUiDropdown() {
+        return {
+            acceptEmpty: false,
+            emptyLabel: undefined,
+            options: [],
+            selectedIndex: undefined,
+            disabled: false,
+            color: undefined,
+            textAlign: undefined,
+            font: undefined,
+            fontSize: undefined
+        };
+    }
+    /**
+     * Internal
+     */
+    const PBUiDropdown = {
+        encode(message, writer = minimalExports.Writer.create()) {
+            if (message.acceptEmpty === true) {
+                writer.uint32(8).bool(message.acceptEmpty);
+            }
+            if (message.emptyLabel !== undefined) {
+                writer.uint32(18).string(message.emptyLabel);
+            }
+            for (const v of message.options) {
+                writer.uint32(26).string(v);
+            }
+            if (message.selectedIndex !== undefined) {
+                writer.uint32(32).int32(message.selectedIndex);
+            }
+            if (message.disabled === true) {
+                writer.uint32(40).bool(message.disabled);
+            }
+            if (message.color !== undefined) {
+                Color4.encode(message.color, writer.uint32(50).fork()).ldelim();
+            }
+            if (message.textAlign !== undefined) {
+                writer.uint32(80).int32(message.textAlign);
+            }
+            if (message.font !== undefined) {
+                writer.uint32(88).int32(message.font);
+            }
+            if (message.fontSize !== undefined) {
+                writer.uint32(96).int32(message.fontSize);
+            }
+            return writer;
+        },
+        decode(input, length) {
+            const reader = input instanceof minimalExports.Reader ? input : new minimalExports.Reader(input);
+            let end = length === undefined ? reader.len : reader.pos + length;
+            const message = createBasePBUiDropdown();
+            while (reader.pos < end) {
+                const tag = reader.uint32();
+                switch (tag >>> 3) {
+                    case 1:
+                        message.acceptEmpty = reader.bool();
+                        break;
+                    case 2:
+                        message.emptyLabel = reader.string();
+                        break;
+                    case 3:
+                        message.options.push(reader.string());
+                        break;
+                    case 4:
+                        message.selectedIndex = reader.int32();
+                        break;
+                    case 5:
+                        message.disabled = reader.bool();
+                        break;
+                    case 6:
+                        message.color = Color4.decode(reader, reader.uint32());
+                        break;
+                    case 10:
+                        message.textAlign = reader.int32();
+                        break;
+                    case 11:
+                        message.font = reader.int32();
+                        break;
+                    case 12:
+                        message.fontSize = reader.int32();
+                        break;
+                    default:
+                        reader.skipType(tag & 7);
+                        break;
+                }
+            }
+            return message;
+        }
+    };
+
+    /**
+     *
+     */
+    const UiDropdownSchema = {
+        COMPONENT_ID: 1094,
+        serialize(value, builder) {
+            const writer = PBUiDropdown.encode(value);
+            const buffer = new Uint8Array(writer.finish(), 0, writer.len);
+            builder.writeBuffer(buffer, false);
+        },
+        deserialize(reader) {
+            return PBUiDropdown.decode(reader.buffer(), reader.remainingBytes());
+        },
+        create() {
+            // TODO: this is a hack.
+            return PBUiDropdown.decode(new Uint8Array());
+        }
+    };
+
+    /* eslint-disable */
+    function createBasePBUiDropdownResult() {
+        return { value: 0 };
+    }
+    /**
+     * Internal
+     */
+    const PBUiDropdownResult = {
+        encode(message, writer = minimalExports.Writer.create()) {
+            if (message.value !== 0) {
+                writer.uint32(8).int32(message.value);
+            }
+            return writer;
+        },
+        decode(input, length) {
+            const reader = input instanceof minimalExports.Reader ? input : new minimalExports.Reader(input);
+            let end = length === undefined ? reader.len : reader.pos + length;
+            const message = createBasePBUiDropdownResult();
+            while (reader.pos < end) {
+                const tag = reader.uint32();
+                switch (tag >>> 3) {
+                    case 1:
+                        message.value = reader.int32();
+                        break;
+                    default:
+                        reader.skipType(tag & 7);
+                        break;
+                }
+            }
+            return message;
+        }
+    };
+
+    /**
+     *
+     */
+    const UiDropdownResultSchema = {
+        COMPONENT_ID: 1096,
+        serialize(value, builder) {
+            const writer = PBUiDropdownResult.encode(value);
+            const buffer = new Uint8Array(writer.finish(), 0, writer.len);
+            builder.writeBuffer(buffer, false);
+        },
+        deserialize(reader) {
+            return PBUiDropdownResult.decode(reader.buffer(), reader.remainingBytes());
+        },
+        create() {
+            // TODO: this is a hack.
+            return PBUiDropdownResult.decode(new Uint8Array());
+        }
+    };
+
+    /* eslint-disable */
+    function createBasePBUiInput() {
+        return {
+            placeholder: '',
+            color: undefined,
+            placeholderColor: undefined,
+            disabled: false,
+            textAlign: undefined,
+            font: undefined,
+            fontSize: undefined
+        };
+    }
+    /**
+     * Internal
+     */
+    const PBUiInput = {
+        encode(message, writer = minimalExports.Writer.create()) {
+            if (message.placeholder !== '') {
+                writer.uint32(10).string(message.placeholder);
+            }
+            if (message.color !== undefined) {
+                Color4.encode(message.color, writer.uint32(18).fork()).ldelim();
+            }
+            if (message.placeholderColor !== undefined) {
+                Color4.encode(message.placeholderColor, writer.uint32(26).fork()).ldelim();
+            }
+            if (message.disabled === true) {
+                writer.uint32(32).bool(message.disabled);
+            }
+            if (message.textAlign !== undefined) {
+                writer.uint32(80).int32(message.textAlign);
+            }
+            if (message.font !== undefined) {
+                writer.uint32(88).int32(message.font);
+            }
+            if (message.fontSize !== undefined) {
+                writer.uint32(96).int32(message.fontSize);
+            }
+            return writer;
+        },
+        decode(input, length) {
+            const reader = input instanceof minimalExports.Reader ? input : new minimalExports.Reader(input);
+            let end = length === undefined ? reader.len : reader.pos + length;
+            const message = createBasePBUiInput();
+            while (reader.pos < end) {
+                const tag = reader.uint32();
+                switch (tag >>> 3) {
+                    case 1:
+                        message.placeholder = reader.string();
+                        break;
+                    case 2:
+                        message.color = Color4.decode(reader, reader.uint32());
+                        break;
+                    case 3:
+                        message.placeholderColor = Color4.decode(reader, reader.uint32());
+                        break;
+                    case 4:
+                        message.disabled = reader.bool();
+                        break;
+                    case 10:
+                        message.textAlign = reader.int32();
+                        break;
+                    case 11:
+                        message.font = reader.int32();
+                        break;
+                    case 12:
+                        message.fontSize = reader.int32();
+                        break;
+                    default:
+                        reader.skipType(tag & 7);
+                        break;
+                }
+            }
+            return message;
+        }
+    };
+
+    /**
+     *
+     */
+    const UiInputSchema = {
+        COMPONENT_ID: 1093,
+        serialize(value, builder) {
+            const writer = PBUiInput.encode(value);
+            const buffer = new Uint8Array(writer.finish(), 0, writer.len);
+            builder.writeBuffer(buffer, false);
+        },
+        deserialize(reader) {
+            return PBUiInput.decode(reader.buffer(), reader.remainingBytes());
+        },
+        create() {
+            // TODO: this is a hack.
+            return PBUiInput.decode(new Uint8Array());
+        }
+    };
+
+    /* eslint-disable */
+    function createBasePBUiInputResult() {
+        return { value: '' };
+    }
+    /**
+     * Internal
+     */
+    const PBUiInputResult = {
+        encode(message, writer = minimalExports.Writer.create()) {
+            if (message.value !== '') {
+                writer.uint32(10).string(message.value);
             }
             return writer;
         },
         decode(input, length) {
             const reader = input instanceof minimalExports.Reader ? input : new minimalExports.Reader(input);
             let end = length === undefined ? reader.len : reader.pos + length;
-            const message = createBasePBUiBackground();
+            const message = createBasePBUiInputResult();
             while (reader.pos < end) {
                 const tag = reader.uint32();
                 switch (tag >>> 3) {
                     case 1:
-                        message.backgroundColor = Color4.decode(reader, reader.uint32());
+                        message.value = reader.string();
                         break;
                     default:
                         reader.skipType(tag & 7);
@@ -11348,19 +11764,19 @@
     /**
      *
      */
-    const UiBackgroundSchema = {
-        COMPONENT_ID: 1053,
+    const UiInputResultSchema = {
+        COMPONENT_ID: 1095,
         serialize(value, builder) {
-            const writer = PBUiBackground.encode(value);
+            const writer = PBUiInputResult.encode(value);
             const buffer = new Uint8Array(writer.finish(), 0, writer.len);
             builder.writeBuffer(buffer, false);
         },
         deserialize(reader) {
-            return PBUiBackground.decode(reader.buffer(), reader.remainingBytes());
+            return PBUiInputResult.decode(reader.buffer(), reader.remainingBytes());
         },
         create() {
             // TODO: this is a hack.
-            return PBUiBackground.decode(new Uint8Array());
+            return PBUiInputResult.decode(new Uint8Array());
         }
     };
 
@@ -11978,13 +12394,17 @@
     /** @public */  const MeshCollider$2 = engine => engine.defineComponentFromSchema(MeshColliderSchema, MeshColliderSchema.COMPONENT_ID);
     /** @public */  const MeshRenderer$2 = engine => engine.defineComponentFromSchema(MeshRendererSchema, MeshRendererSchema.COMPONENT_ID);
     /** @public */  const NftShape$1 = engine => engine.defineComponentFromSchema(NftShapeSchema, NftShapeSchema.COMPONENT_ID);
+    /** @public */  const PointerEvents$1 = engine => engine.defineComponentFromSchema(PointerEventsSchema, PointerEventsSchema.COMPONENT_ID);
     /** @public */  const PointerEventsResult$1 = engine => engine.defineComponentFromSchema(PointerEventsResultSchema, PointerEventsResultSchema.COMPONENT_ID);
-    /** @public */  const PointerHoverFeedback$1 = engine => engine.defineComponentFromSchema(PointerHoverFeedbackSchema, PointerHoverFeedbackSchema.COMPONENT_ID);
     /** @public */  const PointerLock$1 = engine => engine.defineComponentFromSchema(PointerLockSchema, PointerLockSchema.COMPONENT_ID);
     /** @public */  const Raycast$1 = engine => engine.defineComponentFromSchema(RaycastSchema, RaycastSchema.COMPONENT_ID);
     /** @public */  const RaycastResult$1 = engine => engine.defineComponentFromSchema(RaycastResultSchema, RaycastResultSchema.COMPONENT_ID);
     /** @public */  const TextShape$1 = engine => engine.defineComponentFromSchema(TextShapeSchema, TextShapeSchema.COMPONENT_ID);
     /** @public */  const UiBackground$1 = engine => engine.defineComponentFromSchema(UiBackgroundSchema, UiBackgroundSchema.COMPONENT_ID);
+    /** @public */  const UiDropdown$1 = engine => engine.defineComponentFromSchema(UiDropdownSchema, UiDropdownSchema.COMPONENT_ID);
+    /** @public */  const UiDropdownResult$1 = engine => engine.defineComponentFromSchema(UiDropdownResultSchema, UiDropdownResultSchema.COMPONENT_ID);
+    /** @public */  const UiInput$1 = engine => engine.defineComponentFromSchema(UiInputSchema, UiInputSchema.COMPONENT_ID);
+    /** @public */  const UiInputResult$1 = engine => engine.defineComponentFromSchema(UiInputResultSchema, UiInputResultSchema.COMPONENT_ID);
     /** @public */  const UiText$1 = engine => engine.defineComponentFromSchema(UiTextSchema, UiTextSchema.COMPONENT_ID);
     /** @public */  const UiTransform$1 = engine => engine.defineComponentFromSchema(UiTransformSchema, UiTransformSchema.COMPONENT_ID);
     /** @public */  const VisibilityComponent$1 = engine => engine.defineComponentFromSchema(VisibilityComponentSchema, VisibilityComponentSchema.COMPONENT_ID);
@@ -12278,19 +12698,24 @@
         PBMeshRenderer_SphereMesh: PBMeshRenderer_SphereMesh,
         get NftFrameType () { return exports.NftFrameType; },
         PBNftShape: PBNftShape,
+        get PointerEventType () { return exports.PointerEventType; },
+        PBPointerEvents: PBPointerEvents,
+        PBPointerEvents_Info: PBPointerEvents_Info,
+        PBPointerEvents_Entry: PBPointerEvents_Entry,
         PBPointerEventsResult: PBPointerEventsResult,
         PBPointerEventsResult_PointerCommand: PBPointerEventsResult_PointerCommand,
-        get PointerEventType () { return exports.PointerEventType; },
-        PBPointerHoverFeedback: PBPointerHoverFeedback,
-        PBPointerHoverFeedback_Info: PBPointerHoverFeedback_Info,
-        PBPointerHoverFeedback_Entry: PBPointerHoverFeedback_Entry,
         PBPointerLock: PBPointerLock,
         get RaycastQueryType () { return exports.RaycastQueryType; },
         PBRaycast: PBRaycast,
         PBRaycastResult: PBRaycastResult,
         RaycastHit: RaycastHit,
         PBTextShape: PBTextShape,
+        get BackgroundTextureMode () { return exports.BackgroundTextureMode; },
         PBUiBackground: PBUiBackground,
+        PBUiDropdown: PBUiDropdown,
+        PBUiDropdownResult: PBUiDropdownResult,
+        PBUiInput: PBUiInput,
+        PBUiInputResult: PBUiInputResult,
         PBUiText: PBUiText,
         get YGPositionType () { return exports.YGPositionType; },
         get YGAlign () { return exports.YGAlign; },
@@ -12313,13 +12738,17 @@
         CameraModeArea: CameraModeArea$1,
         GltfContainer: GltfContainer$1,
         NftShape: NftShape$1,
+        PointerEvents: PointerEvents$1,
         PointerEventsResult: PointerEventsResult$1,
-        PointerHoverFeedback: PointerHoverFeedback$1,
         PointerLock: PointerLock$1,
         Raycast: Raycast$1,
         RaycastResult: RaycastResult$1,
         TextShape: TextShape$1,
         UiBackground: UiBackground$1,
+        UiDropdown: UiDropdown$1,
+        UiDropdownResult: UiDropdownResult$1,
+        UiInput: UiInput$1,
+        UiInputResult: UiInputResult$1,
         UiText: UiText$1,
         UiTransform: UiTransform$1,
         VisibilityComponent: VisibilityComponent$1
@@ -12484,10 +12913,10 @@
      */
     const FlatString = {
         serialize(value, builder) {
-            builder.writeBuffer(new TextEncoder().encode(value));
+            builder.writeUtf8String(value);
         },
         deserialize(reader) {
-            return new TextDecoder().decode(reader.readBuffer());
+            return reader.readUtf8String();
         },
         create() {
             return '';
@@ -12882,6 +13311,8 @@
 
     var distExports = requireDist();
 
+    var utf8Exports = requireUtf8();
+
     /**
      * Take the max between currentSize and intendedSize and then plus 1024. Then,
      *  find the next nearer multiple of 1024.
@@ -13004,6 +13435,10 @@
                 const length = view.getUint32(roAdd(4));
                 return buffer.subarray(roAdd(length), roAdd(0));
             },
+            readUtf8String() {
+                const length = view.getUint32(roAdd(4));
+                return utf8Exports.read(buffer, roAdd(length), roAdd(0));
+            },
             incrementWriteOffset(amount) {
                 return woAdd(amount);
             },
@@ -13023,6 +13458,14 @@
                 const o = woAdd(value.byteLength);
                 buffer.set(value, o);
             },
+            writeUtf8String(value, writeLength = true) {
+                const byteLength = utf8Exports.length(value);
+                if (writeLength) {
+                    this.writeUint32(byteLength);
+                }
+                const o = woAdd(byteLength);
+                utf8Exports.write(value, buffer, o);
+            },
             writeFloat32(value) {
                 const o = woAdd(4);
                 view.setFloat32(o, value);
@@ -14103,7 +14546,7 @@
     }
 
     function createPointerEventSystem(engine, inputSystem) {
-        const PointerHoverFeedback = PointerHoverFeedback$1(engine);
+        const PointerEvents = PointerEvents$1(engine);
         let EventType;
         (function (EventType) {
             EventType[EventType["Click"] = 0] = "Click";
@@ -14112,31 +14555,28 @@
         })(EventType || (EventType = {}));
         const getDefaultOpts = (opts = {}) => ({
             button: 3 /* InputAction.IA_ANY */,
-            hoverText: 'Interact',
-            maxDistance: 100,
             ...opts
         });
         const eventsMap = new Map();
         function getEvent(entity) {
             return (eventsMap.get(entity) || eventsMap.set(entity, new Map()).get(entity));
         }
-        function setHoverFeedback(entity, type, opts) {
-            if (opts.hoverText) {
-                const pointerEvent = PointerHoverFeedback.getMutableOrNull(entity) ||
-                    PointerHoverFeedback.create(entity);
+        function setPointerEvent(entity, type, opts) {
+            if (opts.hoverText || opts.showFeedback) {
+                const pointerEvent = PointerEvents.getMutableOrNull(entity) || PointerEvents.create(entity);
                 pointerEvent.pointerEvents.push({
                     eventType: type,
                     eventInfo: {
                         button: opts.button,
-                        showFeedback: true,
+                        showFeedback: opts.showFeedback,
                         hoverText: opts.hoverText,
                         maxDistance: opts.maxDistance
                     }
                 });
             }
         }
-        function removeHoverFeedback(entity, type, button) {
-            const pointerEvent = PointerHoverFeedback.getMutableOrNull(entity);
+        function removePointerEvent(entity, type, button) {
+            const pointerEvent = PointerEvents.getMutableOrNull(entity);
             if (!pointerEvent)
                 return;
             pointerEvent.pointerEvents = pointerEvent.pointerEvents.filter((pointer) => !(pointer.eventInfo?.button === button && pointer.eventType === type));
@@ -14151,7 +14591,7 @@
             const event = getEvent(entity);
             const pointerEvent = event.get(type);
             if (pointerEvent?.opts.hoverText) {
-                removeHoverFeedback(entity, getPointerEvent(type), pointerEvent.opts.button);
+                removePointerEvent(entity, getPointerEvent(type), pointerEvent.opts.button);
             }
             event.delete(type);
         }
@@ -14215,7 +14655,7 @@
                 removeEvent(entity, EventType.Click);
                 // Set new event
                 getEvent(entity).set(EventType.Click, { cb, opts: options });
-                setHoverFeedback(entity, 1 /* PointerEventType.PET_DOWN */, options);
+                setPointerEvent(entity, 1 /* PointerEventType.PET_DOWN */, options);
             },
             /**
              * @public
@@ -14228,7 +14668,7 @@
                 const options = getDefaultOpts(opts);
                 removeEvent(entity, EventType.Down);
                 getEvent(entity).set(EventType.Down, { cb, opts: options });
-                setHoverFeedback(entity, 1 /* PointerEventType.PET_DOWN */, options);
+                setPointerEvent(entity, 1 /* PointerEventType.PET_DOWN */, options);
             },
             /**
              * @public
@@ -14241,7 +14681,7 @@
                 const options = getDefaultOpts(opts);
                 removeEvent(entity, EventType.Up);
                 getEvent(entity).set(EventType.Up, { cb, opts: options });
-                setHoverFeedback(entity, 0 /* PointerEventType.PET_UP */, options);
+                setPointerEvent(entity, 0 /* PointerEventType.PET_UP */, options);
             }
         };
     }
@@ -14263,33 +14703,6 @@
 
     const executeTask = createTaskSystem(engine).executeTask;
 
-    /* eslint-disable */
-    exports.CameraType = void 0;
-    (function (CameraType) {
-        CameraType[CameraType["CT_FIRST_PERSON"] = 0] = "CT_FIRST_PERSON";
-        CameraType[CameraType["CT_THIRD_PERSON"] = 1] = "CT_THIRD_PERSON";
-    })(exports.CameraType || (exports.CameraType = {}));
-
-    /* eslint-disable */
-    exports.TextAlignMode = void 0;
-    (function (TextAlignMode) {
-        TextAlignMode[TextAlignMode["TAM_TOP_LEFT"] = 0] = "TAM_TOP_LEFT";
-        TextAlignMode[TextAlignMode["TAM_TOP_CENTER"] = 1] = "TAM_TOP_CENTER";
-        TextAlignMode[TextAlignMode["TAM_TOP_RIGHT"] = 2] = "TAM_TOP_RIGHT";
-        TextAlignMode[TextAlignMode["TAM_MIDDLE_LEFT"] = 3] = "TAM_MIDDLE_LEFT";
-        TextAlignMode[TextAlignMode["TAM_MIDDLE_CENTER"] = 4] = "TAM_MIDDLE_CENTER";
-        TextAlignMode[TextAlignMode["TAM_MIDDLE_RIGHT"] = 5] = "TAM_MIDDLE_RIGHT";
-        TextAlignMode[TextAlignMode["TAM_BOTTOM_LEFT"] = 6] = "TAM_BOTTOM_LEFT";
-        TextAlignMode[TextAlignMode["TAM_BOTTOM_CENTER"] = 7] = "TAM_BOTTOM_CENTER";
-        TextAlignMode[TextAlignMode["TAM_BOTTOM_RIGHT"] = 8] = "TAM_BOTTOM_RIGHT";
-    })(exports.TextAlignMode || (exports.TextAlignMode = {}));
-    exports.Font = void 0;
-    (function (Font) {
-        Font[Font["F_SANS_SERIF"] = 0] = "F_SANS_SERIF";
-        Font[Font["F_SERIF"] = 1] = "F_SERIF";
-        Font[Font["F_MONOSPACE"] = 2] = "F_MONOSPACE";
-    })(exports.Font || (exports.Font = {}));
-
     /**
      * Transform parenting: cyclic dependency checker
      * It checks only in modified Transforms
@@ -14333,17 +14746,28 @@
     /** @public */  const CameraModeArea = CameraModeArea$1(engine);
     /** @public */  const GltfContainer = GltfContainer$1(engine);
     /** @public */  const NftShape = NftShape$1(engine);
+    /** @public */  const PointerEvents = PointerEvents$1(engine);
     /** @public */  const PointerEventsResult = PointerEventsResult$1(engine);
-    /** @public */  const PointerHoverFeedback = PointerHoverFeedback$1(engine);
     /** @public */  const PointerLock = PointerLock$1(engine);
     /** @public */  const Raycast = Raycast$1(engine);
     /** @public */  const RaycastResult = RaycastResult$1(engine);
     /** @public */  const TextShape = TextShape$1(engine);
     /** @public */  const UiBackground = UiBackground$1(engine);
+    /** @public */  const UiDropdown = UiDropdown$1(engine);
+    /** @public */  const UiDropdownResult = UiDropdownResult$1(engine);
+    /** @public */  const UiInput = UiInput$1(engine);
+    /** @public */  const UiInputResult = UiInputResult$1(engine);
     /** @public */  const UiText = UiText$1(engine);
     /** @public */  const UiTransform = UiTransform$1(engine);
     /** @public */  const VisibilityComponent = VisibilityComponent$1(engine);
 
+    /* eslint-disable */
+    exports.CameraType = void 0;
+    (function (CameraType) {
+        CameraType[CameraType["CT_FIRST_PERSON"] = 0] = "CT_FIRST_PERSON";
+        CameraType[CameraType["CT_THIRD_PERSON"] = 1] = "CT_THIRD_PERSON";
+    })(exports.CameraType || (exports.CameraType = {}));
+
     /* eslint-disable */
     exports.InputAction = void 0;
     (function (InputAction) {
@@ -14363,6 +14787,26 @@
         InputAction[InputAction["IA_ACTION_6"] = 13] = "IA_ACTION_6";
     })(exports.InputAction || (exports.InputAction = {}));
 
+    /* eslint-disable */
+    exports.TextAlignMode = void 0;
+    (function (TextAlignMode) {
+        TextAlignMode[TextAlignMode["TAM_TOP_LEFT"] = 0] = "TAM_TOP_LEFT";
+        TextAlignMode[TextAlignMode["TAM_TOP_CENTER"] = 1] = "TAM_TOP_CENTER";
+        TextAlignMode[TextAlignMode["TAM_TOP_RIGHT"] = 2] = "TAM_TOP_RIGHT";
+        TextAlignMode[TextAlignMode["TAM_MIDDLE_LEFT"] = 3] = "TAM_MIDDLE_LEFT";
+        TextAlignMode[TextAlignMode["TAM_MIDDLE_CENTER"] = 4] = "TAM_MIDDLE_CENTER";
+        TextAlignMode[TextAlignMode["TAM_MIDDLE_RIGHT"] = 5] = "TAM_MIDDLE_RIGHT";
+        TextAlignMode[TextAlignMode["TAM_BOTTOM_LEFT"] = 6] = "TAM_BOTTOM_LEFT";
+        TextAlignMode[TextAlignMode["TAM_BOTTOM_CENTER"] = 7] = "TAM_BOTTOM_CENTER";
+        TextAlignMode[TextAlignMode["TAM_BOTTOM_RIGHT"] = 8] = "TAM_BOTTOM_RIGHT";
+    })(exports.TextAlignMode || (exports.TextAlignMode = {}));
+    exports.Font = void 0;
+    (function (Font) {
+        Font[Font["F_SANS_SERIF"] = 0] = "F_SANS_SERIF";
+        Font[Font["F_SERIF"] = 1] = "F_SERIF";
+        Font[Font["F_MONOSPACE"] = 2] = "F_MONOSPACE";
+    })(exports.Font || (exports.Font = {}));
+
     // The order of the following imports matters. Please do not auto-sort
     // export components for global engine
      const Transform = Transform$1(engine);
@@ -39664,25 +40108,6 @@
     }
 
     const CANVAS_ROOT_ENTITY = 0;
-    /**
-     * @public
-     */
-    function parseUiTransform(props = {}) {
-        const { position, padding, margin, height, minHeight, maxHeight, width, maxWidth, minWidth, ...otherProps } = props;
-        return {
-            ...defaultUiTransform,
-            ...otherProps,
-            ...parsePosition(position, 'position'),
-            ...parsePosition(margin, 'margin'),
-            ...parsePosition(padding, 'padding'),
-            ...parseSize(height, 'height'),
-            ...parseSize(minHeight, 'minHeight'),
-            ...parseSize(maxHeight, 'maxHeight'),
-            ...parseSize(width, 'width'),
-            ...parseSize(minWidth, 'minWidth'),
-            ...parseSize(maxWidth, 'maxWidth')
-        };
-    }
     const defaultUiTransform = {
         parent: CANVAS_ROOT_ENTITY,
         rightOf: 0,
@@ -39732,31 +40157,235 @@
         widthUnit: 0 /* YGUnit.YGU_UNDEFINED */,
         heightUnit: 0 /* YGUnit.YGU_UNDEFINED */
     };
+    /**
+     * @public
+     */
+
+    function parseUiTransform(props = {}) {
+        const { position, padding, margin, height, minHeight, maxHeight, width, maxWidth, minWidth, ...otherProps } = props;
+        return {
+            ...defaultUiTransform,
+            ...otherProps,
+            ...parsePosition(position, 'position'),
+            ...parsePosition(margin, 'margin'),
+            ...parsePosition(padding, 'padding'),
+            ...parseSize(height, 'height'),
+            ...parseSize(minHeight, 'minHeight'),
+            ...parseSize(maxHeight, 'maxHeight'),
+            ...parseSize(width, 'width'),
+            ...parseSize(minWidth, 'minWidth'),
+            ...parseSize(maxWidth, 'maxWidth')
+        };
+    }
+
+    function isAvatarTexture(props) {
+        return !!props.avatarTexture;
+    }
+    function isTexture(props) {
+        return !!props.texture;
+    }
+    function getTexture(props) {
+        if (isTexture(props) && props.texture) {
+            return {
+                tex: {
+                    $case: 'texture',
+                    texture: props.texture
+                }
+            };
+        }
+        if (isAvatarTexture(props) && props.avatarTexture) {
+            return {
+                tex: {
+                    $case: 'avatarTexture',
+                    avatarTexture: props.avatarTexture
+                }
+            };
+        }
+        return undefined;
+    }
+    /**
+     * @public
+     */
+
+    function parseUiBackground(props) {
+        if (!props || !Object.keys(props).length)
+            return undefined;
+        const texture = getTexture(props);
+        return {
+            ...props,
+            uvs: props.uvs ?? [],
+            texture,
+            textureMode: props.textureMode ?? 1 /* BackgroundTextureMode.CENTER */
+        };
+    }
+
+    /**
+     * @internal
+     */
+    function parseProps(props) {
+        const { uiTransform, uiBackground, ...otherProps } = props;
+        const uiTransformProps = parseUiTransform(uiTransform);
+        const uiBackgroundProps = uiBackground
+            ? { uiBackground: parseUiBackground(uiBackground) }
+            : undefined;
+        return {
+            ...otherProps,
+            uiTransform: uiTransformProps,
+            ...uiBackgroundProps
+        };
+    }
 
     const listeners = {
-        onClick: undefined
+        onMouseDown: undefined,
+        onMouseUp: undefined
     };
     const listenersKey = Object.keys(listeners);
     const isListener = (key) => listenersKey.includes(key);
 
+    function parseUiDropdown(props) {
+        return {
+            acceptEmpty: false,
+            options: [],
+            selectedIndex: props.acceptEmpty ? -1 : 0,
+            disabled: false,
+            ...props
+        };
+    }
     /**
      * @public
      */
-    function UiEntity(props) {
-        const { uiTransform, ...otherProps } = props;
-        const uiTransformProps = parseUiTransform(uiTransform);
-        return ReactEcs$1.createElement("entity", { uiTransform: uiTransformProps, ...otherProps });
+
+    function Dropdown(props) {
+        const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...otherProps } = props;
+        const dropdownProps = parseUiDropdown(otherProps);
+        const commonProps = parseProps({
+            uiTransform,
+            uiBackground,
+            onMouseDown,
+            onMouseUp
+        });
+        return ReactEcs$1.createElement("entity", { ...commonProps, uiDropdown: dropdownProps });
+    }
+
+    function parseUiInput(props) {
+        return {
+            disabled: false,
+            placeholder: '',
+            ...props
+        };
+    }
+    /**
+     * @public
+     */
+
+    function Input(props) {
+        const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...otherProps } = props;
+        const inputProps = parseUiInput(otherProps);
+        const commonProps = parseProps({
+            uiTransform,
+            uiBackground,
+            onMouseDown,
+            onMouseUp
+        });
+        return ReactEcs$1.createElement("entity", { ...commonProps, uiInput: inputProps });
+    }
+
+    /**
+     * @public
+     */
+
+    function Label(props) {
+        const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...uiTextProps } = props;
+        const commonProps = parseProps({
+            uiTransform,
+            uiBackground,
+            onMouseDown,
+            onMouseUp
+        });
+        return ReactEcs$1.createElement("entity", { ...commonProps, uiText: uiTextProps });
+    }
+
+    function getButtonProps(props) {
+        if (props.type === 'primary') {
+            return {
+                uiBackground: { color: { r: 0.98, g: 0.17, b: 0.33, a: 1 } },
+                uiText: { color: { r: 1, g: 1, b: 1, a: 1 } }
+            };
+        }
+        if (props.type === 'secondary') {
+            return {
+                uiBackground: { color: { r: 1, g: 1, b: 1, a: 1 } },
+                uiText: { color: { r: 0.98, g: 0.17, b: 0.33, a: 1 } }
+            };
+        }
+        return {};
+    }
+    /**
+     * @public
+     */
+
+    function Button(props) {
+        const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...uiTextProps } = props;
+        const buttonProps = getButtonProps(props);
+        const uiBackgroundProps = parseUiBackground({
+            ...buttonProps.uiBackground,
+            ...uiBackground
+        });
+        const textProps = {
+            ...buttonProps.uiText,
+            ...uiTextProps
+        };
+        const uiTransformProps = parseUiTransform({
+            height: 36,
+            ...uiTransform
+        });
+        return (ReactEcs$1.createElement("entity", { onMouseDown: onMouseDown, onMouseUp: onMouseUp, uiTransform: uiTransformProps, uiText: textProps, uiBackground: uiBackgroundProps }));
     }
-    function Container({ width, height, children }) {
-        return (ReactEcs$1.createElement(UiEntity, { uiTransform: { width, height, display: 0 /* YGDisplay.YGD_FLEX */ } }, children));
+
+    /**
+     * @public
+     */
+
+    function UiEntity(props) {
+        return ReactEcs$1.createElement("entity", { ...parseProps(props) });
     }
 
+    function propsChanged(component, prevProps, nextProps) {
+        if (prevProps && !nextProps) {
+            return { type: 'delete', component };
+        }
+        if (!nextProps) {
+            return;
+        }
+        if (!prevProps && nextProps) {
+            return { type: 'add', props: nextProps, component };
+        }
+        if (isListener(component)) {
+            if (!isEqual(prevProps, nextProps)) {
+                return { type: 'put', component, props: nextProps };
+            }
+        }
+        const changes = {};
+        for (const k in prevProps) {
+            const propKey = k;
+            if (!isEqual(prevProps[propKey], nextProps[propKey])) {
+                changes[propKey] = nextProps[propKey];
+            }
+        }
+        if (!Object.keys(changes).length) {
+            return;
+        }
+        return { type: 'put', props: changes, component };
+    }
     // as any HACK so every time we add a new component, we must add also the component here.
     const entityComponent = {
         uiText: undefined,
         uiBackground: undefined,
         uiTransform: undefined,
-        onClick: undefined
+        onMouseDown: undefined,
+        onMouseUp: undefined,
+        uiInput: undefined,
+        uiDropdown: undefined
     };
     const componentKeys = Object.keys(entityComponent);
     function isEqual(val1, val2) {
@@ -39838,8 +40467,6 @@
             return null;
         },
         /* istanbul ignore next */
-        removeChildFromContainer() { },
-        /* istanbul ignore next */
         commitMount(_instance, _type, _props, _internalInstanceHandle) { },
         /* istanbul ignore next */
         resetTextContent(_instance) { },
@@ -39880,61 +40507,55 @@
         }
     };
 
-    function propsChanged(component, prevProps, nextProps) {
-        if (prevProps && !nextProps) {
-            return { type: 'delete', component };
-        }
-        if (!nextProps) {
-            return;
-        }
-        if (!prevProps && nextProps) {
-            return { type: 'add', props: nextProps, component };
-        }
-        if (isListener(component)) {
-            if (!isEqual(prevProps, nextProps)) {
-                return { type: 'put', component, props: nextProps };
-            }
-        }
-        const changes = {};
-        for (const k in prevProps) {
-            const propKey = k;
-            if (!isEqual(prevProps[propKey], nextProps[propKey])) {
-                changes[propKey] = nextProps[propKey];
-            }
-        }
-        if (!Object.keys(changes).length) {
-            return;
-        }
-        return { type: 'put', props: changes, component };
-    }
     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();
+        // Initialize components
         const UiTransform = UiTransform$1(engine);
         const UiText = UiText$1(engine);
         const UiBackground = UiBackground$1(engine);
+        const UiInput = UiInput$1(engine);
+        const UiInputResult = UiInputResult$1(engine);
+        const UiDropdown = UiDropdown$1(engine);
+        const UiDropdownResult = UiDropdownResult$1(engine);
+        // Component ID Helper
         const getComponentId = {
             uiTransform: UiTransform._id,
             uiText: UiText._id,
-            uiBackground: UiBackground._id
+            uiBackground: UiBackground._id,
+            uiInput: UiInput._id,
+            uiDropdown: UiDropdown._id
         };
         function updateTree(instance, props) {
             upsertComponent(instance, props, 'uiTransform');
         }
         function upsertListener(instance, update) {
-            // TODO: This handles only onClick listener for the moment
             if (update.type === 'delete' || !update.props) {
-                pointerEvents.removeOnPointerDown(instance.entity);
+                if (update.component === 'onMouseDown') {
+                    pointerEvents.removeOnPointerDown(instance.entity);
+                }
+                else if (update.component === 'onMouseUp') {
+                    pointerEvents.removeOnPointerUp(instance.entity);
+                }
                 return;
             }
             if (update.props) {
-                pointerEvents.onPointerDown(instance.entity, update.props, {
+                const pointerEvent = update.component === 'onMouseDown'
+                    ? pointerEvents.onPointerDown
+                    : pointerEvents.onPointerUp;
+                pointerEvent(instance.entity, update.props, {
                     button: 0 /* InputAction.IA_POINTER */,
-                    hoverText: ''
+                    // 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
                 });
             }
         }
         function removeComponent(instance, component) {
-            const Component = engine.getComponent(getComponentId[component]);
+            const componentId = getComponentId[component];
+            const Component = engine.getComponent(componentId);
             Component.deleteFrom(instance.entity);
         }
         function upsertComponent(instance, props, componentName) {
@@ -39944,10 +40565,17 @@
                 Component.create(instance.entity);
             for (const key in props) {
                 const keyProp = key;
-                component[keyProp] = props[keyProp];
+                if (key === 'onChange') {
+                    const onChange = props[keyProp];
+                    updateOnChange(instance.entity, componentId, { fn: onChange });
+                }
+                else {
+                    component[keyProp] = props[keyProp];
+                }
             }
         }
         function removeChildEntity(instance) {
+            changeEvents.delete(instance.entity);
             engine.removeEntity(instance.entity);
             for (const child of instance._child) {
                 removeChildEntity(child);
@@ -39993,6 +40621,14 @@
             parentInstance._child.splice(childIndex, 1);
             removeChildEntity(child);
         }
+        function updateOnChange(entity, componentId, state) {
+            const event = changeEvents.get(entity) ||
+                changeEvents.set(entity, new Map()).get(entity);
+            const oldState = event.get(componentId);
+            const fn = state?.fn;
+            const value = state?.value ?? oldState?.value;
+            event.set(componentId, { fn, value });
+        }
         const hostConfig = {
             ...noopConfig,
             createInstance(type, props) {
@@ -40031,7 +40667,7 @@
                     .map((component) => propsChanged(component, oldProps[component], newProps[component]))
                     .filter(isNotUndefined);
             },
-            commitUpdate(instance, updatePayload, _type, _prevPropsProps, _nextProps, _internalHandle) {
+            commitUpdate(instance, updatePayload, _type, _prevProps, _nextProps, _internalHandle) {
                 for (const update of updatePayload) {
                     if (isListener(update.component)) {
                         upsertListener(instance, update);
@@ -40057,14 +40693,36 @@
                 child.parent = parentInstance.entity;
                 updateTree(child, { rightOf: child.rightOf, parent: child.parent });
                 updateTree(beforeChild, { rightOf: beforeChild.rightOf });
+            },
+            removeChildFromContainer(parenInstance, child) {
+                removeChildEntity(child);
             }
         };
         const reconciler = reactReconcilerExports(hostConfig);
         const root = reconciler.createContainer({}, 0, null, false, null, '', 
         /* istanbul ignore next */
         function () { }, null);
+        // Maybe this could be something similar to Input system, but since we
+        // are going to use this only here, i prefer to scope it here.
+        function handleOnChange(componentId, resultComponent) {
+            for (const [entity, Result] of engine.getEntitiesWith(resultComponent)) {
+                const entityState = changeEvents.get(entity)?.get(componentId);
+                if (entityState?.fn && Result.value !== entityState.value) {
+                    // Call onChange callback and update internal timestamp
+                    entityState.fn(Result.value);
+                    updateOnChange(entity, componentId, {
+                        fn: entityState.fn,
+                        value: Result.value
+                    });
+                }
+            }
+        }
         return {
             update: function (component) {
+                if (changeEvents.size) {
+                    handleOnChange(UiInput._id, UiInputResult);
+                    handleOnChange(UiDropdown._id, UiDropdownResult);
+                }
                 return reconciler.updateContainer(component, root, null);
             },
             getEntities: () => Array.from(entities)
@@ -40450,13 +41108,17 @@
         ECSComponentIDs[ECSComponentIDs["MeshCollider"] = 1019] = "MeshCollider";
         ECSComponentIDs[ECSComponentIDs["MeshRenderer"] = 1018] = "MeshRenderer";
         ECSComponentIDs[ECSComponentIDs["NftShape"] = 1040] = "NftShape";
+        ECSComponentIDs[ECSComponentIDs["PointerEvents"] = 1062] = "PointerEvents";
         ECSComponentIDs[ECSComponentIDs["PointerEventsResult"] = 1063] = "PointerEventsResult";
-        ECSComponentIDs[ECSComponentIDs["PointerHoverFeedback"] = 1062] = "PointerHoverFeedback";
         ECSComponentIDs[ECSComponentIDs["PointerLock"] = 1074] = "PointerLock";
         ECSComponentIDs[ECSComponentIDs["Raycast"] = 1067] = "Raycast";
         ECSComponentIDs[ECSComponentIDs["RaycastResult"] = 1068] = "RaycastResult";
         ECSComponentIDs[ECSComponentIDs["TextShape"] = 1030] = "TextShape";
         ECSComponentIDs[ECSComponentIDs["UiBackground"] = 1053] = "UiBackground";
+        ECSComponentIDs[ECSComponentIDs["UiDropdown"] = 1094] = "UiDropdown";
+        ECSComponentIDs[ECSComponentIDs["UiDropdownResult"] = 1096] = "UiDropdownResult";
+        ECSComponentIDs[ECSComponentIDs["UiInput"] = 1093] = "UiInput";
+        ECSComponentIDs[ECSComponentIDs["UiInputResult"] = 1095] = "UiInputResult";
         ECSComponentIDs[ECSComponentIDs["UiText"] = 1052] = "UiText";
         ECSComponentIDs[ECSComponentIDs["UiTransform"] = 1050] = "UiTransform";
         ECSComponentIDs[ECSComponentIDs["VisibilityComponent"] = 1081] = "VisibilityComponent";
@@ -40513,15 +41175,19 @@
     exports.AvatarShape = AvatarShape;
     exports.AvatarTexture = AvatarTexture;
     exports.Billboard = Billboard;
+    exports.BorderRect = BorderRect;
+    exports.Button = Button;
     exports.CANVAS_ROOT_ENTITY = CANVAS_ROOT_ENTITY;
     exports.CameraMode = CameraMode;
     exports.CameraModeArea = CameraModeArea;
-    exports.Container = Container;
     exports.DEG2RAD = DEG2RAD;
+    exports.Dropdown = Dropdown;
     exports.Engine = Engine;
     exports.EntityContainer = EntityContainer;
     exports.Epsilon = Epsilon;
     exports.GltfContainer = GltfContainer;
+    exports.Input = Input;
+    exports.Label = Label;
     exports.Material = Material;
     exports.MeshCollider = MeshCollider;
     exports.MeshRenderer = MeshRenderer;
@@ -40555,21 +41221,25 @@
     exports.PBMeshRenderer_PlaneMesh = PBMeshRenderer_PlaneMesh;
     exports.PBMeshRenderer_SphereMesh = PBMeshRenderer_SphereMesh;
     exports.PBNftShape = PBNftShape;
+    exports.PBPointerEvents = PBPointerEvents;
     exports.PBPointerEventsResult = PBPointerEventsResult;
     exports.PBPointerEventsResult_PointerCommand = PBPointerEventsResult_PointerCommand;
-    exports.PBPointerHoverFeedback = PBPointerHoverFeedback;
-    exports.PBPointerHoverFeedback_Entry = PBPointerHoverFeedback_Entry;
-    exports.PBPointerHoverFeedback_Info = PBPointerHoverFeedback_Info;
+    exports.PBPointerEvents_Entry = PBPointerEvents_Entry;
+    exports.PBPointerEvents_Info = PBPointerEvents_Info;
     exports.PBPointerLock = PBPointerLock;
     exports.PBRaycast = PBRaycast;
     exports.PBRaycastResult = PBRaycastResult;
     exports.PBTextShape = PBTextShape;
     exports.PBUiBackground = PBUiBackground;
+    exports.PBUiDropdown = PBUiDropdown;
+    exports.PBUiDropdownResult = PBUiDropdownResult;
+    exports.PBUiInput = PBUiInput;
+    exports.PBUiInputResult = PBUiInputResult;
     exports.PBUiText = PBUiText;
     exports.PBUiTransform = PBUiTransform;
     exports.PBVisibilityComponent = PBVisibilityComponent;
+    exports.PointerEvents = PointerEvents;
     exports.PointerEventsResult = PointerEventsResult;
-    exports.PointerHoverFeedback = PointerHoverFeedback;
     exports.PointerLock = PointerLock;
     exports.RAD2DEG = RAD2DEG;
     exports.Raycast = Raycast;
@@ -40584,7 +41254,11 @@
     exports.ToLinearSpace = ToLinearSpace;
     exports.Transform = Transform;
     exports.UiBackground = UiBackground;
+    exports.UiDropdown = UiDropdown;
+    exports.UiDropdownResult = UiDropdownResult;
     exports.UiEntity = UiEntity;
+    exports.UiInput = UiInput;
+    exports.UiInputResult = UiInputResult;
     exports.UiText = UiText;
     exports.UiTransform = UiTransform;
     exports.VisibilityComponent = VisibilityComponent;