@xh/hoist 86.1.0 → 86.2.0

package/desktop/cmp/tab/Tabs.scss

@@ -36,9 +36,36 @@
     }
   }
 
+  // Generic tab defaults - orientation-specific blocks below layer on top of these.
+  .bp6-tab {
+    color: var(--xh-tab-text-color);
+
+    &[aria-disabled='true'] {
+      color: var(--xh-tab-disabled-text-color);
+    }
+
+    // Tooltip
+    .bp6-popover-target {
+      width: 100%;
+    }
+  }
+
+  // Active/hover color override
+  .bp6-tab[aria-selected='true'],
+  .bp6-tab:not([aria-disabled='true']):hover {
+    .xh-tab-switcher__tab {
+      color: var(--xh-tab-active-text-color);
+    }
+  }
+
   &--top {
     padding-left: var(--xh-pad-px);
     max-width: 100%;
+
+    // Active indicator sits on the bottom edge of the tab, adjacent to the content below.
+    .bp6-tab[aria-selected='true'] {
+      box-shadow: inset 0 -3px 0 var(--xh-tab-active-text-color);
+    }
   }
 
   &--bottom {
@@ -56,6 +83,8 @@
   &--right {
     flex-direction: column;
     max-height: 100%;
+    min-width: var(--xh-tab-switcher-vertical-min-width);
+    padding: var(--xh-tab-switcher-vertical-padding);
 
     // Make overflow button full width
     .bp6-popover-target {
@@ -65,6 +94,49 @@
         width: 100%;
       }
     }
+
+    // Modern vertical rail: rounded, padded items with a muted resting color, a clear hover
+    // affordance, and a filled active "pill". Fully driven off the --xh-tab-switcher-vertical-*
+    // tokens so it stays light/dark-theme safe and is easily customized or disabled per-app.
+    .bp6-tab {
+      margin-bottom: var(--xh-tab-switcher-vertical-item-gap);
+      padding: var(--xh-tab-switcher-vertical-item-padding);
+      border-radius: var(--xh-tab-switcher-vertical-item-border-radius);
+      color: var(--xh-tab-switcher-vertical-item-text-color);
+      font-weight: var(--xh-tab-switcher-vertical-item-font-weight);
+      transition:
+        background-color 0.15s ease,
+        color 0.15s ease,
+        box-shadow 0.15s ease;
+    }
+
+    .bp6-tab:not([aria-disabled='true']):hover {
+      background-color: var(--xh-tab-switcher-vertical-item-hover-bg);
+    }
+
+    .bp6-tab[aria-selected='true'] {
+      background-color: var(--xh-tab-switcher-vertical-item-active-bg);
+      font-weight: var(--xh-tab-switcher-vertical-item-active-font-weight);
+    }
+
+    // Hover + active labels take the active/intent text color, re-applied to both the tab and its
+    // inner label so it overrides the muted resting color set on the item above.
+    .bp6-tab[aria-selected='true'],
+    .bp6-tab:not([aria-disabled='true']):hover {
+      color: var(--xh-tab-switcher-vertical-item-active-text-color);
+
+      .xh-tab-switcher__tab {
+        color: var(--xh-tab-switcher-vertical-item-active-text-color);
+      }
+    }
+  }
+
+  &--left {
+    border-right: var(--xh-tab-switcher-vertical-border);
+  }
+
+  &--right {
+    border-left: var(--xh-tab-switcher-vertical-border);
   }
 
   &__tab {
@@ -104,29 +176,4 @@
       min-height: 20px !important;
     }
   }
-
-  .bp6-tab {
-    color: var(--xh-tab-text-color);
-
-    &[aria-disabled='true'] {
-      color: var(--xh-tab-disabled-text-color);
-    }
-
-    // Tooltip
-    .bp6-popover-target {
-      width: 100%;
-    }
-  }
-
-  // Active/hover color override
-  .bp6-tab[aria-selected='true'],
-  .bp6-tab:not([aria-disabled='true']):hover {
-    .xh-tab-switcher__tab {
-      color: var(--xh-tab-active-text-color);
-    }
-  }
-
-  .bp6-tab[aria-selected='true'] {
-    box-shadow: inset 0 -3px 0 var(--xh-tab-active-text-color);
-  }
 }

package/format/FormatNumber.ts

