@xh/hoist 86.1.0 → 86.3.0

package/.gitattributes

@@ -0,0 +1,4 @@
+# Launcher scripts run under node via a `#!/usr/bin/env node` shebang; a CRLF
+# shebang line breaks execution on Linux/macOS. Force LF so Windows checkouts
+# don't rewrite them to CRLF (which otherwise shows them as perpetually modified).
+bin/*.mjs text eol=lf

package/CHANGELOG.md

@@ -1,5 +1,109 @@
 # Changelog
 
+## 86.3.0 - 2026-07-10
+
+### 🎁 New Features
+
+* `Select` now accepts a `generateOptionFn` prop to resolve an option for a selected value that is
+  not present in the current options list (e.g. with `queryFn`-based selects or readonly forms),
+  ensuring such values render with their proper label rather than falling back to the raw value.
+* `SegmentedControl` options (desktop and mobile) now accept a `testId`, emitted on the option's
+  rendered button as `data-testid` for E2E targeting. If an option omits its own `testId` but the
+  control has one, an id is auto-derived as `${controlTestId}-${value}` - restoring parity with
+  the legacy `ButtonGroupInput` test-hook pattern for apps migrating between the two.
+
+### 🐞 Bug Fixes
+
+* Fixed grid columns configured as `hidden` becoming visible after being grouped and then
+  ungrouped. `GridModel` now re-asserts each column's configured visibility whenever `groupBy`
+  changes, keeping AG Grid's column state in sync with `columnState`.
+* Fixed `StoreFilterField` and grid Find so an active quick-filter or find query no longer returns
+  different results when the grid's `groupBy` changes.
+* Fixed inline grid cell editors to reliably commit their value when editing ends, including popup
+  editors (e.g. `textAreaEditor`) within a dialog, which previously dropped edits on Enter or
+  click-away.
+* Fixed `Select` to correctly handle non-primitive (object) values: selected-option matching and
+  async query de-duplication now use deep equality, so object values no longer render as
+  `[object Object]` or collide with one another.
+* Hardened the grid column filter's Custom tab against filters it previously mishandled -
+  multi-value clauses are now expanded into editable rows and recombined on commit, and filters it
+  cannot represent are left untouched rather than corrupted.
+* Fixed `FilterChooser` popover mode (formerly `PopoverFilterChooser`) so its collapsed control no
+  longer disappears when opened - it now always occupies its place in the layout, so surrounding
+  elements no longer shift. Its clear and favorites controls also respond to a single click rather
+  than requiring the popover to be opened first. This mode is now enabled more naturally via
+  a new option `filterChooser({popover: true})`, deprecating `PopoverFilterChooser`, which remains
+  as a thin alias.
+* Fixed "not a valid MIME type" console warnings from `FileChooser`. Accepted extensions are now
+  passed under a dummy MIME type key, silencing the warnings while continuing to filter selected
+  files by extension.
+
+### ⚙️ Typescript API Adjustments
+
+* Retyped `GridModel.colChooserModel` as the new cross-platform `IColChooserModel` interface,
+  replacing the bare `HoistModel` type and exposing `isOpen`, `open()`, and `close()` directly.
+* Added the exported `HoistRoute` type - Router5's `Route` extended with Hoist's `omit` key - and
+  retyped `HoistAppModel.getRoutes()` to return it, so declarative route exclusion (e.g.
+  `omit: !XH.getUser().isHoistAdmin`) now type-checks without a cast.
+
+### 🤖 AI Docs + Tooling
+
+* Fixed the MCP server and `hoist-ts` CLI TypeScript symbol tools (`search`, `symbol`, `members`)
+  returning no results on Windows, where a path-separator mismatch left the symbol index empty.
+  Path handling is now normalized so the developer tools work on Windows as well as macOS/Linux.
+
+### 📚 Libraries
+
+* @auth0/auth0-spa-js `2.21 → 2.23`
+* @azure/msal-browser `5.14 → 5.16`
+* swiper  `12.1 -> 14.0`
+
+## 86.2.0 - 2026-06-25
+
+### 🎁 New Features
+
+* `CodeInput` / `JsonInput` now auto-format content for display via their configured `formatter`,
+  controlled by a new `autoFormat` prop. On editable inputs, content is tidied automatically on blur
+  (never mid-edit) - users get clean, consistently-formatted JSON without reaching for the format
+  button. For `readonly` inputs it defaults to true, so applications can bind directly to raw source
+  values and drop their pre-formatting logic, simplifying call sites substantially.
+* Grid column filter specs now support a `sortValue` config, letting the Values tab of the filter
+  dialog sort its entries the same way the underlying grid column sorts them. When not provided,
+  the column's own `sortValue` is used.
+* `GridModel.levelLabels` now accepts a partial array covering only the top levels of a tree or
+  grouped grid. The "Expand to..." menu and `ExpandToLevelButton` offer one entry per labelled
+  level, so deeper, unlabelled levels (e.g. system-managed) are no longer required and are omitted
+  as expand-to targets - previously a too-short array disabled the feature entirely.
+* Added a `lossless` option to `fmtQuantity` to compact values to millions / billions units only
+  when doing so loses no precision, rendering the full value otherwise (e.g. `7,100,100` stays
+  `7,100,100` rather than collapsing to `7.10m`).
+
+### 🐞 Bug Fixes
+
+* Fixed grid `NumberEditor` to allow starting an edit by typing `-`, `+`, or `.` (e.g. to enter a
+  negative or decimal value), while reliably rejecting other non-numeric keypresses.
+* `fmtNumber` now treats a `precision` of `null` as full, unrestricted precision rather than
+  `'auto'`, aligning a `NumberInput` with `precision: null` so its blurred display matches its
+  focused and committed (full-precision) value.
+* Fixed inline grid editing not ending when clicking empty grid space to the right of the last
+  column or below the last row - such clicks now commit the active edit.
+* Fixed `Icon.placeholder()` to render with the correct width.
+* `CheckboxButton` no longer leaks `HoistInputProps` into underlying HTML `<button>` element.
+* Fixed `Select` (and `SelectEditor`) dropdown menu sizing: windowed menus now auto-size to their
+  option labels instead of the control/cell width, and an explicit `menuWidth` is respected rather
+  than overridden by content auto-sizing.
+
+### ⚙️ Typescript API Adjustments
+
+* `GridFilterFieldSpec.renderer` is now typed as a pure value transform (`GridFilterRenderer`),
+  rather than a `ColumnRenderer`. This more accurately represents the existing run-time limitation
+  that a complex column renderer would throw.
+
+### ✨ Styles
+
+* Vertical (left/right) `TabContainer` switchers now render a modern rounded-pill treatment by
+  default, customizable via new `--xh-tab-switcher-vertical-*` CSS variables.
+
 ## 86.1.0 - 2026-06-22
 
 ### 🎁 New Features

package/admin/AdminJsonDisplay.ts

@@ -0,0 +1,31 @@
+/*
+ * 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 {hoistCmp} from '@xh/hoist/core';
+import {jsonInput, JsonInputProps} from '@xh/hoist/desktop/cmp/input';
+import {fmtJson, timestampReplacer} from '@xh/hoist/format';
+
+/**
+ * Readonly `jsonInput` preconfigured for Admin Console stat / config displays - sized to fill its
+ * container, without line numbers or a fullscreen button, and rendering timestamp-suffixed fields
+ * as readable dates. Pass the data via `value` (any object) or `bind`, plus any additional
+ * `jsonInput` props (e.g. `enableSearch`) to extend or override the defaults.
+ */
+export const adminJsonDisplay = hoistCmp.factory<JsonInputProps>({
+    displayName: 'AdminJsonDisplay',
+    render(props) {
+        return jsonInput({
+            readonly: true,
+            flex: 1,
+            width: '100%',
+            height: '100%',
+            showFullscreenButton: false,
+            lineNumbers: false,
+            formatter: v => fmtJson(v, {replacer: timestampReplacer()}),
+            ...props
+        });
+    }
+});

