@xh/hoist 87.1.1 → 87.3.0

package/admin/tabs/general/config/ConfigValue.ts

@@ -7,7 +7,8 @@
 import {FormModel} from '@xh/hoist/cmp/form';
 import {placeholder, span} from '@xh/hoist/cmp/layout';
 import {tabContainer, TabContainerModel, TabConfig} from '@xh/hoist/cmp/tab';
-import {creates, hoistCmp, HoistModel, managed} from '@xh/hoist/core';
+import {readonlyJsonInput} from '@xh/hoist/admin/AdminUtils';
+import {creates, hoistCmp, HoistModel, managed, PlainObject, XH} from '@xh/hoist/core';
 import {formField} from '@xh/hoist/desktop/cmp/form';
 import {
     CodeInputLineStyles,
@@ -17,7 +18,7 @@ import {
     textInput
 } from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';
-import {makeObservable} from '@xh/hoist/mobx';
+import {makeObservable, observable} from '@xh/hoist/mobx';
 import classNames from 'classnames';
 import {isPlainObject, last, union} from 'lodash';
 import {ReactElement} from 'react';
@@ -25,9 +26,13 @@ import {buildResolvedJson, changedKeysFromStored} from './ConfigUtils';
 import './ConfigValue.scss';
 
 /**
- * Presentation of a config's value within the config editor, bound to the enclosing RestForm's
- * `value` field. Plain configs render a single editor by type; configs with a typedClass and/or
- * an active instance-config override render a tab set over the applicable views of the value.
+ * Presentation of a config's value, bound to the `value` field of an enclosing Form. Plain configs
+ * render a single editor by type; configs with a typedClass and/or an active instance-config
+ * override render a tab set over the applicable views of the value.
+ *
+ * Used within the RestGrid editor dialog (editable, opening on the Database tab) and the docked
+ * detail panel (read-only, opening on the most-derived view). Pass `height` for a fixed-height
+ * display, or omit it to fill the available space.
  */
 export const configValue = hoistCmp.factory<ConfigValueModel>({
     displayName: 'ConfigValue',
@@ -35,22 +40,28 @@ export const configValue = hoistCmp.factory<ConfigValueModel>({
     model: creates(() => new ConfigValueModel()),
 
     render({model, className}) {
+        const {height} = model;
+        className = classNames(className, height == null ? 'xh-config-value--fill' : null);
         return model.usesTabs
             ? tabContainer({model: model.tabContainerModel, className})
-            : valueFormField(model.valueType, model.height, className);
+            : valueFormField(model.valueType, height, className);
     }
 });
 
 class ConfigValueModel extends HoistModel {
     override xhImpl = true;
 
-    @managed tabContainerModel: TabContainerModel;
+    @managed @observable.ref tabContainerModel: TabContainerModel;
 
     get formModel(): FormModel {
         return this.componentProps.formModel;
     }
-    get height(): number {
-        return this.componentProps.height ?? 250;
+    /** Fixed height for the value display, or null to fill available space. */
+    get height(): number | null {
+        return this.componentProps.height ?? null;
+    }
+    get readonly(): boolean {
+        return this.formModel?.readonly ?? false;
     }
     get valueField() {
         return this.formModel?.fields?.value;
@@ -85,16 +96,77 @@ class ConfigValueModel extends HoistModel {
     }
 
     override onLinked() {
-        if (this.usesTabs) this.buildTabs();
+        // Rebuild the tab set whenever the bound data changes - a new record selected into a
+        // shared FormModel (detail panel) or the same one re-saved. Tracks the value field's
+        // initialValue, not its live value, so typing in the editor does not tear down the tabs.
+        this.addReaction({
+            track: () => [
+                this.resolvedValue,
+                this.defaultValue,
+                this.overrideValue,
+                this.valueType,
+                this.valueField?.initialValue
+            ],
+            run: () => this.buildTabs(),
+            fireImmediately: true
+        });
     }
 
     private buildTabs() {
-        const {resolvedValue, defaultValue, overrideValue, valueType, valueField, height} = this,
+        XH.safeDestroy(this.tabContainerModel);
+        this.tabContainerModel = null;
+        if (!this.usesTabs) return;
+
+        const {
+                resolvedValue,
+                defaultValue,
+                overrideValue,
+                valueType,
+                valueField,
+                height,
+                readonly
+            } = this,
             hasOverride = overrideValue != null,
             hasResolved = resolvedValue != null,
             hasDefaults = defaultValue != null,
             tabs: TabConfig[] = [];
 
+        // Tabs run least- to most-derived: Defaults, Database, Instance, Resolved.
+        if (hasDefaults) {
+            tabs.push({
+                id: 'defaults',
+                title: 'Defaults',
+                icon: Icon.code(),
+                content: () =>
+                    jsonInput({
+                        value: JSON.stringify(defaultValue),
+                        readonly: true,
+                        autoFormat: true,
+                        enableSearch: true,
+                        className: 'xh-config-value__defaults',
+                        ...sizeProps(height)
+                    })
+            });
+        }
+
+        tabs.push({
+            id: 'db',
+            title: hasOverride
+                ? span({className: 'xh-config-value__overridden', item: 'Database'})
+                : 'Database',
+            icon: Icon.edit(),
+            content: () => valueFormField(valueType, height)
+        });
+
+        if (hasOverride) {
+            tabs.push({
+                id: 'instance',
+                title: 'Instance',
+                icon: Icon.warning({intent: 'warning'}),
+                content: () => readonlyValue(valueType, overrideValue, height)
+            });
+        }
+
         // Resolved - effective value with typedClass defaults applied.
         if (hasResolved) {
             // Highlight keys explicitly set in the database value or an instance override - all
@@ -111,50 +183,15 @@ class ConfigValueModel extends HoistModel {
                 id: 'resolved',
                 title: 'Resolved',
                 icon: Icon.bolt(),
-                content: () => resolvedTab({text, lineStyles, height})
+                content: () => resolvedTab({text, lineStyles, ...sizeProps(height)})
             });
         }
 
-        if (hasOverride) {
-            tabs.push({
-                id: 'instance',
-                title: 'Instance',
-                icon: Icon.warning({intent: 'warning'}),
-                content: () => readonlyValue(valueType, overrideValue, height)
-            });
-        }
-
-        tabs.push({
-            id: 'db',
-            title: hasOverride
-                ? span({className: 'xh-config-value__overridden', item: 'Database'})
-                : 'Database',
-            icon: Icon.edit(),
-            content: () => valueFormField(valueType, height)
+        // Open on Database if editable, else the most-derived view.
+        this.tabContainerModel = new TabContainerModel({
+            defaultTabId: readonly ? last(tabs).id : 'db',
+            tabs
         });
-
-        // Defaults - the typedClass defaults as declared in code.
-        if (hasDefaults) {
-            tabs.push({
-                id: 'defaults',
-                title: 'Defaults',
-                icon: Icon.code(),
-                content: () =>
-                    jsonInput({
-                        value: JSON.stringify(defaultValue),
-                        readonly: true,
-                        autoFormat: true,
-                        enableSearch: true,
-                        className: 'xh-config-value__defaults',
-                        height
-                    })
-            });
-        }
-
-        // Built most- to least-derived above, but displayed the other way round - opening on the
-        // last tab, i.e. the most derived view available.
-        tabs.reverse();
-        this.tabContainerModel = new TabContainerModel({defaultTabId: last(tabs).id, tabs});
     }
 }
 
@@ -182,7 +219,11 @@ const resolvedTab = hoistCmp.factory<ConfigValueModel>(({model, text, lineStyles
 
 // Label-less FormField for `value`, bound via the enclosing Form context for standard validation
 // display and read-only rendering. The plain branch passes `className` for the full-width rule.
-function valueFormField(valueType: string, height: number, className?: string): ReactElement {
+function valueFormField(
+    valueType: string,
+    height: number | null,
+    className?: string
+): ReactElement {
     return formField({
         field: 'value',
         label: null,
@@ -193,13 +234,13 @@ function valueFormField(valueType: string, height: number, className?: string):
 }
 
 // Editable input for a config value, by type. Bound by the enclosing FormField.
-function valueInput(valueType: string, height: number): ReactElement {
+function valueInput(valueType: string, height: number | null): ReactElement {
     switch (valueType) {
         case 'json':
             return jsonInput({
                 autoFormat: true,
                 enableSearch: true,
-                height
+                ...sizeProps(height)
             });
         case 'bool':
             return select({options: [true, false], enableClear: false});
@@ -217,24 +258,22 @@ function valueInput(valueType: string, height: number): ReactElement {
 }
 
 // Read-only display of a raw stored value, by type. Masks pwd.
-function readonlyValue(valueType: string, value: any, height: number): ReactElement {
+function readonlyValue(valueType: string, value: any, height: number | null): ReactElement {
     switch (valueType) {
         case 'json':
-            return jsonInput({
-                value,
-                readonly: true,
-                autoFormat: true,
-                enableSearch: true,
-                width: null,
-                height
-            });
+            return readonlyJsonInput(value, height);
         case 'pwd':
-            return textInput({value: value == null ? '' : '*****', disabled: true});
+            return span(value == null ? '' : '*****');
         default:
-            return textInput({value: value?.toString() ?? '', disabled: true});
+            return span(value?.toString() ?? '');
     }
 }
 
+// Layout props for a JSON editor - fixed to `height` if given, otherwise filling its container.
+function sizeProps(height: number | null): PlainObject {
+    return height != null ? {height} : {flex: 1, height: '100%', width: '100%'};
+}
+
 // Muting styles for pre-rendered JSON `text` - every line NOT in `highlightLines`.
 function mutedLineStyles(text: string, highlightLines: number[]): CodeInputLineStyles[] {
     const changed = new Set(highlightLines),

package/admin/tabs/userData/jsonblob/JsonBlobDetailPanel.ts

@@ -0,0 +1,93 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+import {jsonRenderer, yesNoRenderer} from '@xh/hoist/admin/AdminUtils';
+import {badgeRenderer} from '@xh/hoist/admin/columns';
+import {restDetailPanel} from '@xh/hoist/admin/detail/RestDetailPanel';
+import {formFieldSet} from '@xh/hoist/cmp/form';
+import {hbox} from '@xh/hoist/cmp/layout';
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {formField} from '@xh/hoist/desktop/cmp/form';
+import {Icon} from '@xh/hoist/icon';
+import {archivedDateRenderer} from './JsonBlobColumns';
+import {JsonBlobModel} from './JsonBlobModel';
+
+/** Read-only detail view of the JSON Blob selected in the grid. */
+export const jsonBlobDetailPanel = hoistCmp.factory<JsonBlobModel>({
+    displayName: 'JsonBlobDetailPanel',
+    model: uses(JsonBlobModel),
+
+    render({model}) {
+        return restDetailPanel({
+            icon: Icon.json(),
+            emptyText: 'Select a blob to view its details.',
+            persistWith: {...model.persistWith, path: 'detailPanel'},
+            renderForm: (record, formModel) => {
+                const {description, meta, archived} = formModel.values,
+                    // Meta is stored as JSON text - a serialized null is as empty as no value.
+                    hasMeta = meta != null && meta !== 'null';
+                return [
+                    formFieldSet({
+                        title: 'Blob',
+                        items: [
+                            hbox(
+                                formField({field: 'type', flex: 1}),
+                                formField({field: 'owner', flex: 1}),
+                                formField({field: 'acl', flex: 1})
+                            ),
+                            formField({field: 'description', omit: !description}),
+                            hbox(
+                                formField({
+                                    field: 'token',
+                                    readonlyRenderer: badgeRenderer,
+                                    flex: 1
+                                }),
+                                formField({
+                                    field: 'archived',
+                                    readonlyRenderer: yesNoRenderer,
+                                    flex: 1
+                                }),
+                                formField({
+                                    field: 'archivedDate',
+                                    readonlyRenderer: archivedDateRenderer,
+                                    omit: !archived,
+                                    flex: 1
+                                })
+                            ),
+                            hbox(
+                                formField({field: 'dateCreated', label: 'Created', flex: 1}),
+                                formField({field: 'lastUpdated', label: 'Updated', flex: 1}),
+                                formField({field: 'lastUpdatedBy', label: 'Updated By', flex: 1})
+                            )
+                        ]
+                    }),
+                    // Value and Meta share the remaining height 3:2, favoring the value.
+                    formFieldSet({
+                        title: 'Value',
+                        className: 'xh-admin-readonly-form__fill',
+                        flexGrow: 3,
+                        item: formField({
+                            field: 'value',
+                            label: null,
+                            readonlyRenderer: jsonRenderer
+                        })
+                    }),
+                    formFieldSet({
+                        title: 'Meta',
+                        className: 'xh-admin-readonly-form__fill',
+                        flexGrow: 2,
+                        omit: !hasMeta,
+                        item: formField({
+                            field: 'meta',
+                            label: null,
+                            readonlyRenderer: jsonRenderer
+                        })
+                    })
+                ];
+            }
+        });
+    }
+});

package/admin/tabs/userData/jsonblob/JsonBlobModel.ts

@@ -68,6 +68,10 @@ export class JsonBlobModel extends HoistModel {
                     {...(Col.lastUpdatedBy.field as FieldSpec), editable: false}
                 ]
             },
+            onRowDoubleClicked: ({data}) => {
+                if (data && !this.gridModel.readonly) this.gridModel.editRecord(data);
+            },
+            toolbarActions: [addAction, editAction, cloneAction, deleteAction],
             menuActions: [addAction, editAction, cloneAction, deleteAction],
             prepareCloneFn: ({clone}) => (clone.name = `${clone.name}_CLONE`),
             sortBy: ['owner', 'name'],

package/admin/tabs/userData/jsonblob/JsonBlobPanel.ts

@@ -16,6 +16,7 @@ import {restGrid} from '@xh/hoist/desktop/cmp/rest';
 import {toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
 import {differ} from '../../../differ/Differ';
+import {jsonBlobDetailPanel} from './JsonBlobDetailPanel';
 import {JsonBlobModel} from './JsonBlobModel';
 
 export const jsonBlobPanel = hoistCmp.factory({
@@ -64,6 +65,7 @@ export const jsonBlobPanel = hoistCmp.factory({
                     ]
                 })
             }),
+            jsonBlobDetailPanel(),
             differ({omit: !model.differModel})
         );
     }

package/admin/tabs/userData/prefs/UserPreferenceDetailPanel.ts

@@ -0,0 +1,62 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+import {jsonRenderer, rawValueRenderer} from '@xh/hoist/admin/AdminUtils';
+import {valueTypeRenderer} from '@xh/hoist/admin/columns';
+import {restDetailPanel} from '@xh/hoist/admin/detail/RestDetailPanel';
+import {formFieldSet} from '@xh/hoist/cmp/form';
+import {hbox} from '@xh/hoist/cmp/layout';
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {formField} from '@xh/hoist/desktop/cmp/form';
+import {Icon} from '@xh/hoist/icon';
+import {UserPreferenceModel} from './UserPreferenceModel';
+
+/** Read-only detail view of the user preference value selected in the grid. */
+export const userPreferenceDetailPanel = hoistCmp.factory<UserPreferenceModel>({
+    displayName: 'UserPreferenceDetailPanel',
+    model: uses(UserPreferenceModel),
+
+    render({model}) {
+        return restDetailPanel({
+            icon: Icon.bookmark(),
+            emptyText: 'Select a user preference to view its details.',
+            persistWith: {...model.persistWith, path: 'detailPanel'},
+            renderForm: (record, formModel) => {
+                const {type} = formModel.values,
+                    isJson = type === 'json';
+                return [
+                    formFieldSet({
+                        title: 'Preference',
+                        items: [
+                            hbox(
+                                formField({field: 'username', flex: 1}),
+                                formField({field: 'groupName', flex: 1}),
+                                formField({
+                                    field: 'type',
+                                    readonlyRenderer: valueTypeRenderer,
+                                    flex: 1
+                                })
+                            ),
+                            hbox(
+                                formField({field: 'lastUpdatedBy', label: 'Updated By', flex: 1}),
+                                formField({field: 'lastUpdated', label: 'Updated', flex: 2})
+                            )
+                        ]
+                    }),
+                    formFieldSet({
+                        title: 'Value',
+                        className: isJson ? 'xh-admin-readonly-form__fill' : null,
+                        item: formField({
+                            field: 'userValue',
+                            label: null,
+                            readonlyRenderer: isJson ? jsonRenderer : rawValueRenderer
+                        })
+                    })
+                ];
+            }
+        });
+    }
+});

package/admin/tabs/userData/prefs/UserPreferenceModel.ts

@@ -9,10 +9,12 @@ import {AppModel} from '@xh/hoist/admin/AppModel';
 import * as Col from '@xh/hoist/admin/columns';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
 import {FieldSpec} from '@xh/hoist/data';
-import {RestGridModel} from '@xh/hoist/desktop/cmp/rest';
+import {addAction, deleteAction, editAction, RestGridModel} from '@xh/hoist/desktop/cmp/rest';
 import {bindable, makeObservable} from '@xh/hoist/mobx';
 
 export class UserPreferenceModel extends HoistModel {
+    override persistWith = {localStorageKey: 'xhAdminUserPreferenceState'};
+
     @managed gridModel: RestGridModel;
 
     @bindable showEditorDialog: boolean = false;
@@ -32,11 +34,16 @@ export class UserPreferenceModel extends HoistModel {
             exportOptions: {filename: exportFilenameWithDate('user-prefs')},
             filterFields: ['name', 'username'],
             groupBy: 'groupName',
-            persistWith: {localStorageKey: 'xhAdminUserPreferenceState'},
+            persistWith: this.persistWith,
             readonly: AppModel.readonly,
             selModel: 'multiple',
             sortBy: 'name',
             unit: 'user preference',
+            onRowDoubleClicked: ({data}) => {
+                if (data && !this.gridModel.readonly) this.gridModel.editRecord(data);
+            },
+            toolbarActions: [addAction, editAction, deleteAction],
+            menuActions: [addAction, editAction, deleteAction],
             // Store + fields
             store: {
                 url: 'rest/userPreferenceAdmin',
@@ -65,7 +72,7 @@ export class UserPreferenceModel extends HoistModel {
             // Cols + editors
             columns: [
                 {...Col.name},
-                {...Col.type},
+                {...Col.type, renderer: Col.valueTypeRenderer, align: 'center'},
                 {...Col.username},
                 {...Col.groupName, hidden},
                 {...Col.userValue},

package/admin/tabs/userData/prefs/UserPreferencePanel.ts

@@ -8,6 +8,7 @@
 import * as Col from '@xh/hoist/admin/columns/Rest';
 import * as AdminCol from '@xh/hoist/admin/columns';
 import {prefEditorDialog} from '@xh/hoist/admin/tabs/userData/prefs/editor/PrefEditorDialog';
+import {userPreferenceDetailPanel} from '@xh/hoist/admin/tabs/userData/prefs/UserPreferenceDetailPanel';
 import {UserPreferenceModel} from '@xh/hoist/admin/tabs/userData/prefs/UserPreferenceModel';
 import {hframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
@@ -59,7 +60,8 @@ export const userPreferencePanel = hoistCmp.factory({
                     prefEditorDialog()
                 ],
                 mask: 'onLoad'
-            })
+            }),
+            userPreferenceDetailPanel()
         );
     }
 });

package/admin/tabs/userData/roles/details/RoleDetails.scss

@@ -1,23 +1,6 @@
 .xh-admin-role-details {
   &__form {
-    overflow-y: auto;
-
-    .xh-form-field {
-      margin: 0;
-      padding: 2px var(--xh-pad-px);
-
-      &__label {
-        font-size: var(--xh-font-size-small-px);
-        padding: 0;
-      }
-
-      &__readonly-display {
-        padding: var(--xh-pad-half-px);
-      }
-
-      &:nth-child(odd) {
-        background-color: var(--xh-grid-bg-odd);
-      }
-    }
+    flex: none;
+    margin: var(--xh-pad-px);
   }
 }

package/admin/tabs/userData/roles/details/RoleDetails.ts

@@ -4,8 +4,9 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {form} from '@xh/hoist/cmp/form';
-import {div, frame, placeholder, span, vframe} from '@xh/hoist/cmp/layout';
+import {valOrNa} from '@xh/hoist/admin/AdminUtils';
+import {form, formFieldSet} from '@xh/hoist/cmp/form';
+import {frame, hbox, placeholder, vframe} from '@xh/hoist/cmp/layout';
 import {tabContainer} from '@xh/hoist/cmp/tab';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {formField} from '@xh/hoist/desktop/cmp/form';
@@ -31,21 +32,20 @@ export const roleDetails = hoistCmp.factory({
 
 const details = hoistCmp.factory(() =>
     form({
-        fieldDefaults: {inline: true},
-        item: div({
-            className: 'xh-admin-role-details__form',
+        fieldDefaults: {readonlyRenderer: valOrNa},
+        item: formFieldSet({
+            title: 'Role',
+            className: 'xh-admin-role-details__form xh-admin-readonly-form',
             items: [
-                formField({field: 'name'}),
-                formField({field: 'category'}),
+                hbox(formField({field: 'name', flex: 1}), formField({field: 'category', flex: 1})),
                 formField({
                     field: 'notes',
-                    readonlyRenderer: v => {
-                        return frame({
+                    readonlyRenderer: v =>
+                        frame({
                             style: {overflowY: 'auto'},
-                            height: 50,
-                            item: v ?? span({item: 'N/A', className: 'xh-text-color-muted'})
-                        });
-                    }
+                            maxHeight: 80,
+                            item: valOrNa(v)
+                        })
                 }),
                 formField({field: 'lastUpdated'})
             ]

package/appcontainer/AboutDialogModel.ts

@@ -17,6 +17,7 @@ import {Icon} from '../icon';
  */
 export class AboutDialogModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'aboutDialogModel';
 
     @observable
     isOpen: boolean = false;

package/appcontainer/AppContainerModel.ts

@@ -71,6 +71,8 @@ import {installServicesAsync} from '../core/impl/InstallServices';
  * Root object for Framework GUI State.
  */
 export class AppContainerModel extends HoistModel {
+    override xhName = 'appContainerModel';
+
     override telemetryPrefix = 'xh.client';
 
     private initCalled = false;
@@ -338,6 +340,7 @@ export class AppContainerModel extends HoistModel {
         // App init phase
         this.setAppState('INITIALIZING_APP');
         this.appModel = createSingleton(this.appSpec.modelClass);
+        this.appModel.xhName ??= 'appModel';
         await this.runner(ctx)
             .span('appInit')
             .run(ctx => this.appModel.initAsync(ctx as InitContext));

package/appcontainer/AppStateModel.ts

@@ -16,6 +16,7 @@ import {camelCase, isBoolean, isString, mapKeys, pick} from 'lodash';
  */
 export class AppStateModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'appStateModel';
 
     @observable state: AppState = 'PRE_AUTH';
 

package/appcontainer/BannerSourceModel.ts

@@ -17,6 +17,7 @@ import {BannerModel} from './BannerModel';
  */
 export class BannerSourceModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'bannerSourceModel';
 
     @managed
     @observable.ref

package/appcontainer/ChangelogDialogModel.ts

@@ -10,6 +10,7 @@ import {throwIf} from '@xh/hoist/utils/js';
 
 export class ChangelogDialogModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'changelogDialogModel';
 
     @observable isOpen: boolean = false;
 

package/appcontainer/ColChooserOptionsModel.ts

@@ -15,6 +15,7 @@ import {bindable, makeObservable} from '@xh/hoist/mobx';
  */
 export class ColChooserOptionsModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'colChooserOptionsModel';
     override persistWith = {localStorageKey: 'xhColChooser'};
 
     @bindable showGroups: boolean = true;

package/appcontainer/ExceptionDialogModel.ts

@@ -18,6 +18,7 @@ import {action, observable, makeObservable, bindable} from '@xh/hoist/mobx';
  */
 export class ExceptionDialogModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'exceptionDialogModel';
 
     @observable.ref
     displayData: {exception: HoistException; options: ExceptionHandlerOptions};

package/appcontainer/FeedbackDialogModel.ts

@@ -14,6 +14,7 @@ import {stripTags} from '@xh/hoist/utils/js';
  */
 export class FeedbackDialogModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'feedbackDialogModel';
 
     @observable isOpen: boolean = false;
     @observable message: string = null;