@umbraco-cms/backoffice 16.0.0 → 16.1.0-rc

package/dist-cms/packages/core/tree/data/tree-repository.interface.d.ts

@@ -1,9 +1,8 @@
 import type { UmbTreeItemModel, UmbTreeRootModel } from '../types.js';
 import type { UmbTreeChildrenOfRequestArgs, UmbTreeAncestorsOfRequestArgs, UmbTreeRootItemsRequestArgs } from './types.js';
-import type { UmbPagedModel } from '@umbraco-cms/backoffice/repository';
+import type { UmbPagedModel, UmbRepositoryResponse, UmbRepositoryResponseWithAsObservable } from '@umbraco-cms/backoffice/repository';
 import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
-import type { UmbProblemDetails } from '@umbraco-cms/backoffice/resources';
 /**
  * Interface for a tree repository.
  * @interface UmbTreeRepository
@@ -16,40 +15,25 @@ export interface UmbTreeRepository<TreeItemType extends UmbTreeItemModel = UmbTr
      * Requests the root of the tree.
      * @memberof UmbTreeRepository
      */
-    requestTreeRoot: () => Promise<{
-        data?: TreeRootType;
-        error?: UmbProblemDetails;
-    }>;
+    requestTreeRoot: () => Promise<UmbRepositoryResponse<TreeRootType>>;
     /**
      * Requests the root items of the tree.
      * @param {UmbTreeRootItemsRequestArgs} args
      * @memberof UmbTreeRepository
      */
-    requestTreeRootItems: (args: TreeRootItemsRequestArgsType) => Promise<{
-        data?: UmbPagedModel<TreeItemType>;
-        error?: UmbProblemDetails;
-        asObservable?: () => Observable<TreeItemType[]>;
-    }>;
+    requestTreeRootItems: (args: TreeRootItemsRequestArgsType) => Promise<UmbRepositoryResponseWithAsObservable<UmbPagedModel<TreeItemType>, TreeItemType[]>>;
     /**
      * Requests the children of the given parent item.
      * @param {UmbTreeChildrenOfRequestArgs} args
      * @memberof UmbTreeRepository
      */
-    requestTreeItemsOf: (args: TreeChildrenOfRequestArgsType) => Promise<{
-        data?: UmbPagedModel<TreeItemType>;
-        error?: UmbProblemDetails;
-        asObservable?: () => Observable<TreeItemType[]>;
-    }>;
+    requestTreeItemsOf: (args: TreeChildrenOfRequestArgsType) => Promise<UmbRepositoryResponseWithAsObservable<UmbPagedModel<TreeItemType>, TreeItemType[]>>;
     /**
      * Requests the ancestors of the given item.
      * @param {UmbTreeAncestorsOfRequestArgs} args
      * @memberof UmbTreeRepository
      */
