@xh/hoist 80.0.0-SNAPSHOT.1767799665209 → 80.0.0-SNAPSHOT.1767973504648

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 ## 80.0.0-SNAPSHOT - unreleased
 
+### 💥 Breaking Changes
+
+* Completed the refactoring away from `loadModel` to `loadObserver` started in v79:
+    * Renamed `XH.appLoadModel` to `XH.appLoadObserver`. The prior getter remains as an alias but is
+      deprecated and scheduled for removal in v82.
+    * Renamed `AppContainerModel.loadModel` to `loadObserver`. This is primarily an internal model,
+      so there is no deprecated alias. Any app usages should swap to `XH.appLoadObserver`.
+    * Removed additional references to deprecated `loadModel` within Hoist itself.
+
+### 🎁 New Features
+
+* DashCanvas:
+    * supports dragging and dropping widgets in from an external container.
+    * supports new compacting strategy: 'wrap'
+* new elementFactory tags: `fieldset`, `legend`
+
+### 📚 Libraries
+
+* react-grid-layout `2.1 → 2.2.2`
+
 ## 79.0.0 - 2026-01-05
 
 ### 💥 Breaking Changes
@@ -69,8 +89,8 @@ this release, but is not strictly required.
 
 ### 📚 Libraries
 
-* @blueprintjs/core: `5.10 -> 6.3`
-* @blueprintjs/datetime: `5.3 -> 6.0`
+* @blueprintjs/core: `5.10 → 6.3`
+* @blueprintjs/datetime: `5.3 → 6.0`
 * react-grid-layout `1.5 → 2.1`
 
 ## 78.1.4 - 2025-12-05
@@ -856,8 +876,8 @@ build. That said, we *strongly* recommend taking these same changes into your ap
 ### 📚 Libraries
 
 * @azure/msal-browser `3.17 → 3.23`
-* mobx  `6.9.1 -> 6.13.2`,
-* mobx-react-lite  `3.4.3 -> 4.0.7`,
+* mobx  `6.9 → 6.13`,
+* mobx-react-lite  `3.4 → 4.0`,
 
 ## 67.0.0 - 2024-09-03
 

package/admin/tabs/cluster/instances/services/DetailsPanel.ts

