@xh/hoist 71.0.0-SNAPSHOT.1735061018823 → 71.0.0-SNAPSHOT.1735061320692

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## v71.0.0-SNAPSHOT - unreleased
 
+### 💥 Breaking Changes
+
+* `ErrorMessage` is now cross-platform. Its import paths has changed from `@xh/hoist/desktop/cmp/error`
+  and `@xh/hoist/mobile/cmp/error` to `@xh/hoist/cmp/error`.
+* `Mask` is now cross-platform. Its import paths has changed from `@xh/hoist/desktop/cmp/mask`
+  and `@xh/hoist/mobile/cmp/mask` to `@xh/hoist/cmp/mask`.
+* `LoadingIndicator` is now cross-platform. Its import paths has changed from
+  `@xh/hoist/desktop/cmp/loadingindicator` and `@xh/hoist/mobile/cmp/loadingindicator` to
+  `@xh/hoist/cmp/loadingindicator`.
+* `TreeMap` and `SplitTreeMap` are now cross-platform and can be used in mobile applications.
+  Their import paths have changed from `@xh/hoist/desktop/cmp/treemap` to `@xh/hoist/cmp/treemap`.
+
 ### 🎁 New Features
 
 * Major Improvements to ViewManager component

package/admin/tabs/activity/tracking/ActivityTrackingPanel.ts

@@ -9,7 +9,7 @@ import {grid} from '@xh/hoist/cmp/grid';
 import {div, hframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, buttonGroup, colChooserButton, exportButton} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {filterChooser} from '@xh/hoist/desktop/cmp/filter';
 import {formField} from '@xh/hoist/desktop/cmp/form';
 import {groupingChooser} from '@xh/hoist/desktop/cmp/grouping';

package/admin/tabs/cluster/ClusterTab.ts

@@ -7,7 +7,7 @@
 import {grid} from '@xh/hoist/cmp/grid';
 import {tabContainer} from '@xh/hoist/cmp/tab';
 import {creates, hoistCmp} from '@xh/hoist/core';
-import {mask} from '@xh/hoist/desktop/cmp/mask';
+import {mask} from '@xh/hoist/cmp/mask';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {tabSwitcher} from '@xh/hoist/desktop/cmp/tab';
 import {box, div, hspacer, p, placeholder, vframe} from '@xh/hoist/cmp/layout';

package/admin/tabs/cluster/connpool/ConnPoolMonitorPanel.ts