-    requestTreeItemAncestors: (args: TreeAncestorsOfRequestArgsType) => Promise<{
-        data?: TreeItemType[];
-        error?: UmbProblemDetails;
-        asObservable?: () => Observable<TreeItemType[]>;
-    }>;
+    requestTreeItemAncestors: (args: TreeAncestorsOfRequestArgsType) => Promise<UmbRepositoryResponse<TreeItemType[]>>;
     /**
      * Returns an observable of the root items of the tree.
      * @memberof UmbTreeRepository

package/dist-cms/packages/core/tree/data/tree-server-data-source-base.d.ts

@@ -40,7 +40,7 @@ export declare abstract class UmbTreeServerDataSourceBase<ServerTreeItemType ext
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: ((Error | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | import("@umbraco-cms/backoffice/resources").UmbError) & (import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError)) | undefined;
         data?: undefined;
     }>;
     /**
@@ -56,7 +56,7 @@ export declare abstract class UmbTreeServerDataSourceBase<ServerTreeItemType ext
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: ((Error | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | import("@umbraco-cms/backoffice/resources").UmbError) & (import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError)) | undefined;
         data?: undefined;
     }>;
     /**
@@ -69,7 +69,7 @@ export declare abstract class UmbTreeServerDataSourceBase<ServerTreeItemType ext
         data: ClientTreeItemType[];
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: ((Error | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | import("@umbraco-cms/backoffice/resources").UmbError) & (import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError)) | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/core/tree/default/default-tree.element.js

@@ -115,7 +115,7 @@ let UmbDefaultTreeElement = class UmbDefaultTreeElement extends UmbLitElement {
         if (this._totalPages <= 1 || this._currentPage === this._totalPages) {
             return nothing;
         }
-        return html ` <uui-button id="load-more" @click=${this.#onLoadMoreClick} label="Load more"></uui-button> `;
+        return html ` <umb-tree-load-more-button @click=${this.#onLoadMoreClick}></umb-tree-load-more-button> `;
     }
     static { this.styles = css `
 		#load-more {

package/dist-cms/packages/core/tree/folder/index.d.ts

@@ -1,2 +1,3 @@
-export * from './modal/index.js';
 export * from './entity-action/index.js';
+export * from './modal/index.js';
+export * from './workspace/index.js';

package/dist-cms/packages/core/tree/folder/index.js

@@ -1,2 +1,3 @@
-export * from './modal/index.js';
 export * from './entity-action/index.js';
+export * from './modal/index.js';
+export * from './workspace/index.js';

package/dist-cms/packages/core/tree/folder/workspace/folder-workspace-editor.element.d.ts

@@ -0,0 +1,10 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+export declare class UmbFolderWorkspaceEditorElement extends UmbLitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        ['umb-folder-workspace-editor']: UmbFolderWorkspaceEditorElement;
+    }
+}

package/dist-cms/packages/core/tree/folder/workspace/folder-workspace-editor.element.js

@@ -0,0 +1,31 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, customElement, css } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+let UmbFolderWorkspaceEditorElement = class UmbFolderWorkspaceEditorElement extends UmbLitElement {
+    render() {
+        return html `<umb-workspace-editor>
+			<umb-icon id="icon" slot="header" name="icon-folder"></umb-icon>
+			<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
+		</umb-workspace-editor>`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			#icon {
+				display: inline-block;
+				font-size: var(--uui-size-6);
+				margin-right: var(--uui-size-space-4);
+			}
+		`,
+    ]; }
+};
+UmbFolderWorkspaceEditorElement = __decorate([
+    customElement('umb-folder-workspace-editor')
+], UmbFolderWorkspaceEditorElement);
+export { UmbFolderWorkspaceEditorElement };

package/dist-cms/packages/core/tree/folder/workspace/index.d.ts

@@ -0,0 +1,2 @@
+import './folder-workspace-editor.element.js';
+export * from './folder-workspace-editor.element.js';

package/dist-cms/packages/core/tree/folder/workspace/index.js

@@ -0,0 +1,2 @@
+import './folder-workspace-editor.element.js';
+export * from './folder-workspace-editor.element.js';

package/dist-cms/packages/core/tree/index.d.ts

@@ -1,3 +1,4 @@
+export * from './components/index.js';
 export * from './constants.js';
 export * from './data/index.js';
 export * from './default/index.js';

package/dist-cms/packages/core/tree/index.js

@@ -1,3 +1,4 @@
+export * from './components/index.js';
 export * from './constants.js';
 export * from './data/index.js';
 export * from './default/index.js';

package/dist-cms/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.d.ts

@@ -16,7 +16,7 @@ export declare abstract class UmbTreeItemElementBase<TreeItemModelType extends U
     private _isLoading;
     private _isSelectableContext;
     private _isSelectable;
-    private _isSelected;
+    protected _isSelected: boolean;
     private _hasChildren;
     private _isOpen;
     private _iconSlotHasChildren;
@@ -28,5 +28,6 @@ export declare abstract class UmbTreeItemElementBase<TreeItemModelType extends U
     private _onHideChildren;
     render(): import("lit-html").TemplateResult<1>;
     renderIconContainer(): import("lit-html").TemplateResult<1>;
+    protected _getIconToRender(icon: string): string;
     renderLabel(): import("lit-html").TemplateResult<1>;
 }

package/dist-cms/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.js

@@ -124,15 +124,18 @@ export class UmbTreeItemElementBase extends UmbLitElement {
     #renderIcon() {
         const icon = this._item?.icon;
         const isFolder = this._item?.isFolder;
-        const iconWithoutColor = icon?.split(' ')[0];
-        if (icon && iconWithoutColor) {
-            return html `<umb-icon slot="icon" name="${this._isActive ? iconWithoutColor : icon}"></umb-icon>`;
+        if (icon) {
+            return html `<umb-icon slot="icon" name="${this._getIconToRender(icon)}"></umb-icon>`;
         }
         if (isFolder) {
             return html `<umb-icon slot="icon" name="icon-folder"></umb-icon>`;
         }
         return html `<umb-icon slot="icon" name="icon-circle-dotted"></umb-icon>`;
     }
+    _getIconToRender(icon) {
+        const iconWithoutColor = icon.split(' ')[0];
+        return this._isActive || this._isSelected ? iconWithoutColor : icon;
+    }
     renderLabel() {
         return html `<slot name="label" slot="label"></slot>`;
     }
@@ -165,7 +168,7 @@ export class UmbTreeItemElementBase extends UmbLitElement {
         if (this._totalPages <= 1 || this._currentPage === this._totalPages) {
             return nothing;
         }
-        return html ` <uui-button @click=${this.#onLoadMoreClick} label="Load more"></uui-button> `;
+        return html ` <umb-tree-load-more-button @click=${this.#onLoadMoreClick}></umb-tree-load-more-button> `;
     }
 }
 __decorate([

package/dist-cms/packages/core/workspace/components/workspace-action/default/workspace-action-default-kind.element.d.ts

@@ -13,6 +13,7 @@ export declare class UmbWorkspaceActionElement<MetaType extends MetaWorkspaceAct
     _isDisabled: boolean;
     private _items;
     render(): import("lit-html").TemplateResult<1>;
+    disconnectedCallback(): void;
 }
 export default UmbWorkspaceActionElement;
 declare global {

package/dist-cms/packages/core/workspace/components/workspace-action/default/workspace-action-default-kind.element.js

@@ -16,6 +16,7 @@ let UmbWorkspaceActionElement = class UmbWorkspaceActionElement extends UmbLitEl
         super(...arguments);
         this._isDisabled = false;
         this._items = [];
+        this.#buttonStateResetTimeoutId = null;
     }
     #manifest;
     #api;
@@ -47,6 +48,7 @@ let UmbWorkspaceActionElement = class UmbWorkspaceActionElement extends UmbLitEl
     get api() {
         return this.#api;
     }
+    #buttonStateResetTimeoutId;
     /**
      * Create a list of original and overwritten aliases of workspace actions for the action.
      */
