@xh/hoist 72.1.0 → 72.3.0

package/utils/js/BrowserUtils.ts

@@ -4,25 +4,31 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {pick} from 'lodash';
+import {XH} from '@xh/hoist/core';
+import {pick, round} from 'lodash';
 
 /**
  * Extract information (if available) about the client browser's window, screen, and network speed.
  */
-export function getClientDeviceInfo() {
-    const data: any = pick(window, [
-        'screen',
-        'devicePixelRatio',
-        'screenX',
-        'screenY',
-        'innerWidth',
-        'innerHeight',
-        'outerWidth',
-        'outerHeight'
-    ]);
+export function getClientDeviceInfo(): ClientDeviceInfo {
+    const ret: ClientDeviceInfo = {
+        window: pick(window, [
+            'devicePixelRatio',
+            'screenX',
+            'screenY',
+            'innerWidth',
+            'innerHeight',
+            'outerWidth',
+            'outerHeight'
+        ]),
+        memory: {
+            modelCount: XH.getModels().length
+        }
+    };
 
-    if (data.screen) {
-        data.screen = pick(data.screen, [
+    const screen = window.screen as any;
+    if (screen) {
+        ret.screen = pick(screen, [
             'availWidth',
             'availHeight',
             'width',
@@ -30,23 +36,68 @@ export function getClientDeviceInfo() {
             'colorDepth',
             'pixelDepth',
             'availLeft',
-            'availTop',
-            'orientation'
+            'availTop'
         ]);
-        if (data.screen.orientation) {
-            data.screen.orientation = pick(data.screen.orientation, ['angle', 'type']);
+        if (screen.orientation) {
+            ret.screen.orientation = pick(screen.orientation, ['angle', 'type']);
         }
     }
 
     const nav = window.navigator as any;
     if (nav.connection) {
-        data.connection = pick(nav.connection, ['downlink', 'effectiveType', 'rtt']);
+        ret.connection = pick(nav.connection, ['downlink', 'effectiveType', 'rtt']);
     }
 
     const perf = window.performance as any;
     if (perf?.memory) {
-        data.memory = pick(perf.memory, ['jsHeapSizeLimit', 'totalJSHeapSize', 'usedJSHeapSize']);
+        ['jsHeapSizeLimit', 'totalJSHeapSize', 'usedJSHeapSize'].forEach(key => {
+            const raw = perf.memory[key];
+            if (raw) ret.memory[key] = round(raw / 1024 / 1024); // convert to MB
+        });
+
+        const {jsHeapSizeLimit: limit, usedJSHeapSize: used} = ret.memory;
+        if (limit && used) {
+            ret.memory.usedPctLimit = round((used / limit) * 100, 1);
+        }
     }
 
-    return data;
+    return ret;
+}
+
+export interface ClientDeviceInfo {
+    window: {
+        devicePixelRatio: number;
+        screenX: number;
+        screenY: number;
+        innerWidth: number;
+        innerHeight: number;
+        outerWidth: number;
+        outerHeight: number;
+    };
+    screen?: {
+        availWidth: number;
+        availHeight: number;
+        width: number;
+        height: number;
+        colorDepth: number;
+        pixelDepth: number;
+        availLeft: number;
+        availTop: number;
+        orientation?: {
+            angle: number;
+            type: string;
+        };
+    };
+    connection?: {
+        downlink: number;
+        effectiveType: string;
+        rtt: number;
+    };
+    memory: {
+        modelCount: number;
+        usedPctLimit?: number;
+        jsHeapSizeLimit?: number;
+        totalJSHeapSize?: number;
+        usedJSHeapSize?: number;
+    };
 }

package/utils/react/LayoutPropUtils.ts

@@ -97,7 +97,8 @@ const dimKeys = [
     'maxHeight',
     'width',
     'minWidth',
-    'maxWidth'
+    'maxWidth',
+    'gap'
 ];
 const flexKeys = ['flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap'];
 const alignKeys = ['alignItems', 'alignSelf', 'alignContent', 'justifyContent'];