@xh/hoist 80.0.0-SNAPSHOT.1768251400948 → 80.0.0-SNAPSHOT.1768251669499

package/CHANGELOG.md

@@ -11,9 +11,15 @@
       so there is no deprecated alias. Any app usages should swap to `XH.appLoadObserver`.
     * Removed additional references to deprecated `loadModel` within Hoist itself.
 * Removed the following instance getters - use new static typeguards instead:
-  * `Store.isStore`
-  * `View.isView`
-  * `Filter.isFilter`
+    * `Store.isStore`
+    * `View.isView`
+    * `Filter.isFilter`
+
+### 🎁 New Features
+
+* Added new `AppMenuButton.renderWithUserProfile` prop as a built-in alternative to the default
+  hamburger menu. Set to `true` to render the current user's initials instead or provide a function
+  to render a custom element for the user.
 
 ### ⚙️ Typescript API Adjustments
 
@@ -23,17 +29,6 @@
   possible to use these models with other, alternate implementations if needed.
 * Added new static typeguard methods on `Store`, `View`, and `Filter` + subclasses.
 
-### 🎁 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

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 opts.record - StoreRecord/ID to edit. If unspecified, the first selected StoreRecord
+     * @param 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 opts.colId - ID of column on which to start editing. If unspecified, the first
+     * @param 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,7 +10,6 @@ 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>>;
@@ -18,7 +17,6 @@ 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

@@ -75,7 +75,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

@@ -1,7 +1,7 @@
 import { RouterModel } from '@xh/hoist/appcontainer/RouterModel';
 import { HoistAuthModel } from '@xh/hoist/core/HoistAuthModel';
 import { Store } from '@xh/hoist/data';
-import { AlertBannerService, AutoRefreshService, ChangelogService, ConfigService, EnvironmentService, FetchOptions, FetchService, GridAutosizeService, GridExportService, IdentityService, IdleService, InspectorService, JsonBlobService, LocalStorageService, PrefService, SessionStorageService, TrackService, WebSocketService, ClientHealthService } from '@xh/hoist/svc';
+import { AlertBannerService, AutoRefreshService, ChangelogService, ClientHealthService, ConfigService, EnvironmentService, FetchOptions, FetchService, GridAutosizeService, GridExportService, IdentityService, IdleService, InspectorService, JsonBlobService, LocalStorageService, PrefService, SessionStorageService, TrackService, WebSocketService } from '@xh/hoist/svc';
 import { LogLevel } from '@xh/hoist/utils/js';
 import { Router, State } from 'router5';
 import { CancelFn } from 'router5/types/types/base';