@@ -82,17 +84,15 @@ let UmbWorkspaceActionElement = class UmbWorkspaceActionElement extends UmbLitEl
                 if (!this.#api)
                     throw new Error('No api defined');
                 await this.#api.execute();
-                if (!this._additionalOptions) {
-                    this._buttonState = 'success';
-                }
+                this._buttonState = 'success';
+                this.#initButtonStateReset();
             }
             catch (reason) {
                 if (reason) {
                     console.warn(reason);
                 }
-                if (!this._additionalOptions) {
-                    this._buttonState = 'failed';
-                }
+                this._buttonState = 'failed';
+                this.#initButtonStateReset();
             }
         }
         this.dispatchEvent(new UmbActionExecutedEvent());
@@ -102,6 +102,20 @@ let UmbWorkspaceActionElement = class UmbWorkspaceActionElement extends UmbLitEl
             this._isDisabled = isDisabled || false;
         }, 'isDisabledObserver');
     }
+    #initButtonStateReset() {
+        /* When the button has additional options, we do not show the waiting state.
+    Therefore, we need to ensure the button state is reset, so we are able to show the success state again. */
+        this.#clearButtonStateResetTimeout();
+        this.#buttonStateResetTimeoutId = window.setTimeout(() => {
+            this._buttonState = undefined;
+        }, 2000);
+    }
+    #clearButtonStateResetTimeout() {
+        if (this.#buttonStateResetTimeoutId !== null) {
+            clearTimeout(this.#buttonStateResetTimeoutId);
+            this.#buttonStateResetTimeoutId = null;
+        }
+    }
     #observeExtensions(aliases) {
         this.#extensionsController?.destroy();
         this.#extensionsController = new UmbExtensionsElementAndApiInitializer(this, umbExtensionsRegistry, 'workspaceActionMenuItem', ExtensionApiArgsMethod, (action) => stringOrStringArrayIntersects(action.forWorkspaceActions, aliases), (extensionControllers) => {
