@xh/hoist 86.1.0 → 86.3.0

package/mcp/data/ts-registry.ts

@@ -24,7 +24,7 @@ import type {
 import {resolve} from 'node:path';
 
 import {log} from '../util/logger.js';
-import {resolveRepoRoot} from '../util/paths.js';
+import {resolveRepoRoot, resolveRepoRootPosix, toPosixPath} from '../util/paths.js';
 import {computeFingerprint, loadCache, writeCache} from './index-cache.js';
 
 //------------------------------------------------------------------
@@ -295,7 +295,9 @@ function buildSymbolIndex(proj: Project): {
 } {
     const index = new Map<string, SymbolEntry[]>();
     const mIndex = new Map<string, MemberIndexEntry[]>();
-    const repoRoot = resolveRepoRoot();
+    // POSIX form: compared against ts-morph `getFilePath()`, which always uses
+    // forward slashes even on Windows.
+    const repoRoot = resolveRepoRootPosix();
 
     const counts = {total: 0, exported: 0, byKind: {} as Record<string, number>};
     let memberCount = 0;
@@ -549,7 +551,7 @@ function buildSymbolIndex(proj: Project): {
     // Index Promise prototype extensions from promise/Promise.ts
     const promiseFile = proj.getSourceFile(sf => sf.getFilePath().endsWith('/promise/Promise.ts'));
     if (promiseFile) {
-        indexPromiseExtensions(promiseFile, index, mIndex, resolveRepoRoot());
+        indexPromiseExtensions(promiseFile, index, mIndex, resolveRepoRootPosix());
     }
 
     // Populate `memberNames` on symbol entries for every member-indexed owner
@@ -799,7 +801,8 @@ function ensureProject(): Project {
  * JSDoc).
  */
 function enrichMemberIndexFromImplements(proj: Project): void {
-    const repoRoot = resolveRepoRoot();
+    // POSIX form: compared against ts-morph `getFilePath()` (see buildSymbolIndex).
+    const repoRoot = resolveRepoRootPosix();
 
     for (const sourceFile of proj.getSourceFiles()) {
         const filePath = sourceFile.getFilePath();
@@ -1374,8 +1377,12 @@ function findIndexEntry(name: string, filePath?: string): SymbolEntry | null {
 
     if (filePath) {
         // Resolve relative paths against repo root -- search results display repo-relative
-        // paths, so callers will typically pass those rather than absolute paths.
-        const resolved = filePath.startsWith('/') ? filePath : resolve(resolveRepoRoot(), filePath);
+        // paths, so callers will typically pass those rather than absolute paths. Normalize
+        // to POSIX so the comparison matches entry.filePath (ts-morph forward slashes) on
+        // Windows, and recognize Windows drive-letter absolutes (e.g. `D:/...`) as absolute.
+        const posix = toPosixPath(filePath);
+        const isAbsolute = posix.startsWith('/') || /^[a-zA-Z]:\//.test(posix);
+        const resolved = isAbsolute ? posix : toPosixPath(resolve(resolveRepoRoot(), posix));
         return exact.find(e => e.filePath === resolved) ?? null;
     }
 
@@ -1432,7 +1439,7 @@ function extractSymbolDetail(entry: SymbolEntry): SymbolDetail | null {
  *
  * `JSDoc.getDescription()` returns the text before the first JSDoc block tag,
  * but the TS parser treats ANY line whose first non-whitespace char is `@` as a
- * tag boundary - even inside a fenced ``` code block. So a canonical-usage
+ * tag boundary - even inside a fenced code block. So a canonical-usage
  * example containing e.g. `@observable.ref` silently truncates the description
  * mid-example, dropping everything after it (further examples, "SEE ALSO"
  * lists, trailing prose). See #4352.

package/mcp/formatters/typescript.ts

@@ -11,7 +11,7 @@
  */
 import {z} from 'zod';
 import type {MemberInfo, MemberIndexEntry, SymbolEntry, SymbolDetail} from '../data/ts-registry.js';
-import {resolveRepoRoot} from '../util/paths.js';
+import {resolveRepoRootPosix, toPosixPath} from '../util/paths.js';
 
 /** Remove blank lines from a JSDoc string to produce more compact output. */
 function collapseJsDoc(jsDoc: string): string {
@@ -31,8 +31,12 @@ export function truncateType(typeStr: string): string {
 
 /** Convert an absolute file path to a repo-relative path. */
 export function toRelativePath(filePath: string): string {
-    const root = resolveRepoRoot();
-    return filePath.startsWith(root) ? filePath.slice(root.length + 1) : filePath;
+    // Symbol filePaths originate from ts-morph (forward slashes on all platforms);
+    // compare in POSIX form so the repo-root prefix strips correctly on Windows,
+    // where `resolveRepoRoot()` would otherwise yield a backslash path.
+    const root = resolveRepoRootPosix();
+    const posix = toPosixPath(filePath);
+    return posix.startsWith(root) ? posix.slice(root.length + 1) : posix;
 }
 
 /**

package/mcp/util/paths.ts

@@ -39,6 +39,27 @@ export function resolveRepoRoot(): string {
     return repoRoot;
 }
 
+/** Convert a filesystem path to POSIX (forward-slash) form. */
+export function toPosixPath(p: string): string {
+    return p.replace(/\\/g, '/');
+}
+
+/**
+ * Repo root in POSIX (forward-slash) form, matching ts-morph's `getFilePath()`
+ * convention, which always reports forward slashes on every platform.
+ *
+ * On Windows, {@link resolveRepoRoot} returns a backslash path (e.g.
+ * `D:\hoist-react`) while ts-morph reports `D:/hoist-react/...`; comparing or
+ * slicing the two directly fails, silently filtering out every source file and
+ * yielding an empty symbol index. Use this whenever comparing against or
+ * slicing a ts-morph source-file path (see `data/ts-registry.ts` and
+ * `formatters/typescript.ts`). Filesystem access that stays within Node's
+ * `path` APIs should keep using {@link resolveRepoRoot}.
+ */
+export function resolveRepoRootPosix(): string {
+    return toPosixPath(resolveRepoRoot());
+}
+
 /**
  * Resolve the `@xh/hoist` library version from the repo root `package.json`.
  *

package/mobile/cmp/button/grid/ExpandToLevelButton.ts

@@ -21,7 +21,8 @@ export interface ExpandToLevelButtonProps extends MenuButtonProps {
 
 /**
  * A menu button to expand a multi-level grouped or tree grid out to a desired level.
- * Requires {@link GridConfig.levelLabels} to be configured on the bound GridModel.
+ * Requires {@link GridConfig.levelLabels} to be configured on the bound GridModel - the menu offers
+ * one entry per labelled level, so a partial array will limit the available expand-to targets.
  */
 export const [ExpandToLevelButton, expandToLevelButton] =
     hoistCmp.withFactory<ExpandToLevelButtonProps>({
@@ -51,13 +52,11 @@ export const [ExpandToLevelButton, expandToLevelButton] =
             }
 
             // Render a disabled button if requested or if we have a flat grid, or no level labels
-            const {maxDepth, expandLevel, resolvedLevelLabels} = gridModel;
+            const {maxDepth, resolvedLevelLabels} = gridModel;
             if (disabled || !maxDepth || !resolvedLevelLabels) return disabledButton();
 
             const menuItems: MenuItemLike[] = resolvedLevelLabels.map((label, idx) => {
-                const isCurrLevel =
-                    expandLevel === idx ||
-                    (expandLevel > maxDepth && idx === resolvedLevelLabels.length - 1);
+                const isCurrLevel = gridModel.isCurrentExpandLevel(idx);
 
                 return {
                     icon: isCurrLevel ? Icon.check() : Icon.placeholder(),

package/mobile/cmp/grid/impl/ColChooserModel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {GridModel} from '@xh/hoist/cmp/grid';
+import {GridModel, IColChooserModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, HSide, XH} from '@xh/hoist/core';
 import '@xh/hoist/mobile/register';
 import {bindable, action, makeObservable, observable} from '@xh/hoist/mobx';
@@ -17,7 +17,7 @@ import {clone, find, sortBy} from 'lodash';
  * It is not necessary to manually create instances of this class within an application.
  * @internal
  */
-export class ColChooserModel extends HoistModel {
+export class ColChooserModel extends HoistModel implements IColChooserModel {
     override xhImpl = true;
 
     gridModel: GridModel;

package/mobile/cmp/input/CheckboxButton.ts

@@ -44,7 +44,24 @@ class CheckboxButtonInputModel extends HoistInputModel {
 // Implementation
 //----------------------------------
 const cmp = hoistCmp.factory<CheckboxButtonInputModel>(
-    ({model, text, checkedIcon, uncheckedIcon, ...props}, ref) => {
+    (
+        {
+            // HoistInput props - exclude from passthrough to Onsen
+            bind,
+            value,
+            commitOnChange,
+            onChange,
+            onCommit,
+            // Consumed by this component
+            model,
+            text,
+            checkedIcon,
+            uncheckedIcon,
+            // Remainder passed to hoist button & Onsen button
+            ...props
+        },
+        ref
+    ) => {
         const checked = !!model.renderValue;
         return button({
             text: withDefault(text, model.getField()?.displayName),

package/mobile/cmp/input/NumberInput.ts

@@ -46,7 +46,7 @@ export interface NumberInputProps extends HoistProps, HoistInputProps, StyleProp
     /** Text to display when control is empty. */
     placeholder?: string;
 
-    /** Max decimal precision of the value, defaults to 4. */
+    /** Max decimal precision of the value, defaults to 4. Set to null for full, unrestricted precision. */
     precision?: NumericPrecision;
 
     /**

package/mobile/cmp/input/SegmentedControl.ts

@@ -85,6 +85,7 @@ export const [SegmentedControl, segmentedControl] = hoistCmp.withFactory<Segment
 interface NormalizedOption extends SegmentedControlOption {
     label: string;
     intent?: Intent;
+    testId?: string;
     _key: string;
 }
 
@@ -97,13 +98,14 @@ class SegmentedControlModel extends HoistInputModel {
         return options.map((o: any, idx: number) => {
             const key = String(idx);
             if (isObject(o)) {
-                const {label, value, icon, disabled, intent} = o as SegmentedControlOption;
+                const {label, value, icon, disabled, intent, testId} = o as SegmentedControlOption;
                 return {
                     value: this.toInternal(value),
                     label: label ?? (icon ? '' : String(value)),
                     icon,
                     disabled,
                     intent,
+                    testId,
                     _key: key
                 };
             } else {
@@ -168,7 +170,8 @@ const cmp = hoistCmp.factory<SegmentedControlModel>(({model, className, ...props
 
     const buttons = model.normalizedOptions.map(opt => {
         const optIntent = opt.intent ?? defaultIntent,
-            selected = opt._key === selectedKey;
+            selected = opt._key === selectedKey,
+            optTestId = opt.testId ?? (testId ? `${testId}-${String(opt.value)}` : null);
         // Wrap the label so it can truncate with an ellipsis when the segment is too narrow,
         // rather than hard-clipping mid-character. Pass null for icon-only options so the Button
         // renders the icon alone (an empty span would suppress that).
@@ -187,7 +190,8 @@ const cmp = hoistCmp.factory<SegmentedControlModel>(({model, className, ...props
                 selected && 'xh-segmented-control-option--selected',
                 optIntent && `xh-segmented-control-option--${optIntent}`
             ),
-            onClick: () => model.onValueChange(opt._key)
+            onClick: () => model.onValueChange(opt._key),
+            testId: optTestId
         });
     });
 

package/mobile/cmp/input/Select.ts

@@ -21,7 +21,7 @@ import {action, bindable, makeObservable, observable, override} from '@xh/hoist/
 import {debouncePromise, wait} from '@xh/hoist/promise';
 import {throwIf, withDefault, mergeDeep} from '@xh/hoist/utils/js';
 import {createObservableRef, getLayoutProps} from '@xh/hoist/utils/react';
-import {escapeRegExp, isEqual, isNil, isPlainObject, keyBy} from 'lodash';
+import {escapeRegExp, isEqual, isNil, isPlainObject, unionWith} from 'lodash';
 import {Children, ReactNode, ReactPortal} from 'react';
 import ReactDom from 'react-dom';
 import './Select.scss';
@@ -157,6 +157,15 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
 
     /** Field on provided options for sourcing each option's value (default `value`). */
     valueField?: string;
+
+    /**
+     * Function to generate a `SelectOption` for a (non-null) selected value not present in the
+     * current options list. Return null to fall back to the default value-as-label behavior.
+     *
+     * Useful with queryFn-based selects, readonly forms, or any case where options may not be
+     * loaded when a value is set, ensuring the value renders with its proper label.
+     */
+    generateOptionFn?: (value: any) => SelectOption;
 }
 
 /**
@@ -377,7 +386,8 @@ class SelectInputModel extends HoistInputModel {
 
     // Convert external value into option object(s). Options created if missing - this takes the
     // external value from the model, and we will respect that even if we don't know about it.
-    // (Exception for a null value, which we will only accept if explicitly present in options.)
+    // (Exception for a null value, which is never synthesized - accepted only if provided via
+    // options.)
     override toInternal(external) {
         return this.findOption(external, !isNil(external));
     }
@@ -393,7 +403,10 @@ class SelectInputModel extends HoistInputModel {
             }
         }
 
-        return createIfNotFound ? this.valueToOption(value) : null;
+        if (!createIfNotFound) return null;
+
+        // Value not among options - let the app generate an option for it, else synthesize one.
+        return this.componentProps.generateOptionFn?.(value) ?? this.valueToOption(value);
     }
 
     override toExternal(internal) {
@@ -453,15 +466,9 @@ class SelectInputModel extends HoistInputModel {
 
                 // Carry forward and add to any existing internalOpts to allow our value
                 // converters to continue all selected values in multiMode.
-                const matchesByVal = keyBy(matchOpts, 'value'),
-                    newOpts = [...matchOpts];
-
-                this.internalOptions.forEach(currOpt => {
-                    const matchOpt = matchesByVal[currOpt.value];
-                    if (!matchOpt) newOpts.push(currOpt); // avoiding dupes
-                });
-
-                this.internalOptions = newOpts;
+                this.internalOptions = unionWith(matchOpts, this.internalOptions, (a, b) =>
+                    isEqual(a.value, b.value)
+                );
 
                 // But only return the matching options back to the combo.
                 return matchOpts;
@@ -484,8 +491,7 @@ class SelectInputModel extends HoistInputModel {
     // Option Rendering
     //----------------------
     formatOptionLabel = (opt, params) => {
-        // Always display the standard label string in the value container (context == 'value').
-        // If we need to expose customization here, we could consider a dedicated prop.
+        // Display the standard label string in the value container (context == 'value').
         if (params.context !== 'menu') {
             return opt.label;
         }
@@ -501,7 +507,7 @@ class SelectInputModel extends HoistInputModel {
             return div(opt.label);
         }
 
-        return this.externalValue === opt.value
+        return isEqual(this.externalValue, opt.value)
             ? hbox({
                   items: [
                       div({

package/mobx/README.md

@@ -45,7 +45,8 @@ The following are re-exported from MobX and mobx-react-lite:
 
 The package configures MobX with `enforceActions: 'observed'`, meaning any modification to
 an observable property that is currently being observed must occur inside an `@action` method,
-`runInAction()` block, or `@bindable` setter. MobX logs a warning if this rule is violated.
+`runInAction()` block, `@bindable` setter, or a `reaction`/`when` run callback (MobX
+auto-wraps these in an action). MobX logs a warning if this rule is violated.
 
 This enforcement prevents accidental state mutations and makes data flow predictable.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "86.1.0",
+  "version": "86.3.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": {
     "type": "git",
@@ -38,15 +38,15 @@
     ]
   },
   "dependencies": {
-    "@auth0/auth0-spa-js": "~2.21.1",
-    "@azure/msal-browser": "~5.14.0",
+    "@auth0/auth0-spa-js": "~2.23.0",
+    "@azure/msal-browser": "~5.16.0",
     "@blueprintjs/core": "^6.3.2",
     "@blueprintjs/datetime": "^6.0.6",
-    "@codemirror/commands": "~6.10.3",
-    "@codemirror/language": "~6.12.3",
-    "@codemirror/language-data": "~6.5.2",
-    "@codemirror/lint": "~6.9.6",
-    "@codemirror/state": "~6.6.0",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/language-data": "^6.5.2",
+    "@codemirror/lint": "^6.9.6",
+    "@codemirror/state": "^6.7.0",
     "@codemirror/view": "^6.43.0",
     "@fortawesome/fontawesome-pro": "^7.2.0",
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
@@ -90,7 +90,7 @@
     "semver": "~7.8.0",
     "short-unique-id": "~5.3.2",
     "store2": "~2.14.3",
-    "swiper": "^12.1.2",
+    "swiper": "^14.0.0",
     "ts-morph": "^27.0.2",
     "tsx": "^4.21.0",
     "ua-parser-js": "~2.0.4",
@@ -118,7 +118,7 @@
     "react-dom": "~18.2.0",
     "stylelint": "17.x",
     "stylelint-config-standard-scss": "17.x",
-    "type-fest": "4.x",
+    "type-fest": "5.x",
     "typescript": "~5.9.3"
   },
   "resolutions": {

package/styles/vars.scss

@@ -844,6 +844,21 @@ body {
   --xh-tab-font-size: var(--tab-font-size, var(--xh-font-size));
   --xh-tab-font-size-px: calc(var(--xh-tab-font-size) * 1px);
 
+  // Vertical (left/right) TabSwitcher - the styled "rail" of rounded, hoverable items with a
+  // filled active "pill". All overridable via the unprefixed hooks.
+  --xh-tab-switcher-vertical-min-width: var(--tab-switcher-vertical-min-width, auto);
+  --xh-tab-switcher-vertical-padding: var(--tab-switcher-vertical-padding, var(--xh-pad-half-px));
+  --xh-tab-switcher-vertical-border: var(--tab-switcher-vertical-border, var(--xh-border-solid));
+  --xh-tab-switcher-vertical-item-gap: var(--tab-switcher-vertical-item-gap, 2px);
+  --xh-tab-switcher-vertical-item-padding: var(--tab-switcher-vertical-item-padding, var(--xh-pad-half-px) var(--xh-pad-px));
+  --xh-tab-switcher-vertical-item-border-radius: var(--tab-switcher-vertical-item-border-radius, var(--xh-border-radius-px));
+  --xh-tab-switcher-vertical-item-text-color: var(--tab-switcher-vertical-item-text-color, var(--xh-text-color-muted));
+  --xh-tab-switcher-vertical-item-active-text-color: var(--tab-switcher-vertical-item-active-text-color, var(--xh-tab-active-text-color));
+  --xh-tab-switcher-vertical-item-hover-bg: var(--tab-switcher-vertical-item-hover-bg, var(--xh-bg-alt));
+  --xh-tab-switcher-vertical-item-active-bg: var(--tab-switcher-vertical-item-active-bg, var(--xh-bg-highlight));
+  --xh-tab-switcher-vertical-item-font-weight: var(--tab-switcher-vertical-item-font-weight, 500);
+  --xh-tab-switcher-vertical-item-active-font-weight: var(--tab-switcher-vertical-item-active-font-weight, 600);
+
   &.xh-dark {
     --xh-tab-active-text-color: var(--tab-active-text-color, var(--xh-intent-primary-lighter));
   }

package/desktop/cmp/filter/PopoverFilterChooser.scss

@@ -1,42 +0,0 @@
-/*
- * 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.
- */
-.xh-popover-filter-chooser {
-  & > .bp6-popover-target {
-    display: flex;
-    flex: 1;
-  }
-
-  // Extra class names required to override the default styles of the popover
-  &__popover.bp6-popover.bp6-minimal {
-    margin-top: -15px !important;
-    box-shadow: none;
-
-    .bp6-popover-content {
-      background: transparent;
-    }
-
-    .xh-select__value-container--is-multi {
-      height: unset;
-      line-height: unset;
-    }
-  }
-
-  &__filter-chooser {
-    .xh-select__value-container--is-multi {
-      overflow-y: hidden !important;
-    }
-
-    .xh-select {
-      .xh-select__control--is-disabled {
-        background: var(--xh-input-bg);
-      }
-      .xh-select__multi-value--is-disabled .xh-select__multi-value__label {
-        color: unset;
-      }
-    }
-  }
-}