@xh/hoist 87.1.1 → 87.3.0

package/mobile/cmp/navigator/NavigatorModel.ts

@@ -52,6 +52,9 @@ export interface NavigatorConfig {
      * See enum for description of supported modes.
      */
     refreshMode?: RefreshMode;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -64,6 +67,12 @@ export class NavigatorModel extends HoistModel {
     @bindable.ref
     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.
+     */
+    @bindable activePageIdx: number = 0;
+
     pages: PageConfig[] = [];
     track: boolean;
     pullDownToRefresh: boolean;
@@ -83,10 +92,6 @@ export class NavigatorModel extends HoistModel {
         return this.stack[this.activePageIdx];
     }
 
-    get activePageIdx(): number {
-        return this._swiper?.activeIndex ?? 0;
-    }
-
     get allowSlideNext(): boolean {
         return this.activePageIdx < this.stack.length - 1;
     }
@@ -101,10 +106,12 @@ export class NavigatorModel extends HoistModel {
         pullDownToRefresh = true,
         transitionMs = 500,
         renderMode = 'lazy',
-        refreshMode = 'onShowLazy'
+        refreshMode = 'onShowLazy',
+        xhName = null
     }: NavigatorConfig) {
         super();
         makeObservable(this);
+        this.xhName = xhName;
 
         ensureNotEmpty(pages, 'NavigatorModel needs at least one page.');
         ensureUniqueBy(pages, 'id', 'Multiple NavigatorModel PageModels have the same id.');
@@ -213,8 +220,9 @@ export class NavigatorModel extends HoistModel {
     /** @internal */
     @action
     onPageChange = () => {
-        // 1) Clear any pages after the active page. These can be left over from a back swipe.
-        this.stack = this.stack.slice(0, this._swiper.activeIndex + 1);
+        // 1) Sync the active index, then clear any pages after it - left over from a back swipe.
+        this.activePageIdx = this._swiper.activeIndex;
+        this.stack = this.stack.slice(0, this.activePageIdx + 1);
 
         // 2) Sync route to match the current page stack
         const newRouteName = this.stack.map(it => it.id).join('.'),
@@ -298,7 +306,8 @@ export class NavigatorModel extends HoistModel {
         if (init) {
             this.stack = stack;
             this._swiper.update();
-            this._swiper.activeIndex = this.stack.length - 1;
+            this.activePageIdx = this.stack.length - 1;
+            this._swiper.activeIndex = this.activePageIdx;
             return;
         }
 
@@ -310,6 +319,9 @@ export class NavigatorModel extends HoistModel {
             forwardOnePage = isEqual(newKeyStack.slice(0, -1), currKeyStack);
 
         if (backOnePage) {
+            // Set directly - a stale `false` here makes slidePrev() a silent no-op.
+            this._swiper.allowSlidePrev = true;
+
             // Don't update the stack yet. Instead, wait until after the animation has
             // completed in onPageChange().
             this._swiper.slidePrev(transitionMs);

package/mobile/cmp/navigator/PageModel.ts

@@ -62,6 +62,9 @@ export interface PageConfig {
      * no need to specify manually.
      */
     navigatorModel?: NavigatorModel;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -116,7 +119,8 @@ export class PageModel extends HoistModel {
         renderMode,
         refreshMode,
         disableDirectLink,
-        disableAppRefreshButton
+        disableAppRefreshButton,
+        xhName = null
     }: PageConfig) {
         super();
         makeObservable(this);
@@ -127,6 +131,7 @@ export class PageModel extends HoistModel {
 
         this.id = id;
         this.navigatorModel = navigatorModel;
+        this.xhName = xhName ?? navigatorModel?.childXhName(id);
         this.content = content;
         this.props = withDefault(props, {});
         this.disableDirectLink = withDefault(disableDirectLink, false);

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

@@ -20,7 +20,13 @@ import {TabContainerProps, TabModel, TabSwitcherProps} from '@xh/hoist/cmp/tab';
  *
  * @internal
  */
-export function tabContainerImpl({model, className, testId, ...props}: TabContainerProps) {
+export function tabContainerImpl({
+    model,
+    className,
+    testId,
+    domAttrs,
+    ...props
+}: TabContainerProps) {
     const switcherProps = getSwitcherProps(props),
         {activeTab} = model,
         tabs = model.tabs.filter(it => !it.excludeFromSwitcher),
@@ -34,6 +40,7 @@ export function tabContainerImpl({model, className, testId, ...props}: TabContai
     if (isEmpty(tabs)) {
         return page({
             [TEST_ID]: testId,
+            ...domAttrs,
             className: 'xh-tab-page',
             item: placeholder(model.emptyText)
         });
@@ -41,6 +48,7 @@ export function tabContainerImpl({model, className, testId, ...props}: TabContai
 
     return onsenTabbar({
         [TEST_ID]: testId,
+        ...domAttrs,
         className: classNames(className, `xh-tab-container--${switcherProps?.orientation}`),
         position: switcherProps?.orientation,
         activeIndex: activeTab ? tabs.indexOf(activeTab) : 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "87.1.1",
+  "version": "87.3.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": {
     "type": "git",
@@ -48,8 +48,9 @@
     "@codemirror/language": "^6.12.4",
     "@codemirror/language-data": "^6.5.2",
     "@codemirror/lint": "^6.9.7",
-    "@codemirror/state": "^6.7.1",
-    "@codemirror/view": "^6.43.9",
+    "@codemirror/state": "^6.7.4",
+    "@codemirror/view": "^6.43.11",
+    "@daypicker/react": "^10.0.1",
     "@floating-ui/react": "^0.27.20",
     "@fortawesome/fontawesome-pro": "^7.3.1",
     "@fortawesome/fontawesome-svg-core": "^7.3.1",
@@ -64,9 +65,9 @@
     "classnames": "^2.5.1",
     "commander": "^15.0.0",
     "core-js": "^3.50.0",
-    "dompurify": "^3.4.14",
+    "dompurify": "^3.4.15",
     "fast-deep-equal": "^3.1.3",
-    "filesize": "~11.0.22",
+    "filesize": "~11.0.23",
     "http-status-codes": "^2.3.0",
     "inter-ui": "~4.1.1",
     "jwt-decode": "^4.0.0",
@@ -77,14 +78,13 @@
     "moment": "~2.30.1",
     "numbro": "~2.5.0",
     "onsenui": "~2.12.9",
-    "qs": "^6.15.3",
-    "react-day-picker": "^9.14.0",
+    "qs": "^6.16.0",
     "react-dropzone": "~20.1.1",
     "react-grid-layout": "~2.2.4",
     "react-markdown": "~10.1.0",
     "react-onsenui": "~1.13.3",
     "react-select": "~5.10.2",
-    "react-window": "~2.3.0",
+    "react-window": "~2.3.1",
     "react-windowed-select": "~5.2.0",
     "remark-breaks": "~4.0.0",
     "remark-gfm": "~4.0.1",
@@ -96,10 +96,10 @@
     "store2": "^2.14.4",
     "swiper": "~12.2.0",
     "ts-morph": "^27.0.2",
-    "tsx": "^4.23.12",
+    "tsx": "^4.23.13",
     "ua-parser-js": "^2.0.10",
     "unified": "~11.0.5",
-    "zod": "^4.4.3"
+    "zod": "^4.5.4"
   },
   "peerDependencies": {
     "react": "^19.2.0",
@@ -108,25 +108,25 @@
   "devDependencies": {
     "@types/lodash": "^4.17.25",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "@xh/eslint-config": "^8.0.0",
-    "@xh/hoist-dev-utils": "^14.0.1",
+    "@types/react-dom": "^19.2.7",
+    "@xh/eslint-config": "^8.0.1",
+    "@xh/hoist-dev-utils": "^15.0.1",
     "ag-grid-community": "^35.3.1",
     "ag-grid-react": "^35.3.1",
     "csstype": "^3.2.3",
-    "eslint": "^10.9.1",
+    "eslint": "^10.10.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-tsdoc": "^0.5.2",
-    "globals": "^17.11.0",
+    "globals": "^17.12.0",
     "husky": "^9.1.7",
-    "lint-staged": "^17.3.0",
-    "postcss": "^8.5.26",
+    "lint-staged": "^17.5.0",
+    "postcss": "^8.5.28",
     "prettier": "^3.9.6",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "stylelint": "^17.14.1",
+    "stylelint": "^17.15.0",
     "stylelint-config-recommended-scss": "^17.0.1",
-    "type-fest": "^5.8.0",
+    "type-fest": "^5.9.0",
     "typescript": "^5.9.3"
   },
   "scripts": {

package/styles/vars.scss

@@ -684,7 +684,7 @@ body {
   //------------------------
   // Segmented Control
   //------------------------
-  --xh-segmented-control-bg: var(--segmented-control-bg, #{color.mix(mc('blue-grey', '100'), mc('blue-grey', '50'))});
+  --xh-segmented-control-bg: var(--segmented-control-bg, var(--xh-bg-alt));
   --xh-segmented-control-selected-bg: var(--segmented-control-selected-bg, var(--xh-bg));
   --xh-segmented-control-text-color: var(--segmented-control-text-color, color-mix(in srgb, var(--xh-text-color) 75%, var(--xh-segmented-control-bg)));
   --xh-segmented-control-selected-text-color: var(--segmented-control-selected-text-color, var(--xh-text-color));
@@ -694,10 +694,40 @@ body {
   --xh-segmented-control-pad-px: calc(var(--xh-segmented-control-pad) * 1px);
 
   &.xh-dark {
-    --xh-segmented-control-bg: var(--segmented-control-bg, #{color.mix(mc('blue-grey', '800'), mc('blue-grey', '900'))});
+    // Tray bg follows --xh-bg-alt in both themes - no dark-mode override needed.
     --xh-segmented-control-selected-bg: var(--segmented-control-selected-bg, #{mc('blue-grey', '700')});
   }
 
+  //------------------------
+  // Intent Input
+  //------------------------
+  --xh-intent-input-swatch-size-px: var(--intent-input-swatch-size-px, 20px);
+  --xh-intent-input-compact-swatch-size-px: var(--intent-input-compact-swatch-size-px, 16px);
+  --xh-intent-input-gap-px: var(--intent-input-gap-px, var(--xh-pad-half-px));
+  --xh-intent-input-border-radius-px: var(--intent-input-border-radius-px, var(--xh-border-radius-px));
+
+  //------------------------
+  // Date Range Picker
+  //------------------------
+  --xh-date-range-picker-popover-width: var(--date-range-picker-popover-width, 640px);
+  --xh-date-range-picker-popover-single-width: var(--date-range-picker-popover-single-width, 300px);
+  --xh-date-range-picker-popover-min-height: var(--date-range-picker-popover-min-height, 322px);
+  --xh-date-range-picker-accent: var(--date-range-picker-accent, var(--xh-intent-primary));
+  --xh-date-range-picker-accent-text-color: var(--date-range-picker-accent-text-color, var(--xh-white));
+  --xh-date-range-picker-selected-bg: var(--date-range-picker-selected-bg, var(--xh-bg-highlight));
+  --xh-date-range-picker-hover-bg: var(--date-range-picker-hover-bg, var(--xh-grid-bg-hover));
+  --xh-date-range-picker-date-font-family: var(--date-range-picker-date-font-family, var(--xh-font-family-mono));
+  --xh-date-range-picker-date-font-size: var(--date-range-picker-date-font-size, 12px);
+  --xh-date-range-picker-row-height: var(--date-range-picker-row-height, 32px);
+  --xh-date-range-picker-day-size: var(--date-range-picker-day-size, 26px);
+  --xh-date-range-picker-footer-bg: var(--date-range-picker-footer-bg, var(--xh-tbar-bg));
+  // Tab rail stays on the popover background in light theme, where a distinct fill would set
+  // muted tab labels on grey and lose contrast. In dark theme a distinct fill reads well.
+  --xh-date-range-picker-rail-bg: var(--date-range-picker-rail-bg, transparent);
+
+  &.xh-dark {
+    --xh-date-range-picker-rail-bg: var(--date-range-picker-rail-bg, var(--xh-tbar-bg));
+  }
 
   //------------------------
   // Mask + LoadingIndicator

package/svc/InspectorService.ts

@@ -201,6 +201,7 @@ export class InspectorService extends HoistService {
                 return {
                     id: xhId,
                     className: inst.constructor.name,
+                    xhName: inst.xhName,
                     created: inst._created,
                     isHoistService: inst.isHoistService,
                     isHoistModel: inst.isHoistModel,
@@ -239,6 +240,7 @@ export class InspectorService extends HoistService {
 
 interface InspectorInstanceData {
     className: string;
+    xhName: string;
     created: number;
     isHoistModel: boolean;
     isHoistService: boolean;

package/svc/TraceService.ts

@@ -6,7 +6,7 @@
  */
 import {HoistService, PlainObject, XH, Span, FullSpanConfig} from '@xh/hoist/core';
 import {SECONDS} from '@xh/hoist/utils/datetime';
-import {debounced, parseNameSource} from '@xh/hoist/utils/js';
+import {debounced, parseTypeName} from '@xh/hoist/utils/js';
 import {every, forEach, groupBy, isEmpty, isString, omitBy, takeRight} from 'lodash';
 import {terminationSafePostJson} from './impl/Fetch';
 
@@ -119,12 +119,15 @@ export class TraceService extends HoistService {
 
         // Apply default tags - safe to call even before identity is resolved (getUsername is null).
         // Remove nulls they are used in this API to just prevent defaults
+        const {caller} = ret,
+            xhName = caller?.['xhName'];
         ret.tags = {
             'xh.clientApp': XH.clientAppCode,
             'xh.loadId': XH.loadId,
             'xh.tabId': XH.tabId,
             'xh.source': ret.name.startsWith('xh.') ? 'hoist' : 'app',
-            ...(ret.caller ? {'code.namespace': parseNameSource(ret.caller)} : {}),
+            ...(caller ? {'code.namespace': parseTypeName(caller)} : {}),
+            ...(xhName ? {'xh.name': xhName} : {}),
             ...this.identityTags(),
             ...ret.tags
         };

package/utils/js/LangUtils.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import type {PlainObject, Thunkable} from '@xh/hoist/core';
+import type {HoistBase, PlainObject, Thunkable} from '@xh/hoist/core';
 import {Exception} from '@xh/hoist/exception';
 import {
     flatMap,
@@ -282,13 +282,45 @@ export function mergeDeep(target: PlainObject, ...sources: PlainObject[]): Plain
 }
 
 /**
- * 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 | {displayName: string} | {constructor: {name: 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 function parseNameSource(source: NameSource): string {
+    if (!source) return null;
+    if (isString(source)) return source;
+    const typeName = parseTypeName(source);
+    if (!source['isHoistBase']) return source['xhName'] || typeName;
+    return formatInstanceLabel(typeName, source['xhName'], source['xhId']);
+}
+
+/**
+ * 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 function formatInstanceLabel(className: string, xhName: string, xhId: string): string {
+    if (!xhName) return `${className} [${xhId.replace(/^xh-id-/, '')}]`;
+    return xhName.toLowerCase() === className.toLowerCase()
+        ? className
+        : `${className} [${xhName}]`;
+}
+
+/**
+ * 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 function parseTypeName(source: NameSource): string {
     if (!source) return null;
     if (isString(source)) return source;
     if (source['displayName']) return source['displayName'];