@@ -14,6 +14,7 @@ import {
     isNil,
     isNumber,
     isString,
+    isUndefined,
     round
 } from 'lodash';
 import Numbro from 'numbro';
@@ -78,8 +79,9 @@ export interface NumberFormatOptions extends Omit<FormatOptions<number>, 'toolti
     omitFourDigitComma?: boolean;
 
     /**
-     * Desired number of decimal places, or 'auto' (default) to adjust the displayed precision
-     * automatically based on the scale of the value.
+     * Desired number of decimal places, 'auto' (default) to adjust the displayed precision
+     * automatically based on the scale of the value, or null for full, unrestricted precision
+     * (capped at the max supported precision, with trailing zeros trimmed).
      */
     precision?: Precision;
 
@@ -118,15 +120,23 @@ export interface NumberFormatOptions extends Omit<FormatOptions<number>, 'toolti
      *
      * e.g. `{precision:4, zeroPad:2}` will format `1.2` → "1.20" and `1.234` → "1.234"
      *
-     * Default is true if a fixed precision is set, false if precision is 'auto'.
+     * Default is true if a fixed precision is set, false if precision is 'auto' or null (full).
      */
     zeroPad?: ZeroPad;
 }
 
 export interface QuantityFormatOptions extends NumberFormatOptions {
+    /** True to compact values \>= 1 million into units of millions (m). Default true. */
     useMillions?: boolean;
 
+    /** True to compact values \>= 1 billion into units of billions (b). Default true. */
     useBillions?: boolean;
+
+    /**
+     * True to compact to m/b units only when no precision is lost, else render the full value.
+     * Default false.
+     */
+    lossless?: boolean;
 }
 
 /** Config for pos/neg/neutral color classes. */
@@ -175,9 +185,16 @@ export function fmtNumber(v: number, opts?: NumberFormatOptions): ReactNode {
     } = opts ?? ({} as NumberFormatOptions);
     if (isInvalidInput(v)) return nullDisplay;
 
-    // Ensure any non-int precision is treated as 'auto', use to default zeroPad.
-    if (!isInteger(precision)) precision = 'auto';
-    if (isNil(zeroPad)) zeroPad = precision != 'auto';
+    // Resolve precision: null means full precision, other non-integers (e.g. undefined) mean 'auto'.
+    const fullPrecision = precision === null;
+    if (fullPrecision) {
+        precision = MAX_NUMERIC_PRECISION;
+    } else if (!isInteger(precision)) {
+        precision = 'auto';
+    }
+
+    // Default zeroPad to pad only for a fixed precision - 'auto' and full precision trim zeros.
+    if (isNil(zeroPad)) zeroPad = precision != 'auto' && !fullPrecision;
 
     formatConfig =
         formatConfig || buildFormatConfig(v, precision, zeroPad, withCommas, omitFourDigitComma);
