@dcl/playground-assets 7.0.6-4153633895.commit-4aad233 → 7.0.6-4177592674.commit-39cdc99

package/dist/alpha.d.ts

@@ -3767,6 +3767,20 @@ export declare interface Position {
     left: PositionUnit;
 }
 
+/**
+ * The values are in clockwise order, beginning at the top: top, right, bottom, then left
+
+ * When one value is specified, it applies the same margin to all four sides.
+ *
+ * When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
+ *
+ * When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.
+ *
+ When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).
+ * @public
+ */
+export declare type PositionShorthand = PositionUnit | `${PositionUnit} ${PositionUnit}` | `${PositionUnit} ${PositionUnit} ${PositionUnit}` | `${PositionUnit} ${PositionUnit} ${PositionUnit} ${PositionUnit}`;
+
 /**
  * @public
  * The position property specifies the type of positioning method used for an element
@@ -3774,11 +3788,10 @@ export declare interface Position {
 export declare type PositionType = 'absolute' | 'relative';
 
 /**
- * Position unit for the user.
- * i.e. width="100", width="100%", width="100px"
+ * unit value specified. i.e. 1 || '100%' || '1px'
  * @public
  */
-export declare type PositionUnit = `${number}px` | `${number}%` | number;
+export declare type PositionUnit = `${number}px` | `${number}%` | number | `${number}`;
 
 export declare enum ProcessMessageResultType {
     /**
@@ -4725,7 +4738,9 @@ export declare const UiDropdownResult: ComponentDefinition<PBUiDropdownResult>;
  * @public
  * @category Component
  */
-export declare function UiEntity(props: EntityPropTypes): ReactEcs.JSX.Element;
+export declare function UiEntity(props: EntityPropTypes & {
+    uiText?: UiLabelProps;
+}): ReactEcs.JSX.Element;
 
 /**
  * @public
@@ -4808,11 +4823,11 @@ export declare interface UiTransformProps {
     /** The flex-direction property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). */
     flexDirection?: FlexDirectionType;
     /** The position property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
-    position?: Partial<Position>;
+    position?: Partial<Position> | PositionShorthand;
     /** The padding shorthand property sets the padding area on all four sides of an element at once. */
-    padding?: Partial<Position>;
+    padding?: Partial<Position> | PositionShorthand;
     /** The margin shorthand property sets the margin area on all four sides of an element. */
-    margin?: Partial<Position>;
+    margin?: Partial<Position> | PositionShorthand;
     /** The width property specifies the width of an element. */
     width?: PositionUnit;
     /** The height property specifies the height of an element. */

package/dist/beta.d.ts

@@ -3763,6 +3763,20 @@ export declare interface Position {
     left: PositionUnit;
 }
 
+/**
+ * The values are in clockwise order, beginning at the top: top, right, bottom, then left
+
+ * When one value is specified, it applies the same margin to all four sides.
+ *
+ * When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
+ *
+ * When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.
+ *
+ When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).
+ * @public
+ */
+export declare type PositionShorthand = PositionUnit | `${PositionUnit} ${PositionUnit}` | `${PositionUnit} ${PositionUnit} ${PositionUnit}` | `${PositionUnit} ${PositionUnit} ${PositionUnit} ${PositionUnit}`;
+
 /**
  * @public
  * The position property specifies the type of positioning method used for an element
@@ -3770,11 +3784,10 @@ export declare interface Position {
 export declare type PositionType = 'absolute' | 'relative';
 
 /**
- * Position unit for the user.
- * i.e. width="100", width="100%", width="100px"
+ * unit value specified. i.e. 1 || '100%' || '1px'
  * @public
  */
-export declare type PositionUnit = `${number}px` | `${number}%` | number;
+export declare type PositionUnit = `${number}px` | `${number}%` | number | `${number}`;
 
 export declare enum ProcessMessageResultType {
     /**
@@ -4721,7 +4734,9 @@ export declare const UiDropdownResult: ComponentDefinition<PBUiDropdownResult>;
  * @public
  * @category Component
  */
-export declare function UiEntity(props: EntityPropTypes): ReactEcs.JSX.Element;
+export declare function UiEntity(props: EntityPropTypes & {
+    uiText?: UiLabelProps;
+}): ReactEcs.JSX.Element;
 
 /**
  * @public
@@ -4804,11 +4819,11 @@ export declare interface UiTransformProps {
     /** The flex-direction property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). */
     flexDirection?: FlexDirectionType;
     /** The position property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
-    position?: Partial<Position>;
+    position?: Partial<Position> | PositionShorthand;
     /** The padding shorthand property sets the padding area on all four sides of an element at once. */
-    padding?: Partial<Position>;
+    padding?: Partial<Position> | PositionShorthand;
     /** The margin shorthand property sets the margin area on all four sides of an element. */
-    margin?: Partial<Position>;
+    margin?: Partial<Position> | PositionShorthand;
     /** The width property specifies the width of an element. */
     width?: PositionUnit;
     /** The height property specifies the height of an element. */

package/dist/index.bundled.d.ts

@@ -3763,6 +3763,20 @@ export declare interface Position {
     left: PositionUnit;
 }
 
+/**
+ * The values are in clockwise order, beginning at the top: top, right, bottom, then left
+
+ * When one value is specified, it applies the same margin to all four sides.
+ *
+ * When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
+ *
+ * When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.
+ *
+ When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).
+ * @public
+ */
+export declare type PositionShorthand = PositionUnit | `${PositionUnit} ${PositionUnit}` | `${PositionUnit} ${PositionUnit} ${PositionUnit}` | `${PositionUnit} ${PositionUnit} ${PositionUnit} ${PositionUnit}`;
+
 /**
  * @public
  * The position property specifies the type of positioning method used for an element
@@ -3770,11 +3784,10 @@ export declare interface Position {
 export declare type PositionType = 'absolute' | 'relative';
 
 /**
- * Position unit for the user.
- * i.e. width="100", width="100%", width="100px"
+ * unit value specified. i.e. 1 || '100%' || '1px'
  * @public
  */
-export declare type PositionUnit = `${number}px` | `${number}%` | number;
+export declare type PositionUnit = `${number}px` | `${number}%` | number | `${number}`;
 
 export declare enum ProcessMessageResultType {
     /**
@@ -4721,7 +4734,9 @@ export declare const UiDropdownResult: ComponentDefinition<PBUiDropdownResult>;
  * @public
  * @category Component
  */
-export declare function UiEntity(props: EntityPropTypes): ReactEcs.JSX.Element;
+export declare function UiEntity(props: EntityPropTypes & {
+    uiText?: UiLabelProps;
+}): ReactEcs.JSX.Element;
 
 /**
  * @public
@@ -4804,11 +4819,11 @@ export declare interface UiTransformProps {
     /** The flex-direction property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). */
     flexDirection?: FlexDirectionType;
     /** The position property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
-    position?: Partial<Position>;
+    position?: Partial<Position> | PositionShorthand;
     /** The padding shorthand property sets the padding area on all four sides of an element at once. */
-    padding?: Partial<Position>;
+    padding?: Partial<Position> | PositionShorthand;
     /** The margin shorthand property sets the margin area on all four sides of an element. */
-    margin?: Partial<Position>;
+    margin?: Partial<Position> | PositionShorthand;
     /** The width property specifies the width of an element. */
     width?: PositionUnit;
     /** The height property specifies the height of an element. */

package/dist/index.js

@@ -40862,6 +40862,39 @@
     var reactReconcilerExports = requireReactReconciler();
     var Reconciler = /*@__PURE__*/getDefaultExportFromCjs(reactReconcilerExports);
 
+    const parseFont = {
+        'sans-serif': 0 /* Font.F_SANS_SERIF */,
+        serif: 1 /* Font.F_SERIF */,
+        monospace: 2 /* Font.F_MONOSPACE */
+    };
+    /**
+     * @internal
+     */
+    function getFont(font) {
+        if (!font)
+            return undefined;
+        return { font: parseFont[font] };
+    }
+    const parseTextAlign = {
+        'top-left': 0 /* TextAlignMode.TAM_TOP_LEFT */,
+        'top-center': 1 /* TextAlignMode.TAM_TOP_CENTER */,
+        'top-right': 2 /* TextAlignMode.TAM_TOP_RIGHT */,
+        'middle-left': 3 /* TextAlignMode.TAM_MIDDLE_LEFT */,
+        'middle-center': 4 /* TextAlignMode.TAM_MIDDLE_CENTER */,
+        'middle-right': 5 /* TextAlignMode.TAM_MIDDLE_RIGHT */,
+        'bottom-left': 6 /* TextAlignMode.TAM_BOTTOM_LEFT */,
+        'bottom-center': 7 /* TextAlignMode.TAM_BOTTOM_CENTER */,
+        'bottom-right': 8 /* TextAlignMode.TAM_BOTTOM_RIGHT */
+    };
+    /**
+     * @internal
+     */
+    function getTextAlign(textAlign) {
+        if (!textAlign)
+            return undefined;
+        return { textAlign: parseTextAlign[textAlign] };
+    }
+
     const parseTextureMode = {
         'nine-slices': 0 /* BackgroundTextureMode.NINE_SLICES */,
         center: 1 /* BackgroundTextureMode.CENTER */,
@@ -40947,7 +40980,7 @@
         if (val === undefined || val === null) {
             return [undefined, 0 /* YGUnit.YGU_UNDEFINED */];
         }
-        if (typeof val === 'number') {
+        if (typeof val === 'number' || (typeof val === 'string' && !isNaN(Number(val)))) {
             return [Number(val), 1 /* YGUnit.YGU_POINT */];
         }
         if (isPercent(val)) {
@@ -40958,20 +40991,39 @@
         }
         return [undefined, 0 /* YGUnit.YGU_UNDEFINED */];
     }
-    // position: { top: '1px' } => { positionTop: 1, positionTopUnit: YGUnit.YGU_Point }
     function parsePosition(position = {}, prop) {
-        const obj = {};
-        for (const key in position) {
-            const typedKey = key;
-            const propKey = `${prop}${capitalize(typedKey)}`;
-            const propKeyUnit = `${prop}${capitalize(typedKey)}Unit`;
-            const [value, unit] = parsePositionUnit(position[typedKey]);
-            if (value === undefined)
-                continue;
-            obj[propKeyUnit] = unit;
-            obj[propKey] = value;
-        }
-        return obj;
+        if (typeof position === 'object') {
+            const obj = {};
+            for (const key in position) {
+                const typedKey = key;
+                const propKey = `${prop}${capitalize(typedKey)}`;
+                const propKeyUnit = `${prop}${capitalize(typedKey)}Unit`;
+                const [value, unit] = parsePositionUnit(position[typedKey]);
+                if (value === undefined)
+                    continue;
+                obj[propKeyUnit] = unit;
+                obj[propKey] = value;
+            }
+            return obj;
+        }
+        if (typeof position === 'number') {
+            return parsePosition({ top: position, left: position, right: position, bottom: position }, prop);
+        }
+        const values = position.split(' ').filter((a) => a !== '');
+        if (values.length === 1) {
+            const [value] = values;
+            return parsePosition({ top: value, left: value, right: value, bottom: value }, prop);
+        }
+        if (values.length === 2) {
+            const [topBottom, rigthLeft] = values;
+            return parsePosition({ top: topBottom, left: rigthLeft, right: rigthLeft, bottom: topBottom }, prop);
+        }
+        if (values.length === 3) {
+            const [top, rigthLeft, bottom] = values;
+            return parsePosition({ top, left: rigthLeft, right: rigthLeft, bottom }, prop);
+        }
+        const [top, right, bottom, left] = values;
+        return parsePosition({ top, right, bottom, left }, prop);
     }
     function parseSize(val, key) {
         const unitKey = `${key}Unit`;
@@ -41012,8 +41064,8 @@
     /**
      * @internal
      */
-    function getAlign(prop, align, defaultValue) {
-        const value = align ? parseAligns[align] : defaultValue;
+    function getAlign(prop, align) {
+        const value = parseAligns[align];
         return { [prop]: value };
     }
     const parseAligns = {
@@ -41043,7 +41095,7 @@
      * @internal
      */
     function getFlexWrap(flexWrap) {
-        const value = flexWrap ? parseFlexWrap[flexWrap] : 1 /* YGWrap.YGW_WRAP */;
+        const value = parseFlexWrap[flexWrap];
         return { flexWrap: value };
     }
     const parseFlexWrap = {
@@ -41080,6 +41132,12 @@
      */
     const CANVAS_ROOT_ENTITY = 0;
     const defaultUiTransform = {
+        overflow: 0 /* YGOverflow.YGO_VISIBLE */,
+        display: 0 /* YGDisplay.YGD_FLEX */,
+        justifyContent: 0 /* YGJustify.YGJ_FLEX_START */,
+        alignSelf: 0 /* YGAlign.YGA_AUTO */,
+        flexDirection: 0 /* YGFlexDirection.YGFD_ROW */,
+        positionType: 0 /* YGPositionType.YGPT_RELATIVE */,
         parent: CANVAS_ROOT_ENTITY,
         rightOf: 0,
         flexBasis: 0,
@@ -41127,7 +41185,7 @@
      */
 
     function parseUiTransform(props = {}) {
-        const { height, minHeight, maxHeight, width, minWidth, maxWidth, ...otherProps } = props;
+        const { height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, ...otherProps } = props;
         return {
             ...defaultUiTransform,
             ...otherProps,
@@ -41141,14 +41199,15 @@
             ...parseSize(props.minWidth, 'minWidth'),
             ...parseSize(props.maxWidth, 'maxWidth'),
             ...getDisplay(props.display),
-            ...getAlign('alignContent', props.alignContent, 1 /* YGAlign.YGA_FLEX_START */),
-            ...getAlign('alignSelf', props.alignSelf, 1 /* YGAlign.YGA_FLEX_START */),
-            ...getAlign('alignItems', props.alignItems, 1 /* YGAlign.YGA_FLEX_START */),
+            ...getAlign('alignSelf', props.alignSelf ?? 'auto'),
             ...getJustify(props.justifyContent),
             ...getFlexDirection(props.flexDirection),
-            ...getFlexWrap(props.flexWrap),
             ...getOverflow(props.overflow),
-            ...getPoistionType(props.positionType)
+            ...getPoistionType(props.positionType),
+            // Optional values
+            ...(alignContent && getAlign('alignContent', alignContent)),
+            ...(alignItems && getAlign('alignItems', alignItems)),
+            ...(flexWrap && getFlexWrap(flexWrap))
         };
     }
 
@@ -41176,39 +41235,6 @@
      */
     const isListener = (key) => listenersKey.includes(key);
 
-    const parseFont = {
-        'sans-serif': 0 /* Font.F_SANS_SERIF */,
-        serif: 1 /* Font.F_SERIF */,
-        monospace: 2 /* Font.F_MONOSPACE */
-    };
-    /**
-     * @internal
-     */
-    function getFont(font) {
-        if (!font)
-            return undefined;
-        return { font: parseFont[font] };
-    }
-    const parseTextAlign = {
-        'top-left': 0 /* TextAlignMode.TAM_TOP_LEFT */,
-        'top-center': 1 /* TextAlignMode.TAM_TOP_CENTER */,
-        'top-right': 2 /* TextAlignMode.TAM_TOP_RIGHT */,
-        'middle-left': 3 /* TextAlignMode.TAM_MIDDLE_LEFT */,
-        'middle-center': 4 /* TextAlignMode.TAM_MIDDLE_CENTER */,
-        'middle-right': 5 /* TextAlignMode.TAM_MIDDLE_RIGHT */,
-        'bottom-left': 6 /* TextAlignMode.TAM_BOTTOM_LEFT */,
-        'bottom-center': 7 /* TextAlignMode.TAM_BOTTOM_CENTER */,
-        'bottom-right': 8 /* TextAlignMode.TAM_BOTTOM_RIGHT */
-    };
-    /**
-     * @internal
-     */
-    function getTextAlign(textAlign) {
-        if (!textAlign)
-            return undefined;
-        return { textAlign: parseTextAlign[textAlign] };
-    }
-
     function parseUiDropdown(props) {
         const { textAlign, font, ...otherProps } = props;
         return {
@@ -41377,7 +41403,14 @@
      */
 
     function UiEntity(props) {
-        return ReactEcs$1.createElement("entity", { ...parseProps(props) });
+        const uiText = props.uiText && {
+            uiText: {
+                ...props.uiText,
+                ...getFont(props.uiText.font),
+                ...getTextAlign(props.uiText.textAlign)
+            }
+        };
+        return ReactEcs$1.createElement("entity", { ...parseProps(props), ...uiText });
     }
 
     function propsChanged(component, prevProps, nextProps) {