@@ -175,6 +175,8 @@ export declare class XHApi {
      * @see IdentityService.username
      */
     getUsername(): string;
+    /** @returns the current acting user's initials. */
+    getUserInitials(): string;
     /**
      * Logout the current user.
      * @see HoistAuthModel.logoutAsync

package/build/types/core/enums/RenderMode.d.ts

@@ -1,6 +1,6 @@
 /**
  * Options for how contents should be rendered by their parent container.
- * Used by {@link TabContainerModel}, {@link DashContainerModel}, {@link PanelModel}, and {@link CollapsibleSet}.
+ * Used by {@link TabContainerModel}, {@link DashContainerModel}, and {@link PanelModel}.
  */
 export declare const RenderMode: Readonly<{
     /** Always render contents when the parent container is rendered, even if inactive. */

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

@@ -1,6 +1,7 @@
-import { MenuItemLike } from '@xh/hoist/core';
+import { HoistUser, MenuItemLike } from '@xh/hoist/core';
 import { ButtonProps } from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
+import { ReactNode } from 'react';
 export interface AppMenuButtonProps extends ButtonProps {
     /**
      * Array of extra menu items. Can contain:
@@ -31,5 +32,13 @@ export interface AppMenuButtonProps extends ButtonProps {
     hideOptionsItem?: boolean;
     /** True to hide the Theme Toggle button. */
     hideThemeItem?: boolean;
+    /**
+     * Replace the default hamburger icon with a user profile representation. Set to true to render
+     * the user's initials from their `HoistUser.displayName`. Alternately, provide a custom
+     * function to render an alternate compact string or element for the current user.
+     */
+    renderWithUserProfile?: boolean | RenderWithUserProfileCustomFn;
 }
+type RenderWithUserProfileCustomFn = (user: HoistUser) => ReactNode;
 export declare const AppMenuButton: import("react").FC<AppMenuButtonProps>, appMenuButton: import("@xh/hoist/core").ElementFactory<AppMenuButtonProps>;
+export {};

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

@@ -14,12 +14,11 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
      */
     rowHeight?: number;
     /**
-     * Whether views should "compact" vertically, horizontally or wrap
+     * Whether views should "compact" vertically or horizontally
      * 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' | 'wrap';
+     * */
+    compact?: boolean | 'vertical' | 'horizontal';
     /** 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`. */
@@ -30,31 +29,6 @@ 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;
@@ -68,12 +42,6 @@ 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.
@@ -83,17 +51,12 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
 }> {
     columns: number;
     rowHeight: number;
-    compact: 'vertical' | 'horizontal' | 'wrap';
+    compact: 'vertical' | 'horizontal';
     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;
@@ -102,7 +65,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, showAddViewButtonWhenEmpty, allowsDrop, onDropDone, onDropDragOver }: DashCanvasConfig);
+    constructor({ viewSpecs, viewSpecDefaults, initialState, layoutLocked, contentLocked, renameLocked, persistWith, emptyText, addViewButtonText, columns, rowHeight, compact, margin, maxRows, containerPadding, extraMenuItems, showGridBackground }: DashCanvasConfig);
     /** Removes all views from the canvas */
     clear(): void;
     /**
@@ -140,10 +103,6 @@ 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[];
     }>;
@@ -164,5 +123,6 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     private setViewLayout;
     private getSpec;
     private hasSpec;
+    private getViewsBySpecId;
     private getNextAvailablePosition;
 }

package/build/types/dynamics/desktop.d.ts

@@ -8,7 +8,6 @@
  *
  * See the platform specific AppContainer where these implementations are actually provided.
  */
-export declare let collapsibleSetButton: any;
 export declare let ColChooserModel: any;
 export declare let ColumnHeaderFilterModel: any;
 export declare let ModalSupportModel: any;

package/build/types/dynamics/mobile.d.ts

@@ -8,7 +8,6 @@
  *
  * See the platform specific AppContainer where these implementations are actually provided.
  */
-export declare let collapsibleSetButton: any;
 export declare let ColChooserModel: any;
 export declare let colChooser: any;
 export declare let zoneMapper: any;

package/build/types/mobile/cmp/header/AppMenuButton.d.ts

@@ -1,6 +1,7 @@
-import { MenuItemLike } from '@xh/hoist/core';
+import { HoistUser, MenuItemLike } from '@xh/hoist/core';
 import { MenuButtonProps } from '@xh/hoist/mobile/cmp/menu';
 import '@xh/hoist/mobile/register';