@@ -271,20 +288,40 @@ export function fmtQuantity(v: number, opts?: QuantityFormatOptions) {
     saveOriginal(v, opts);
     if (isInvalidInput(v)) return fmtNumber(v, opts);
 
-    const lessThanM = Math.abs(v) < MILLION,
-        lessThanB = Math.abs(v) < BILLION;
-
     defaults(opts, {
         ledger: true,
         label: true,
-        precision: lessThanM ? 0 : 2,
         useMillions: true,
-        useBillions: true
+        useBillions: true,
+        lossless: false
     });
 
-    if (lessThanM || !opts.useMillions) return fmtNumber(v, opts);
-    if (lessThanB || !opts.useBillions) return fmtMillions(v, opts);
-    return fmtBillions(v, opts);
+    const absV = Math.abs(v),
+        lessM = absV < MILLION,
+        lessB = absV < BILLION,
+        targetPrecision = opts.precision ?? (lessM ? 0 : 2);
+
+    // Compute scaling, if any (Lossless flag may preclude).
+    let scale = !lessB && opts.useBillions ? BILLION : !lessM && opts.useMillions ? MILLION : null;
+    if (scale && opts.lossless) {
+        const precision = parsePrecision(absV / scale, targetPrecision),
+            lossy = v % (scale / 10 ** precision) !== 0;
+        if (lossy) scale = null;
+    }
+
+    // Resolve render precision (unless the caller set one).
+    if (isUndefined(opts.precision)) {
+        opts.precision = opts.lossless ? null : targetPrecision;
+    }
+
+    switch (scale) {
+        case BILLION:
+            return fmtBillions(v, opts);
+        case MILLION:
+            return fmtMillions(v, opts);
+        default:
+            return fmtNumber(v, opts);
+    }
 }
 
 /**
@@ -462,6 +499,23 @@ function calcStyleFromColorSpec(v: number, colorSpec: ColorSpec | boolean): CSSP
     return !isString(possibleStyles) ? possibleStyles : {};
 }
 
+/**
+ * Resolve a precisionSpec to a concrete number of decimal places. A fixed precision is used as-is
+ * (capped at max), while 'auto' is derived from the scale of the value.
+ */
+function parsePrecision(v: number, precisionSpec: Precision): number {
+    // Fixed precision - use requested, capped at max.
+    if (precisionSpec !== 'auto') return Math.min(precisionSpec, MAX_NUMERIC_PRECISION);
+
+    // 'auto' - derive from the scale of the value.
+    const absVal = Math.abs(v);
+    if (absVal === 0) return 2;
+    if (absVal < 0.01) return 6;
+    if (absVal < 100) return 4;
+    if (absVal < 10000) return 2;
+    return 0;
+}
+
 function buildFormatConfig(
     v: number,
     precisionSpec: Precision,
@@ -472,24 +526,7 @@ function buildFormatConfig(
     const absVal = Math.abs(v),
         config: Numbro.Format = {};
 
-    let precision: number;
-    if (precisionSpec === 'auto') {
-        // Auto-precision - base on scale of number
-        if (absVal === 0) {
-            precision = 2;
-        } else if (absVal < 0.01) {
-            precision = 6;
-        } else if (absVal < 100) {
-            precision = 4;
-        } else if (absVal < 10000) {
-            precision = 2;
-        } else {
-            precision = 0;
-        }
-    } else {
-        // Fixed precision - use requested, capped at max.
-        precision = precisionSpec < MAX_NUMERIC_PRECISION ? precisionSpec : MAX_NUMERIC_PRECISION;
-    }
+    const precision = parsePrecision(v, precisionSpec);
 
     // If zeroPad gte precision, treat as `true` to pad out to (but not beyond) full precision.
     // We don't support applying some precision (rounding) then padding out zeroes after that.

package/icon/Icon.scss

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+// FA v7 sizes icons via the `--fa-width` custom property (default 1.25em) rather than the old
+// `fa-fw` class. The placeholder is a plain div, so it reads the same property to stay aligned
+// with sibling icons under any width override, falling back to FA's default when unset.
+.xh-icon--placeholder {
+  width: var(--fa-width, 1.25em);
+}

package/icon/Icon.ts

@@ -15,6 +15,7 @@ import {ReactElement} from 'react';
 import {iconCmp} from './impl/IconCmp';
 import {enhanceFaClasses, iconHtml} from './impl/IconHtml';
 import {SetRequired} from 'type-fest';
+import './Icon.scss';
 
 export interface IconProps extends HoistProps, Partial<Omit<FontAwesomeIconProps, 'ref'>> {
     /** Name of the icon in FontAwesome. */
@@ -932,9 +933,9 @@ export const Icon = {
     },
 
     /**
-     * Returns an empty div with FA sizing classes applied. Can be used to take up room in a layout
-     * where an icon might otherwise go - e.g. to align a series of menu items, where some items do
-     * not have an icon but others do.
+     * Returns an empty div sized to occupy the width of a standard icon. Can be used to take up
+     * room in a layout where an icon might otherwise go - e.g. to align a series of menu items,
+     * where some items do not have an icon but others do.
      */
     placeholder(opts?: IconProps): any {
         const {size, asHtml = false} = opts ?? {},

package/icon/impl/IconHtml.ts

@@ -32,5 +32,5 @@ export function iconHtml({
 }
 
 export function enhanceFaClasses(className: string, size: string) {
-    return classNames(className, 'fa-fw', 'xh-icon', isString(size) ? `fa-${size}` : null);
+    return classNames(className, 'xh-icon', isString(size) ? `fa-${size}` : null);
 }

package/mcp/data/ts-registry.ts

@@ -1432,7 +1432,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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "86.1.0",
+  "version": "86.2.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": {
     "type": "git",
@@ -42,11 +42,11 @@
     "@azure/msal-browser": "~5.14.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",

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));
   }