@xh/hoist 87.1.1 → 87.2.0

package/desktop/cmp/panel/PanelModel.ts

@@ -111,6 +111,9 @@ export interface PanelConfig {
 
     /** @internal */
     xhImpl?;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 export interface PanelPersistState {
@@ -215,11 +218,13 @@ export class PanelModel extends HoistModel implements Persistable<PanelPersistSt
         showSplitterCollapseButton = showSplitter && collapsible,
         showHeaderCollapseButton = true,
         showModalToggleButton = true,
+        xhName = null,
         xhImpl = false
     }: PanelConfig) {
         super();
         makeObservable(this);
         this.xhImpl = xhImpl;
+        this.xhName = xhName;
 
         defaultSize =
             isString(defaultSize) && defaultSize.endsWith('px')
@@ -267,6 +272,7 @@ export class PanelModel extends HoistModel implements Persistable<PanelPersistSt
                 modalSupport === true
                     ? new ModalSupportModel()
                     : new ModalSupportModel(modalSupport);
+            this.modalSupportModel.xhName = this.childXhName('modalSupportModel');
         }
 
         if (errorBoundary) {
@@ -274,10 +280,12 @@ export class PanelModel extends HoistModel implements Persistable<PanelPersistSt
                 errorBoundary === true
                     ? new ErrorBoundaryModel()
                     : new ErrorBoundaryModel(errorBoundary);
+            this.errorBoundaryModel.xhName = this.childXhName('errorBoundaryModel');
         }
 
         if (collapsible) {
             this.refreshContextModel = new ManagedRefreshContextModel(this);
+            this.refreshContextModel.xhName = this.childXhName('refreshContextModel');
         }
 
         if (collapsible || resizable) {

package/desktop/cmp/panel/impl/ResizeContainer.ts

@@ -18,7 +18,7 @@ export const resizeContainer = hoistCmp.factory({
     model: false,
     className: 'xh-resizable',
 
-    render({className, children, testId}, ref) {
+    render({className, children, testId, domAttrs}, ref) {
         const panelModel = useContextModel(PanelModel),
             {size, resizable, collapsed, vertical, contentFirst, showSplitter} = panelModel,
             dim = vertical ? 'height' : 'width',
@@ -53,6 +53,7 @@ export const resizeContainer = hoistCmp.factory({
             [maxDim]: '100%',
             [minDim]: dragBarWidth,
             testId,
+            domAttrs,
             items
         });
     }

package/desktop/cmp/rest/RestGridModel.ts

@@ -162,9 +162,11 @@ export class RestGridModel extends HoistModel {
         onRowDoubleClicked,
         store,
         appData,
+        xhName = null,
         ...rest
     }: RestGridConfig) {
         super();
+        this.xhName = xhName;
         this.readonly = readonly;
         this.editors = editors;
         this.toolbarActions = toolbarActions;
@@ -186,6 +188,7 @@ export class RestGridModel extends HoistModel {
         });
 
         this.gridModel = new GridModel({
+            xhName: this.childXhName('gridModel'),
             contextMenu: [...this.menuActions, '-', ...GridModel.defaults.contextMenu],
             exportOptions: {filename: pluralize(unit)},
             store: this.parseStore(store),
@@ -197,6 +200,7 @@ export class RestGridModel extends HoistModel {
         });
 
         this.formModel = new RestFormModel(this);
+        this.formModel.xhName = this.childXhName('formModel');
     }
 
     /** Load the underlying store. */

package/desktop/cmp/tab/impl/TabContainer.ts

@@ -24,6 +24,7 @@ export function tabContainerImpl({
     childContainerProps,
     className,
     testId,
+    domAttrs,
     ...props
 }: TabContainerProps) {
     const switcherProps = getSwitcherProps(props),
@@ -40,6 +41,7 @@ export function tabContainerImpl({
         ...layoutProps,
         className,
         testId,
+        domAttrs,
         item: getChildren(model, switcherProps, testId, childContainerProps)
     });
 }

package/docs/README.md

@@ -34,6 +34,7 @@ See [`docs-roadmap.md`](./planning/docs-roadmap.md) for documentation coverage t
 | Configure a desktop panel (toolbars, masks, collapse) | [`/desktop/cmp/panel/`](../desktop/cmp/panel/README.md)                                                             |
 | Build a mobile app | [`/mobile/`](../mobile/README.md)                                                                                   |
 | Save and restore named view configurations | [`/cmp/viewmanager/`](../cmp/viewmanager/README.md)                                                                 |
+| Select a period or date range (presets, lookbacks, months, custom) | [`/cmp/daterange/`](../cmp/daterange/README.md)                                                                   |
 | Use layout containers (Box, HBox, VBox, Frame) | [`/cmp/layout/`](../cmp/layout/README.md)                                                                           |
 | Work with Stores, Records, Fields, or Filters | [`/data/`](../data/README.md)                                                                                       |
 | Set up Cube aggregation with Views and Queries | [`/data/cube/`](../data/cube/README.md)                                                                             |
@@ -87,6 +88,7 @@ See [`docs-roadmap.md`](./planning/docs-roadmap.md) for documentation coverage t
 | [`/cmp/layout/`](../cmp/layout/README.md) | Flexbox-based layout containers | Box, VBox, HBox, Frame, Viewport, LayoutProps, pixel conversion |
 | [`/cmp/tab/`](../cmp/tab/README.md) | Tabbed interface system | TabContainerModel, routing integration, render modes, refresh strategies |
 | [`/cmp/viewmanager/`](../cmp/viewmanager/README.md) | Save/load named bundles of component state | ViewManagerModel, views, sharing, pinning, auto-save, JsonBlob persistence |
+| [`/cmp/daterange/`](../cmp/daterange/README.md) | Period selection as presets, relative lookbacks, months/years, or custom ranges, resolved to dates and filters | DateRangePickerModel, DateRangePicker, DateRangeSelection, presets, anchorDate, LocalDateRange, currentRangeFilter, priorRange |
 | [`/desktop/`](../desktop/README.md) | Desktop-specific components and app container | Desktop components, Blueprint wrappers, desktop navigation |
 | [`/desktop/cmp/dash/`](../desktop/cmp/dash/README.md) | Configurable dashboard system with draggable, resizable widgets | DashContainerModel, DashCanvasModel, DashViewSpec, DashViewModel, widget persistence, ViewManager integration |
 | [`/desktop/cmp/panel/`](../desktop/cmp/panel/README.md) | Desktop panel container with toolbars, masks, and collapsible behavior | Panel, PanelModel, Toolbar, mask, collapse/resize, persistence, modal support |

package/docs/build-and-publish.md

@@ -24,6 +24,14 @@ Publishes a SNAPSHOT build to npm on every push to `develop`. Can also be trigge
 - Linting runs as part of this workflow — a lint failure will block the publish.
 - Uses `concurrency` with `cancel-in-progress: true` to avoid redundant builds when multiple pushes
   land in quick succession.
+- After publishing, polls `npm view @xh/hoist@next` until the registry resolves the `next` dist-tag
+  to the version just published (10 minute limit). Publishing returns once npm accepts the tarball,
+  but the new version is not guaranteed to be resolvable at that moment.
+- Finally fires a `repository_dispatch` (`hoist-react-snapshot`) to `xh/toolbox`, which rebuilds
+  and redeploys Toolbox against the new snapshot. The dispatch authenticates as the org-owned
+  **XH Build Bot** GitHub App via a short-lived installation token minted by
+  `actions/create-github-app-token`, scoped to the toolbox repo with Contents: write. Toolbox runs
+  triggered this way show `xh-build-bot[bot]` as the actor.
 
 ## Deploy Release (`deployRelease.yml`)
 
@@ -62,13 +70,21 @@ Inputs:
 Automated dependency update PRs are configured for both GitHub Actions and npm dependencies, each
 checking weekly.
 
-## Required Secrets
-
-| Secret | Used By | Purpose |
-|--------|---------|---------|
-| `FONTAWESOME_PACKAGE_TOKEN` | CI, Snapshot, Release | Auth token for the Font Awesome Pro npm registry (`npm.fontawesome.com`) |
-| `NPM_TOKEN` | Snapshot, Release, Unpublish | Auth token for publishing to the npm public registry |
-| `GITHUB_TOKEN` | Release | Provided automatically by GitHub Actions; used for `gh release create` |
+## Required Secrets and Variables
+
+| Name | Type | Used By | Purpose |
+|------|------|---------|---------|
+| `FONTAWESOME_PACKAGE_TOKEN` | Secret | CI, Snapshot, Release | Auth token for the Font Awesome Pro npm registry (`npm.fontawesome.com`) |
+| `NPM_TOKEN` | Secret | Snapshot, Release, Unpublish | Auth token for publishing to the npm public registry |
+| `XH_BUILD_BOT_PRIVATE_KEY` | Secret | Snapshot | Private key for the XH Build Bot GitHub App, used to mint the Toolbox dispatch token |
+| `XH_BUILD_BOT_CLIENT_ID` | Variable | Snapshot | Client ID of the XH Build Bot GitHub App |
+| `GITHUB_TOKEN` | Secret | Release | Provided automatically by GitHub Actions; used for `gh release create` |
+
+The XH Build Bot app is registered under the xh GitHub org and installed org-wide. Its credentials
+(app ID, client ID, and private key) are kept in the team 1Password vault under
+"GitHub App: XH Build Bot". To rotate, generate a new private key on the app's settings page, update
+the 1Password item and the `XH_BUILD_BOT_PRIVATE_KEY` secret here and in hoist-core, then revoke the
+old key.
 
 Font Awesome Pro packages are sourced from the official Font Awesome registry at
 `npm.fontawesome.com` (configured in `.npmrc`). The `FONTAWESOME_PACKAGE_TOKEN` secret is appended

package/docs/doc-registry.json

@@ -127,6 +127,14 @@
             "description": "Save/load named bundles of component state.",
             "keywords": ["ViewManagerModel", "views", "sharing", "pinning", "auto-save", "JsonBlob persistence"]
         },
+        {
+            "id": "cmp/daterange/README.md",
+            "title": "Date Range Package",
+            "mcpCategory": "package",
+            "viewerCategory": "components",
+            "description": "Period selection as presets, relative lookbacks, months/years, or custom ranges, resolved to dates and filters.",
+            "keywords": ["DateRangePickerModel", "DateRangePicker", "DateRangeSelection", "dateRangePresets", "DateRangePreset", "LocalDateRange", "anchorDate", "currentRangeFilter", "priorRange", "business days"]
+        },
         {
             "id": "desktop/cmp/dash/README.md",
             "title": "Dashboard System",

package/docs/version-compatibility.md

@@ -162,6 +162,7 @@ taking its current major alongside a hoist-react upgrade is low-cost and always
 
 | hoist-react | Min Dev-Utils Required | Recommended Dev-Utils | Notes |
 |---|---|---|---|
+| 87.1 | -- | 15.0.1 | Take 15.0.1+, not 15.0.0. dev-utils 15 requires 87.1, enforced with a fail-fast build error. Apps taking v15 must also be TS-only (no `.jsx` files) and will see ESLint v10 rules. |
 | 87.0 | 14.0 | 14.0 | React 19: dev-utils 14 ships `@types/react` 19.x and is required for apps adopting pnpm. (13.x can build v87 with `@types/react` 19.x pinned via `resolutions` - a transitional pairing only, not supported.) |
 | 86.0 | -- | 13.0.1 | dev-utils 13 sets a Node floor of >= 22.11 and swaps the markdown loader - verify `flex: 1 1 0` styles (see [v86 notes](./upgrade-notes/v86-upgrade-notes.md)). |
 | 83.0 | -- | 12.0 | dev-utils 12's same-port dev proxy pairs with the hoist-react 83.0.2 `WebSocketService` fix. |
@@ -178,6 +179,7 @@ hard gates stated in the [hoist-dev-utils CHANGELOG](https://github.com/xh/hoist
 
 | hoist-dev-utils | Min hoist-react | Min Node | Notes |
 |---|---|---|---|
+| 15.0 | 87.1 | 22.15 | Take 15.0.1+ - 15.0.0 can crash app boot ([#4640](https://github.com/xh/hoist-react/issues/4640)). Apps must be TypeScript-only - `.jsx` files are no longer resolved or transpiled. Re-enables Terser name-mangling, ships ESLint v10 via `@xh/eslint-config` 8, and emits pre-compressed `.br` / `.gz` assets on prod builds. |
 | 14.0 | 87.0 | 22.15 | React 19 / `@types/react` 19.x baseline. Adds pnpm support - apps adopting pnpm must take 14+, and must declare every package they import directly (see dev-utils CHANGELOG). webpack-dev-server 6. |
 | 13.0 | -- | 22.11 | Take 13.0.1+. Markdown files now import as strings; verify `flex: 1 1 0` styles. |
 | 12.0 | 83.0.2 | | Same-port dev proxy (`baseUrl` default now `/api/`); requires hoist-react's `WebSocketService` fix in 83.0.2. |

package/icon/Icon.ts

@@ -189,6 +189,9 @@ export const Icon = {
     arrowsUpDown(p?: IconProps) {
         return Icon.icon({...p, iconName: 'arrows-v'});
     },
+    asterisk(p?: IconProps) {
+        return Icon.icon({...p, iconName: 'asterisk'});
+    },
     balanceScale(p?: IconProps) {
         return Icon.icon({...p, iconName: 'balance-scale'});
     },
@@ -231,6 +234,12 @@ export const Icon = {
     calendar(p?: IconProps) {
         return Icon.icon({...p, iconName: 'calendar-day'});
     },
+    calendarDays(p?: IconProps) {
+        return Icon.icon({...p, iconName: 'calendar-days'});
+    },
+    calendarRange(p?: IconProps) {
+        return Icon.icon({...p, iconName: 'calendar-range'});
+    },
     camera(p?: IconProps) {
         return Icon.icon({...p, iconName: 'camera'});
     },

package/icon/index.ts

@@ -33,6 +33,7 @@ import {
     faArrowToTop as faArrowToTopLight,
     faArrowUp as faArrowUpLight,
     faArrowUpFromBracket as faArrowUpFromBracketLight,
+    faAsterisk as faAsteriskLight,
     faBalanceScale as faBalanceScaleLight,
     faBalanceScaleLeft as faBalanceScaleLeftLight,
     faBalanceScaleRight as faBalanceScaleRightLight,
@@ -53,6 +54,8 @@ import {
     faBullseyeArrow as faBullseyeArrowLight,
     faCalculator as faCalculatorLight,
     faCalendarDay as faCalendarDayLight,
+    faCalendarDays as faCalendarDaysLight,
+    faCalendarRange as faCalendarRangeLight,
     faCamera as faCameraLight,
     faCaretLeft as faCaretLeftLight,
     faCaretRight as faCaretRightLight,
@@ -251,6 +254,7 @@ import {
     faArrowToTop,
     faArrowUp,
     faArrowUpFromBracket,
+    faAsterisk,
     faBalanceScale,
     faBalanceScaleLeft,
     faBalanceScaleRight,
@@ -271,6 +275,8 @@ import {
     faBullseyeArrow,
     faCalculator,
     faCalendarDay,
+    faCalendarDays,
+    faCalendarRange,
     faCamera,
     faCaretLeft,
     faCaretRight,
@@ -469,6 +475,7 @@ import {
     faArrowToTop as faArrowToTopSolid,
     faArrowUp as faArrowUpSolid,
     faArrowUpFromBracket as faArrowUpFromBracketSolid,
+    faAsterisk as faAsteriskSolid,
     faBalanceScale as faBalanceScaleSolid,
     faBalanceScaleLeft as faBalanceScaleLeftSolid,
     faBalanceScaleRight as faBalanceScaleRightSolid,
@@ -489,6 +496,8 @@ import {
     faBullseyeArrow as faBullseyeArrowSolid,
     faCalculator as faCalculatorSolid,
     faCalendarDay as faCalendarDaySolid,
+    faCalendarDays as faCalendarDaysSolid,
+    faCalendarRange as faCalendarRangeSolid,
     faCamera as faCameraSolid,
     faCaretLeft as faCaretLeftSolid,
     faCaretRight as faCaretRightSolid,
@@ -688,6 +697,7 @@ import {
     faArrowToTop as faArrowToTopThin,
     faArrowUp as faArrowUpThin,
     faArrowUpFromBracket as faArrowUpFromBracketThin,
+    faAsterisk as faAsteriskThin,
     faBalanceScale as faBalanceScaleThin,
     faBalanceScaleLeft as faBalanceScaleLeftThin,
     faBalanceScaleRight as faBalanceScaleRightThin,
@@ -708,6 +718,8 @@ import {
     faBullseyeArrow as faBullseyeArrowThin,
     faCalculator as faCalculatorThin,
     faCalendarDay as faCalendarDayThin,
+    faCalendarDays as faCalendarDaysThin,
+    faCalendarRange as faCalendarRangeThin,
     faCamera as faCameraThin,
     faCaretLeft as faCaretLeftThin,
     faCaretRight as faCaretRightThin,
@@ -976,6 +988,10 @@ library.add(
     faArrowUpLight,
     faArrowUpSolid,
     faArrowUpThin,
+    faAsterisk,
+    faAsteriskLight,
+    faAsteriskSolid,
+    faAsteriskThin,
     faBalanceScale,
     faBalanceScaleLight,
     faBalanceScaleSolid,
@@ -1053,9 +1069,17 @@ library.add(
     faCalculatorSolid,
     faCalculatorThin,
     faCalendarDay,
+    faCalendarDays,
+    faCalendarRange,
     faCalendarDayLight,
     faCalendarDaySolid,
     faCalendarDayThin,
+    faCalendarDaysLight,
+    faCalendarDaysSolid,
+    faCalendarDaysThin,
+    faCalendarRangeLight,
+    faCalendarRangeSolid,
+    faCalendarRangeThin,
     faCamera,
     faCameraLight,
     faCameraSolid,

package/inspector/README.md

@@ -122,7 +122,8 @@ navigation or load action created them.
 The Instances panel is a split layout with:
 
 - **Instances grid** (left, resizable) — Lists all live `HoistModel`, `HoistService`, `Store`,
-  `Cube`, and `View` instances with their class name, creation time, linked status, and sync run
+  `Cube`, and `View` instances with their `xhName` (when set), class name, creation time,
+  linked status, and sync run
 - **Properties grid** (right) — Shows properties of the selected instance(s), including observable
   values with live updates
 - **Diagnostics panel** (tabbed with properties) — Live readout of the data-pipeline
@@ -133,6 +134,10 @@ The Instances panel is a split layout with:
 - **Grouping** — Toggle "Show in Groups" to group by type (Models, Services, Stores)
 - **XH impl filtering** — Toggle "Show XH Impl" to show/hide Hoist's internal framework instances
   (marked with `xhImpl = true`)
+- **Favorites** — Star any instance with an `xhName` to pin it, then toggle "Favorites" to show
+  only pinned instances. Keyed by `{className}:{xhName}` and persisted, so the same set of objects
+  can be followed across reloads. Favorites with no live instance show as muted placeholder rows -
+  un-star one to drop it
 - **Actions** — Log instance to devtools console, trigger `loadAsync()` on models with
   `LoadSupport`
 - **Multi-select** — Select multiple instances to compare their properties side-by-side
@@ -178,7 +183,8 @@ Inspector state is persisted to `localStorage` under the key
 
 - Panel sizes (stats panel, instances panel)
 - Grid column state for both grids
-- Quick filter selections (grouping, xhImpl visibility, property filters)
+- Quick filter selections (grouping, xhImpl visibility, favorites, property filters)
+- Favorited instances
 - Store filter text
 - Active/inactive state
 

package/inspector/impl/InspectorUtils.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 type {HoistBase} from '@xh/hoist/core';
+
+/** Label for an instance within Inspector - its `xhName` or class name, plus `xhId`. */
+export function instanceLabel(inst: HoistBase): string {
+    return `${inst.xhName ?? inst.constructor.name} [${inst.xhId}]`;
+}

package/inspector/instances/DiagnosticsModel.ts

@@ -11,6 +11,7 @@ import {fmtDate, numberRenderer} from '@xh/hoist/format';
 import {action, makeObservable} from '@xh/hoist/mobx';
 import {Cube} from '@xh/hoist/data';
 import {forIn, isEmpty, isFinite} from 'lodash';
+import {instanceLabel} from '../impl/InspectorUtils';
 import type {InstancesModel} from './InstancesModel';
 
 /**
@@ -55,7 +56,7 @@ export class DiagnosticsModel extends HoistModel {
     private get diagnosticSources(): DiagnosticSource[] {
         const ret: DiagnosticSource[] = [];
         this.parent.selectedInstances.forEach(inst => {
-            const label = `${inst.constructor.name} [${inst.xhId}]`,
+            const label = instanceLabel(inst),
                 diag = (inst as any).diagnostics;
             if (diag instanceof BaseDiagnostics) {
                 ret.push({xhId: inst.xhId, diag, label});
@@ -63,7 +64,7 @@ export class DiagnosticsModel extends HoistModel {
                 ret.push({
                     xhId: inst.xhId,
                     diag: inst.store.diagnostics,
-                    label: `${label} › Store [${inst.store.xhId}]`
+                    label: `${label} › ${instanceLabel(inst.store)}`
                 });
             }
         });

package/inspector/instances/InstancesModel.ts

@@ -16,6 +16,7 @@ import {action, bindable, isObservableProp, makeObservable, runInAction} from '@
 import {wait} from '@xh/hoist/promise';
 import {trimToDepth} from '@xh/hoist/utils/js';
 import {compact, find, forIn, head, without} from 'lodash';
+import {instanceLabel} from '../impl/InspectorUtils';
 import {StatsModel} from '../stats/StatsModel';
 import {DiagnosticsModel} from './DiagnosticsModel';
 
@@ -48,6 +49,9 @@ export class InstancesModel extends HoistModel {
     @bindable @persist instancesStoreFilter;
     @bindable @persist propertiesStoreFilter;
 
+    /** Keys of favorited instances (`{className}:{xhName}`) - requires an `xhName` to pin. */
+    @bindable.ref @persist favorites: string[] = [];
+
     @bindable @persist instQuickFilters = ['showInGroups'];
     get showInGroups() {
         return this.instQuickFilters?.includes('showInGroups');
@@ -55,6 +59,9 @@ export class InstancesModel extends HoistModel {
     get showXhImpl() {
         return this.instQuickFilters?.includes('showXhImpl');
     }
+    get favoritesOnly() {
+        return this.instQuickFilters?.includes('favoritesOnly');
+    }
 
     @bindable @persist propQuickFilters = [];
     get showUnderscoreProps() {
@@ -68,7 +75,9 @@ export class InstancesModel extends HoistModel {
     }
 
     get selectedInstances(): HoistBase[] {
-        return this.instancesGridModel.selectedIds.map((it: string) => this.getInstance(it));
+        return compact(
+            this.instancesGridModel.selectedIds.map((it: string) => this.getInstance(it))
+        );
     }
 
     constructor() {
@@ -160,6 +169,13 @@ export class InstancesModel extends HoistModel {
         }
     }
 
+    toggleFavorite(record: StoreRecord) {
+        const key = favoriteKey(record?.data);
+        if (!key) return;
+        const {favorites} = this;
+        this.favorites = favorites.includes(key) ? without(favorites, key) : [...favorites, key];
+    }
+
     togglePropsWatchlistItem(record: StoreRecord) {
         const {instanceXhId, property, isGetter} = record.data,
             {propsWatchlist} = this,
@@ -195,6 +211,9 @@ export class InstancesModel extends HoistModel {
             store: {
                 fields: [
                     {name: 'className', type: 'string'},
+                    {name: 'xhName', type: 'string'},
+                    {name: 'isFavorite', type: 'bool'},
+                    {name: 'alive', type: 'bool'},
                     {name: 'displayGroup', type: 'string'},
                     {name: 'created', type: 'date'},
                     {name: 'syncRun', type: 'number'},
@@ -218,12 +237,29 @@ export class InstancesModel extends HoistModel {
             columns: [
                 {
                     ...actionCol,
-                    width: calcActionColWidth(2),
+                    width: calcActionColWidth(3),
                     actions: [
                         {
                             icon: Icon.terminal(),
                             tooltip: 'Log to console',
-                            actionFn: ({record}) => this.logInstanceToConsole(record)
+                            actionFn: ({record}) => this.logInstanceToConsole(record),
+                            displayFn: ({record}) => ({hidden: !record.data.alive})
+                        },
+                        {
+                            icon: Icon.favorite(),
+                            actionFn: ({record}) => this.toggleFavorite(record),
+                            displayFn: ({record}) => {
+                                const {xhName, isFavorite} = record.data;
+                                return {
+                                    disabled: !xhName,
+                                    tooltip: xhName
+                                        ? 'Toggle Favorite'
+                                        : 'Set xhName to enable favorites',
+                                    icon: isFavorite
+                                        ? Icon.favorite({intent: 'warning', prefix: 'fas'})
+                                        : Icon.favorite({className: 'xh-text-color-muted'})
+                                };
+                            }
                         },
                         {
                             icon: Icon.refresh({intent: 'success'}),
@@ -234,7 +270,11 @@ export class InstancesModel extends HoistModel {
                         }
                     ]
                 },
-                {field: 'id', displayName: 'xhId'},
+                {
+                    field: 'id',
+                    displayName: 'xhId',
+                    renderer: (v, {record}) => (record.data.alive ? v : null)
+                },
                 {
                     field: 'syncRun',
                     displayName: 'Sync',
@@ -252,6 +292,8 @@ export class InstancesModel extends HoistModel {
                     renderer: v => (v ? Icon.link() : null)
                 },
                 {field: 'displayGroup', hidden: true},
+                {field: 'isFavorite', ...boolCheckCol, hidden: true},
+                {field: 'xhName', flex: 1, minWidth: 150},
                 {field: 'className', flex: 1, minWidth: 150},
                 {
                     field: 'lastLoadCompleted',
@@ -263,10 +305,8 @@ export class InstancesModel extends HoistModel {
                 },
                 {field: 'created', align: 'right', renderer: timestampRenderer}
             ],
-            rowClassFn: rec => {
-                return rec?.data.isXhImpl ? 'xh-impl-row' : null;
-            },
-            onRowDoubleClicked: ({data: rec}) => this.logInstanceToConsole(rec),
+            rowClassFn: rec => (rec?.data.isXhImpl || !rec?.data.alive ? 'xh-impl-row' : null),
+            onRowDoubleClicked: ({data: rec}) => rec?.data.alive && this.logInstanceToConsole(rec),
             xhImpl: true
         });
     }
@@ -387,11 +427,15 @@ export class InstancesModel extends HoistModel {
     private autoLoadInstancesGrid() {
         this.addAutorun({
             run: () => {
-                const {showXhImpl, instancesGridModel, selectedSyncRun} = this,
+                const {showXhImpl, favoritesOnly, favorites, instancesGridModel, selectedSyncRun} =
+                        this,
                     data = [];
 
                 XH.inspectorService.activeInstances.forEach(inst => {
-                    if (!showXhImpl && inst.isXhImpl) return;
+                    const isFavorite = favorites.includes(favoriteKey(inst));
+
+                    // A star is an explicit opt-in, so favorites show regardless of the xhImpl filter.
+                    if (favoritesOnly ? !isFavorite : !showXhImpl && inst.isXhImpl) return;
                     if (selectedSyncRun && inst.syncRun !== selectedSyncRun) return;
 
                     const displayGroup = inst.isHoistService
@@ -403,9 +447,29 @@ export class InstancesModel extends HoistModel {
                             : inst.isView
                               ? 'Views'
                               : 'Models';
-                    data.push({...inst, displayGroup});
+                    data.push({...inst, displayGroup, isFavorite, alive: true});
                 });
 
+                // Favorites with no live instance - shown so they can be seen and un-starred.
+                if (favoritesOnly && !selectedSyncRun) {
+                    const aliveKeys = new Set(data.map(favoriteKey));
+                    favorites
+                        .filter(key => !aliveKeys.has(key))
+                        .forEach(key => {
+                            const sep = key.indexOf(':'),
+                                className = key.slice(0, sep),
+                                xhName = key.slice(sep + 1);
+                            data.push({
+                                id: key,
+                                className,
+                                xhName,
+                                displayGroup: 'Not Alive',
+                                isFavorite: true,
+                                alive: false
+                            });
+                        });
+                }
+
                 instancesGridModel.loadData(data);
             }
         });
@@ -482,8 +546,7 @@ export class InstancesModel extends HoistModel {
             return null;
 
         const {xhId} = instance,
-            ctorName = instance.constructor.name,
-            instanceDisplayName = `${ctorName} [${xhId}]`,
+            instanceDisplayName = instanceLabel(instance),
             isLoadedGetter = isGetter && this.shouldLoadGetter(xhId, property),
             v = !isGetter || isLoadedGetter ? instance[property] : null,
             // Detect FormModel.values Proxy object - throws otherwise on attempt to render in grid.
@@ -554,7 +617,11 @@ export class InstancesModel extends HoistModel {
     }
 }
 
-const GROUP_SORT_ORDER = ['Models', 'Services', 'Cubes', 'Views', 'Stores'];
+const GROUP_SORT_ORDER = ['Models', 'Services', 'Cubes', 'Views', 'Stores', 'Not Alive'];
+
+/** Persistent identity for Favorites - null when the instance has no `xhName` to pin by. */
+const favoriteKey = (inst: {className?: string; xhName?: string}): string =>
+    inst?.xhName ? `${inst.className}:${inst.xhName}` : null;
 
 const timestampRenderer = v => fmtDate(v, {fmt: 'HH:mm:ss.SSS'});
 

package/inspector/instances/InstancesPanel.ts

@@ -132,6 +132,12 @@ const instanceGridBar = hoistCmp.factory<InstancesModel>(({model}) => {
                         value: 'showXhImpl',
                         tooltip:
                             'Show instances created as part of internal Hoist model/component implementations'
+                    }),
+                    button({
+                        text: 'Favorites',
+                        value: 'favoritesOnly',
+                        tooltip:
+                            'Show only favorited instances, including any not currently alive. Star any instance with an xhName to favorite it - favorites persist across reloads.'
                     })
                 ]
             }),

package/kit/react-day-picker/index.ts

@@ -6,11 +6,11 @@
  */
 import {elementFactory} from '@xh/hoist/core';
 import {ComponentType} from 'react';
-import {DayPicker} from 'react-day-picker';
-import 'react-day-picker/style.css';
+import {DayPicker} from '@daypicker/react';
+import '@daypicker/react/style.css';
 
 export {DayPicker};
-export type {DayPickerProps, Matcher} from 'react-day-picker';
+export type {DayPickerProps, Matcher} from '@daypicker/react';
 
 // DayPicker's props are a discriminated union over its selection modes. Cast to ComponentType to
 // keep our element factory ergonomic and produce portable type declarations.

package/mobile/appcontainer/LoginPanel.ts

@@ -52,6 +52,7 @@ export const loginPanel = hoistCmp.factory({
                                         bind: 'username',
                                         leftIcon: Icon.user(),
                                         autoComplete: 'username',
+                                        enablePasswordManagers: true,
                                         autoCapitalize: 'none',
                                         commitOnChange: true,
                                         testId: 'xh-login-username'
@@ -64,6 +65,7 @@ export const loginPanel = hoistCmp.factory({
                                         leftIcon: Icon.lock(),
                                         type: 'password',
                                         autoComplete: 'current-password',
+                                        enablePasswordManagers: true,
                                         commitOnChange: true,
                                         testId: 'xh-login-password'
                                     })