+import { ReactNode } from 'react';
 export interface AppMenuButtonProps extends MenuButtonProps {
     /** Array of app-specific MenuItems or configs to create them. */
     extraItems?: MenuItemLike[];
@@ -21,7 +22,14 @@ export interface AppMenuButtonProps extends MenuButtonProps {
     hideThemeItem?: boolean;
     /** True to hide the About button */
     hideAboutItem?: boolean;
+    /**
+     * Replace the default hamburger icon with a user profile representation. Set to true to render
+     * the user's initials from their `HoistUser.displayName`. Alternately, provide a custom
+     * function to render an alternate compact string or element for the current user.
+     */
+    renderWithUserProfile?: boolean | RenderWithUserProfileCustomFn;
 }
+type RenderWithUserProfileCustomFn = (user: HoistUser) => ReactNode;
 /**
  * A top-level application drop down menu, which installs a standard set of menu items for common
  * application actions. Application specific items can be displayed before these standard items.
@@ -30,3 +38,4 @@ export interface AppMenuButtonProps extends MenuButtonProps {
  * or they can each be explicitly hidden.
  */
 export declare const AppMenuButton: import("react").FC<AppMenuButtonProps>, appMenuButton: import("@xh/hoist/core").ElementFactory<AppMenuButtonProps>;
+export {};

package/build/types/svc/IdentityService.d.ts

@@ -11,10 +11,12 @@ export declare class IdentityService extends HoistService {
     private _authUser;
     private _apparentUser;
     initAsync(): Promise<void>;
-    /** Current acting user (see authUser for notes on impersonation) */
+    /** @returns current acting user (see authUser for notes on impersonation) */
     get user(): HoistUser;
-    /** Current acting user's username. */
+    /** @returns current acting user's username. */
     get username(): string;
+    /** @returns current acting user's initials, based on displayName. */
+    get userInitials(): string;
     /**
      * Actual user who authenticated to the web application.
      * This will be the same as the user except when an administrator is impersonation another

package/cmp/grid/GridModel.ts

@@ -1442,9 +1442,9 @@ export class GridModel extends HoistModel {
 
     /**
      * Begin an inline editing session.
-     * @param opts.record - StoreRecord/ID to edit. If unspecified, the first selected StoreRecord
+     * @param 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 opts.colId - ID of column on which to start editing. If unspecified, the first
+     * @param 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,7 +29,6 @@ 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');
@@ -37,7 +36,6 @@ 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

@@ -123,7 +123,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/core/XH.ts

@@ -14,6 +14,7 @@ import {
     AlertBannerService,
     AutoRefreshService,
     ChangelogService,
+    ClientHealthService,
     ConfigService,
     EnvironmentService,
     FetchOptions,
@@ -28,13 +29,13 @@ import {
     PrefService,
     SessionStorageService,
     TrackService,
-    WebSocketService,
-    ClientHealthService
+    WebSocketService
 } from '@xh/hoist/svc';
-import {getLogLevel, setLogLevel, LogLevel, apiDeprecated} from '@xh/hoist/utils/js';
+import {apiDeprecated, getLogLevel, LogLevel, setLogLevel} from '@xh/hoist/utils/js';
 import {camelCase, flatten, isString, uniqueId} from 'lodash';
 import {Router, State} from 'router5';
 import {CancelFn} from 'router5/types/types/base';
+import ShortUniqueId from 'short-unique-id';
 import {SetOptional} from 'type-fest';
 import {AppContainerModel} from '../appcontainer/AppContainerModel';
 import {BannerModel} from '../appcontainer/BannerModel';
@@ -66,7 +67,6 @@ import {
 import {installServicesAsync} from './impl/InstallServices';
 import {instanceManager} from './impl/InstanceManager';
 import {HoistModel, ModelSelector, RefreshContextModel} from './model';
-import ShortUniqueId from 'short-unique-id';
 
 export const MIN_HOIST_CORE_VERSION = '31.2';
 
@@ -360,6 +360,11 @@ export class XHApi {
         return this.identityService?.username ?? null;
     }
 
+    /** @returns the current acting user's initials. */
+    getUserInitials(): string {
+        return this.identityService?.userInitials ?? null;
+    }
+
     /**
      * Logout the current user.
      * @see HoistAuthModel.logoutAsync

package/core/enums/RenderMode.ts

@@ -7,7 +7,7 @@
 
 /**
  * Options for how contents should be rendered by their parent container.
- * Used by {@link TabContainerModel}, {@link DashContainerModel}, {@link PanelModel}, and {@link CollapsibleSet}.
+ * Used by {@link TabContainerModel}, {@link DashContainerModel}, and {@link PanelModel}.
  */
 export const RenderMode = Object.freeze({
     /** Always render contents when the parent container is rendered, even if inactive. */

package/desktop/appcontainer/AppContainer.ts

@@ -27,7 +27,6 @@ import {zoneMapperDialog as zoneMapper} from '@xh/hoist/desktop/cmp/zoneGrid/imp
 import {useContextMenu, useHotkeys} from '@xh/hoist/desktop/hooks';
 import {DynamicTabSwitcherModel, installDesktopImpls} from '@xh/hoist/dynamics/desktop';
 import {inspectorPanel} from '@xh/hoist/inspector/InspectorPanel';
-import {collapsibleSetButton} from '@xh/hoist/desktop/cmp/button/CollapsibleSetButton';
 import {blueprintProvider} from '@xh/hoist/kit/blueprint';
 import {consumeEvent} from '@xh/hoist/utils/js';
 import {elementFromContent, useOnMount} from '@xh/hoist/utils/react';
@@ -47,7 +46,6 @@ import {toastSource} from './ToastSource';
 import {versionBar} from './VersionBar';
 
 installDesktopImpls({
-    collapsibleSetButton,
     tabContainerImpl,
     dockContainerImpl,
     storeFilterFieldImpl,

package/desktop/cmp/appbar/AppBar.scss

@@ -6,11 +6,6 @@
  */
 
 .xh-appbar {
-  // Menu button might be on left or right of appBar - add right margin when on left only.
-  .xh-app-menu-button:first-child {
-    margin-right: var(--xh-pad-px);
-  }
-
   .xh-appbar-icon {
     margin-right: var(--xh-pad-px);
   }
@@ -20,6 +15,30 @@
     font-size: var(--xh-appbar-title-font-size-px);
     margin-right: var(--xh-pad-px);
   }
+
+  .xh-app-menu-button {
+    // Menu button might be on left or right of appBar - add right margin when on left only.
+    &:first-child {
+      margin-right: var(--xh-pad-px);
+    }
+
+    &__user-profile {
+      border-radius: 50%;
+      border: var(--xh-border-solid);
+      cursor: pointer;
+      height: 32px;
+      line-height: 31px;
+      text-align: center;
+      width: 32px;
+    }
+
+    // Trigger profile-specific hover styles on parent button hover
+    &:hover .xh-app-menu-button__user-profile {
+      color: var(--xh-appbar-user-profile-hover-color);
+      border-color: var(--xh-appbar-user-profile-hover-color);
+      background-color: transparent;
+    }
+  }
 }
 
 //------------------------

package/desktop/cmp/button/AppMenuButton.ts

@@ -4,13 +4,16 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {hoistCmp, MenuItemLike, XH} from '@xh/hoist/core';
+import {div} from '@xh/hoist/cmp/layout';
+import {hoistCmp, HoistProps, HoistUser, MenuItemLike, XH} from '@xh/hoist/core';
 import {ButtonProps, button} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {menu, popover} from '@xh/hoist/kit/blueprint';
 import {parseMenuItems} from '@xh/hoist/utils/impl';
 import {withDefault} from '@xh/hoist/utils/js';
+import {isFunction} from 'lodash';
+import {ReactNode} from 'react';
 
 export interface AppMenuButtonProps extends ButtonProps {
     /**
@@ -50,8 +53,17 @@ export interface AppMenuButtonProps extends ButtonProps {
 
     /** True to hide the Theme Toggle button. */
     hideThemeItem?: boolean;
+
+    /**
+     * Replace the default hamburger icon with a user profile representation. Set to true to render
+     * the user's initials from their `HoistUser.displayName`. Alternately, provide a custom
+     * function to render an alternate compact string or element for the current user.
+     */
+    renderWithUserProfile?: boolean | RenderWithUserProfileCustomFn;
 }
 
+type RenderWithUserProfileCustomFn = (user: HoistUser) => ReactNode;
+
 export const [AppMenuButton, appMenuButton] = hoistCmp.withFactory<AppMenuButtonProps>({
     displayName: 'AppMenuButton',
     model: false,
@@ -70,6 +82,7 @@ export const [AppMenuButton, appMenuButton] = hoistCmp.withFactory<AppMenuButton
             hideOptionsItem,
             hideThemeItem,
             disabled,
+            renderWithUserProfile,
             ...rest
         } = props;
 
@@ -79,7 +92,8 @@ export const [AppMenuButton, appMenuButton] = hoistCmp.withFactory<AppMenuButton
             position: 'bottom-right',
             minimal: true,
             item: button({
-                icon: Icon.menu(),
+                icon: renderWithUserProfile ? null : Icon.menu(),
+                text: renderWithUserProfile ? userProfile({renderWithUserProfile}) : null,
                 disabled,
                 ...rest
             }),
@@ -95,6 +109,20 @@ export const [AppMenuButton, appMenuButton] = hoistCmp.withFactory<AppMenuButton
 //---------------------------
 // Implementation
 //---------------------------
+const userProfile = hoistCmp.factory<
+    HoistProps & {renderWithUserProfile: true | RenderWithUserProfileCustomFn}
+>({
+    model: false,
+    render({renderWithUserProfile}) {
+        return div({
+            className: 'xh-app-menu-button__user-profile',
+            item: isFunction(renderWithUserProfile)
+                ? renderWithUserProfile(XH.getUser())
+                : XH.getUserInitials()
+        });
+    }
+});
+
 function buildMenuItems(props: AppMenuButtonProps) {
     let {
         hideAboutItem,

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

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