@xh/hoist 86.0.0 → 86.1.0

package/desktop/cmp/input/SegmentedControl.ts

@@ -4,22 +4,25 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
+import {
+    HoistInputModel,
+    HoistInputProps,
+    OptionPrimitive,
+    SegmentedControlNullOption,
+    SegmentedControlOption,
+    useHoistInputModel
+} from '@xh/hoist/cmp/input';
 import {div} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, Intent} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {bpSegmentedControl} from '@xh/hoist/kit/blueprint';
 import {computed, makeObservable} from '@xh/hoist/mobx';
-import {LocalDate} from '@xh/hoist/utils/datetime';
 import {getLayoutProps, getNonLayoutProps} from '@xh/hoist/utils/react';
 import {TEST_ID} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
 import {filter, isObject} from 'lodash';
-import {ReactElement} from 'react';
 import './SegmentedControl.scss';
 
-type OptionPrimitive = string | number | boolean | LocalDate;
-
 export interface SegmentedControlProps extends HoistProps, HoistInputProps {
     /** True to render in a compact mode with reduced sizing for space-constrained contexts. */
     compact?: boolean;
@@ -51,52 +54,6 @@ export interface SegmentedControlProps extends HoistProps, HoistInputProps {
     outlined?: boolean;
 }
 
-export interface SegmentedControlOption {
-    /** Value for this option. */
-    value: OptionPrimitive;
-
-    /** Display label. Defaults to `value.toString()` if omitted. */
-    label?: string;
-
-    /** Icon element, displayed before the label. */
-    icon?: ReactElement;
-
-    /** True to disable this individual option. */
-    disabled?: boolean;
-
-    /**
-     * Visual intent for this option - rendered as a solid fill when selected and as a subtle
-     * text-color hint when not (e.g. to flag a destructive choice). Overrides any control-level
-     * `intent` default. Defaults to the control's `intent`.
-     */
-    intent?: Intent;
-}
-
-/**
- * Variant of SegmentedControlOption for representing a null/"no value" selection.
- * Label is required to force use case to override default js 'null' toString rendering.
- */
-export interface SegmentedControlNullOption {
-    /** Null value for this option. */
-    value: null;
-
-    /** Display label - required for null options. */
-    label: string;
-
-    /** Icon element, displayed before the label. */
-    icon?: ReactElement;
-
-    /** True to disable this individual option. */
-    disabled?: boolean;
-
-    /**
-     * Visual intent for this option - rendered as a solid fill when selected and as a subtle
-     * text-color hint when not (e.g. to flag a destructive choice). Overrides any control-level
-     * `intent` default. Defaults to the control's `intent`.
-     */
-    intent?: Intent;
-}
-
 /**
  * An input for selecting a single value from a small set of mutually exclusive options,
  * rendered as a group of toggle buttons with clear visual indication of the active

package/desktop/cmp/tab/Tabs.scss

@@ -10,13 +10,17 @@
   max-width: 100%;
   max-height: 100%;
   flex-direction: column;
-  flex: 1 1 0;
+  //noinspection CssRedundantUnit
+  flex: 1 1 0%;
+  // % unit used to avoid browser fallback to px,
+  // which prevents container expansion
 
   .xh-tab-wrapper {
     display: flex;
     min-width: 0;
     min-height: 0;
-    flex: 1 1 0;
+    //noinspection CssRedundantUnit
+    flex: 1 1 0%;
   }
 }
 

package/desktop/cmp/tab/dynamic/DynamicTabSwitcher.ts

@@ -24,7 +24,7 @@ import {Icon} from '@xh/hoist/icon';
 import {tooltip as bpTooltip, showContextMenu} from '@xh/hoist/kit/blueprint';
 import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
 import {wait} from '@xh/hoist/promise';
-import {consumeEvent} from '@xh/hoist/utils/js';
+import {consumeEvent, getTestId} from '@xh/hoist/utils/js';
 import {composeRefs, getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {first, isFinite, last} from 'lodash';
@@ -41,13 +41,14 @@ export const [DynamicTabSwitcher, dynamicTabSwitcher] = hoistCmp.withFactory<Tab
     className: 'xh-dynamic-tab-switcher',
     displayName: 'DynamicTabSwitcher',
     model: uses(TabContainerModel),
-    render({className, orientation, ...props}) {
+    render({className, orientation, testId, ...props}) {
         const impl = useLocalModel(DynamicTabSwitcherLocalModel);
         return scroller({
             className: classNames(className, impl.isVertical && `${className}--vertical`),
             content: tabs,
             contentProps: {localModel: impl},
             orientation: ['left', 'right'].includes(orientation) ? 'vertical' : 'horizontal',
+            testId,
             ...getLayoutProps(props)
         });
     }
@@ -127,7 +128,8 @@ const tabCmp = hoistCmp.factory<TabProps>(({tab, index, localModel, model}) => {
         {disabled, icon, tooltip} = tab,
         isFavorite = model.isTabFavorite(tab.id),
         {isVertical, props} = localModel,
-        {tabWidth, tabMinWidth, tabMaxWidth} = props;
+        {tabWidth, tabMinWidth, tabMaxWidth} = props,
+        tabTestId = getTestId(props, tab.id);
 
     // Handle tab sizing props
     const tabStyle: CSSProperties = {};
@@ -172,6 +174,7 @@ const tabCmp = hoistCmp.factory<TabProps>(({tab, index, localModel, model}) => {
                     );
                 },
                 ref: composeRefs(provided.innerRef, tabRef),
+                testId: tabTestId,
                 ...provided.draggableProps,
                 ...provided.dragHandleProps,
                 style: getStyles(isVertical, provided.draggableProps.style),
@@ -199,6 +202,7 @@ const tabCmp = hoistCmp.factory<TabProps>(({tab, index, localModel, model}) => {
                                     button({
                                         className:
                                             'xh-dynamic-tab-switcher__tabs__tab__close-button',
+                                        testId: getTestId(tabTestId, 'remove-btn'),
                                         icon: Icon.x({size: 'sm'}),
                                         title: 'Remove Tab',
                                         minimal: true,

package/docs/error-handling.md

@@ -490,6 +490,15 @@ The logged payload includes:
 - Whether the user was shown an alert
 - An optional user-provided message (via the "Report" dialog)
 
+> **Routing client errors to a chat system:** Because reported errors land server-side as
+> `'Client Error'` track entries, a Grails service can forward them to a realtime chat system
+> (Slack, Teams, etc.) by subscribing to the `xhTrackReceived` cluster topic - no client changes
+> required. XH's [Toolbox](https://github.com/xh/toolbox) demo app
+> [includes a `SlackAlertService` that does exactly this](https://github.com/xh/toolbox/blob/develop/grails-app/services/io/xh/toolbox/SlackAlertService.groovy),
+> posting client errors (alongside monitor alerts and user feedback) to Slack. See the hoist-core
+> [activity tracking](https://github.com/xh/hoist-core/blob/develop/docs/activity-tracking.md) docs
+> for the server-side topic mechanism.
+
 ### Sensitive Data Redaction
 
 The handler automatically redacts values at paths listed in

package/icon/Icon.ts

@@ -651,6 +651,9 @@ export const Icon = {
     shieldCheck(p?: IconProps) {
         return Icon.icon({...p, iconName: 'shield-check'});
     },
+    shieldHalved(p?: IconProps) {
+        return Icon.icon({...p, iconName: 'shield-halved'});
+    },
     sigma(p?: IconProps) {
         return Icon.icon({...p, iconName: 'sigma'});
     },

package/icon/index.ts

@@ -176,6 +176,7 @@ import {
     faServer as faServerLight,
     faShieldAlt as faShieldAltLight,
     faShieldCheck as faShieldCheckLight,
+    faShieldHalved as faShieldHalvedLight,
     faSigma as faSigmaLight,
     faSignIn as faSignInLight,
     faSignOut as faSignOutLight,
@@ -392,6 +393,7 @@ import {
     faServer,
     faShieldAlt,
     faShieldCheck,
+    faShieldHalved,
     faSigma,
     faSignIn,
     faSignOut,
@@ -608,6 +610,7 @@ import {
     faServer as faServerSolid,
     faShieldAlt as faShieldAltSolid,
     faShieldCheck as faShieldCheckSolid,
+    faShieldHalved as faShieldHalvedSolid,
     faSigma as faSigmaSolid,
     faSignIn as faSignInSolid,
     faSignOut as faSignOutSolid,
@@ -825,6 +828,7 @@ import {
     faServer as faServerThin,
     faShieldAlt as faShieldAltThin,
     faShieldCheck as faShieldCheckThin,
+    faShieldHalved as faShieldHalvedThin,
     faSigma as faSigmaThin,
     faSignIn as faSignInThin,
     faSignOut as faSignOutThin,
@@ -1540,6 +1544,10 @@ library.add(
     faShieldCheckLight,
     faShieldCheckSolid,
     faShieldCheckThin,
+    faShieldHalved,
+    faShieldHalvedLight,
+    faShieldHalvedSolid,
+    faShieldHalvedThin,
     faSigma,
     faSigmaLight,
     faSigmaSolid,

package/mobile/appcontainer/LoginPanel.scss

@@ -1,18 +1,59 @@
 .xh-login {
-  .xh-toolbar {
-    font-size: var(--xh-appbar-title-font-size-px);
-    background-color: var(--xh-appbar-bg);
-    color: var(--xh-appbar-title-color);
+  .xh-panel__content {
+    align-items: center;
+    justify-content: center;
   }
 
-  &__body {
-    margin: 40px;
+  &__content {
+    display: flex;
+    flex-direction: column;
+    width: 90vw;
+    max-width: 400px;
+    padding: 0 40px;
   }
 
-  .xh-input {
-    width: 100%;
+  &__icon {
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    margin-bottom: var(--xh-pad-double-px);
+    font-size: 26px;
+    color: var(--xh-intent-primary);
+    background-color: var(--xh-intent-primary-trans1);
+    border-radius: 10px;
+  }
+
+  &__title {
+    color: var(--xh-text-color);
+    font-size: var(--xh-font-size-large-px);
+    font-weight: 500;
+    text-align: center;
+  }
+
+  &__subtitle {
+    color: var(--xh-text-color-muted);
+    font-size: var(--xh-font-size-small-px);
+    margin: 3px 0 var(--xh-pad-double-px);
+    text-align: center;
+  }
+
+  &__field {
     margin-bottom: var(--xh-pad-px);
-    padding: 4px 8px;
+  }
+
+  &__field-label {
+    margin-bottom: var(--xh-pad-half-px);
+    font-size: var(--xh-font-size-small-px);
+    color: var(--xh-text-color-muted);
+  }
+
+  .xh-text-input {
+    width: 100%;
+    border: var(--xh-border-solid);
+    border-radius: var(--xh-border-radius-px);
   }
 
   &__warning,
@@ -32,7 +73,8 @@
     background-color: var(--xh-bg-alt);
   }
 
-  .xh-button {
-    padding: 1.5em 0;
+  &__submit {
+    margin-top: var(--xh-pad-px);
+    padding: var(--xh-pad-double-px) 0;
   }
 }

package/mobile/appcontainer/LoginPanel.ts

@@ -5,13 +5,12 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {LoginPanelModel} from '@xh/hoist/appcontainer/login/LoginPanelModel';
-import {div, filler, form} from '@xh/hoist/cmp/layout';
+import {box, div, form, viewport} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {button} from '@xh/hoist/mobile/cmp/button';
 import {textInput} from '@xh/hoist/mobile/cmp/input';
 import {panel} from '@xh/hoist/mobile/cmp/panel';
-import {toolbar} from '@xh/hoist/mobile/cmp/toolbar';
 import './LoginPanel.scss';
 
 /**
@@ -25,59 +24,85 @@ export const loginPanel = hoistCmp.factory({
     model: creates(LoginPanelModel),
 
     render({model}) {
-        const {loginMessage} = XH.appSpec,
-            {isValid, loadObserver, warning, loginInProgress} = model;
+        const {loginMessage, loginPanelIcon, clientAppName} = XH.appSpec,
+            {warning, loginInProgress} = model;
 
-        return panel({
-            className: 'xh-login',
-            testId: 'xh-login',
-            items: [
-                toolbar(filler(), XH.clientAppName, filler()),
-                panel({
-                    className: 'xh-login__body',
-                    mask: loadObserver,
+        return viewport(
+            panel({
+                className: 'xh-login',
+                testId: 'xh-login',
+                item: div({
+                    className: 'xh-login__content',
                     items: [
+                        box({
+                            className: 'xh-login__icon',
+                            item: loginPanelIcon ?? Icon.shieldHalved({prefix: 'fas'})
+                        }),
+                        div({className: 'xh-login__title', item: `Login to ${clientAppName}`}),
+                        div({
+                            className: 'xh-login__subtitle',
+                            item: 'Enter your credentials to continue.'
+                        }),
                         form({
                             className: 'xh-login__fields',
                             items: [
-                                textInput({
-                                    bind: 'username',
-                                    placeholder: 'Username',
-                                    autoComplete: 'username',
-                                    autoCapitalize: 'none',
-                                    commitOnChange: true,
-                                    testId: 'xh-login-username'
+                                field({
+                                    label: 'Username',
+                                    input: textInput({
+                                        bind: 'username',
+                                        leftIcon: Icon.user(),
+                                        autoComplete: 'username',
+                                        autoCapitalize: 'none',
+                                        commitOnChange: true,
+                                        testId: 'xh-login-username'
+                                    })
+                                }),
+                                field({
+                                    label: 'Password',
+                                    input: textInput({
+                                        bind: 'password',
+                                        leftIcon: Icon.lock(),
+                                        type: 'password',
+                                        autoComplete: 'current-password',
+                                        commitOnChange: true,
+                                        testId: 'xh-login-password'
+                                    })
                                 }),
-                                textInput({
-                                    bind: 'password',
-                                    placeholder: 'Password',
-                                    autoComplete: 'current-password',
-                                    type: 'password',
-                                    commitOnChange: true,
-                                    testId: 'xh-login-password'
+                                div({
+                                    className: 'xh-login__message',
+                                    omit: !loginMessage,
+                                    item: loginMessage
+                                }),
+                                div({
+                                    className: 'xh-login__warning',
+                                    omit: !warning,
+                                    item: warning
+                                }),
+                                button({
+                                    className: 'xh-login__submit',
+                                    icon: loginInProgress
+                                        ? Icon.spinner({spin: true})
+                                        : Icon.login(),
+                                    text: loginInProgress ? 'Logging in...' : 'Login',
+                                    intent: 'primary',
+                                    onClick: () => model.submitAsync(),
+                                    testId: 'xh-login-btn'
                                 })
                             ]
-                        }),
-                        div({
-                            className: 'xh-login__message',
-                            omit: !loginMessage,
-                            item: loginMessage
-                        }),
-                        div({
-                            className: 'xh-login__warning',
-                            omit: !warning,
-                            item: warning
-                        }),
-                        button({
-                            icon: Icon.login(),
-                            text: loginInProgress ? 'Please wait...' : 'Login',
-                            disabled: !isValid || loginInProgress,
-                            onClick: () => model.submitAsync(),
-                            testId: 'xh-login-btn'
                         })
                     ]
                 })
-            ]
+            })
+        );
+    }
+});
+
+const field = hoistCmp.factory({
+    model: false,
+    render({label, input}) {
+        return div({
+            className: 'xh-login__field',
+            items: [div({className: 'xh-login__field-label', item: label}), input]
         });
     }
 });

package/mobile/cmp/appOption/SizingModeAppOption.ts

@@ -5,8 +5,7 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {AppOptionSpec, SizingMode, XH} from '@xh/hoist/core';
-import {button} from '@xh/hoist/mobile/cmp/button';
-import {buttonGroupInput, ButtonGroupInputProps} from '@xh/hoist/mobile/cmp/input';
+import {segmentedControl, SegmentedControlProps} from '@xh/hoist/mobile/cmp/input';
 import {startCase, values} from 'lodash';
 import {FormFieldProps} from '../form/FormField';
 import '@xh/hoist/mobile/register';
@@ -16,8 +15,8 @@ interface SizingModeAppOptionSpec {
     modes?: SizingMode[];
     /** Props for nested FormField. */
     formFieldProps?: Partial<FormFieldProps>;
-    /** Props for nested ButtonGroupInput. */
-    inputProps?: Partial<ButtonGroupInputProps>;
+    /** Props for nested SegmentedControl. */
+    inputProps?: Partial<SegmentedControlProps>;
 }
 
 /**
@@ -33,18 +32,8 @@ export const sizingModeAppOption = ({
         name: 'sizingMode',
         formField: {
             label: 'Grid sizing',
-            item: buttonGroupInput({
-                items: modes.map(mode =>
-                    button({
-                        value: mode,
-                        text: startCase(mode),
-                        flex: 1,
-                        style: {
-                            fontSize: `var(--xh-grid-${mode}-font-size-px)`
-                        }
-                    })
-                ),
-                width: '100%',
+            item: segmentedControl({
+                options: modes.map(mode => ({value: mode, label: startCase(mode)})),
                 ...inputProps
             }),
             ...formFieldProps

package/mobile/cmp/appOption/ThemeAppOption.ts

@@ -6,16 +6,15 @@
  */
 import {AppOptionSpec, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon/Icon';
-import {button} from '@xh/hoist/mobile/cmp/button';
 import {FormFieldProps} from '@xh/hoist/mobile/cmp/form';
-import {buttonGroupInput, ButtonGroupInputProps} from '@xh/hoist/mobile/cmp/input';
+import {segmentedControl, SegmentedControlProps} from '@xh/hoist/mobile/cmp/input';
 import '@xh/hoist/mobile/register';
 
 interface ThemeAppOptionSpec {
     /** Props for nested FormField */
     formFieldProps?: Partial<FormFieldProps>;
-    /** Props for nested ButtonGroupInput */
-    inputProps?: Partial<ButtonGroupInputProps>;
+    /** Props for nested SegmentedControl */
+    inputProps?: Partial<SegmentedControlProps>;
 }
 
 /**
@@ -29,28 +28,12 @@ export const themeAppOption = ({
         name: 'theme',
         formField: {
             label: 'Theme',
-            item: buttonGroupInput({
-                items: [
-                    button({
-                        value: 'light',
-                        text: 'Light',
-                        icon: Icon.sun(),
-                        width: '33.33%'
-                    }),
-                    button({
-                        value: 'dark',
-                        text: 'Dark',
-                        icon: Icon.moon(),
-                        width: '33.33%'
-                    }),
-                    button({
-                        value: 'system',
-                        text: 'System',
-                        icon: Icon.sync(),
-                        width: '33.33%'
-                    })
+            item: segmentedControl({
+                options: [
+                    {value: 'light', label: 'Light', icon: Icon.sun()},
+                    {value: 'dark', label: 'Dark', icon: Icon.moon()},
+                    {value: 'system', label: 'System', icon: Icon.sync()}
                 ],
-                width: '100%',
                 ...inputProps
             }),
             ...formFieldProps

package/mobile/cmp/error/impl/ErrorMessage.ts

@@ -5,7 +5,7 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {hoistCmp} from '@xh/hoist/core';
-import {div, filler, hbox, p} from '@xh/hoist/cmp/layout';
+import {div, p, vbox} from '@xh/hoist/cmp/layout';
 import {ErrorMessageProps} from '@xh/hoist/cmp/error';
 import {button, ButtonProps} from '@xh/hoist/mobile/cmp/button';
 import {Icon} from '@xh/hoist/icon';
@@ -21,15 +21,11 @@ export const errorMessageImpl = hoistCmp.factory<
     Omit<ErrorMessageProps, 'error' | 'actionFn' | 'detailsFn'>
 >({
     render({message, title, actionButtonProps, detailsButtonProps}) {
-        let buttons = [],
-            buttonBar = null;
+        // Stack action buttons vertically and full-width - idiomatic for mobile.
+        const buttons = [];
         if (detailsButtonProps) buttons.push(detailsButton(detailsButtonProps as ButtonProps));
         if (actionButtonProps) buttons.push(actionButton(actionButtonProps as ButtonProps));
-        if (buttons.length == 1) {
-            buttonBar = buttons[0];
-        } else if (buttons.length == 2) {
-            buttonBar = hbox(buttons[0], filler(), buttons[1]);
-        }
+        const buttonBar = buttons.length ? vbox({gap: true, items: buttons}) : null;
 
         return div({
             className: 'xh-error-message__inner',