package/admin/App.scss

@@ -6,19 +6,11 @@
  */
 
 .xh-admin-app {
+  // The admin console uses left side-tab rails throughout - give them a consistent minimum width.
+  // All other vertical-switcher styling is inherited from the framework default.
   .xh-tab-switcher--left,
   .xh-tab-switcher--right {
-    min-width: 160px;
-    background-color: var(--xh-grid-bg-odd);
-    border-right: var(--xh-border-solid);
-
-    .bp6-tab {
-      border-radius: 0 !important;
-    }
-
-    .xh-tab-switcher__tab {
-      line-height: 40px;
-    }
+    --xh-tab-switcher-vertical-min-width: 160px;
   }
 
   &__editor-dialog {

package/admin/AppModel.ts

@@ -7,10 +7,9 @@
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {TabConfig, TabContainerModel} from '@xh/hoist/cmp/tab';
 import {ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
-import {HoistAppModel, InitContext, XH} from '@xh/hoist/core';
+import {HoistAppModel, HoistRoute, InitContext, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {without} from 'lodash';
-import {Route} from 'router5';
 import {activityTrackingPanel} from './tabs/activity/tracking/ActivityTrackingPanel';
 import {clientsPanel} from './tabs/clients/ClientsPanel';
 import {monitorTab} from './tabs/monitor/MonitorTab';
@@ -49,7 +48,7 @@ export class AppModel extends HoistAppModel {
         await super.initAsync(ctx);
     }
 
-    override getRoutes(): Route[] {
+    override getRoutes(): HoistRoute[] {
         return [
             {
                 name: 'default',
@@ -66,7 +65,7 @@ export class AppModel extends HoistAppModel {
         return [];
     }
 
-    getTabRoutes(): Route[] {
+    getTabRoutes(): HoistRoute[] {
         return [
             {
                 name: 'general',

package/admin/jsonsearch/impl/JsonSearchImplModel.ts

@@ -6,7 +6,7 @@
  */
 
 import {GridConfig, GridModel} from '@xh/hoist/cmp/grid';
-import {HoistModel, managed, TaskObserver, XH} from '@xh/hoist/core';
+import {HoistModel, managed, PlainObject, TaskObserver, XH} from '@xh/hoist/core';
 import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
 import {pluralize} from '@xh/hoist/utils/js';
 import {isEmpty, zipWith} from 'lodash';
@@ -32,7 +32,7 @@ export class JsonSearchImplModel extends HoistModel {
     @bindable path: string = '';
     @bindable readerContentType: 'document' | 'matches' = 'matches';
     @bindable pathFormat: 'XPath' | 'JSONPath' = 'XPath';
-    @bindable readerContent: string = '';
+    @bindable readerContent: string | PlainObject[] = '';
     @bindable matchingNodeCount: number = 0;
 
     get subjectName(): string {
@@ -137,7 +137,7 @@ export class JsonSearchImplModel extends HoistModel {
         const {json} = this.selectedRecord.data;
 
         if (this.readerContentType === 'document') {
-            this.readerContent = JSON.stringify(JSON.parse(json), null, 2);
+            this.readerContent = json;
             return;
         }
 
@@ -162,7 +162,7 @@ export class JsonSearchImplModel extends HoistModel {
                         value
                     };
                 });
-                this.readerContent = JSON.stringify(nodes, null, 2);
+                this.readerContent = nodes;
             });
     }
 

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

@@ -15,7 +15,17 @@ import {FilterChooserModel} from '@xh/hoist/cmp/filter';
 import {FormModel} from '@xh/hoist/cmp/form';
 import {ColumnRenderer, ColumnSpec, GridModel, TreeStyle} from '@xh/hoist/cmp/grid';
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
-import {HoistModel, LoadSpec, managed, PlainObject, XH} from '@xh/hoist/core';
+import {
+    HoistModel,
+    LoadSpec,
+    LocalDateUnit,
+    managed,
+    PersistableState,
+    PersistenceProvider,
+    persistOptions,
+    PlainObject,
+    XH
+} from '@xh/hoist/core';
 import {Cube, CubeFieldSpec, FieldSpec, ViewRowData} from '@xh/hoist/data';
 import {dateRenderer, dateTimeSecRenderer, numberRenderer} from '@xh/hoist/format';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
@@ -24,6 +34,23 @@ import {compact, get, isEmpty, isEqual, round} from 'lodash';
 import moment from 'moment';
 import {ActivityDetailProvider} from './detail/ActivityDetailModel';
 
+/**
+ * A relative time interval (e.g. 7 days) ending on the current app day. Drives the quick-select
+ * buttons and the persisted time period, which rolls forward to end on today on restore.
+ */
+export interface ActivityInterval {
+    value: number;
+    unit: LocalDateUnit;
+}
+
+/** Quick-select intervals offered in the toolbar - labels are derived as `${value}${unit[0]}`. */
+export const INTERVALS: ActivityInterval[] = [
+    {value: 6, unit: 'months'},
+    {value: 1, unit: 'months'},
+    {value: 7, unit: 'days'},
+    {value: 1, unit: 'days'}
+];
+
 export class ActivityTrackingModel extends HoistModel implements ActivityDetailProvider {
     override telemetryPrefix = 'xh.client.admin.tracking';
 
@@ -115,6 +142,7 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
         this.markPersist('showFilterChooser');
 
         this.formModel = this.createQueryFormModel();
+        this.setupPeriodPersistence();
 
         this.dataFieldsEditorModel = new DataFieldsEditorModel(this);
         this.markPersist('dataFields');
@@ -203,17 +231,17 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
         endDay.setValue(newEnd);
     }
 
-    // Set the start date by taking the end date and pushing back [value] [units] - then pushing
+    // Set the start date by taking the end date and pushing back the interval - then pushing
     // forward one day as the day range query is inclusive.
-    adjustStartDate(value, unit) {
+    adjustStartDate(interval: ActivityInterval) {
         this.formModel.setValues({
-            startDay: this.endDay.subtract(value, unit).nextDay()
+            startDay: this.endDay.subtract(interval.value, interval.unit).nextDay()
         });
     }
 
-    isInterval(value, unit) {
+    isInterval(interval: ActivityInterval) {
         const {startDay, endDay} = this.formModel.values;
-        return startDay === endDay.subtract(value, unit).nextDay();
+        return startDay === endDay.subtract(interval.value, interval.unit).nextDay();
     }
 
     getDisplayName(fieldName: string) {
@@ -234,6 +262,28 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
         });
     }
 
+    // Persist the selected time period as part of the active view, if endDay is currentDay
+    private setupPeriodPersistence() {
+        PersistenceProvider.create<ActivityInterval>({
+            persistOptions: persistOptions({path: 'queryPeriod'}, this.persistWith),
+            owner: this,
+            target: {
+                getPersistableState: () => {
+                    const currDay = this.endDay === LocalDate.currentAppDay(),
+                        interval = currDay ? INTERVALS.find(it => this.isInterval(it)) : null;
+                    return new PersistableState(interval ?? null);
+                },
+                setPersistableState: ({value}) => {
+                    if (value) {
+                        const endDay = LocalDate.currentAppDay();
+                        this.formModel.setValues({endDay});
+                        this.adjustStartDate(value);
+                    }
+                }
+            }
+        });
+    }
+
     private async loadGridAsync() {
         const {cube, gridModel, dimensions} = this,
             data = cube.executeQuery({

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

@@ -11,7 +11,7 @@ import {grid} from '@xh/hoist/cmp/grid';
 import {div, filler, 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 {popoverFilterChooser} from '@xh/hoist/desktop/cmp/filter';
+import {filterChooser} from '@xh/hoist/desktop/cmp/filter';
 import {formField} from '@xh/hoist/desktop/cmp/form';
 import {groupingChooser} from '@xh/hoist/desktop/cmp/grouping';
 import {dateInput, DateInputProps, select} from '@xh/hoist/desktop/cmp/input';
@@ -20,7 +20,7 @@ import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {viewManager} from '@xh/hoist/desktop/cmp/viewmanager';
 import {Icon} from '@xh/hoist/icon';
 import {LocalDate} from '@xh/hoist/utils/datetime';
-import {ActivityTrackingModel} from './ActivityTrackingModel';
+import {INTERVALS, ActivityTrackingModel} from './ActivityTrackingModel';
 import {aggChartPanel} from '@xh/hoist/admin/tabs/activity/tracking/chart/AggChartPanel';
 import {activityDetailView} from './detail/ActivityDetailView';
 import './ActivityTracking.scss';
@@ -75,32 +75,14 @@ const tbar = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
                     disabled: model.endDay >= LocalDate.currentAppDay()
                 }),
                 buttonGroup({
-                    items: [
+                    items: INTERVALS.map(interval =>
                         button({
-                            text: '6m',
-                            onClick: () => model.adjustStartDate(6, 'months'),
-                            active: model.isInterval(6, 'months'),
-                            ...dateBtn
-                        }),
-                        button({
-                            text: '1m',
-                            onClick: () => model.adjustStartDate(1, 'months'),
-                            active: model.isInterval(1, 'months'),
-                            ...dateBtn
-                        }),
-                        button({
-                            text: '7d',
-                            onClick: () => model.adjustStartDate(7, 'days'),
-                            active: model.isInterval(7, 'days'),
-                            ...dateBtn
-                        }),
-                        button({
-                            text: '1d',
-                            onClick: () => model.adjustStartDate(1, 'days'),
-                            active: model.isInterval(1, 'days'),
+                            text: `${interval.value}${interval.unit[0]}`,
+                            onClick: () => model.adjustStartDate(interval),
+                            active: model.isInterval(interval),
                             ...dateBtn
                         })
-                    ]
+                    )
                 }),
                 toolbarSep(),
                 filterChooserToggleButton(),
@@ -137,7 +119,8 @@ const filterChooserToggleButton = hoistCmp.factory<ActivityTrackingModel>(({mode
 const filterBar = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
     return model.showFilterChooser
         ? toolbar(
-              popoverFilterChooser({
+              filterChooser({
+                  popover: true,
                   flex: 1,
                   enableClear: true
               })

package/admin/tabs/clients/ClientsModel.ts

@@ -9,7 +9,7 @@ import {AppModel} from '@xh/hoist/admin/AppModel';
 import * as Col from '@xh/hoist/admin/columns';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {div, p} from '@xh/hoist/cmp/layout';
-import {LoadSpec, managed, XH} from '@xh/hoist/core';
+import {LoadSpec, managed, persistOptions, XH} from '@xh/hoist/core';
 import {RecordActionSpec, StoreRecord} from '@xh/hoist/data';
 import {textInput} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';
@@ -23,6 +23,8 @@ import {BaseAdminTabModel} from '@xh/hoist/admin/tabs/BaseAdminTabModel';
 export class ClientsModel extends BaseAdminTabModel {
     override telemetryPrefix = 'xh.client.admin.clients';
 
+    override persistWith = {localStorageKey: 'xhAdminClientsState'};
+
     @observable
     lastRefresh: number;
 
@@ -150,6 +152,7 @@ export class ClientsModel extends BaseAdminTabModel {
         return new GridModel({
             emptyText: 'No clients connected.',
             groupBy: this.groupBy,
+            persistWith: persistOptions(this.persistWith, {path: 'mainGrid'}),
             colChooserModel: true,
             enableExport: true,
             selModel: 'multiple',

package/admin/tabs/clients/activity/ClientDetailModel.ts

@@ -6,7 +6,7 @@
  */
 import {ClientsModel} from '../ClientsModel';
 import {ColumnSpec} from '@xh/hoist/cmp/grid';
-import {HoistModel, LoadSpec, lookup, PlainObject, XH} from '@xh/hoist/core';
+import {HoistModel, LoadSpec, lookup, persistOptions, PlainObject, XH} from '@xh/hoist/core';
 import {StoreRecord} from '@xh/hoist/data';
 import {bindable, computed, makeObservable} from '@xh/hoist/mobx';
 import {ReactNode} from 'react';
@@ -53,6 +53,10 @@ export class ClientDetailModel extends HoistModel implements ActivityDetailProvi
     override onLinked() {
         super.onLinked();
 
+        this.persistWith = persistOptions(this.clientsModel.persistWith, {
+            pathPrefix: 'activityGrid'
+        });
+
         this.addReaction(
             {
                 track: () => this.clientsModel.gridModel.selectedRecord,

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

@@ -4,6 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
+import {adminJsonDisplay} from '@xh/hoist/admin/AdminJsonDisplay';
 import {AppModel} from '@xh/hoist/admin/AppModel';
 import {ConnPoolMonitorModel} from '@xh/hoist/admin/tabs/cluster/instances/connpool/ConnPoolMonitorModel';
 import {chart} from '@xh/hoist/cmp/chart';
@@ -12,7 +13,6 @@ 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/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';
 import {Icon} from '@xh/hoist/icon';
@@ -74,7 +74,7 @@ const bbar = hoistCmp.factory<ConnPoolMonitorModel>({
 });
 
 const poolConfigPanel = hoistCmp.factory<ConnPoolMonitorModel>({
-    render({model}) {
+    render() {
         return panel({
             title: 'Pool Configuration',
             icon: Icon.info(),
@@ -84,15 +84,7 @@ const poolConfigPanel = hoistCmp.factory<ConnPoolMonitorModel>({
                 defaultSize: 450,
                 defaultCollapsed: true
             },
-            item: jsonInput({
-                readonly: true,
-                height: '100%',
-                width: '100%',
-                enableSearch: true,
-                showFullscreenButton: false,
-                lineNumbers: false,
-                value: JSON.stringify(model.poolConfiguration, null, 2)
-            })
+            item: adminJsonDisplay({enableSearch: true, bind: 'poolConfiguration'})
         });
     }
 });

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

@@ -4,15 +4,14 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
+import {adminJsonDisplay} from '@xh/hoist/admin/AdminJsonDisplay';
 import {DetailsModel} from '@xh/hoist/admin/tabs/cluster/instances/services/DetailsModel';
 import {placeholder} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
 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';
 import {isEmpty} from 'lodash';
-import {fmtJson, timestampReplacer} from '@xh/hoist/format';
 
 export const detailsPanel = hoistCmp.factory({
     model: creates(DetailsModel),
@@ -50,16 +49,6 @@ const stats = hoistCmp.factory<DetailsModel>({
                       ? []
                       : [Icon.questionCircle(), 'This service does not report any admin stats.'])
               )
-            : panel(
-                  jsonInput({
-                      readonly: true,
-                      width: '100%',
-                      height: '100%',
-                      enableSearch: true,
-                      showFullscreenButton: false,
-                      lineNumbers: false,
-                      value: fmtJson(stats, {replacer: timestampReplacer()})
-                  })
-              );
+            : panel(adminJsonDisplay({enableSearch: true, bind: 'stats'}));
     }
 });

package/admin/tabs/cluster/objects/DetailPanel.ts

@@ -4,21 +4,20 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
+import {adminJsonDisplay} from '@xh/hoist/admin/AdminJsonDisplay';
 import {grid} from '@xh/hoist/cmp/grid';
 import {placeholder} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
-import {jsonInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {Icon} from '@xh/hoist/icon';
 import {DetailModel} from './DetailModel';
 import './ClusterObjects.scss';
-import {fmtJson, timestampReplacer} from '@xh/hoist/format';
 
 export const detailPanel = hoistCmp.factory({
     model: creates(DetailModel),
 
     render({model}) {
-        const {instanceName, selectedAdminStats, objectName, objectType} = model;
+        const {instanceName, objectName, objectType} = model;
         if (!objectName) return placeholder(Icon.grip(), 'Select an object to view details...');
 
         return panel({
@@ -36,15 +35,7 @@ export const detailPanel = hoistCmp.factory({
                         defaultSize: '80%',
                         collapsible: false
                     },
-                    item: jsonInput({
-                        readonly: true,
-                        flex: 1,
-                        width: '100%',
-                        height: '100%',
-                        showFullscreenButton: false,
-                        lineNumbers: false,
-                        value: fmtJson(selectedAdminStats, {replacer: timestampReplacer()})
-                    })
+                    item: adminJsonDisplay({bind: 'selectedAdminStats'})
                 })
             ]
         });

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

@@ -10,7 +10,7 @@ import {fragment, hframe, vframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, colChooserButton} from '@xh/hoist/desktop/cmp/button';
 import {errorMessage} from '@xh/hoist/cmp/error';
-import {popoverFilterChooser} from '@xh/hoist/desktop/cmp/filter';
+import {filterChooser} from '@xh/hoist/desktop/cmp/filter';
 import {switchInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {recordActionBar} from '@xh/hoist/desktop/cmp/record';
@@ -44,7 +44,7 @@ export const rolePanel = hoistCmp.factory({
                         selModel: gridModel.selModel
                     }),
                     '-',
-                    popoverFilterChooser({flex: 1}),
+                    filterChooser({popover: true, flex: 1}),
                     '-',
                     switchInput({
                         bind: 'showInGroups',

package/appcontainer/RouterModel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {HoistModel} from '../core';
+import {HoistModel, HoistRoute} from '../core';
 import {action, observable, makeObservable} from '@xh/hoist/mobx';
 import {mergeDeep} from '@xh/hoist/utils/js';
 import {isOmitted} from '@xh/hoist/utils/impl';
@@ -38,11 +38,11 @@ export class RouterModel extends HoistModel {
     /**
      * Add routes to the router.
      *
-     * @param routes - collection of router5 route spec.
-     *      This method supports an additional keyword 'omit' on each spec, in order to allow declarative
-     *      exclusion.  Otherwise these are Router5 configs to be passed directly to the Router5 API.
+     * @param routes - collection of {@link HoistRoute} specs. In addition to the standard Router5
+     *      route config, each spec supports an `omit` keyword to allow declarative exclusion.
+     *      Otherwise these are Router5 configs to be passed directly to the Router5 API.
      */
-    addRoutes(routes: object[]) {
+    addRoutes(routes: HoistRoute[]) {
         this.router.add(this.preprocessRoutes(routes));
     }
 
@@ -100,7 +100,7 @@ export class RouterModel extends HoistModel {
         return ret;
     }
 
-    private preprocessRoutes(routes) {
+    private preprocessRoutes(routes: HoistRoute[]): HoistRoute[] {
         const ret = routes.filter(r => !isOmitted(r));
         ret.forEach(r => {
             if (r.children) r.children = this.preprocessRoutes(r.children);

package/build/types/admin/AdminJsonDisplay.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Readonly `jsonInput` preconfigured for Admin Console stat / config displays - sized to fill its
+ * container, without line numbers or a fullscreen button, and rendering timestamp-suffixed fields
+ * as readable dates. Pass the data via `value` (any object) or `bind`, plus any additional
+ * `jsonInput` props (e.g. `enableSearch`) to extend or override the defaults.
+ */
+export declare const adminJsonDisplay: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/desktop/cmp/input").CodeInputProps>;

package/build/types/admin/AppModel.d.ts

@@ -1,16 +1,15 @@
 import { TabConfig, TabContainerModel } from '@xh/hoist/cmp/tab';
 import { ViewManagerModel } from '@xh/hoist/cmp/viewmanager';
-import { HoistAppModel, InitContext } from '@xh/hoist/core';
-import { Route } from 'router5';
+import { HoistAppModel, HoistRoute, InitContext } from '@xh/hoist/core';
 export declare class AppModel extends HoistAppModel {
     tabModel: TabContainerModel;
     viewManagerModels: Record<string, ViewManagerModel>;
     static get readonly(): boolean;
     constructor();
     initAsync(ctx: InitContext): Promise<void>;
-    getRoutes(): Route[];
+    getRoutes(): HoistRoute[];
     getAppMenuButtonExtraItems(): any[];
-    getTabRoutes(): Route[];
+    getTabRoutes(): HoistRoute[];
     createTabs(): TabConfig[];
     /** Open the primary business-facing application, typically 'app'. */
     openPrimaryApp(): void;