@@ -135,6 +149,10 @@ let UmbWorkspaceActionElement = class UmbWorkspaceActionElement extends UmbLitEl
     render() {
         return when(this._items.length, () => html ` <uui-button-group> ${this.#renderButton()} ${this.#renderActionMenu()} </uui-button-group> `, () => this.#renderButton());
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#clearButtonStateResetTimeout();
+    }
 };
 __decorate([
     property({ type: Object, attribute: false })

package/dist-cms/packages/core/workspace/components/workspace-action-menu/workspace-action-menu.element.js

@@ -38,7 +38,7 @@ let UmbWorkspaceActionMenuElement = class UmbWorkspaceActionMenuElement extends
 				margin="6"
 				placement="top-end"
 				@toggle=${this.#onPopoverToggle}>
-				<umb-popover-layout>
+				<umb-popover-layout id="workspace-action-popover-layout">
 					<uui-scroll-container>
 						${repeat(this.items, (ext) => ext.alias, (ext) => ext.component)}
 					</uui-scroll-container>
@@ -63,12 +63,17 @@ let UmbWorkspaceActionMenuElement = class UmbWorkspaceActionMenuElement extends
 
 			#workspace-action-popover {
 				min-width: 200px;
+				
 			}
 
 			#popover-trigger {
 				--uui-button-padding-top-factor: 0;
 				--uui-button-padding-bottom-factor: 0.125;
 			}
+
+			#workspace-action-popover-layout {
+      			overflow: visible;
+    		}
 		`,
     ]; }
 };

package/dist-cms/packages/core/workspace/components/workspace-breadcrumb/workspace-menu-breadcrumb/workspace-menu-breadcrumb.element.d.ts

@@ -1,5 +1,5 @@
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { type UmbStructureItemModel } from '@umbraco-cms/backoffice/menu';
+import type { UmbStructureItemModel } from '@umbraco-cms/backoffice/menu';
 export declare class UmbWorkspaceBreadcrumbElement extends UmbLitElement {
     #private;
     _name: string;

package/dist-cms/packages/core/workspace/components/workspace-breadcrumb/workspace-menu-breadcrumb/workspace-menu-breadcrumb.element.js

@@ -8,8 +8,8 @@ import { UMB_WORKSPACE_CONTEXT } from '../../../workspace.context-token.js';
 import { css, customElement, html, ifDefined, map, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/menu';
 import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section';
-import { UMB_MENU_STRUCTURE_WORKSPACE_CONTEXT, } from '@umbraco-cms/backoffice/menu';
 let UmbWorkspaceBreadcrumbElement = class UmbWorkspaceBreadcrumbElement extends UmbLitElement {
     // TODO: figure out the correct context type
     #workspaceContext;
@@ -47,8 +47,9 @@ let UmbWorkspaceBreadcrumbElement = class UmbWorkspaceBreadcrumbElement extends
         (value) => (this._name = value || ''), 'breadcrumbWorkspaceNameObserver');
     }
     #getHref(structureItem) {
-        const workspaceBasePath = `section/${this.#sectionContext?.getPathname()}/workspace/${structureItem.entityType}/edit`;
-        return structureItem.isFolder ? undefined : `${workspaceBasePath}/${structureItem.unique}`;
+        if (structureItem.isFolder)
+            return undefined;
+        return `section/${this.#sectionContext?.getPathname()}/workspace/${structureItem.entityType}/edit/${structureItem.unique}`;
     }
     render() {
         return html `
@@ -56,7 +57,7 @@ let UmbWorkspaceBreadcrumbElement = class UmbWorkspaceBreadcrumbElement extends
 				${map(this._structure, (structureItem) => html `<uui-breadcrumb-item href=${ifDefined(this.#getHref(structureItem))}
 							>${this.localize.string(structureItem.name)}</uui-breadcrumb-item
 						>`)}
-				<uui-breadcrumb-item>${this._name}</uui-breadcrumb-item>
+				<uui-breadcrumb-item last-item>${this._name}</uui-breadcrumb-item>
 			</uui-breadcrumbs>
 		`;
     }

package/dist-cms/packages/core/workspace/components/workspace-breadcrumb/workspace-variant-menu-breadcrumb/workspace-variant-menu-breadcrumb.element.d.ts

@@ -1,6 +1,6 @@
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
-import { type UmbVariantStructureItemModel } from '@umbraco-cms/backoffice/menu';
+import type { UmbVariantStructureItemModel } from '@umbraco-cms/backoffice/menu';
 export declare class UmbWorkspaceVariantMenuBreadcrumbElement extends UmbLitElement {
     #private;
     _name: string;

package/dist-cms/packages/core/workspace/components/workspace-breadcrumb/workspace-variant-menu-breadcrumb/workspace-variant-menu-breadcrumb.element.js

@@ -10,8 +10,8 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
+import { UMB_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/menu';
 import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section';
-import { UMB_MENU_VARIANT_STRUCTURE_WORKSPACE_CONTEXT, } from '@umbraco-cms/backoffice/menu';
 let UmbWorkspaceVariantMenuBreadcrumbElement = class UmbWorkspaceVariantMenuBreadcrumbElement extends UmbLitElement {
     #sectionContext;
     #workspaceContext;
@@ -71,25 +71,34 @@ let UmbWorkspaceVariantMenuBreadcrumbElement = class UmbWorkspaceVariantMenuBrea
     }
     // TODO: we should move the fallback name logic to a helper class. It will be used in multiple places
     #getItemVariantName(structureItem) {
-        const fallbackName = structureItem.variants.find((variant) => variant.culture === this._appDefaultCulture)?.name ??
-            structureItem.variants[0].name ??
-            'Unknown';
-        const name = structureItem.variants.find((variant) => this._workspaceActiveVariantId?.compare(variant))?.name;
-        return name ?? `(${fallbackName})`;
+        // If the active workspace is a variant, we will try to find the matching variant name.
+        if (!this._workspaceActiveVariantId?.isInvariant()) {
+            const variant = structureItem.variants.find((variantId) => this._workspaceActiveVariantId?.compare(variantId));
+            if (variant) {
+                return variant.name;
+            }
+        }
+        // If the active workspace is invariant, we will try to find the variant that matches the app default culture.
+        const variant = structureItem.variants.find((variant) => variant.culture === this._appDefaultCulture);
+        if (variant) {
+            return `(${variant.name})`;
+        }
+        // If an active variant can not be found, then we fallback to the first variant name or a generic "unknown" label.
+        return structureItem.variants?.[0]?.name ?? '(#general_unknown)';
     }
     #getHref(structureItem) {
+        if (structureItem.isFolder)
+            return undefined;
         const workspaceBasePath = `section/${this.#sectionContext?.getPathname()}/workspace/${structureItem.entityType}/edit`;
-        return structureItem.isFolder
-            ? undefined
-            : `${workspaceBasePath}/${structureItem.unique}/${this._workspaceActiveVariantId?.culture}`;
+        return `${workspaceBasePath}/${structureItem.unique}/${this._workspaceActiveVariantId?.culture}`;
     }
     render() {
         return html `
 			<uui-breadcrumbs>
-				${this._structure.map((structureItem) => html `<uui-breadcrumb-item href="${ifDefined(this.#getHref(structureItem))}"
+				${this._structure.map((structureItem) => html `<uui-breadcrumb-item href=${ifDefined(this.#getHref(structureItem))}
 							>${this.localize.string(this.#getItemVariantName(structureItem))}</uui-breadcrumb-item
 						>`)}
-				<uui-breadcrumb-item>${this._name}</uui-breadcrumb-item>
+				<uui-breadcrumb-item last-item>${this._name}</uui-breadcrumb-item>
 			</uui-breadcrumbs>
 		`;
     }

package/dist-cms/packages/core/workspace/components/workspace-editor/workspace-editor.element.js

@@ -51,11 +51,13 @@ let UmbWorkspaceEditorElement = class UmbWorkspaceEditorElement extends UmbLitEl
             });
             // Duplicate first workspace and use it for the empty path scenario. [NL]
             newRoutes.push({ ...newRoutes[0], unique: newRoutes[0].path, path: '' });
-            newRoutes.push({
-                path: `**`,
-                component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement,
-            });
         }
+        // Add a catch-all route for not found
+        // This will be the last route, so it will only match if no other routes match or if no workspace views are defined.
+        newRoutes.push({
+            path: `**`,
+            component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement,
+        });
         this._routes = newRoutes;
     }
     render() {

package/dist-cms/packages/core/workspace/components/workspace-entity-action-menu/workspace-entity-action-menu.element.d.ts

@@ -1,12 +1,9 @@
 import { nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 export declare class UmbWorkspaceEntityActionMenuElement extends UmbLitElement {
-    #private;
     private _workspaceContext?;
     private _unique?;
     private _entityType?;
-    private _popoverOpen;
-    private _popover?;
     constructor();
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist-cms/packages/core/workspace/components/workspace-entity-action-menu/workspace-entity-action-menu.element.js

@@ -5,13 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_ENTITY_WORKSPACE_CONTEXT } from '../../contexts/index.js';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, state, nothing, query } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, state, nothing, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 let UmbWorkspaceEntityActionMenuElement = class UmbWorkspaceEntityActionMenuElement extends UmbLitElement {
     constructor() {
         super();
-        this._popoverOpen = false;
         this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, (context) => {
             this._workspaceContext = context;
             this.observe(this._workspaceContext?.unique, (unique) => {
@@ -22,45 +21,17 @@ let UmbWorkspaceEntityActionMenuElement = class UmbWorkspaceEntityActionMenuElem
             });
         });
     }
-    #onActionExecuted(event) {
-        event.stopPropagation();
-        // TODO: This ignorer is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this._popover?.hidePopover();
-    }
-    #onPopoverToggle(event) {
-        // TODO: This ignorer is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this._popoverOpen = event.newState === 'open';
-    }
     render() {
-        return this._unique !== undefined && this._entityType
-            ? html `
-					<uui-button
-						id="action-button"
-						data-mark="workspace:action-menu-button"
-						popovertarget="workspace-entity-action-menu-popover"
-						label=${this.localize.term('general_actions')}>
-						<uui-symbol-more></uui-symbol-more>
-					</uui-button>
-					<uui-popover-container
-						id="workspace-entity-action-menu-popover"
-						placement="bottom-end"
-						@toggle=${this.#onPopoverToggle}>
-						<umb-popover-layout>
-							<uui-scroll-container>
-								<umb-entity-action-list
-									@action-executed=${this.#onActionExecuted}
-									.entityType=${this._entityType}
-									.unique=${this._unique}>
-								</umb-entity-action-list>
-							</uui-scroll-container>
-						</umb-popover-layout>
-					</uui-popover-container>
-				`
-            : nothing;
+        if (!this._entityType)
+            return nothing;
+        if (this._unique === undefined)
+            return nothing;
+        return html `<umb-entity-actions-dropdown>
+			<uui-symbol-more
+				slot="label"
+				data-mark="workspace:action-menu-button"
+				label=${this.localize.term('general_actions')}></uui-symbol-more>
+		</umb-entity-actions-dropdown>`;
     }
     static { this.styles = [
         UmbTextStyles,
@@ -69,7 +40,8 @@ let UmbWorkspaceEntityActionMenuElement = class UmbWorkspaceEntityActionMenuElem
 				height: 100%;
 				margin-left: calc(var(--uui-size-layout-1) * -1);
 			}
-			:host > uui-button {
+
+			umb-entity-actions-dropdown {
 				height: 100%;
 			}
 		`,
@@ -81,12 +53,6 @@ __decorate([
 __decorate([
     state()
 ], UmbWorkspaceEntityActionMenuElement.prototype, "_entityType", void 0);
-__decorate([
-    state()
-], UmbWorkspaceEntityActionMenuElement.prototype, "_popoverOpen", void 0);
-__decorate([
-    query('#workspace-entity-action-menu-popover')
-], UmbWorkspaceEntityActionMenuElement.prototype, "_popover", void 0);
 UmbWorkspaceEntityActionMenuElement = __decorate([
     customElement('umb-workspace-entity-action-menu')
 ], UmbWorkspaceEntityActionMenuElement);

package/dist-cms/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.d.ts

@@ -17,6 +17,7 @@ export declare class UmbWorkspaceHeaderNameEditableElement extends UmbLitElement
      */
     readonly: boolean;
     private _name;
+    private _isWritableName;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist-cms/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.js

@@ -20,11 +20,18 @@ let UmbWorkspaceHeaderNameEditableElement = class UmbWorkspaceHeaderNameEditable
          */
         this.readonly = false;
         this._name = '';
+        this._isWritableName = true;
         this.consumeContext(UMB_NAMABLE_WORKSPACE_CONTEXT, (workspaceContext) => {
             this.#workspaceContext = workspaceContext;
             this.#observeName();
+            this.#observeNameWriteGuardRules();
         });
     }
+    #observeNameWriteGuardRules() {
+        this.observe(this.#workspaceContext?.nameWriteGuard?.isPermittedForName(), (isPermitted) => {
+            this._isWritableName = isPermitted ?? true;
+        }, 'umbObserveWorkspaceNameWriteGuardRules');
+    }
     #observeName() {
         if (!this.#workspaceContext)
             return;
@@ -50,7 +57,7 @@ let UmbWorkspaceHeaderNameEditableElement = class UmbWorkspaceHeaderNameEditable
 			@input="${this.#onNameInput}"
 			label=${this.label ?? this.localize.term('placeholders_entername')}
 			placeholder=${this.placeholder ?? this.localize.term('placeholders_entername')}
-			?readonly=${this.readonly}
+			?readonly=${this.readonly || !this._isWritableName}
 			required
 			${umbBindToValidation(this, `$.name`, this._name)}
 			${umbFocus()}></uui-input>`;
@@ -77,6 +84,9 @@ __decorate([
 __decorate([
     state()
 ], UmbWorkspaceHeaderNameEditableElement.prototype, "_name", void 0);
+__decorate([
+    state()
+], UmbWorkspaceHeaderNameEditableElement.prototype, "_isWritableName", void 0);
 UmbWorkspaceHeaderNameEditableElement = __decorate([
     customElement('umb-workspace-header-name-editable')
 ], UmbWorkspaceHeaderNameEditableElement);

package/dist-cms/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.js

@@ -37,6 +37,7 @@ let UmbWorkspaceSplitViewVariantSelectorElement = class UmbWorkspaceSplitViewVar
             this.#observeVariants(workspaceContext);
             this.#observeActiveVariants(workspaceContext);
             this.#observeCurrentVariant();
+            this.#observeReadOnlyGuardRules(workspaceContext);
             this.observe(workspaceContext?.variesBySegment, (value) => (this._variesBySegment = value ?? false), 'umbObserveVariesBySegment');
             this.observe(workspaceContext?.variesByCulture, (value) => (this._variesByCulture = value ?? false), 'umbObserveVariesByCulture');
         });
@@ -79,6 +80,9 @@ let UmbWorkspaceSplitViewVariantSelectorElement = class UmbWorkspaceSplitViewVar
             this._activeVariant = option;
         }, 'umbObserveActiveVariant');
     }
+    #observeReadOnlyGuardRules(workspaceContext) {
+        this.observe(workspaceContext?.readOnlyGuard.rules, () => this.#setReadOnlyCultures(workspaceContext), 'umbObserveReadOnlyGuardRules');
+    }
     #handleInput(event) {
         if (event instanceof UUIInputEvent) {
             const target = event.composedPath()[0];