@xh/hoist 87.1.1 → 87.3.0

package/build/types/desktop/cmp/dock/DockViewModel.d.ts

@@ -47,6 +47,8 @@ export interface DockViewConfig {
     allowDialog?: boolean;
     /** Awaitable callback invoked on close. Return false to prevent close. */
     onClose?: () => Awaitable<boolean | void>;
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 /**
  * Model for a DockView within a DockContainer. Specifies the actual content (child component)
@@ -79,7 +81,7 @@ export declare class DockViewModel extends HoistModel {
     get isActive(): boolean;
     get renderMode(): RenderMode;
     get refreshMode(): RefreshMode;
-    constructor({ id, containerModel, title, icon, content, width, height, collapsedWidth, dialogWidth, dialogHeight, refreshMode, renderMode, docked, collapsed, allowClose, allowDialog, onClose }: DockViewConfig);
+    constructor({ id, containerModel, title, icon, content, width, height, collapsedWidth, dialogWidth, dialogHeight, refreshMode, renderMode, docked, collapsed, allowClose, allowDialog, onClose, xhName }: DockViewConfig);
     toggleDocked(): void;
     showInDialog(): void;
     showInDock(): void;

package/build/types/desktop/cmp/grouping/GroupingChooser.d.ts

@@ -25,7 +25,10 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
      * If unspecified, will default based on favorites enabled status + side.
      */
     popoverWidth?: number;
-    /** True (default) to style trigger button background and borders to match inputs. */
+    /**
+     * True (default) to style trigger button background and borders to match inputs. Set to false
+     * to render an outlined button instead.
+     */
     styleButtonAsInput?: boolean;
 }
 /**

package/build/types/desktop/cmp/input/IntentInput.d.ts

@@ -0,0 +1,38 @@
+import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistProps, Intent } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import './IntentInput.scss';
+export declare const INTENTS: Intent[];
+export interface IntentInputProps extends HoistProps, HoistInputProps {
+    /** True to render in a compact mode with reduced sizing for space-constrained contexts. */
+    compact?: boolean;
+    /**
+     * True to offer a null value, rendered as an additional outlined swatch ahead of the intents
+     * and holding the check while the value is null. Defaults to false, leaving the control a
+     * required single-select.
+     */
+    enableClear?: boolean;
+    /**
+     * Intents to offer, in render order. Defaults to all four Hoist intents - specify a subset
+     * to restrict or reorder the available choices.
+     */
+    intents?: Intent[];
+    /**
+     * True to render each intent's name alongside its swatch. Defaults to false, for the most
+     * compact presentation - note swatches always carry their intent name as a tooltip and as
+     * their accessible label, so an unlabelled control remains identifiable.
+     */
+    showNames?: boolean;
+}
+/**
+ * An input for selecting a Hoist Intent, rendered as a compact row of color swatches drawn in
+ * the intent colors themselves. The selected swatch is marked with a check and a surrounding
+ * ring; names can optionally be rendered alongside each swatch.
+ *
+ * Set `enableClear` to offer a null value, rendered as an additional outlined swatch ahead of
+ * the intents.
+ *
+ * Designed to fit within a toolbar or a dense form without additional chrome. Swatches are
+ * rendered as an ARIA radiogroup, supporting selection via click, enter/space, and arrow keys.
+ */
+export declare const IntentInput: import("react").FC<IntentInputProps>, intentInput: import("@xh/hoist/core").ElementFactory<IntentInputProps>;

package/build/types/desktop/cmp/input/NumberInput.d.ts

@@ -1,10 +1,10 @@
-import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistInputProps, PasswordManagerSupportProps } from '@xh/hoist/cmp/input';
 import { HoistProps, LayoutProps, StyleProps } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import { NumericPrecision, ZeroPad } from '@xh/hoist/format';
 import type { Property } from 'csstype';
 import { KeyboardEventHandler, ReactElement, ReactNode, Ref } from 'react';