@@ -35,9 +35,9 @@ export const detailsPanel = hoistCmp.factory({
 
 const stats = hoistCmp.factory<DetailsModel>({
     render({model}) {
-        const {stats, lastLoadException, loadModel} = model;
+        const {stats, lastLoadException, loadObserver} = model;
 
-        if (!loadModel.isPending && lastLoadException) {
+        if (!loadObserver.isPending && lastLoadException) {
             return errorMessage({
                 error: lastLoadException,
                 detailsFn: e => XH.exceptionHandler.showExceptionDetails(e)
@@ -46,7 +46,7 @@ const stats = hoistCmp.factory<DetailsModel>({
 
         return isEmpty(stats)
             ? placeholder(
-                  ...(loadModel.isPending
+                  ...(loadObserver.isPending
                       ? []
                       : [Icon.questionCircle(), 'This service does not report any admin stats.'])
               )

package/admin/tabs/cluster/instances/services/ServiceModel.ts

@@ -91,7 +91,7 @@ export class ServiceModel extends BaseInstanceModel {
     }
 
     async clearCachesAsync(entireCluster: boolean) {
-        const {gridModel, instanceName, loadModel} = this,
+        const {gridModel, instanceName, loadObserver} = this,
             {selectedRecords} = gridModel;
 
         if (isEmpty(selectedRecords)) return;
@@ -125,7 +125,7 @@ export class ServiceModel extends BaseInstanceModel {
                     instance: entireCluster ? null : instanceName,
                     names: selectedRecords.map(it => it.data.name)
                 }
-            }).linkTo(loadModel);
+            }).linkTo(loadObserver);
             await this.refreshAsync();
             XH.successToast('Service caches cleared.');
         } catch (e) {

package/appcontainer/AppContainerModel.ts

@@ -76,7 +76,7 @@ export class AppContainerModel extends HoistModel {
     //------------
     // Sub-models
     //------------
-    @managed appLoadModel = TaskObserver.trackAll();
+    @managed appLoadObserver = TaskObserver.trackAll();
     @managed appStateModel = new AppStateModel();
     @managed pageStateModel = new PageStateModel();
     @managed routerModel = new RouterModel();
@@ -250,7 +250,7 @@ export class AppContainerModel extends HoistModel {
 
             // init all models other than Router
             const models = [
-                this.appLoadModel,
+                this.appLoadObserver,
                 this.appStateModel,
                 this.pageStateModel,
                 this.routerModel,
@@ -271,7 +271,7 @@ export class AppContainerModel extends HoistModel {
             ];
             models.forEach((m: any) => m.init?.());
 
-            this.bindInitSequenceToAppLoadModel();
+            this.bindInitSequenceToAppLoadObserver();
 
             this.setDocTitle();
 
@@ -359,10 +359,10 @@ export class AppContainerModel extends HoistModel {
         this.appStateModel.setAppState(nextState);
     }
 
-    private bindInitSequenceToAppLoadModel() {
+    private bindInitSequenceToAppLoadObserver() {
         const terminalStates: AppState[] = ['RUNNING', 'SUSPENDED', 'LOAD_FAILED', 'ACCESS_DENIED'],
             loadingPromise = mobxWhen(() => terminalStates.includes(this.appStateModel.state));
-        loadingPromise.linkTo(this.appLoadModel);
+        loadingPromise.linkTo(this.appLoadObserver);
     }
 
     private setViewportContent(content: string) {

package/appcontainer/AppStateModel.ts

@@ -57,7 +57,7 @@ export class AppStateModel extends HoistModel {
         this.setAppState('SUSPENDED');
         XH.webSocketService.shutdown();
         Timer.cancelAll();
-        XH.appContainerModel.appLoadModel.clear();
+        XH.appContainerModel.appLoadObserver.clear();
     }
 
     checkAccess(): boolean {

package/appcontainer/FeedbackDialogModel.ts

@@ -51,20 +51,18 @@ export class FeedbackDialogModel extends HoistModel {
      * Submit the feedback entry to the activity tracking system.
      */
     async submitAsync() {
-        const {message} = this,
-            {trackService} = XH;
-
+        const {message} = this;
         if (!message) this.hide();
 
         try {
-            trackService.track({
+            XH.trackService.track({
                 category: 'Feedback',
                 message: 'User submitted feedback',
                 data: {
                     userMessage: this.message
                 }
             });
-            trackService.pushPendingAsync().linkTo(XH.appLoadModel);
+            await XH.trackService.pushPendingAsync().linkTo(XH.appLoadObserver);
             XH.successToast('Thank you - your feedback has been sent.');
             this.hide();
         } catch (e) {

package/build/types/appcontainer/AppContainerModel.d.ts

@@ -23,7 +23,7 @@ export declare class AppContainerModel extends HoistModel {
     private initCalled;
     appSpec: AppSpec;
     appModel: HoistAppModel;
-    appLoadModel: TaskObserver;
+    appLoadObserver: TaskObserver;
     appStateModel: AppStateModel;
     pageStateModel: PageStateModel;
     routerModel: RouterModel;
@@ -87,7 +87,7 @@ export declare class AppContainerModel extends HoistModel {
     private startRouter;
     private startOptionsDialog;
     private setAppState;
-    private bindInitSequenceToAppLoadModel;
+    private bindInitSequenceToAppLoadObserver;
     private setViewportContent;
     private getViewportContent;
 }

package/build/types/cmp/grid/GridModel.d.ts

@@ -553,9 +553,9 @@ export declare class GridModel extends HoistModel {
     autosizeAsync(overrideOpts?: Omit<GridAutosizeOptions, 'mode'>): Promise<void>;
     /**
      * Begin an inline editing session.
-     * @param record - StoreRecord/ID to edit. If unspecified, the first selected StoreRecord
+     * @param opts.record - StoreRecord/ID to edit. If unspecified, the first selected StoreRecord
      *      will be used, if any, or the first overall StoreRecord in the grid.
-     * @param colId - ID of column on which to start editing. If unspecified, the first
+     * @param opts.colId - ID of column on which to start editing. If unspecified, the first
      *      editable column will be used.
      */
     beginEditAsync(opts?: {

package/build/types/cmp/layout/Tags.d.ts

@@ -10,6 +10,7 @@ export declare const a: import("@xh/hoist/core").ElementFactory<import("react").
 export declare const br: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBRElement>, HTMLBRElement>>;
 export declare const code: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>>;
 export declare const div: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const fieldset: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>>;
 export declare const form: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>>;
 export declare const hr: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>>;
 export declare const h1: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
@@ -17,6 +18,7 @@ export declare const h2: import("@xh/hoist/core").ElementFactory<import("react")
 export declare const h3: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
 export declare const h4: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
 export declare const label: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>;
+export declare const legend: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>>;
 export declare const li: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>;
 export declare const nav: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>>;
 export declare const ol: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>>;

package/build/types/cmp/tab/TabContainerModel.d.ts

@@ -70,7 +70,7 @@ export declare class TabContainerModel extends HoistModel {
     protected lastActiveTabId: string;
     /**
      * @param config - TabContainer configuration.
-     * @param [depth] - Depth in hierarchy of nested TabContainerModels. Not for application use.
+     * @param depth - Depth in hierarchy of nested TabContainerModels. Not for application use.
      */
     constructor({ tabs, defaultTabId, route, track, renderMode, refreshMode, persistWith, emptyText, xhImpl, switcher }: TabContainerConfig, depth?: number);
     /** Set/replace all tabs within the container. */

package/build/types/core/XH.d.ts

@@ -73,8 +73,9 @@ export declare class XHApi {
     webSocketService: WebSocketService;
     /**
      * Tracks globally loading promises.
-     * Apps should link any async operations that should mask the entire viewport to this model.
+     * Apps should link any async operations that should mask the entire viewport to this observer.
      */
+    get appLoadObserver(): TaskObserver;
     get appLoadModel(): TaskObserver;
     /** Root level application model. */
     get appModel(): HoistAppModel;

package/build/types/desktop/cmp/button/FieldsetCollapseButton.d.ts

@@ -0,0 +1,10 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { HoistProps } from '@xh/hoist/core';
+export interface FieldsetCollapseButtonProps extends HoistProps {
+    icon?: ReactElement;
+    text: ReactNode;
+    clickHandler?: (boolean: any) => void;
+    collapsed?: boolean;
+    disabled?: boolean;
+}
+export declare const FieldsetCollapseButton: import("react").FC<FieldsetCollapseButtonProps>, fieldsetCollapseButton: import("@xh/hoist/core").ElementFactory<FieldsetCollapseButtonProps>;

package/build/types/desktop/cmp/dash/canvas/DashCanvasModel.d.ts

@@ -14,11 +14,12 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
      */
     rowHeight?: number;
     /**
-     * Whether views should "compact" vertically or horizontally
+     * Whether views should "compact" vertically, horizontally or wrap
      * to condense space. Default `true` defaults to vertical compaction.
+     * Use `wrap` with caution.  It only works well if all items are 1 row high.
      * See react-grid-layout docs for more information.
-     * */
-    compact?: boolean | 'vertical' | 'horizontal';
+     */
+    compact?: boolean | 'vertical' | 'horizontal' | 'wrap';
     /** Between items [x,y] in pixels. Default `[10, 10]`. */
     margin?: [number, number];
     /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
@@ -29,6 +30,31 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
      * Whether a grid background should be shown. Default false.
      */
     showGridBackground?: boolean;
+    /**
+     * Whether the canvas should accept drag-and-drop of views from outside
+     * the canvas. Default false.
+     */
+    allowsDrop?: boolean;
+    /**
+     * Optional callback to invoke after a view is successfully dropped onto the canvas.
+     */
+    onDropDone?: (viewModel: DashCanvasViewModel) => void;
+    /**
+     * Optional callback to invoke when an item is dragged over the canvas. This may be used to
+     * customize how the size of the dropping placeholder is calculated. The callback should
+     * return an object with optional properties indicating the desired width, height (in grid units),
+     * and offset (in pixels) of the dropping placeholder.  The method's signature is the same as
+     * the `onDropDragOver` prop of ReactGridLayout.
+     * Returning `false` will prevent the dropping placeholder from being shown, and prevents a drop.
+     * Returning `void` will use the default behavior, which is to size the placeholder as per the
+     * `dropConfig.defaultItem` specification.
+     */
+    onDropDragOver?: (e: DragEvent) => OnDropDragOverResult;
+    /**
+     * Whether an overlay with an Add View button should be rendered
+     * when the canvas is empty. Default true.
+     */
+    showAddViewButtonWhenEmpty?: boolean;
 }
 export interface DashCanvasItemState {
     layout: DashCanvasItemLayout;
@@ -42,6 +68,12 @@ export interface DashCanvasItemLayout {
     w: number;
     h: number;
 }
+export type OnDropDragOverResult = {
+    w?: number;
+    h?: number;
+    dragOffsetX?: number;
+    dragOffsetY?: number;
+} | false | void;
 /**
  * Model for {@link DashCanvas}, managing all configurable options for the component and publishing
  * the observable state of its current widgets and their layout.
@@ -51,12 +83,17 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
 }> {
     columns: number;
     rowHeight: number;
-    compact: 'vertical' | 'horizontal';
+    compact: 'vertical' | 'horizontal' | 'wrap';
     margin: [number, number];
     containerPadding: [number, number];
     showGridBackground: boolean;
     rglHeight: number;
+    showAddViewButtonWhenEmpty: boolean;
+    DROPPING_ELEM_ID: string;
     maxRows: number;
+    allowsDrop: boolean;
+    onDropDone: (viewModel: DashCanvasViewModel) => void;
+    draggedInView: DashCanvasItemState;
     /** Current number of rows in canvas */
     get rows(): number;
     get isEmpty(): boolean;
@@ -65,7 +102,7 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     isResizing: boolean;
     private isLoadingState;
     get rglLayout(): any[];
-    constructor({ viewSpecs, viewSpecDefaults, initialState, layoutLocked, contentLocked, renameLocked, persistWith, emptyText, addViewButtonText, columns, rowHeight, compact, margin, maxRows, containerPadding, extraMenuItems, showGridBackground }: DashCanvasConfig);
+    constructor({ viewSpecs, viewSpecDefaults, initialState, layoutLocked, contentLocked, renameLocked, persistWith, emptyText, addViewButtonText, columns, rowHeight, compact, margin, maxRows, containerPadding, extraMenuItems, showGridBackground, showAddViewButtonWhenEmpty, allowsDrop, onDropDone, onDropDragOver }: DashCanvasConfig);
     /** Removes all views from the canvas */
     clear(): void;
     /**
@@ -103,6 +140,10 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     renameView(id: string): void;
     /** Scrolls a DashCanvasView into view. */
     ensureViewVisible(id: string): void;
+    onDrop(rglLayout: LayoutItem[], layoutItem: LayoutItem, evt: Event): void;
+    setDraggedInView(view?: DashCanvasItemState): void;
+    onDropDragOver(evt: DragEvent): OnDropDragOverResult;
+    getViewsBySpecId(id: any): DashCanvasViewModel[];
     getPersistableState(): PersistableState<{
         state: DashCanvasItemState[];
     }>;
@@ -123,6 +164,5 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     private setViewLayout;
     private getSpec;
     private hasSpec;
-    private getViewsBySpecId;
     private getNextAvailablePosition;
 }

package/build/types/desktop/cmp/dash/canvas/widgetwell/DashCanvasWidgetWell.d.ts

@@ -0,0 +1,17 @@
+import { HoistProps } from '@xh/hoist/core';
+import { DashCanvasModel } from '@xh/hoist/desktop/cmp/dash';
+import './DashCanvasWidgetWell.scss';
+export interface DashCanvasWidgetWellProps extends HoistProps {
+    /** DashCanvasModel for which this widget well should allow the user to add views from. */
+    dashCanvasModel?: DashCanvasModel;
+}
+/**
+ * Widget Well from which to add items to a DashCanvas by drag-and-drop.
+ *
+ * Available view specs are listed in their defined order,
+ * grouped by their 'groupName' property if present.
+ *
+ * Typically, an app developer would place this inside a collapsible panel to the side of
+ * a DashCanvas.
+ */
+export declare const DashCanvasWidgetWell: import("react").FC<DashCanvasWidgetWellProps>, dashCanvasWidgetWell: import("@xh/hoist/core").ElementFactory<DashCanvasWidgetWellProps>;

package/build/types/desktop/cmp/dash/canvas/widgetwell/DashCanvasWidgetWellModel.d.ts

@@ -0,0 +1,11 @@
+import { DragEvent } from 'react';
+import { DashCanvasModel } from '@xh/hoist/desktop/cmp/dash';
+import { HoistModel } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+export declare class DashCanvasWidgetWellModel extends HoistModel {
+    dashCanvasModel: DashCanvasModel;
+    constructor();
+    onLinked(): void;
+    onDragStart(evt: DragEvent<HTMLDivElement>): void;
+    onDragEnd(evt: DragEvent<HTMLDivElement>): void;
+}

package/build/types/desktop/cmp/form/CollapsibleFieldset.d.ts

@@ -0,0 +1,11 @@
+import { type FieldsetHTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import { HoistProps } from '@xh/hoist/core';
+import './CollapsibleFieldset.scss';
+export interface CollapsibleFieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement>, HoistProps {
+    icon?: ReactElement;
+    label: ReactNode;
+    clickHandler?: () => void;
+    collapsed?: boolean;
+    hideItemCount?: boolean;
+}
+export declare const CollapsibleFieldset: import("react").FC<CollapsibleFieldsetProps>, collapsibleFieldset: import("@xh/hoist/core").ElementFactory<CollapsibleFieldsetProps>;

package/cmp/grid/GridModel.ts

@@ -1442,9 +1442,9 @@ export class GridModel extends HoistModel {
 
     /**
      * Begin an inline editing session.
-     * @param record - StoreRecord/ID to edit. If unspecified, the first selected StoreRecord
+     * @param opts.record - StoreRecord/ID to edit. If unspecified, the first selected StoreRecord
      *      will be used, if any, or the first overall StoreRecord in the grid.
-     * @param colId - ID of column on which to start editing. If unspecified, the first
+     * @param opts.colId - ID of column on which to start editing. If unspecified, the first
      *      editable column will be used.
      */
     async beginEditAsync(opts: {record?: StoreRecordOrId; colId?: string} = {}) {

package/cmp/layout/Tags.ts

@@ -29,6 +29,7 @@ export const a = elementFactory('a');
 export const br = elementFactory('br');
 export const code = elementFactory('code');
 export const div = elementFactory('div');
+export const fieldset = elementFactory('fieldset');
 export const form = elementFactory('form');
 export const hr = elementFactory('hr');
 export const h1 = elementFactory('h1');
@@ -36,6 +37,7 @@ export const h2 = elementFactory('h2');
 export const h3 = elementFactory('h3');
 export const h4 = elementFactory('h4');
 export const label = elementFactory('label');
+export const legend = elementFactory('legend');
 export const li = elementFactory('li');
 export const nav = elementFactory('nav');
 export const ol = elementFactory('ol');

package/cmp/tab/TabContainerModel.ts

@@ -119,7 +119,7 @@ export class TabContainerModel extends HoistModel {
 
     /**
      * @param config - TabContainer configuration.
-     * @param [depth] - Depth in hierarchy of nested TabContainerModels. Not for application use.
+     * @param depth - Depth in hierarchy of nested TabContainerModels. Not for application use.
      */
     constructor(
         {

package/cmp/viewmanager/ViewManagerModel.ts

@@ -281,8 +281,8 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
 
     /** True if any async tasks are pending. */
     get isLoading(): boolean {
-        const {loadModel, saveTask, selectTask} = this;
-        return loadModel.isPending || saveTask.isPending || selectTask.isPending;
+        const {loadObserver, saveTask, selectTask} = this;
+        return loadObserver.isPending || saveTask.isPending || selectTask.isPending;
     }
 
     /**

package/core/XH.ts

@@ -31,7 +31,7 @@ import {
     WebSocketService,
     ClientHealthService
 } from '@xh/hoist/svc';
-import {getLogLevel, setLogLevel, LogLevel} from '@xh/hoist/utils/js';
+import {getLogLevel, setLogLevel, LogLevel, apiDeprecated} from '@xh/hoist/utils/js';
 import {camelCase, flatten, isString, uniqueId} from 'lodash';
 import {Router, State} from 'router5';
 import {CancelFn} from 'router5/types/types/base';
@@ -164,10 +164,18 @@ export class XHApi {
     //----------------------------
     /**
      * Tracks globally loading promises.
-     * Apps should link any async operations that should mask the entire viewport to this model.
+     * Apps should link any async operations that should mask the entire viewport to this observer.
      */
+    get appLoadObserver(): TaskObserver {
+        return this.acm.appLoadObserver;
+    }
+
     get appLoadModel(): TaskObserver {
-        return this.acm.appLoadModel;
+        apiDeprecated('XH.appLoadModel', {
+            v: 'v82',
+            msg: 'Use XH.appLoadObserver instead.'
+        });
+        return this.appLoadObserver;
     }
 
     /** Root level application model. */
@@ -439,7 +447,7 @@ export class XHApi {
      */
     @action
     reloadApp(opts?: ReloadAppOptions | string) {
-        never().linkTo(this.appLoadModel);
+        never().linkTo(this.appLoadObserver);
 
         opts = isString(opts) ? {path: opts} : (opts ?? {});
 

package/desktop/appcontainer/AppContainer.ts

@@ -171,7 +171,7 @@ const appContainerView = hoistCmp.factory({
 });
 
 const appLoadMask = hoistCmp.factory<AppContainerModel>(({model}) =>
-    mask({bind: model.appLoadModel, spinner: true})
+    mask({bind: model.appLoadObserver, spinner: true})
 );
 
 const suspendedView = hoistCmp.factory(() => viewport(suspendPanel(), appLoadMask()));

package/desktop/appcontainer/LoginPanel.ts

@@ -25,7 +25,7 @@ export const loginPanel = hoistCmp.factory({
 
     render({model}) {
         const {loginMessage} = XH.appSpec,
-            {loadModel, warning, isValid, loginInProgress} = model;
+            {loadObserver, warning, isValid, loginInProgress} = model;
 
         const onKeyDown = ev => {
             if (ev.key === 'Enter') model.submitAsync();
@@ -40,7 +40,7 @@ export const loginPanel = hoistCmp.factory({
                 icon: Icon.login(),
                 className: 'xh-login',
                 width: 300,
-                mask: loadModel,
+                mask: loadObserver,
                 items: [
                     vspacer(10),
                     form(

package/desktop/cmp/button/FieldsetCollapseButton.ts

@@ -0,0 +1,44 @@
+/*
+ * 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 {type ReactElement, type ReactNode, useState} from 'react';
+import {hoistCmp, HoistProps} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {legend} from '@xh/hoist/cmp/layout';
+import {Icon} from '@xh/hoist/icon/Icon';
+
+export interface FieldsetCollapseButtonProps extends HoistProps {
+    icon?: ReactElement;
+    text: ReactNode;
+    clickHandler?: (boolean) => void;
+    collapsed?: boolean;
+    disabled?: boolean;
+}
+
+export const [FieldsetCollapseButton, fieldsetCollapseButton] =
+    hoistCmp.withFactory<FieldsetCollapseButtonProps>({
+        displayName: 'FieldsetCollapseButton',
+        model: false,
+        render({icon, text, clickHandler, collapsed, disabled}) {
+            const [isCollapsed, setIsCollapsed] = useState<boolean>(collapsed === true);
+
+            return legend(
+                button({
+                    text,
+                    icon,
+                    rightIcon: isCollapsed ? Icon.angleDown() : Icon.angleUp(),
+                    outlined: false,
+                    disabled,
+                    onClick: () => {
+                        const val = !isCollapsed;
+                        setIsCollapsed(val);
+                        clickHandler?.(val);
+                    }
+                })
+            );
+        }
+    });

package/desktop/cmp/dash/canvas/DashCanvas.ts

@@ -10,7 +10,7 @@ import ReactGridLayout, {
     useContainerWidth,
     getCompactor
 } from 'react-grid-layout';
-import {GridBackground, type GridBackgroundProps} from 'react-grid-layout/extras';
+import {GridBackground, type GridBackgroundProps, wrapCompactor} from 'react-grid-layout/extras';
 import composeRefs from '@seznam/compose-react-refs';
 import {div, vbox, vspacer} from '@xh/hoist/cmp/layout';
 import {
@@ -62,7 +62,11 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
     render({className, model, rglOptions, testId}, ref) {
         const isDraggable = !model.layoutLocked,
             isResizable = !model.layoutLocked,
-            {width, containerRef, mounted} = useContainerWidth();
+            {width, containerRef, mounted} = useContainerWidth(),
+            defaultDroppedItemDims = {
+                w: Math.floor(model.columns / 3),
+                h: Math.floor(model.columns / 3)
+            };
 
         return refreshContextView({
             model: model.refreshContextModel,
@@ -98,7 +102,20 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                                 resizeConfig: {
                                     enabled: isResizable
                                 },
-                                compactor: getCompactor(model.compact, false, false),
+                                dropConfig: {
+                                    enabled: model.contentLocked ? false : model.allowsDrop,
+                                    defaultItem: defaultDroppedItemDims,
+                                    onDragOver: (evt: DragEvent) => model.onDropDragOver(evt)
+                                },
+                                onDrop: (
+                                    layout: LayoutItem[],
+                                    layoutItem: LayoutItem,
+                                    evt: Event
+                                ) => model.onDrop(layout, layoutItem, evt),
+                                compactor:
+                                    model.compact === 'wrap'
+                                        ? wrapCompactor
+                                        : getCompactor(model.compact, false, false),
                                 onLayoutChange: (layout: LayoutItem[]) =>
                                     model.onRglLayoutChange(layout),
                                 onResizeStart: () => (model.isResizing = true),
@@ -116,7 +133,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                         ),
                         width
                     }),
-                    emptyContainerOverlay({omit: !mounted})
+                    emptyContainerOverlay({omit: !mounted || !model.showAddViewButtonWhenEmpty})
                 ],
                 [TEST_ID]: testId
             })