@xh/hoist 86.0.1 → 86.2.0

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.scss

@@ -0,0 +1,126 @@
+/*
+ * 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.
+ */
+
+// Scoped under .xh-app to win specificity over the .xh-app-scoped mobile Button styles.
+.xh-app {
+  .xh-segmented-control {
+    // The tray - a recessed container the selected option rises out of.
+    display: flex;
+    align-items: stretch;
+    // Size the whole control (tray padding included) to one standard control height, so it matches
+    // a button / input rather than standing taller. Options stretch to fill the tray (below) rather
+    // than each taking the full button height, which - plus the tray padding - would overshoot.
+    box-sizing: border-box;
+    height: var(--xh-button-height);
+    background-color: var(--xh-segmented-control-bg);
+    border-radius: var(--xh-segmented-control-border-radius-px);
+    padding: var(--xh-segmented-control-pad-px);
+    gap: var(--xh-segmented-control-pad-px);
+
+    // Options - buttons receding into the tray by default. Override the minimal Button base so
+    // the tray background shows through and our segmented text color applies.
+    .xh-button.xh-segmented-control-option {
+      flex: 0 0 auto;
+      // Fill the tray height (via the tray's align-items: stretch) instead of the fixed button
+      // height, so tray padding does not add on top of a full-height button.
+      height: auto;
+      // Allow the button to shrink below its content width so the label can ellipsis-truncate
+      // (flex items default to min-width: auto, which forces overflow / hard clipping instead).
+      min-width: 0;
+      border-radius: var(--xh-segmented-control-border-radius-px);
+      background-color: transparent;
+      color: var(--xh-segmented-control-text-color);
+
+      // Keep icons at full size - only the label gives way when space is tight.
+      > svg {
+        flex: 0 0 auto;
+      }
+    }
+
+    // Label - truncate with an ellipsis when its segment is too narrow to fit the full text.
+    .xh-segmented-control-option__label {
+      overflow: hidden;
+      min-width: 0;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    // Selected option - a solid tile standing out from the tray.
+    .xh-button.xh-segmented-control-option--selected {
+      background-color: var(--xh-segmented-control-selected-bg);
+      color: var(--xh-segmented-control-selected-text-color);
+    }
+
+    // Per-option intents - keyed off the className applied to each button. Renders the selected
+    // option as a solid fill in the intent color, and tints unselected options' text so an intent
+    // (e.g. danger) reads as such even before it is chosen.
+    @each $intent in (primary, success, warning, danger) {
+      .xh-button.xh-segmented-control-option--#{$intent} {
+        color: var(--xh-intent-#{$intent}-text-color);
+      }
+
+      .xh-button.xh-segmented-control-option--#{$intent}.xh-segmented-control-option--selected {
+        background-color: var(--xh-intent-#{$intent});
+        color: var(--xh-white);
+      }
+    }
+
+    // Fill mode (default) - options grow to fill the available width. The basis set here is `auto`
+    // (content), so without `equalSegmentWidths` each option keeps its content width and only the
+    // leftover space is shared out - a wider label yields a wider segment. The equal-widths rule
+    // below (the default) overrides this basis. Options still shrink + ellipsis (see above) when
+    // the set genuinely cannot fit.
+    &.xh-segmented-control--fill .xh-button.xh-segmented-control-option {
+      flex: 1 1 auto;
+    }
+
+    // Equal-width segments (default, via the `equalSegmentWidths` prop) - a 0 flex-basis divides
+    // the row into equal parts regardless of label length, the conventional segmented-control
+    // appearance. Higher specificity than the content-basis rule above, so it wins when applied.
+    &.xh-segmented-control--fill.xh-segmented-control--equal-widths
+      .xh-button.xh-segmented-control-option {
+      flex-basis: 0;
+    }
+
+    // Outlined mode - border around the tray with no inner background fill.
+    &.xh-segmented-control--outlined {
+      background-color: transparent;
+      border: 1px solid var(--xh-border-color);
+
+      // Reserve border space on every option so selecting one does not shift the row. The
+      // transparent tray offers no recessed backdrop to set a filled tile against, so indicate
+      // selection with a ring instead - currentColor keeps it in step with the option's
+      // text / intent color.
+      .xh-button.xh-segmented-control-option {
+        border: 1px solid transparent;
+      }
+
+      .xh-button.xh-segmented-control-option--selected {
+        border-color: currentColor;
+      }
+    }
+
+    @each $intent in (primary, success, warning, danger) {
+      &.xh-segmented-control--outlined.xh-segmented-control--#{$intent} {
+        border-color: var(--xh-intent-#{$intent});
+      }
+    }
+
+    // Validation borders
+    &.xh-input--invalid {
+      border: var(--xh-form-field-invalid-border);
+    }
+
+    &.xh-input--warning {
+      border: var(--xh-form-field-warning-border);
+    }
+
+    &.xh-input--info {
+      border: var(--xh-form-field-info-border);
+    }
+  }
+}

package/mobile/cmp/input/SegmentedControl.ts

@@ -0,0 +1,210 @@
+/*
+ * 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 {
+    HoistInputModel,
+    HoistInputProps,
+    OptionPrimitive,
+    SegmentedControlNullOption,
+    SegmentedControlOption,
+    useHoistInputModel
+} from '@xh/hoist/cmp/input';
+import {hbox, span} from '@xh/hoist/cmp/layout';
+import {hoistCmp, HoistProps, Intent} from '@xh/hoist/core';
+import {button} from '@xh/hoist/mobile/cmp/button';
+import '@xh/hoist/mobile/register';
+import {computed, makeObservable} from '@xh/hoist/mobx';
+import {TEST_ID} from '@xh/hoist/utils/js';
+import {getLayoutProps, getNonLayoutProps} from '@xh/hoist/utils/react';
+import classNames from 'classnames';
+import {filter, isObject} from 'lodash';
+import './SegmentedControl.scss';
+
+export interface SegmentedControlProps extends HoistProps, HoistInputProps {
+    /**
+     * 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. Either way, a label too wide for its segment truncates with an ellipsis.
+     */
+    equalSegmentWidths?: boolean;
+
+    /**
+     * True (default) to stretch the control to fill available width,
+     * distributing space equally among options.
+     */
+    fill?: boolean;
+
+    /**
+     * Default visual intent applied to the selected option, and as a subtle text-color hint
+     * to options when not selected. Serves as the default for any option that does not specify
+     * its own `intent`. Defaults to `'none'`.
+     */
+    intent?: 'none' | Intent;
+
+    /**
+     * Array of available options. Each entry may be a SegmentedControlOption object
+     * with value/label/icon/disabled properties, or a primitive value used as both
+     * the value and the display label.
+     */
+    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.
+     */
+    outlined?: boolean;
+}
+
+/**
+ * An input for selecting a single value from a small set of mutually exclusive options,
+ * rendered as a group of toggle buttons with clear visual indication of the active
+ * selection.
+ *
+ * Similar to ButtonGroupInput but driven by an `options` prop (like Select) rather than Button
+ * children, and with stronger visual differentiation between selected and unselected states.
+ * The mobile counterpart to the desktop SegmentedControl, built on Hoist's mobile Button
+ * (no Blueprint dependency).
+ */
+export const [SegmentedControl, segmentedControl] = hoistCmp.withFactory<SegmentedControlProps>({
+    displayName: 'SegmentedControl',
+    className: 'xh-segmented-control',
+    render(props, ref) {
+        return useHoistInputModel(cmp, props, ref, SegmentedControlModel);
+    }
+});
+(SegmentedControl as any).hasLayoutSupport = true;
+
+//-----------------------
+// Implementation
+//-----------------------
+interface NormalizedOption extends SegmentedControlOption {
+    label: string;
+    intent?: Intent;
+    _key: string;
+}
+
+class SegmentedControlModel extends HoistInputModel {
+    override xhImpl = true;
+
+    @computed
+    get normalizedOptions(): NormalizedOption[] {
+        const options = this.componentProps.options ?? [];
+        return options.map((o: any, idx: number) => {
+            const key = String(idx);
+            if (isObject(o)) {
+                const {label, value, icon, disabled, intent} = o as SegmentedControlOption;
+                return {
+                    value: this.toInternal(value),
+                    label: label ?? (icon ? '' : String(value)),
+                    icon,
+                    disabled,
+                    intent,
+                    _key: key
+                };
+            } else {
+                return {value: this.toInternal(o), label: String(o), _key: key};
+            }
+        });
+    }
+
+    /** Map the current render value to the string key used to identify the selected option. */
+    @computed
+    get selectedKey(): string {
+        const {renderValue, normalizedOptions} = this;
+        return normalizedOptions.find(o => o.value === renderValue)?._key;
+    }
+
+    get enabledButtons(): HTMLButtonElement[] {
+        const btns = this.domEl?.querySelectorAll('button') ?? [];
+        return filter(btns, (b: HTMLButtonElement) => !b.disabled) as HTMLButtonElement[];
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    onValueChange = (key: string) => {
+        const match = this.normalizedOptions.find(o => o._key === key);
+        if (match) this.noteValueChange(match.value);
+    };
+
+    override blur() {
+        this.enabledButtons.forEach(it => it.blur());
+    }
+
+    override focus() {
+        this.enabledButtons[0]?.focus();
+    }
+}
+
+const cmp = hoistCmp.factory<SegmentedControlModel>(({model, className, ...props}, ref) => {
+    const {
+        // HoistInput props - consumed here or by the model, not passed to the tray
+        bind,
+        disabled,
+        onChange,
+        onCommit,
+        tabIndex,
+        value,
+        commitOnChange,
+        options,
+        // Consumed by this component
+        equalSegmentWidths = true,
+        fill = true,
+        intent,
+        outlined,
+        testId,
+        ...rest
+    } = getNonLayoutProps(props);
+
+    const {selectedKey} = model,
+        defaultIntent = intent && intent !== 'none' ? intent : null;
+
+    const buttons = model.normalizedOptions.map(opt => {
+        const optIntent = opt.intent ?? defaultIntent,
+            selected = opt._key === selectedKey;
+        // 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).
+        const label = opt.label
+            ? span({className: 'xh-segmented-control-option__label', item: opt.label})
+            : null;
+
+        return button({
+            key: opt._key,
+            text: label,
+            icon: opt.icon,
+            disabled: disabled || opt.disabled,
+            minimal: true,
+            className: classNames(
+                'xh-segmented-control-option',
+                selected && 'xh-segmented-control-option--selected',
+                optIntent && `xh-segmented-control-option--${optIntent}`
+            ),
+            onClick: () => model.onValueChange(opt._key)
+        });
+    });
+
+    return hbox({
+        className: classNames(
+            className,
+            defaultIntent && `xh-segmented-control--${defaultIntent}`,
+            outlined && 'xh-segmented-control--outlined',
+            fill && 'xh-segmented-control--fill',
+            fill && equalSegmentWidths && 'xh-segmented-control--equal-widths'
+        ),
+        ref,
+        onFocus: model.onFocus,
+        onBlur: model.onBlur,
+        ...getLayoutProps(props),
+        [TEST_ID]: testId,
+        items: buttons,
+        ...rest
+    });
+});

package/mobile/cmp/input/SwitchInput.ts

@@ -12,7 +12,7 @@ import {TEST_ID} from '@xh/hoist/utils/js';
 import './SwitchInput.scss';
 
 export interface SwitchInputProps extends HoistProps, HoistInputProps, StyleProps {
-    value?: string;
+    value?: boolean;
 
     /** Onsen modifier string */
     modifier?: string;

package/mobile/cmp/input/TextInput.scss

@@ -11,6 +11,13 @@
     flex: 1;
   }
 
+  &__left-icon {
+    display: flex;
+    align-items: center;
+    padding-left: var(--xh-pad-px);
+    color: var(--xh-text-color-muted);
+  }
+
   &__clear-button {
     padding-right: 8px;
     padding-left: 0;

package/mobile/cmp/input/TextInput.ts

@@ -5,7 +5,7 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
-import {hbox} from '@xh/hoist/cmp/layout';
+import {box, hbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {input} from '@xh/hoist/kit/onsen';
@@ -15,6 +15,7 @@ import {getTestId, TEST_ID, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import type {Property} from 'csstype';
 import {isEmpty} from 'lodash';
+import {ReactElement} from 'react';
 import './TextInput.scss';
 
 export interface TextInputProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
@@ -46,6 +47,9 @@ export interface TextInputProps extends HoistProps, HoistInputProps, StyleProps,
     /** True to show a "clear" button aligned to the right of the control. Defaults to false. */
     enableClear?: boolean;
 
+    /** Icon to display inline on the left side of the input. */
+    leftIcon?: ReactElement;
+
     /** Onsen modifier string */
     modifier?: string;
 
@@ -123,6 +127,7 @@ const cmp = hoistCmp.factory<TextInputModel>(({model, className, ...props}, ref)
             width: withDefault(width, null)
         },
         items: [
+            leftIcon(),
             input({
                 value: model.renderValue || '',
 
@@ -151,6 +156,11 @@ const cmp = hoistCmp.factory<TextInputModel>(({model, className, ...props}, ref)
     });
 });
 
+const leftIcon = hoistCmp.factory<TextInputModel>(({model}) => {
+    const {leftIcon} = model.componentProps;
+    return leftIcon ? box({className: 'xh-text-input__left-icon', item: leftIcon}) : null;
+});
+
 const clearButton = hoistCmp.factory<TextInputModel>(({model}) =>
     button({
         className: 'xh-text-input__clear-button',

package/mobile/cmp/input/index.ts

@@ -11,6 +11,7 @@ export * from './CheckboxButton';
 export * from './DateInput';
 export * from './NumberInput';
 export * from './SearchInput';
+export * from './SegmentedControl';
 export * from './Select';
 export * from './SwitchInput';
 export * from './TextInput';

package/mobile/cmp/tab/impl/Tabs.scss

@@ -25,6 +25,14 @@
   transform: translateX(0);
 }
 
+// Theme the page backdrop. Onsen renders an opaque, light-by-default `.page__background` behind
+// each page's content, and the content itself is forced transparent (so the app background shows
+// through). That leaves the light backdrop visible for tab content that is not itself a panel,
+// rendering themed text unreadable in dark mode - so paint the backdrop with the app background.
+.xh-tab-page .page__background {
+  background-color: var(--xh-bg);
+}
+
 .xh-tab-container {
   // Override Onsen's tabbar height CSS var
   --tabbar-height: var(--xh-tbar-min-size-px);

package/mobile/cmp/toolbar/Toolbar.scss

@@ -5,6 +5,14 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 .xh-toolbar {
+  // Toolbars are the compact-button special case: keep buttons short and tight-cornered so they
+  // fit dense bars, overriding the taller / rounder defaults used for buttons in body content
+  // (see vars.scss). Derive the button height from the bar size so a single token
+  // (--xh-tbar-min-size) drives both - subtracting the bar's vertical padding so buttons fit a
+  // horizontal bar. The same height is reused for vertical bars to keep buttons consistent.
+  --xh-button-height: calc(var(--xh-tbar-min-size-px) - 2 * var(--xh-pad-half-px));
+  --xh-button-border-radius-px: var(--xh-border-radius-px);
+
   padding: var(--xh-pad-half-px) var(--xh-pad-px);
   color: var(--xh-tbar-text-color);
   background-color: var(--xh-tbar-bg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "86.0.1",
+  "version": "86.2.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": {
     "type": "git",
@@ -39,14 +39,14 @@
   },
   "dependencies": {
     "@auth0/auth0-spa-js": "~2.21.1",
-    "@azure/msal-browser": "~5.13.0",
+    "@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

@@ -344,7 +344,12 @@ body {
     --xh-button-active-text-color: var(--button-active-text-color, white);
     --xh-button-bg: var(--button-bg, #{mc('blue-grey', '600')});
     --xh-button-text-color: var(--button-text-color, white);
-    --xh-button-height: var(--button-height, 28px);
+    // Default to a comfortable touch height for buttons in body content - a bit more compact than
+    // the 44px toolbar/touch-target max, which reads as oversized for XH's denser style. Toolbars
+    // derive their own slightly smaller button height from the bar size (see Toolbar.scss).
+    --xh-button-height: var(--button-height, 40px);
+    // Slightly rounder corners to suit the taller mobile button (the desktop default is tighter).
+    --xh-button-border-radius-px: var(--button-border-radius-px, 8px);
     --xh-toolbar-button-bg: var(--toolbar-button-bg, var(--xh-button-bg));
 
     // Light theme pressed bg for 'minimal' / 'outlined'
@@ -839,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/svc/JsonBlobService.ts

@@ -52,8 +52,8 @@ export class JsonBlobService extends HoistService {
     static instance: JsonBlobService;
 
     /** Retrieve a single JSONBlob by its unique token. */
-    async getAsync(token: string): Promise<JsonBlob> {
-        return this.runner().span('get').fetchJson({
+    async getAsync(token: string, ctx?: CallContextLike): Promise<JsonBlob> {
+        return this.runner(ctx).span('get').fetchJson({
             url: 'xh/getJsonBlob',
             params: {token}
         });
@@ -63,7 +63,7 @@ export class JsonBlobService extends HoistService {
     async listAsync(spec: {
         type: string;
         includeValue?: boolean;
-        ctx: CallContextLike;
+        ctx?: CallContextLike;
     }): Promise<JsonBlob[]> {
         const {type, includeValue, ctx} = spec;
         return this.runner(ctx)
@@ -72,15 +72,11 @@ export class JsonBlobService extends HoistService {
     }
 
     /** Persist a new JSONBlob back to the server. */
-    async createAsync({
-        acl,
-        description,
-        type,
-        meta,
-        name,
-        value
-    }: Partial<JsonBlob>): Promise<JsonBlob> {
-        return this.runner()
+    async createAsync(
+        {acl, description, type, meta, name, value}: Partial<JsonBlob>,
+        ctx?: CallContextLike
+    ): Promise<JsonBlob> {
+        return this.runner(ctx)
             .span('create')
             .fetchJson({
                 url: 'xh/createJsonBlob',
@@ -91,8 +87,12 @@ export class JsonBlobService extends HoistService {
     }
 
     /** Modify mutable properties of an existing JSONBlob, as identified by its unique token. */
-    async updateAsync(token: string, update: Partial<JsonBlob>): Promise<JsonBlob> {
-        return this.runner()
+    async updateAsync(
+        token: string,
+        update: Partial<JsonBlob>,
+        ctx?: CallContextLike
+    ): Promise<JsonBlob> {
+        return this.runner(ctx)
             .span('update')
             .run(async ctx => {
                 update = pick(update, ['acl', 'description', 'meta', 'name', 'owner', 'value']);
@@ -110,9 +110,10 @@ export class JsonBlobService extends HoistService {
     async createOrUpdateAsync(
         type: string,
         name: string,
-        data: Partial<JsonBlob>
+        data: Partial<JsonBlob>,
+        ctx?: CallContextLike
     ): Promise<JsonBlob> {
-        return this.runner()
+        return this.runner(ctx)
             .span('createOrUpdate')
             .run(async ctx => {
                 const update = pick(data, ['acl', 'description', 'meta', 'value']);
@@ -127,16 +128,16 @@ export class JsonBlobService extends HoistService {
     }
 
     /** Find a blob owned by this user with a specific type and name.  If none exists, return null.  */
-    async findAsync(type: string, name: string): Promise<JsonBlob> {
-        return this.runner().span('find').fetchJson({
+    async findAsync(type: string, name: string, ctx?: CallContextLike): Promise<JsonBlob> {
+        return this.runner(ctx).span('find').fetchJson({
             url: 'xh/findJsonBlob',
             params: {type, name}
         });
     }
 
     /** Archive (soft-delete) an existing JSONBlob, as identified by its unique token. */
-    async archiveAsync(token: string): Promise<JsonBlob> {
-        return this.runner().span('archive').fetchJson({
+    async archiveAsync(token: string, ctx?: CallContextLike): Promise<JsonBlob> {
+        return this.runner(ctx).span('archive').fetchJson({
             url: 'xh/archiveJsonBlob',
             params: {token}
         });