-export interface NumberInputProps extends HoistProps, LayoutProps, StyleProps, HoistInputProps {
+export interface NumberInputProps extends HoistProps, LayoutProps, StyleProps, HoistInputProps, PasswordManagerSupportProps {
     value?: number;
     /** True to focus the control on render. */
     autoFocus?: boolean;

package/build/types/desktop/cmp/input/SegmentedControl.d.ts

@@ -6,8 +6,16 @@ export interface SegmentedControlProps extends HoistProps, HoistInputProps {
     /** True to render in a compact mode with reduced sizing for space-constrained contexts. */
     compact?: boolean;
     /**
-     * True (default) to stretch the control to fill available width,
-     * distributing space equally among options.
+     * True (default) to render all segments at an equal width when {@link fill} is enabled,
+     * dividing the available width into equal parts regardless of label length - the conventional
+     * segmented-control appearance. Set false to instead size each segment to its content and
+     * share only the leftover space, so a longer label yields a wider segment. No effect when
+     * `fill` is false.
+     */
+    equalSegmentWidths?: boolean;
+    /**
+     * True (default) to stretch the control to fill available width. Set false to size the control
+     * to its options. See `equalSegmentWidths` for how the filled width is divided up.
      */
     fill?: boolean;
     /**
@@ -23,10 +31,23 @@ export interface SegmentedControlProps extends HoistProps, HoistInputProps {
      */
     options: Array<SegmentedControlOption | SegmentedControlNullOption | OptionPrimitive>;
     /**
-     * True to render with an outlined style - a border around the control tray
-     * with no inner background fill. Border color follows the current intent.
+     * True (default) to render a border around the control tray. Border color follows the current
+     * intent. Note this controls the tray border only - it does not remove the tray background,
+     * which is governed independently by `showTrayBackground`.
      */
     outlined?: boolean;
+    /**
+     * True (default) to fill the control tray with a background, setting it off from the surface
+     * behind it. Set false to omit that fill for a lighter presentation.
+     */
+    showTrayBackground?: boolean;
+    /**
+     * True to render dividers between options, adding internal structure to the tray. Dividers
+     * are suppressed on either side of the selected option so they do not compete with it.
+     * Defaults to 'auto', showing dividers only while no option is selected - the state in which
+     * the tray offers no other cue that its options are separate and selectable.
+     */
+    showOptionDividers?: boolean | 'auto';
 }
 /**
  * An input for selecting a single value from a small set of mutually exclusive options,

package/build/types/desktop/cmp/input/TextArea.d.ts

@@ -1,9 +1,9 @@
-import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistInputProps, PasswordManagerSupportProps } from '@xh/hoist/cmp/input';
 import { HoistProps, LayoutProps, StyleProps } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import { Ref } from 'react';
 import './TextArea.scss';
-export interface TextAreaProps extends HoistProps, HoistInputProps, LayoutProps, StyleProps {
+export interface TextAreaProps extends HoistProps, HoistInputProps, PasswordManagerSupportProps, LayoutProps, StyleProps {
     value?: string;
     /** True to focus the control on render. */
     autoFocus?: boolean;

package/build/types/desktop/cmp/input/TextInput.d.ts

@@ -1,9 +1,9 @@
-import { HoistInputModel, HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistInputModel, HoistInputProps, PasswordManagerSupportProps } from '@xh/hoist/cmp/input';
 import { HoistProps, LayoutProps, StyleProps } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import type { Property } from 'csstype';
 import { FocusEvent, KeyboardEventHandler, ReactElement, ReactNode, Ref } from 'react';
-export interface TextInputProps extends HoistProps, HoistInputProps, LayoutProps, StyleProps {
+export interface TextInputProps extends HoistProps, HoistInputProps, PasswordManagerSupportProps, LayoutProps, StyleProps {
     value?: string;
     /**
      *  HTML `autocomplete` attribute to set on underlying <input> element.

package/build/types/desktop/cmp/input/index.d.ts

@@ -3,6 +3,7 @@ export * from './Checkbox';
 export * from './CheckboxButton';
 export * from './CodeInput';
 export * from './DateInput';
+export * from './IntentInput';
 export * from './JsonInput';
 export * from './NumberInput';
 export * from './Picker';

package/build/types/desktop/cmp/leftrightchooser/LeftRightChooserModel.d.ts

@@ -32,6 +32,8 @@ export interface LeftRightChooserConfig {
     rightEmptyText?: string;
     /** @internal */
     xhImpl?: boolean;
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 /** Data record object for a LeftRightChooser value item. */
 export interface LeftRightChooserItem {
@@ -82,7 +84,7 @@ export declare class LeftRightChooserModel extends HoistModel {
     get rightValues(): any[];
     /** Currently 'selected' values on the left hand side. */
     get leftValues(): any[];
-    constructor({ data, onChange, ungroupedName, leftTitle, leftSorted, leftSortBy, leftGroupingEnabled, leftGroupingExpanded, leftEmptyText, readonly, rightTitle, rightSorted, rightSortBy, rightGroupingEnabled, rightGroupingExpanded, rightEmptyText, showCounts, xhImpl }: LeftRightChooserConfig);
+    constructor({ data, onChange, ungroupedName, leftTitle, leftSorted, leftSortBy, leftGroupingEnabled, leftGroupingExpanded, leftEmptyText, readonly, rightTitle, rightSorted, rightSortBy, rightGroupingEnabled, rightGroupingExpanded, rightEmptyText, showCounts, xhName, xhImpl }: LeftRightChooserConfig);
     setData(data: LeftRightChooserItem[]): void;
     moveRows(rows: StoreRecord[]): void;
     private getTextColRenderer;

package/build/types/desktop/cmp/panel/PanelModel.d.ts

@@ -70,6 +70,8 @@ export interface PanelConfig {
     showModalToggleButton?: boolean;
     /** @internal */
     xhImpl?: any;
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 export interface PanelPersistState {
     collapsed?: boolean;
@@ -119,7 +121,7 @@ export declare class PanelModel extends HoistModel implements Persistable<PanelP
     get isActive(): boolean;
     _resizeRef: React.RefObject<HTMLDivElement>;
     splitterRef: React.RefObject<HTMLDivElement>;
-    constructor({ collapsible, resizable, resizeWhileDragging, defaultSize, minSize, maxSize, defaultCollapsed, side, modalSupport, errorBoundary, renderMode, refreshMode, persistWith, showSplitter, showSplitterCollapseButton, showHeaderCollapseButton, showModalToggleButton, xhImpl }: PanelConfig);
+    constructor({ collapsible, resizable, resizeWhileDragging, defaultSize, minSize, maxSize, defaultCollapsed, side, modalSupport, errorBoundary, renderMode, refreshMode, persistWith, showSplitter, showSplitterCollapseButton, showHeaderCollapseButton, showModalToggleButton, xhName, xhImpl }: PanelConfig);
     setCollapsed(collapsed: boolean): void;
     toggleCollapsed(): void;
     setIsModal(isModal: boolean): void;

package/build/types/desktop/cmp/rest/RestGridModel.d.ts

@@ -101,7 +101,7 @@ export declare class RestGridModel extends HoistModel {
     get selModel(): import("@xh/hoist/data").StoreSelectionModel;
     get selectedRecords(): StoreRecord[];
     get selectedRecord(): StoreRecord;
-    constructor({ readonly, toolbarActions, menuActions, formActions, showRefreshButton, actionWarning, prepareCloneFn, unit, filterFields, editors, onRowDoubleClicked, store, appData, ...rest }: RestGridConfig);
+    constructor({ readonly, toolbarActions, menuActions, formActions, showRefreshButton, actionWarning, prepareCloneFn, unit, filterFields, editors, onRowDoubleClicked, store, appData, xhName, ...rest }: RestGridConfig);
     /** Load the underlying store. */
     doLoadAsync(loadSpec: any): Promise<void>;
     /** Load the underlying store. */

package/build/types/desktop/cmp/tab/impl/TabContainer.d.ts

@@ -4,4 +4,4 @@ import '../Tabs.scss';
  * Desktop implementation of TabContainer.
  * @internal
  */
-export declare function tabContainerImpl({ model, childContainerProps, className, testId, ...props }: TabContainerProps): import("react").ReactElement<import("@xh/hoist/cmp/layout").BoxComponentProps, any>;
+export declare function tabContainerImpl({ model, childContainerProps, className, testId, domAttrs, ...props }: TabContainerProps): import("react").ReactElement<import("@xh/hoist/cmp/layout").BoxComponentProps, any>;

package/build/types/desktop/hooks/UseHotkeys.d.ts

@@ -6,9 +6,10 @@ import { HotkeyConfig } from '@blueprintjs/core/src/hooks/hotkeys/hotkeyConfig';
  * The implementation of this hook is based on BlueprintJS.
  * See their docs {@link https://blueprintjs.com/docs/#core/components/hotkeys} for more info.
  *
+ * Both args may change across renders - keys are (de)registered as they do.
+ *
  * @param child - element to be given hotkey support.  Must specify Component
  *      that takes react key events as props (e.g. boxes, panel, div, etc).
- * @param hotkeys - An array of hotkeys, or configs for hotkeys,
- *      as prescribed by blueprint. A Hotkeys element may also be provided.
+ * @param hotkeys - configs for the hotkeys to be installed, as prescribed by blueprint.
  */
-export declare function useHotkeys(child?: ReactElement<any>, hotkeys?: HotkeyConfig[]): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare function useHotkeys(child?: ReactElement<any>, hotkeys?: HotkeyConfig[]): ReactElement;

package/build/types/icon/Icon.d.ts

@@ -80,6 +80,7 @@ export declare const Icon: {
     arrowsLeftRight(p?: IconProps): any;
     arrowsRotate(p?: IconProps): any;
     arrowsUpDown(p?: IconProps): any;
+    asterisk(p?: IconProps): any;
     balanceScale(p?: IconProps): any;
     balanceScaleLeft(p?: IconProps): any;
     balanceScaleRight(p?: IconProps): any;
@@ -94,6 +95,8 @@ export declare const Icon: {
     bullhorn(p?: IconProps): any;
     calculator(p?: IconProps): any;
     calendar(p?: IconProps): any;
+    calendarDays(p?: IconProps): any;
+    calendarRange(p?: IconProps): any;
     camera(p?: IconProps): any;
     caretLeft(p?: IconProps): any;
     caretRight(p?: IconProps): any;

package/build/types/inspector/impl/InspectorUtils.d.ts

@@ -0,0 +1,3 @@
+import type { HoistBase } from '@xh/hoist/core';
+/** Label for an instance within Inspector - its `xhName` or class name, plus `xhId`. */
+export declare function instanceLabel(inst: HoistBase): string;

package/build/types/inspector/instances/InstancesModel.d.ts

@@ -23,9 +23,12 @@ export declare class InstancesModel extends HoistModel {
     loadedGetters: any[];
     instancesStoreFilter: any;
     propertiesStoreFilter: any;
+    /** Keys of favorited instances (`{className}:{xhName}`) - requires an `xhName` to pin. */
+    favorites: string[];
     instQuickFilters: string[];
     get showInGroups(): boolean;
     get showXhImpl(): boolean;
+    get favoritesOnly(): boolean;
     propQuickFilters: any[];
     get showUnderscoreProps(): boolean;
     get observablePropsOnly(): boolean;
@@ -35,6 +38,7 @@ export declare class InstancesModel extends HoistModel {
     selectInstanceAsync(xhId: string): Promise<void>;
     logInstanceToConsole(rec: StoreRecord): void;
     logPropToConsole(rec: StoreRecord): void;
+    toggleFavorite(record: StoreRecord): void;
     togglePropsWatchlistItem(record: StoreRecord): void;
     getInstance(xhId: string): HoistBase;
     private createInstancesGridModel;

package/build/types/kit/react-day-picker/index.d.ts

@@ -1,5 +1,5 @@
-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';
 export declare const dayPicker: import("@xh/hoist/core").ElementFactory<any>;

package/build/types/mobile/cmp/button/Button.d.ts

@@ -1,8 +1,8 @@
-import { LayoutProps, StyleProps, HoistModel, HoistProps, TestSupportProps, Intent } from '@xh/hoist/core';
+import { DomAttrsProps, LayoutProps, StyleProps, HoistModel, HoistProps, TestSupportProps, Intent } from '@xh/hoist/core';
 import '@xh/hoist/mobile/register';
 import { ReactNode, ReactElement, MouseEvent } from 'react';
 import './Button.scss';
-export interface ButtonProps<M extends HoistModel = HoistModel> extends HoistProps<M>, TestSupportProps, LayoutProps, StyleProps {
+export interface ButtonProps<M extends HoistModel = HoistModel> extends HoistProps<M>, TestSupportProps, DomAttrsProps, LayoutProps, StyleProps {
     active?: boolean;
     disabled?: boolean;
     icon?: ReactElement;

package/build/types/mobile/cmp/input/NumberInput.d.ts

@@ -1,10 +1,10 @@
-import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistInputProps, PasswordManagerSupportProps } from '@xh/hoist/cmp/input';
 import { HoistProps, LayoutProps, StyleProps } from '@xh/hoist/core';
 import { NumericPrecision, ZeroPad } from '@xh/hoist/format';
 import '@xh/hoist/mobile/register';
 import type { Property } from 'csstype';
 import './NumberInput.scss';
-export interface NumberInputProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
+export interface NumberInputProps extends HoistProps, HoistInputProps, PasswordManagerSupportProps, StyleProps, LayoutProps {
     value?: number;
     /** True to commit on every change/keystroke, default false. */
     commitOnChange?: boolean;

package/build/types/mobile/cmp/input/SegmentedControl.d.ts

@@ -12,8 +12,8 @@ export interface SegmentedControlProps extends HoistProps, HoistInputProps {
      */
     equalSegmentWidths?: boolean;
     /**
-     * True (default) to stretch the control to fill available width,
-     * distributing space equally among options.
+     * True (default) to stretch the control to fill available width. Set false to size the control
+     * to its options. See `equalSegmentWidths` for how the filled width is divided up.
      */
     fill?: boolean;
     /**
@@ -29,10 +29,24 @@ export interface SegmentedControlProps extends HoistProps, HoistInputProps {
      */
     options: Array<SegmentedControlOption | SegmentedControlNullOption | OptionPrimitive>;
     /**
-     * True to render with an outlined style - a border around the control tray
-     * with no inner background fill. Border color follows the current intent.
+     * True (default) to render a border around the control tray. Border color follows the current
+     * intent. Note this controls the tray border only - it does not remove the tray background,
+     * which is governed independently by `showTrayBackground`.
      */
     outlined?: boolean;
+    /**
+     * True (default) to fill the control tray with a background, setting it off from the surface
+     * behind it. Set false to omit that fill for a lighter presentation. With no tray to set a
+     * filled tile against, the selected option is indicated with a ring instead.
+     */
+    showTrayBackground?: boolean;
+    /**
+     * True to render dividers between options, adding internal structure to the tray. Dividers
+     * are suppressed on either side of the selected option so they do not compete with it.
+     * Defaults to 'auto', showing dividers only while no option is selected - the state in which
+     * the tray offers no other cue that its options are separate and selectable.
+     */
+    showOptionDividers?: boolean | 'auto';
 }
 /**
  * An input for selecting a single value from a small set of mutually exclusive options,

package/build/types/mobile/cmp/input/TextArea.d.ts

@@ -1,8 +1,8 @@
-import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistInputProps, PasswordManagerSupportProps } from '@xh/hoist/cmp/input';
 import { HoistProps, LayoutProps, StyleProps } from '@xh/hoist/core';
 import '@xh/hoist/mobile/register';
 import './TextArea.scss';
-export interface TextAreaProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
+export interface TextAreaProps extends HoistProps, HoistInputProps, PasswordManagerSupportProps, StyleProps, LayoutProps {
     value?: string;
     /** True to commit on every change/keystroke, default false. */
     commitOnChange?: boolean;

package/build/types/mobile/cmp/input/TextInput.d.ts

@@ -1,10 +1,10 @@
-import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistInputProps, PasswordManagerSupportProps } from '@xh/hoist/cmp/input';
 import { HoistProps, LayoutProps, StyleProps } from '@xh/hoist/core';
 import '@xh/hoist/mobile/register';
 import type { Property } from 'csstype';
 import { ReactElement } from 'react';
 import './TextInput.scss';
-export interface TextInputProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
+export interface TextInputProps extends HoistProps, HoistInputProps, PasswordManagerSupportProps, StyleProps, LayoutProps {
     value?: string;
     /**
      *  HTML `autocapitalize` attribute to set on underlying <input> element.

package/build/types/mobile/cmp/navigator/NavigatorModel.d.ts

@@ -35,6 +35,8 @@ export interface NavigatorConfig {
      * See enum for description of supported modes.
      */
     refreshMode?: RefreshMode;
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 /**
  * Model for handling stack-based navigation between pages.
@@ -43,6 +45,11 @@ export interface NavigatorConfig {
 export declare class NavigatorModel extends HoistModel {
     disableAppRefreshButton: boolean;
     stack: PageModel[];
+    /**
+     * Index of the active page, synced from Swiper as each transition completes. Observable so
+     * `allowSlideNext`/`allowSlidePrev` stay current - Swiper silently skips locked directions.
+     */
+    activePageIdx: number;
     pages: PageConfig[];
     track: boolean;
     pullDownToRefresh: boolean;
@@ -54,10 +61,9 @@ export declare class NavigatorModel extends HoistModel {
     private _touchStartX;
     get activePageId(): string;
     get activePage(): PageModel;
-    get activePageIdx(): number;
     get allowSlideNext(): boolean;
     get allowSlidePrev(): boolean;
-    constructor({ pages, track, pullDownToRefresh, transitionMs, renderMode, refreshMode }: NavigatorConfig);
+    constructor({ pages, track, pullDownToRefresh, transitionMs, renderMode, refreshMode, xhName }: NavigatorConfig);
     /**
      * @param callback - function to execute (once) after the next page transition.
      */

package/build/types/mobile/cmp/navigator/PageModel.d.ts

@@ -37,6 +37,8 @@ export interface PageConfig {
      * no need to specify manually.
      */
     navigatorModel?: NavigatorModel;
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 /**
  * Model for a Page within a Navigator. Specifies the actual content (i.e. page)
@@ -64,5 +66,5 @@ export declare class PageModel extends HoistModel {
     get renderMode(): RenderMode;
     get refreshMode(): RefreshMode;
     get isActive(): boolean;
-    constructor({ id, navigatorModel, content, props, renderMode, refreshMode, disableDirectLink, disableAppRefreshButton }: PageConfig);
+    constructor({ id, navigatorModel, content, props, renderMode, refreshMode, disableDirectLink, disableAppRefreshButton, xhName }: PageConfig);
 }

package/build/types/mobile/cmp/tab/impl/TabContainer.d.ts

@@ -6,4 +6,4 @@ import { TabContainerProps } from '@xh/hoist/cmp/tab';
  *
  * @internal
  */
-export declare function tabContainerImpl({ model, className, testId, ...props }: TabContainerProps): import("react").ReactElement<any, any>;
+export declare function tabContainerImpl({ model, className, testId, domAttrs, ...props }: TabContainerProps): import("react").ReactElement<any, any>;

package/build/types/svc/InspectorService.d.ts

@@ -52,6 +52,7 @@ export declare class InspectorService extends HoistService {
 }
 interface InspectorInstanceData {
     className: string;
+    xhName: string;
     created: number;
     isHoistModel: boolean;
     isHoistService: boolean;

package/build/types/utils/js/LangUtils.d.ts

@@ -1,4 +1,4 @@
-import type { Thunkable } from '@xh/hoist/core';
+import type { HoistBase, Thunkable } from '@xh/hoist/core';
 /**
  * Get a cached value on an object, creating it if it does not yet exist.
  *
@@ -121,15 +121,34 @@ export declare function mergeDeep<T, S1, S2>(object: T, source1: S1, source2: S2
 export declare function mergeDeep<T, S1, S2, S3>(object: T, source1: S1, source2: S2, source3: S3): T & S1 & S2 & S3;
 export declare function mergeDeep<T, S>(target: T, ...sources: S[]): T & S;
 /**
- * A string, or an object from which a name can be derived - via `displayName` (e.g. React
- * components) or `constructor.name` (e.g. class instances). Used for logging and tracing.
+ * A string, or an object from which a name can be derived - via `xhName` (HoistBase instances),
+ * `displayName` (e.g. React components), or `constructor.name` (class instances). Used for
+ * logging and tracing.
  */
-export type NameSource = string | {
+export type NameSource = string | HoistBase | {
     displayName: string;
 } | {
     constructor: {
         name: string;
     };
 };
-/** Resolve a {@link NameSource} to a string, or null if unresolvable. */
+/**
+ * Resolve a {@link NameSource} to a string, or null if unresolvable.
+ *
+ * A HoistBase instance is labelled per {@link formatInstanceLabel}. Other sources resolve via
+ * `xhName` or {@link parseTypeName}.
+ */
 export declare function parseNameSource(source: NameSource): string;
+/**
+ * Label for a HoistBase instance - `ClassName [xhName]`, or `ClassName [id]` (short `xhId`) when
+ * unnamed. An `xhName` matching the class name (e.g. `fetchService`) marks a singleton and is
+ * omitted.
+ */
+export declare function formatInstanceLabel(className: string, xhName: string, xhId: string): string;
+/**
+ * Resolve a {@link NameSource} to its type-level name - `displayName` or `constructor.name` -
+ * ignoring any instance-level `xhName`. Returns null if unresolvable.
+ *
+ * @internal - use {@link parseNameSource}.
+ */
+export declare function parseTypeName(source: NameSource): string;

package/cmp/README.md

@@ -174,6 +174,7 @@ techniques.
 
 | Sub-package | Description |
 |-------------|-------------|
+| `/daterange/` | DateRangePickerModel for period selection - presets, relative lookbacks, months and years, custom ranges. [See README](./daterange/README.md) |
 | `/filter/` | FilterChooserModel for building filter UIs |
 | `/grouping/` | GroupingChooserModel for dimension selection |
 | `/store/` | Store-related UI components (count label, filter field) |

package/cmp/ag-grid/AgGridModel.ts

@@ -58,6 +58,9 @@ export interface AgGridModelConfig {
 
     /** @internal */
     xhImpl?: boolean;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -125,11 +128,13 @@ export class AgGridModel extends HoistModel {
         stripeRows = true,
         showCellFocus = false,
         hideHeaders = false,
+        xhName = null,
         xhImpl = false
     }: AgGridModelConfig = {}) {
         super();
         makeObservable(this);
         this.xhImpl = xhImpl;
+        this.xhName = xhName;
 
         this.sizingMode = sizingMode;
         this.showHover = showHover;

package/cmp/badge/Badge.ts

@@ -37,8 +37,10 @@ export const [Badge, badge] = hoistCmp.withFactory<BadgeProps>({
 
     render(props, ref) {
         const classes = [],
-            [layoutProps, {className, intent, compact, icon, children, testId, ...restProps}] =
-                splitLayoutProps(props);
+            [
+                layoutProps,
+                {className, intent, compact, icon, children, testId, domAttrs, ...restProps}
+            ] = splitLayoutProps(props);
 
         if (intent) {
             classes.push(`xh-bg-intent-${intent}`);
@@ -51,7 +53,7 @@ export const [Badge, badge] = hoistCmp.withFactory<BadgeProps>({
         const divProps = mergeDeep(
             {className: classNames(className, classes)},
             {style: layoutProps},
-            {[TEST_ID]: testId},
+            {[TEST_ID]: testId, ...domAttrs},
             restProps
         );
 

package/cmp/card/Card.ts

@@ -8,6 +8,7 @@
 import {box, fieldset} from '@xh/hoist/cmp/layout';
 import {
     BoxProps,
+    DomAttrsProps,
     hoistCmp,
     HoistProps,
     Intent,
@@ -26,7 +27,7 @@ import {CardModel} from './CardModel';
 import './Card.scss';
 
 export interface CardProps<M extends CardModel = CardModel>
-    extends HoistProps<M>, TestSupportProps, LayoutProps {
+    extends HoistProps<M>, TestSupportProps, DomAttrsProps, LayoutProps {
     /** An icon placed left of the title. */
     icon?: ReactElement;
     /** Intent to apply to the inline header and border. */
@@ -75,9 +76,9 @@ export const [Card, card] = hoistCmp.withFactory<CardProps>({
         const wasDisplayed = useRef(false),
             {collapsed, renderMode} = model;
 
-        let [layoutProps, {testId, ...restProps}] = splitLayoutProps(rest);
+        let [layoutProps, {testId, domAttrs, ...restProps}] = splitLayoutProps(rest);
 
-        restProps = mergeDeep({style: layoutProps}, {[TEST_ID]: testId}, restProps);
+        restProps = mergeDeep({style: layoutProps}, {[TEST_ID]: testId, ...domAttrs}, restProps);
 
         const classes: string[] = [];
 

package/cmp/chart/ChartModel.ts

@@ -26,6 +26,9 @@ interface ChartConfig {
 
     /** @internal */
     xhImpl?: boolean;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 export interface ChartModelDefaults {
@@ -86,9 +89,16 @@ export class ChartModel extends HoistModel {
         super();
         makeObservable(this);
 
-        const {highchartsConfig, series = [], contextMenu, xhImpl = false} = config ?? {};
+        const {
+            highchartsConfig,
+            series = [],
+            contextMenu,
+            xhName = null,
+            xhImpl = false
+        } = config ?? {};
 
         this.xhImpl = xhImpl;
+        this.xhName = xhName;
         this.highchartsConfig = highchartsConfig;
         this.series = castArray(series);
         this.contextMenu = this.parseContextMenu(contextMenu);

package/cmp/clock/Clock.ts

@@ -83,7 +83,7 @@ class ClockLocalModel extends HoistModel {
 
     override onLinked() {
         this.addReaction({
-            track: () => this.componentProps.timeZone,
+            track: () => this.componentProps.timezone,
             run: () => this.loadTimezoneOffsetAsync(),
             fireImmediately: true
         });