@xh/hoist 87.1.1 → 87.3.0

package/.npmignore

@@ -0,0 +1,39 @@
+# Development tooling directories
+.claude
+.github
+.husky
+.idea
+.planning
+node_modules
+scripts
+
+# Development configuration
+*.log
+*.spec.ts
+*.spec.d.ts
+*.tgz
+.DS_Store
+.editorconfig
+.gitignore
+.mcp.json
+.npmrc
+.nvmrc
+.prettierignore
+.prettierrc.json
+.stylelintrc
+context7.json
+eslint.config.js
+pnpm-lock.yaml
+pnpm-workspace.yaml
+tsconfig.tsbuildinfo
+webpack.config.intellij.js
+
+# Development documentation
+AGENTS.md
+CLAUDE.md
+CLAUDE.local.md
+SECURITY.md
+
+# Internal docs - not served by the MCP doc registry, not useful to consumers
+docs/planning
+docs/archive

package/CHANGELOG.md

@@ -12,6 +12,95 @@
   3. Plain ASCII punctuation only. Use " - " for in-sentence breaks, never an em dash.
 -->
 
+## 87.3.0 - 2026-09-10
+
+### 🐞 Bug Fixes
+
+* Fixed `SegmentedControl` clipping an option's label when `equalSegmentWidths` divided the tray
+  too narrowly - options now hold their own content width, sharing equally only where there is room.
+* Fixed `useHotkeys()` throwing a React hook-count error when its arguments changed across
+  renders - a collapsible `Panel` given `hotkeys` no longer crashes when first expanded. Hotkeys
+  may now also be changed after the first render.
+* Fixed mobile `Navigator` back-navigation leaving the page stack and the route permanently out of
+  sync when a stale `allowSlidePrev` caused Swiper to silently skip the transition.
+* Fixed `RadioInput` and `Checkbox` options overhanging the top of the `Toolbar` - they
+  are now centered within the compact item height, sharing one rule with `SwitchInput`.
+* Fixed an unlabeled `Slider` (`labelRenderer: false`) sitting high in a compact `Toolbar`.
+* Fixed `SegmentedControl` overflowing a compact `Toolbar` - it now takes its compact sizing from
+  the toolbar, without needing its own `compact: true`.
+* Fixed `dateEditor` crashing when opening its picker on a column backed by a `localDate` field -
+  the editor now defaults its `valueType` from the Store field type.
+
+## 87.2.0 - 2026-09-08
+
+### 🎁 New Features
+
+* Added `DateRangePicker` (`desktop/cmp/daterange`), a compact control for selecting a period as a
+  preset (Today, MTD, Prev 30 Days, ...), a relative lookback, a calendar month or year, or a custom
+  date range. Its `DateRangePickerModel` persists the selection as JSON and resolves it to date
+  ranges and `FieldFilterSpec`s.
+* Added `IntentInput` (desktop), a compact input for selecting a Hoist `Intent`.
+* Added `SegmentedControl.showOptionDividers` and `SegmentedControl.showTrayBackground` (desktop and
+  mobile) to provide more structure by default to the input control with easy options to customize.
+* Added `SegmentedControl.equalSegmentWidths` to the desktop control, matching the existing mobile
+  prop. Defaults to `true`, so a filled control now divides its width into equal segments rather
+  than sizing each option to its own label.
+* Added `HoistBase.xhName`, an optional developer-facing name for an instance, shown in log output,
+  trace spans (new `xh.name` tag), and the Inspector. Set it on any Hoist model config to tell peers
+  of the same class apart - instances log as `ClassName [xhName]`, or `ClassName [id]` when unnamed.
+  Hoist names services, `XH.appModel`, and models created by a named parent automatically.
+* Added read-only detail panels to the Admin Console's Config, User Preferences, and JSON Blobs
+  tabs. The Config panel shows every view of a config's value - resolved, instance override,
+  database, and typedClass defaults - and renders notes as Markdown. Editing is now confined to the
+  grid's editor: double-click no longer opens a view-only dialog for read-only admins.
+* Added `domAttrs`, a prop for applying arbitrary `data-*` and `aria-*` attributes to the primary
+  DOM element a component renders - the same element that receives `data-testid` from `testId`.
+  Supported by `Box` and the layout components built on it (and therefore `Panel`, `Toolbar`, and
+  similar containers), `Button`, `ButtonGroup`, `Card`, `Badge`, `FormField`, and the desktop and
+  mobile inputs.
+* Added `enablePasswordManagers` to `TextInput`, `TextArea`, and `NumberInput` (desktop and mobile).
+  Defaults to `false`, applying `data-1p-ignore`, `data-lpignore`, and `data-bwignore` so password
+  managers stop offering saved logins on ordinary data-entry fields. Apps with hand-rolled login
+  forms should set it `true` on their credential inputs - Hoist's own `LoginPanel` already does.
+
+### 🐞 Bug Fixes
+
+* Fixed `testId` being silently dropped by desktop `Slider`, desktop `FileChooser`, and mobile
+  `Label` - all accepted the prop but never emitted a `data-testid` attribute.
+* Fixed icon misalignment in desktop `DateInput` when a `leftIcon` is specified.
+* Fixed `SegmentedControl.fill: false` leaving an empty run of tray to the right of its options -
+  the control now sizes to its options.
+* Fixed desktop `SegmentedControl` keeping the last clicked segment highlighted after its bound
+  value was cleared programmatically - the control now renders no selection, with `aria-checked`
+  cleared, whenever its value matches no option.
+* Fixed desktop `Select` not reliably scrolling the selected option into view when opening its
+  menu - a regression from the v86 react-select upgrade. Selects with `enableFilter: false` never
+  scrolled; others did so intermittently.
+* `Store` and `Cube` now throw a clear error at construction when given fields with duplicate
+  names. Previously such a `Cube` failed later with a cryptic `Cannot redefine property` error when
+  creating a `View` that exposes leaves.
+
+### ✨ Styles
+
+* Desktop `Button` active styling now also keys on Blueprint's `bp6-active` class, so any button
+  that opens an *uncontrolled* popover renders in its `active` state while that popover is showing,
+  with no per-component code. This brings Hoist's own menu triggers into line (`AppMenuButton`,
+  `ExpandToLevelButton`, `DashCanvasAddViewButton`, `DashContainerMenuButton`, and the `Toolbar`,
+  `TabSwitcher`, and `DashCanvas` overflow menus) and applies to app buttons as well. A button that
+  needs full control of its appearance can opt out by taking ownership of its popover's `isOpen`.
+* `SegmentedControl.outlined` now adds a border to the tray without also removing its background,
+  and defaults to `true`. Pair with `showTrayBackground: false` for the previous appearance.
+* Restyled the `SegmentedControl` tray to draw its background from `--xh-bg-alt` in both themes,
+  replacing a bespoke blue-grey mix that read heavier than the surrounding theme.
+* Added `--xh-date-range-picker-*` CSS variables for the new `DateRangePicker`.
+* The desktop `GroupingChooser` trigger button now renders `outlined` when in button mode
+  (`styleButtonAsInput: false`), matching the `ViewManager` trigger.
+
+### 📚 Libraries
+
+* @daypicker/react `added @ 10.0` (replaces react-day-picker under its new package name)
+* react-day-picker `removed`
+
 ## 87.1.1 - 2026-09-02
 
 ### 🐞 Bug Fixes