@@ -11,7 +11,7 @@ import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {filler, hframe, vframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, exportButton} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {jsonInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';

package/admin/tabs/cluster/environment/ServerEnvPanel.ts

@@ -10,7 +10,7 @@ import {filler} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {exportButton} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 
 export const serverEnvPanel = hoistCmp.factory({

package/admin/tabs/cluster/logs/LogDisplay.ts

@@ -11,7 +11,7 @@ import {hoistCmp, uses, XH} from '@xh/hoist/core';
 import {button, modalToggleButton} from '@xh/hoist/desktop/cmp/button';
 import {gridFindField} from '@xh/hoist/desktop/cmp/grid';
 import {numberInput, switchInput, textInput} from '@xh/hoist/desktop/cmp/input';
-import {loadingIndicator} from '@xh/hoist/desktop/cmp/loadingindicator';
+import {loadingIndicator} from '@xh/hoist/cmp/loadingindicator';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';

package/admin/tabs/cluster/logs/LogViewer.ts

@@ -9,7 +9,7 @@ import {grid} from '@xh/hoist/cmp/grid';
 import {hframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {creates, hoistCmp} from '@xh/hoist/core';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {select} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {Icon} from '@xh/hoist/icon';

package/admin/tabs/cluster/memory/MemoryMonitorPanel.ts

@@ -11,7 +11,7 @@ import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {code, filler, fragment, hbox, hspacer, span, vframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, exportButton} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar, toolbarSeparator} from '@xh/hoist/desktop/cmp/toolbar';
 import {fmtDate} from '@xh/hoist/format';

package/admin/tabs/cluster/services/DetailsPanel.ts

@@ -7,7 +7,7 @@
 import {DetailsModel} from '@xh/hoist/admin/tabs/cluster/services/DetailsModel';
 import {placeholder} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {jsonInput} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';

package/admin/tabs/cluster/websocket/WebSocketPanel.ts

@@ -11,7 +11,7 @@ import {relativeTimestamp} from '@xh/hoist/cmp/relativetimestamp';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
 import {exportButton} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {recordActionBar} from '@xh/hoist/desktop/cmp/record';
 import {toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';

package/admin/tabs/monitor/MonitorTab.ts

@@ -12,7 +12,7 @@ import {filler, hbox, label, placeholder, tileFrame} from '@xh/hoist/cmp/layout'
 import {relativeTimestamp} from '@xh/hoist/cmp/relativetimestamp';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {switchInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';

package/admin/tabs/userData/roles/RolePanel.ts

@@ -9,7 +9,7 @@ import {grid} from '@xh/hoist/cmp/grid';
 import {fragment, hframe, vframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {filterChooser} from '@xh/hoist/desktop/cmp/filter';
 import {switchInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';

package/build/types/{desktop/cmp → cmp}/error/ErrorMessage.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps, HoistProps } from '@xh/hoist/core';
-import { ButtonProps } from '@xh/hoist/desktop/cmp/button';
-import '@xh/hoist/desktop/register';
+import type { ButtonProps as DesktopButtonProps } from '@xh/hoist/desktop/cmp/button';
+import type { ButtonProps as MobileButtonProps } from '@xh/hoist/mobile/cmp/button';
 import { ReactNode } from 'react';
 import './ErrorMessage.scss';
 export interface ErrorMessageProps extends HoistProps, Omit<BoxProps, 'title'> {
@@ -13,7 +13,7 @@ export interface ErrorMessageProps extends HoistProps, Omit<BoxProps, 'title'> {
      * If provided, component will render an inline action button - prompting to user to take some
      * action that might resolve the error, such as retrying a failed data load.
      */
-    actionButtonProps?: ButtonProps;
+    actionButtonProps?: DesktopButtonProps | MobileButtonProps;
     /**
      * If provided, will render a "Details" button that calls this function.
      * Use `detailsButtonProps` for further control over this button.  Default false.
@@ -22,7 +22,7 @@ export interface ErrorMessageProps extends HoistProps, Omit<BoxProps, 'title'> {
     /**
      * If provided, component will render an inline details button.
      */
-    detailsButtonProps?: ButtonProps;
+    detailsButtonProps?: DesktopButtonProps | MobileButtonProps;
     /**
      * Error to display. If undefined, this component will look for an error property on its model.
      * If no error is found, this component will not be displayed.

package/build/types/cmp/error/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ErrorBoundary';
 export * from './ErrorBoundaryModel';
+export * from './ErrorMessage';

package/build/types/{desktop/cmp → cmp}/loadingindicator/LoadingIndicator.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { Corner, HoistProps, Some, TaskObserver } from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
 import './LoadingIndicator.scss';
 export interface LoadingIndicatorProps extends HoistProps {
     /** TaskObserver(s) that should be monitored to determine if the Indicator should be displayed. */

package/build/types/{desktop/cmp → cmp}/mask/Mask.d.ts

@@ -1,11 +1,9 @@
 import { HoistProps, Some, TaskObserver } from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
 import { ReactNode, MouseEvent } from 'react';
-import './Mask.scss';
 export interface MaskProps extends HoistProps {
     /** Task(s) that should be monitored to determine if the mask should be displayed. */
     bind?: Some<TaskObserver>;
-    /** True (default) to contain mask within its parent, false to fill the viewport. */
+    /** True (default) to contain mask within its parent, false to fill the viewport. Desktop only. */
     inline?: boolean;
     /** True to display mask. */
     isDisplayed?: boolean;

package/build/types/{desktop/cmp → cmp}/treemap/SplitTreeMap.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { BoxProps, HoistProps } from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
 import './SplitTreeMap.scss';
 import { SplitTreeMapModel } from './SplitTreeMapModel';
 export interface SplitTreeMapProps extends HoistProps<SplitTreeMapModel>, BoxProps {

package/build/types/{desktop/cmp → cmp}/treemap/SplitTreeMapModel.d.ts

@@ -1,5 +1,4 @@
 import { HoistModel, PlainObject, Theme } from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
 import { StoreRecord, StoreRecordId } from '@xh/hoist/data';
 import { ReactNode } from 'react';
 import { TreeMapAlgorithm, TreeMapColorMode, TreeMapModel, TreeMapConfig } from './TreeMapModel';

package/build/types/{desktop/cmp → cmp}/treemap/TreeMap.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { HoistProps, LayoutProps, TestSupportProps } from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
 import './TreeMap.scss';
 import { TreeMapModel } from './TreeMapModel';
 export interface TreeMapProps extends HoistProps<TreeMapModel>, LayoutProps, TestSupportProps {

package/build/types/{desktop/cmp → cmp}/treemap/TreeMapModel.d.ts

@@ -2,7 +2,6 @@ import { HoistModel, PlainObject, Theme } from '@xh/hoist/core';
 import { Store, StoreRecord, StoreRecordId } from '@xh/hoist/data';
 import { GridModel } from '@xh/hoist/cmp/grid';
 import { FilterLike } from '@xh/hoist/data/filter/Types';
-import '@xh/hoist/desktop/register';
 import { ReactNode } from 'react';
 /**
  * Core Model for a TreeMap.

package/build/types/desktop/cmp/error/impl/ErrorMessage.d.ts

@@ -0,0 +1,7 @@
+import { ErrorMessageProps } from '@xh/hoist/cmp/error';
+import '@xh/hoist/desktop/register';
+/**
+ * Desktop implementation of ErrorMessage.
+ * @internal
+ */
+export declare const errorMessageImpl: import("@xh/hoist/core").ElementFactory<ErrorMessageProps>;

package/build/types/desktop/cmp/mask/impl/Mask.d.ts

@@ -0,0 +1,8 @@
+import { MaskProps } from '@xh/hoist/cmp/mask';
+import '@xh/hoist/desktop/register';
+import './Mask.scss';
+/**
+ * Desktop implementation of Mask.
+ * @internal
+ */
+export declare const maskImpl: import("@xh/hoist/core").ElementFactory<MaskProps>;

package/build/types/dynamics/desktop.d.ts

@@ -15,12 +15,13 @@ export declare let colChooser: any;
 export declare let zoneMapper: any;
 export declare let columnHeaderFilter: any;
 export declare let dockContainerImpl: any;
-export declare let errorMessage: any;
 export declare let gridFilterDialog: any;
 export declare let pinPadImpl: any;
 export declare let storeFilterFieldImpl: any;
 export declare let tabContainerImpl: any;
 export declare let useContextMenu: any;
+export declare let errorMessageImpl: any;
+export declare let maskImpl: any;
 /**
  * Provide implementations of functions and classes exported in this file.
  *

package/build/types/dynamics/mobile.d.ts

@@ -11,10 +11,11 @@
 export declare let ColChooserModel: any;
 export declare let colChooser: any;
 export declare let zoneMapper: any;
-export declare let errorMessage: any;
 export declare let pinPadImpl: any;
 export declare let storeFilterFieldImpl: any;
 export declare let tabContainerImpl: any;
+export declare let errorMessageImpl: any;
+export declare let maskImpl: any;
 /**
  * Provide implementations of functions and classes exported in this file.
  *

package/build/types/mobile/cmp/error/impl/ErrorMessage.d.ts

@@ -0,0 +1,7 @@
+import { ErrorMessageProps } from '@xh/hoist/cmp/error';
+import '@xh/hoist/mobile/register';
+/**
+ * Mobile implementation of ErrorMessage.
+ * @internal
+ */
+export declare const errorMessageImpl: import("@xh/hoist/core").ElementFactory<ErrorMessageProps>;

package/build/types/mobile/cmp/mask/impl/Mask.d.ts

@@ -0,0 +1,8 @@
+import { MaskProps } from '@xh/hoist/cmp/mask';
+import '@xh/hoist/mobile/register';
+import './Mask.scss';
+/**
+ * Mobile implementation of Mask.
+ * @internal
+ */
+export declare const maskImpl: import("@xh/hoist/core").ElementFactory<MaskProps>;

package/cmp/error/ErrorBoundary.ts

@@ -5,8 +5,7 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {elementFactory, hoistCmp, uses, XH} from '@xh/hoist/core';
-import {errorMessage as desktopErrorMessage} from '@xh/hoist/dynamics/desktop';
-import {errorMessage as mobileErrorMessage} from '@xh/hoist/dynamics/mobile';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {Component, ReactNode} from 'react';
 import {ErrorBoundaryModel} from './ErrorBoundaryModel';
 
@@ -34,8 +33,7 @@ export const [ErrorBoundary, errorBoundary] = hoistCmp.withFactory<ErrorBoundary
         if (!error) return reactErrorBoundary({model, children});
         if (errorRenderer) return errorRenderer(error);
 
-        const cmp = XH.isMobileApp ? mobileErrorMessage : desktopErrorMessage;
-        return cmp({
+        return errorMessage({
             error,
             title: 'Unexpected error while rendering this component',
             actionFn: () => model.clear(),

package/{desktop/cmp → cmp}/error/ErrorMessage.scss

@@ -8,7 +8,6 @@
 .xh-error-message {
   align-items: center;
   justify-content: center;
-  padding: 10px;
 
   &__inner {
     padding: var(--xh-pad-px);
@@ -31,3 +30,11 @@
     font-weight: bold;
   }
 }
+
+.xh-desktop .xh-error-message {
+  padding: 10px;
+}
+
+.xh-mobile .xh-error-message__inner {
+  margin: 0 var(--xh-pad-px);
+}

package/{desktop/cmp → cmp}/error/ErrorMessage.ts

@@ -4,14 +4,15 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
-import {div, filler, frame, hbox, p} from '@xh/hoist/cmp/layout';
-import {BoxProps, hoistCmp, HoistProps} from '@xh/hoist/core';
-import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
-import '@xh/hoist/desktop/register';
+import {BoxProps, hoistCmp, HoistProps, XH} from '@xh/hoist/core';
+import {frame} from '@xh/hoist/cmp/layout';
+import {errorMessageImpl as desktopErrorMessageImpl} from '@xh/hoist/dynamics/desktop';
+import {errorMessageImpl as mobileErrorMessageImpl} from '@xh/hoist/dynamics/mobile';
+import type {ButtonProps as DesktopButtonProps} from '@xh/hoist/desktop/cmp/button';
+import type {ButtonProps as MobileButtonProps} from '@xh/hoist/mobile/cmp/button';
 import {isNil, isString} from 'lodash';
-import {isValidElement, ReactNode} from 'react';
+import {ReactNode} from 'react';
 import './ErrorMessage.scss';
-import {Icon} from '@xh/hoist/icon';
 
 export interface ErrorMessageProps extends HoistProps, Omit<BoxProps, 'title'> {
     /**
@@ -24,7 +25,7 @@ export interface ErrorMessageProps extends HoistProps, Omit<BoxProps, 'title'> {
      * If provided, component will render an inline action button - prompting to user to take some
      * action that might resolve the error, such as retrying a failed data load.
      */
-    actionButtonProps?: ButtonProps;
+    actionButtonProps?: DesktopButtonProps | MobileButtonProps;
 
     /**
      * If provided, will render a "Details" button that calls this function.
@@ -35,7 +36,7 @@ export interface ErrorMessageProps extends HoistProps, Omit<BoxProps, 'title'> {
     /**
      * If provided, component will render an inline details button.
      */
-    detailsButtonProps?: ButtonProps;
+    detailsButtonProps?: DesktopButtonProps | MobileButtonProps;
 
     /**
      * Error to display. If undefined, this component will look for an error property on its model.
@@ -90,52 +91,25 @@ export const [ErrorMessage, errorMessage] = hoistCmp.withFactory<ErrorMessagePro
             detailsButtonProps = {...detailsButtonProps, onClick: () => detailsFn(error)};
         }
 
-        let buttons = [],
-            buttonBar = null;
-        if (detailsButtonProps) buttons.push(detailsButton(detailsButtonProps));
-        if (actionButtonProps) buttons.push(actionButton(actionButtonProps));
-        if (buttons.length == 1) {
-            buttonBar = buttons[0];
-        } else if (buttons.length == 2) {
-            buttonBar = hbox(buttons[0], filler(), buttons[1]);
-        }
-
         return frame({
             ref,
             className,
             ...rest,
-            item: div({
-                className: 'xh-error-message__inner',
-                items: [titleCmp({title}), messageCmp({message, error}), buttonBar]
-            })
+            item: XH.isMobileApp
+                ? mobileErrorMessageImpl({
+                      error,
+                      message,
+                      title,
+                      actionButtonProps,
+                      detailsButtonProps
+                  })
+                : desktopErrorMessageImpl({
+                      error,
+                      message,
+                      title,
+                      actionButtonProps,
+                      detailsButtonProps
+                  })
         });
     }
 });
-
-const titleCmp = hoistCmp.factory(({title}) => {
-    if (isValidElement(title)) return title;
-    if (isString(title)) return div({className: 'xh-error-message__title', item: title});
-    return null;
-});
-
-const messageCmp = hoistCmp.factory(({message}) => {
-    if (isValidElement(message)) return message;
-    if (isString(message)) return p(message);
-    return null;
-});
-
-const actionButton = hoistCmp.factory<ButtonProps>(props => {
-    return button({
-        text: 'Retry',
-        icon: Icon.refresh(),
-        ...props
-    });
-});
-
-const detailsButton = hoistCmp.factory<ButtonProps>(props => {
-    return button({
-        text: 'Details',
-        icon: Icon.detail(),
-        ...props
-    });
-});

package/cmp/error/index.ts

@@ -1,2 +1,3 @@
 export * from './ErrorBoundary';
 export * from './ErrorBoundaryModel';
+export * from './ErrorMessage';

package/{desktop/cmp → cmp}/loadingindicator/LoadingIndicator.scss

@@ -4,7 +4,6 @@
 
   position: absolute;
   padding: var(--xh-pad-half-px);
-  font-size: var(--xh-font-size-small-px);
   background-color: var(--xh-loading-indicator-bg);
   color: var(--xh-loading-indicator-color);
   border-color: var(--xh-loading-indicator-border-color);
@@ -80,3 +79,7 @@
     white-space: nowrap;
   }
 }
+
+.xh-desktop .xh-loading-indicator {
+  font-size: var(--xh-font-size-small-px);
+}

package/{desktop/cmp → cmp}/loadingindicator/LoadingIndicator.ts

@@ -16,7 +16,6 @@ import {
     TaskObserver,
     useLocalModel
 } from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
 import {withDefault} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
 import {truncate} from 'lodash';
@@ -49,14 +48,10 @@ export const [LoadingIndicator, loadingIndicator] = hoistCmp.withFactory<Loading
     displayName: 'LoadingIndicator',
     className: 'xh-loading-indicator',
 
-    render({
-        isDisplayed,
-        message,
-        maxMessageLength = 30,
-        spinner = true,
-        corner = 'br',
-        className
-    }) {
+    render(
+        {isDisplayed, message, maxMessageLength = 30, spinner = true, corner = 'br', className},
+        ref
+    ) {
         const impl = useLocalModel(LocalMaskModel);
 
         isDisplayed = withDefault(isDisplayed, impl.task?.isPending);
@@ -80,6 +75,7 @@ export const [LoadingIndicator, loadingIndicator] = hoistCmp.withFactory<Loading
         };
 
         return div({
+            ref,
             className: classNames(className, hasMessageCls, hasSpinnerCls, cornerCls),
             item: hbox(innerItems())
         });

package/{desktop/cmp → cmp}/mask/Mask.ts

@@ -4,20 +4,24 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
-import {box, vbox, vspacer} from '@xh/hoist/cmp/layout';
-import {spinner as spinnerCmp} from '@xh/hoist/cmp/spinner';
-import {hoistCmp, HoistModel, HoistProps, Some, TaskObserver, useLocalModel} from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
-import {Classes, overlay} from '@xh/hoist/kit/blueprint';
+import {
+    hoistCmp,
+    HoistModel,
+    HoistProps,
+    Some,
+    TaskObserver,
+    useLocalModel,
+    XH
+} from '@xh/hoist/core';
+import {maskImpl as desktopMaskImpl} from '@xh/hoist/dynamics/desktop';
+import {maskImpl as mobileMaskImpl} from '@xh/hoist/dynamics/mobile';
 import {withDefault} from '@xh/hoist/utils/js';
 import {ReactNode, MouseEvent} from 'react';
-import classNames from 'classnames';
-import './Mask.scss';
 
 export interface MaskProps extends HoistProps {
     /** Task(s) that should be monitored to determine if the mask should be displayed. */
     bind?: Some<TaskObserver>;
-    /** True (default) to contain mask within its parent, false to fill the viewport. */
+    /** True (default) to contain mask within its parent, false to fill the viewport. Desktop only. */
     inline?: boolean;
     /** True to display mask. */
     isDisplayed?: boolean;
@@ -41,29 +45,16 @@ export const [Mask, mask] = hoistCmp.withFactory<MaskProps>({
     displayName: 'Mask',
     className: 'xh-mask',
 
-    render({isDisplayed, message, inline = true, spinner = false, className}) {
+    render({isDisplayed, message, onClick, inline = true, spinner = false, className}) {
         const impl = useLocalModel(MaskLocalModel);
 
         isDisplayed = withDefault(isDisplayed, impl.task?.isPending);
         message = withDefault(message, impl.task?.message);
 
         if (!isDisplayed) return null;
-        return overlay({
-            className: classNames(className, Classes.OVERLAY_SCROLL_CONTAINER),
-            autoFocus: false,
-            isOpen: true,
-            canEscapeKeyClose: false,
-            usePortal: !inline,
-            enforceFocus: !inline,
-            item: vbox({
-                className: 'xh-mask-body',
-                items: [
-                    spinner ? spinnerCmp() : null,
-                    spinner ? vspacer(10) : null,
-                    message ? box({className: 'xh-mask-text', item: message}) : null
-                ]
-            })
-        });
+        return XH.isMobileApp
+            ? mobileMaskImpl({message, onClick, spinner, className})
+            : desktopMaskImpl({message, onClick, inline, spinner, className});
     }
 });
 

package/{desktop/cmp → cmp}/treemap/SplitTreeMap.scss

@@ -36,6 +36,22 @@
     }
   }
 
+  &__splitter {
+    background-color: var(--xh-resizable-bg);
+
+    &--vertical {
+      height: 4px;
+      border-top: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
+      border-bottom: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
+    }
+
+    &--horizontal {
+      width: 4px;
+      border-left: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
+      border-right: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
+    }
+  }
+
   &__mask-holder {
     position: absolute;
     top: 0;

package/{desktop/cmp → cmp}/treemap/SplitTreeMap.ts

@@ -7,13 +7,10 @@
 import {AgGrid} from '@xh/hoist/cmp/ag-grid';
 import {box, div, fragment, hbox, hframe, p, placeholder, vbox, vframe} from '@xh/hoist/cmp/layout';
 import {BoxProps, hoistCmp, HoistProps, uses, XH} from '@xh/hoist/core';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
-import {mask} from '@xh/hoist/desktop/cmp/mask';
-import '@xh/hoist/desktop/register';
+import {errorMessage} from '@xh/hoist/cmp/error';
+import {mask} from '@xh/hoist/cmp/mask';
 import classNames from 'classnames';
 import {compact, uniq} from 'lodash';
-import {splitter} from './impl/Splitter';
-
 import './SplitTreeMap.scss';
 import {SplitTreeMapModel} from './SplitTreeMapModel';
 import {treeMap} from './TreeMap';
@@ -110,7 +107,8 @@ const mapTitle = hoistCmp.factory<SplitTreeMapModel>(({model, isPrimary}) => {
 
     const container = titleOrientation === 'horizontal' ? hbox : vbox,
         dim = titleOrientation === 'horizontal' ? 'height' : 'width',
-        size = (AgGrid as any).getHeaderHeightForSizingMode(XH.sizingMode);
+        sizingMode = XH.isMobileApp ? 'tiny' : XH.sizingMode,
+        size = (AgGrid as any).getHeaderHeightForSizingMode(sizingMode);
 
     return container({
         style: {[dim]: `${size}px`},
@@ -125,6 +123,16 @@ const mapTitle = hoistCmp.factory<SplitTreeMapModel>(({model, isPrimary}) => {
     });
 });
 
+const splitter = hoistCmp.factory<SplitTreeMapModel>(({model}) => {
+    const {orientation} = model,
+        vertical = orientation === 'vertical',
+        cmp = vertical ? hbox : vbox;
+
+    return cmp({
+        className: `xh-split-treemap__splitter xh-split-treemap__splitter--${vertical ? 'vertical' : 'horizontal'}`
+    });
+});
+
 const errorPanel = hoistCmp.factory(({errors}) =>
     errorMessage({error: errors.join(' '), message: fragment(errors.map(e => p(e)))})
 );

package/{desktop/cmp → cmp}/treemap/SplitTreeMapModel.ts

@@ -5,7 +5,6 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {HoistModel, managed, PlainObject, Theme} from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
 import {action, observable, computed, makeObservable} from '@xh/hoist/mobx';
 import {throwIf, withDefault} from '@xh/hoist/utils/js';
 import {StoreRecord, StoreRecordId} from '@xh/hoist/data';