@@ -37,12 +126,11 @@
 
 * Upgraded `react-dropzone` to v20, which drops its UMD build and ships as an ESM + CJS package with
   an `exports` map. Requires Node >= 22 to install.
-* Added an opt-in `enforceValueInOptions` prop to the desktop and mobile `Select`, constraining the
-  value to the current `options` and dropping any selection no longer found there. Enforced once
-  `options` is non-null, so pass null while options load.
 * Extended the package `sideEffects` declaration to cover the vendored golden-layout implementation
   and the barrels with registration or configuration side effects on import - icon, mobx, blueprint
-  kit, golden-layout kit, and persist. Required by the tree-shaking in hoist-dev-utils v15.
+  kit, golden-layout kit, and persist. ~~Required by the tree-shaking in hoist-dev-utils v15.~~
+  (Tree-shaking reverted in dev-utils 15.0.1 - take 15.0.1+, see
+  [#4640](https://github.com/xh/hoist-react/issues/4640).)
 * Restructured `PersistenceProvider` provider registration to remove a base/subclass import cycle
   that breaks under tree-shaking bundlers' re-export optimization. No API change.
 
@@ -133,11 +221,11 @@ and performance optimizations, grouped by topic below.
 
 #### Grid - Data Update Timing
 
-* Grids now always apply `Store` data changes to ag-Grid in a fresh macrotask - pending UI
-  updates (e.g. load masks) paint first, and rapid changes coalesce. This strengthens an existing
-  requirement: grid reads after a data change were already subject to a minimal async debounce
-  and should already route through `GridModel.whenReadyAsync()`, which now provides a hard
-  guarantee that all store data has been applied to ag-Grid.
+* Grids now always apply `Store` data changes to ag-Grid in a fresh macrotask - pending UI updates
+  (e.g. load masks) paint first, and rapid changes coalesce. This strengthens an existing
+  requirement: grid reads after a data change were already subject to a minimal async debounce and
+  should already route through `GridModel.whenReadyAsync()`, which now provides a hard guarantee
+  that all store data has been applied to ag-Grid.
 * Grids now pace update-driven re-sorts and managed autosizes off their own measured cost, instead
   of re-running them every tick. Managed autosize still runs immediately on a `Store` load or filter
   change. Tune via the `deferredSortFactor` and `deferredAutosizeFactor` experimental flags.
@@ -242,13 +330,13 @@ columns.
   scrolled to the `top`, `middle`, or `bottom` of the viewport, instead of scrolling only the
   minimum amount required.
 * Improved `Grid` data update performance with tiered ag-Grid transaction handling. Update
-  transactions that provably cannot affect row order, grouping, or tree structure now skip
-  ag-Grid's model refresh entirely, and transactions that would re-order rows apply their cell
-  values immediately, with row order restored by a managed, idle-scheduled re-sort. New records
-  still sort into place on arrival.
+  transactions that provably cannot affect row order, grouping, or tree structure now skip ag-Grid's
+  model refresh entirely, and transactions that would re-order rows apply their cell values
+  immediately, with row order restored by a managed, idle-scheduled re-sort. New records still sort
+  into place on arrival.
 * Added `StoreTransaction.changedFields`, letting data producers assert exactly which fields a
-  value-only update touched. Cube `View`s supply this automatically, extending the no-re-sort
-  Grid fast path to view-connected stores. See the data package README for details.
+  value-only update touched. Cube `View`s supply this automatically, extending the no-re-sort Grid
+  fast path to view-connected stores. See the data package README for details.
 
 #### Admin Console
 
@@ -293,8 +381,8 @@ columns.
   stores, and adds a Diagnostics panel - a live readout of the data-pipeline `diagnostics`
   published by selected Stores, Cubes, Cube Views, and GridModels, with controls to reset counters
   and stream ops to the devtools console.
-* Added `XH.getCubes()` and `XH.getViews()` to enumerate all active `Cube` and `View` instances,
-  now registered with Hoist's instance registry.
+* Added `XH.getCubes()` and `XH.getViews()` to enumerate all active `Cube` and `View` instances, now
+  registered with Hoist's instance registry.
 * Added `useComposedRefs` - a hook variant of `composeRefs` that manages identity via `useCallback`
   and forwards React 19 ref-callback cleanups. Prefer it when composing refs within a component
   render function.
@@ -358,9 +446,9 @@ columns.
 * Removed the deprecated webpack-only `~` prefix from bare-module SCSS imports and the `inter-ui`
   font-path URL in framework styles. Modern sass-loader and css-loader resolve the same package
   paths without it, and the prefix breaks under other bundlers.
-* Replaced `GridExperimentalFlags.deltaSort` with `deltaSortRatio` - Hoist now manages ag-Grid
-  delta sorting automatically, using it for re-sorts touching fewer than this percentage of rows
-  (default 50). See the Grid transaction handling entry under New Features.
+* Replaced `GridExperimentalFlags.deltaSort` with `deltaSortRatio` - Hoist now manages ag-Grid delta
+  sorting automatically, using it for re-sorts touching fewer than this percentage of rows (default
+  50). See the Grid transaction handling entry under New Features.
 * Added `GridExperimentalFlags.deferredSortFactor` to tune the pacing of the managed re-sort on
   updating grids - a re-sort costing E ms defers the next for `E * factor` (default 4). Set 0 to
   disable deferral and re-sort synchronously on every change.

package/admin/AdminUtils.ts

@@ -5,8 +5,14 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {AppModel} from '@xh/hoist/admin/AppModel';
+import {div, span} from '@xh/hoist/cmp/layout';
+import {markdown} from '@xh/hoist/cmp/markdown';
 import {XH} from '@xh/hoist/core';
+import {defaultReadonlyRenderer} from '@xh/hoist/desktop/cmp/form';
+import {jsonInput} from '@xh/hoist/desktop/cmp/input';
 import {LocalDate} from '@xh/hoist/utils/datetime';
+import {isString} from 'lodash';
+import {ReactElement, ReactNode} from 'react';
 
 /**
  * Generate a standardized filename for an Admin module grid export, without datestamp.
@@ -26,3 +32,61 @@ export function exportFilenameWithDate(moduleName: string): () => string {
 export function getAppModel<T extends AppModel>() {
     return XH.appModel as T;
 }
+
+/** Muted "N/A" placeholder for empty values in read-only detail forms. */
+export function naSpan(): ReactNode {
+    return span({item: 'N/A', className: 'xh-text-color-muted'});
+}
+
+/**
+ * Default readonly renderer for detail forms - FormField's standard formatting (dates, numbers,
+ * booleans, JSON, text), or {@link naSpan} when null.
+ */
+export function valOrNa(v: any): ReactNode {
+    return v != null ? defaultReadonlyRenderer(v) : naSpan();
+}
+
+/**
+ * Read-only JsonInput for detail displays - fixed to `height` if given, otherwise filling its
+ * container. Pair fill mode with the `xh-admin-readonly-form__fill` class on the enclosing
+ * `formFieldSet` to have it take the remaining panel height.
+ */
+export function readonlyJsonInput(value: any, height: number = null): ReactElement {
+    return jsonInput({
+        value: isString(value) ? value : JSON.stringify(value),
+        readonly: true,
+        autoFormat: true,
+        enableSearch: true,
+        width: '100%',
+        ...(height != null ? {height} : {flex: 1, height: '100%'})
+    });
+}
+
+/**
+ * Readonly renderer for stored scalar values (config / preference values) - the value as literal
+ * text, with no number or date formatting, or {@link naSpan} when null.
+ */
+export function rawValueRenderer(v: any): ReactNode {
+    return v == null ? naSpan() : v.toString();
+}
+
+/** Readonly renderer for JSON fields in detail forms - {@link readonlyJsonInput} in fill mode. */
+export function jsonRenderer(v: any): ReactNode {
+    return v == null ? naSpan() : readonlyJsonInput(v);
+}
+
+/** Readonly renderer for boolean fields in detail forms - "Yes" / "No", or {@link naSpan} when null. */
+export function yesNoRenderer(v: boolean): ReactNode {
+    return v == null ? naSpan() : v ? 'Yes' : 'No';
+}
+
+/**
+ * Readonly renderer for free-text fields in detail forms that may contain Markdown (notes,
+ * descriptions). Renders via {@link markdown} within a wrapper styled for compact display, or
+ * {@link naSpan} when null.
+ */
+export function markdownRenderer(v: string): ReactNode {
+    return v == null
+        ? naSpan()
+        : div({className: 'xh-admin-readonly-form__markdown', item: markdown({content: v})});
+}

package/admin/App.scss

@@ -23,6 +23,94 @@
     background-color: var(--xh-intent-primary-darker);
     font-family: var(--xh-font-family-mono);
   }
+
+  // Value type badges - shown in grid cells and detail forms, so drop Badge's inline-text offset.
+  // Fixed width keeps a column of mixed types from looking ragged.
+  .xh-value-type-badge {
+    --xh-badge-font-size: 0.85em;
+    --xh-badge-font-weight: normal;
+    margin-left: 0;
+    width: 64px;
+  }
+}
+
+// Read-only detail forms within the Admin Console - stacked fields with small, muted, uppercase
+// labels sitting directly above their values. Apply to the container of a read-only `form`.
+// Styled entirely via the framework's form-field CSS vars - see `styles/vars.scss`.
+.xh-admin-readonly-form {
+  --xh-form-field-margin: 0 0 var(--xh-pad-half-px) 0;
+  --xh-form-field-label-color: var(--xh-text-color-muted);
+  --xh-form-field-label-font-size: var(--xh-font-size-small-px);
+  --xh-form-field-label-font-weight: 600;
+  --xh-form-field-label-text-transform: uppercase;
+  --xh-form-field-readonly-label-margin: 0;
+
+  // A field set (or other child) that stretches to fill the remaining height, passing the flex
+  // down to a read-only code editor within. `.xh-card` renders as a <fieldset>, so make it an
+  // explicit flex column.
+  &__fill {
+    display: flex;
+    // Floor via flex-basis, not min-height - a min-height-clamped <fieldset> collapses its content.
+    flex: 1 0 250px;
+    flex-direction: column;
+
+    > .xh-card__content,
+    .xh-form-field,
+    .xh-form-field__inner,
+    .xh-form-field__readonly-display {
+      flex: 1;
+      min-height: 0;
+    }
+
+    // FormField's read-only wrapper is a block - make it (and the display within) flex columns
+    // so a percentage-height editor has a definite height to fill.
+    .xh-form-field__inner,
+    .xh-form-field__readonly-display {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .xh-form-field__readonly-display {
+      padding: 0;
+    }
+  }
+
+  // Markdown-rendered text fields - undo the readonly display's pre-wrap (which turns
+  // react-markdown's inter-element newlines into blank lines) and tighten block spacing.
+  &__markdown {
+    white-space: normal;
+
+    p,
+    ul,
+    ol {
+      margin: 0 0 var(--xh-pad-half-px) 0;
+    }
+
+    ul,
+    ol {
+      padding-left: 1.5em;
+    }
+
+    li > p {
+      margin: 0;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Frame read-only editors - they otherwise float borderless within a field set.
+  .xh-code-input {
+    border: var(--xh-border-solid);
+    border-radius: var(--xh-border-radius-px);
+  }
+}
+
+// RestDetailPanel form body.
+.xh-admin-rest-detail__form {
+  padding: var(--xh-pad-px);
+  gap: var(--xh-pad-px);
 }
 
 .xh-units-label {

package/admin/columns/UserData.ts

@@ -4,9 +4,13 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
+import {badge} from '@xh/hoist/cmp/badge';
 import * as Col from '@xh/hoist/cmp/grid/columns';
-import {truncate} from 'lodash';
 import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
+import {Intent} from '@xh/hoist/core';
+import {Icon} from '@xh/hoist/icon';
+import {truncate} from 'lodash';
+import {ReactElement} from 'react';
 
 export const value: ColumnSpec = {
     field: {name: 'value', type: 'auto'},
@@ -35,8 +39,31 @@ export const valueType: ColumnSpec = {
         type: 'string',
         displayName: 'Type'
     },
-    width: 80,
-    align: 'center'
+    width: 90,
+    align: 'center',
+    renderer: v => valueTypeRenderer(v)
+};
+
+/** Renders a config value type (json, string, int, bool, pwd...) as an icon + colored badge. */
+export function valueTypeRenderer(valueType: string): ReactElement {
+    if (!valueType) return null;
+    const {icon, intent} = VALUE_TYPE_BADGES[valueType] ?? {};
+    return badge({
+        item: valueType,
+        icon: icon?.(),
+        intent,
+        className: 'xh-value-type-badge'
+    });
+}
+
+const VALUE_TYPE_BADGES: Record<string, {icon: () => ReactElement; intent?: Intent}> = {
+    json: {icon: Icon.json, intent: 'primary'},
+    bool: {icon: Icon.checkSquare, intent: 'success'},
+    int: {icon: Icon.calculator, intent: 'warning'},
+    long: {icon: Icon.calculator, intent: 'warning'},
+    double: {icon: Icon.calculator, intent: 'warning'},
+    pwd: {icon: Icon.lock, intent: 'danger'},
+    string: {icon: Icon.list}
 };
 
 export const groupName: ColumnSpec = {

package/admin/detail/RestDetailModel.ts

@@ -0,0 +1,64 @@
+/*
+ * 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 {FormModel} from '@xh/hoist/cmp/form';
+import {HoistModel, lookup, managed} from '@xh/hoist/core';
+import {StoreRecord} from '@xh/hoist/data';
+import {RestGridModel} from '@xh/hoist/desktop/cmp/rest';
+import {computed, makeObservable} from '@xh/hoist/mobx';
+
+/**
+ * Backs a {@link restDetailPanel}. Resolves the host RestGridModel via `@lookup` - the model of an
+ * enclosing component must expose it as a public property - then tracks its single selection and
+ * mirrors the selected record into a read-only FormModel with a field for every store field.
+ */
+export class RestDetailModel extends HoistModel {
+    override xhImpl = true;
+
+    @lookup(RestGridModel) gridModel: RestGridModel;
+
+    @managed formModel: FormModel;
+
+    get record(): StoreRecord {
+        return this.gridModel.selectedRecord;
+    }
+
+    @computed
+    get hasSelection(): boolean {
+        return !!this.record;
+    }
+
+    get readonly(): boolean {
+        return this.gridModel.readonly;
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    override onLinked() {
+        this.formModel = new FormModel({
+            readonly: true,
+            fields: this.gridModel.store.fields.map(f => ({
+                name: f.name,
+                displayName: f.displayName
+            }))
+        });
+
+        // Record identity changes on selection and on store reload (e.g. after a save), so the
+        // form tracks both a new selection and fresh data for the current one.
+        this.addReaction({
+            track: () => this.record,
+            run: rec => this.formModel.init(rec?.data ?? {}),
+            fireImmediately: true
+        });
+    }
+
+    edit() {
+        this.gridModel.editRecord(this.record);
+    }
+}

package/admin/detail/RestDetailPanel.ts

@@ -0,0 +1,106 @@
+/*
+ * 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 {valOrNa} from '@xh/hoist/admin/AdminUtils';
+import {form, FormModel} from '@xh/hoist/cmp/form';
+import {filler, placeholder, vframe} from '@xh/hoist/cmp/layout';
+import {creates, hoistCmp, HoistProps, PersistOptions} from '@xh/hoist/core';
+import {StoreRecord} from '@xh/hoist/data';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
+import {Icon} from '@xh/hoist/icon';
+import {startCase} from 'lodash';
+import {ReactElement, ReactNode} from 'react';
+import {RestDetailModel} from './RestDetailModel';
+
+export interface RestDetailPanelProps extends HoistProps<RestDetailModel> {
+    /** Icon for the panel header and empty-state placeholder. */
+    icon: ReactElement;
+    /** Placeholder text when no single record is selected. */
+    emptyText?: string;
+    /** Default width in pixels. */
+    defaultSize?: number;
+    /** Minimum width in pixels. */
+    minSize?: number;
+    /** Options for persisting panel size and collapsed state. */
+    persistWith?: PersistOptions;
+    /** Panel title for the selected record - defaults to its `name`. */
+    titleFn?: (record: StoreRecord) => ReactNode;
+    /**
+     * Renders the form body for the selected record - typically one or more `formFieldSet`s of
+     * `formField`s bound to the store's field names. Rendered within a read-only `form` bound to
+     * the model's FormModel, styled with the `xh-admin-readonly-form` class.
+     */
+    renderForm: (record: StoreRecord, formModel: FormModel) => ReactNode;
+}
+
+/**
+ * Read-only detail view of the record selected in a RestGrid, docked to its right. Tracks the
+ * grid's selection, refreshes when the grid reloads, and offers an Edit button to open the grid's
+ * editor dialog for the selected record.
+ *
+ * Render as a sibling of `restGrid()` within an `hframe`. The host RestGridModel is resolved via
+ * `@lookup`, so the model of an enclosing component must expose it as a public property.
+ */
+export const restDetailPanel = hoistCmp.factory<RestDetailPanelProps>({
+    displayName: 'RestDetailPanel',
+    className: 'xh-admin-rest-detail',
+    model: creates(RestDetailModel),
+
+    render({model, className, icon, titleFn, renderForm, ...props}) {
+        const {
+                emptyText = 'Select a record to view its details.',
+                defaultSize = 550,
+                minSize = 400,
+                persistWith
+            } = props,
+            {hasSelection, readonly, record, formModel, gridModel} = model;
+
+        return panel({
+            className,
+            title: hasSelection
+                ? (titleFn?.(record) ?? record.data.name)
+                : `${startCase(gridModel.unit)} Detail`,
+            icon,
+            compactHeader: true,
+            modelConfig: {
+                side: 'right',
+                defaultSize,
+                minSize,
+                persistWith,
+                // Skip per-selection form work while collapsed.
+                renderMode: 'unmountOnHide'
+            },
+            item: hasSelection
+                ? form({
+                      model: formModel,
+                      fieldDefaults: {readonlyRenderer: valOrNa},
+                      item: vframe({
+                          className: 'xh-admin-rest-detail__form xh-admin-readonly-form',
+                          // Scroll when content outgrows the panel - inline to beat the frame's
+                          // own overflow: hidden.
+                          overflowY: 'auto',
+                          items: renderForm(record, formModel)
+                      })
+                  })
+                : placeholder(icon, emptyText),
+            bbar: toolbar({
+                omit: !hasSelection || readonly,
+                items: [
+                    filler(),
+                    button({
+                        text: 'Edit',
+                        icon: Icon.edit(),
+                        intent: 'primary',
+                        outlined: true,
+                        onClick: () => model.edit()
+                    })
+                ]
+            })
+        });
+    }
+});