@umbraco-cms/backoffice 18.2.0 → 18.3.0-rc

package/dist-cms/packages/core/resources/api-interceptor.controller.js

@@ -229,7 +229,7 @@ export class UmbApiInterceptorController extends UmbControllerBase {
         });
     }
     /**
-     * Interceptor which checks responses for the umb-notifications header and displays them as a notification if any. Removes the umb-notifications from the headers.
+     * Interceptor which checks responses for the umb-notifications header and displays them as a notification if any.
      * @param {umbHttpClient} client The OpenAPI client to add the interceptor to. It can be any client supporting Response and Request interceptors.
      * @internal
      */
@@ -302,10 +302,13 @@ export class UmbApiInterceptorController extends UmbControllerBase {
         const isString = typeof body === 'string';
         const contentType = isString ? 'text/plain' : 'application/json';
         const responseBody = isString ? body : JSON.stringify(body);
-        // Construct new headers but preserve "X-" headers from the original response
+        // Construct new headers but preserve "X-" headers and Umbraco's own "Umb-" headers from the original
+        // response, so interceptors running after the one that rebuilt it can still read them.
+        // @see https://github.com/umbraco/Umbraco-CMS/issues/23589
         const headersOverride = {};
         originalResponse?.headers.forEach((value, key) => {
-            if (key.toLowerCase().startsWith('x-')) {
+            const name = key.toLowerCase();
+            if (name.startsWith('x-') || name.startsWith('umb-')) {
                 headersOverride[key] = value;
             }
         });

package/dist-cms/packages/core/resources/resource.controller.js

@@ -25,6 +25,9 @@ export class UmbResourceController extends UmbControllerBase {
         else if (UmbCancelError.isUmbCancelError(error)) {
             return error;
         }
+        else if (error instanceof DOMException && error.name === 'AbortError') {
+            return new UmbCancelError(error.message);
+        }
         else if (UmbApiError.isUmbApiError(error)) {
             return error;
         }

package/dist-cms/packages/core/resources/try-execute/api-error-was-notified.function.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Whether `tryExecute` surfaces a notification for this error.
+ *
+ * This is the single definition of that rule: `tryExecute` uses it to decide whether to notify, and callers
+ * that add their own fallback messaging use it to avoid duplicating or contradicting the notification the
+ * user has already been shown.
+ * @param {unknown} error The error to inspect, typically the `error` of an `UmbApiResponse` or the `cause` of a wrapping error.
+ * @returns {boolean} True when a notification is shown for this error, false when it is suppressed.
+ */
+export declare function apiErrorWasNotified(error: unknown): boolean;

package/dist-cms/packages/core/resources/try-execute/api-error-was-notified.function.js

@@ -0,0 +1,42 @@
+import { UmbApiError, UmbCancelError } from '../umb-error.js';
+/**
+ * Codes that are ignored for notifications.
+ * These are typically non-fatal errors that the UI can handle gracefully,
+ * such as 401 (Unauthorized), 403 (Forbidden), and 404 (Not Found).
+ * The UI should handle these cases without showing a notification.
+ */
+const IGNORED_ERROR_CODES = new Set([401, 403, 404]);
+/**
+ * Operation statuses that are ignored for notifications.
+ * These are operation statuses where the server already sends a notification
+ * via the Umb-Notifications response header, so we avoid showing a duplicate
+ * notification from the ProblemDetails body.
+ */
+const IGNORED_OPERATION_STATUSES = new Set(['CancelledByNotification']);
+/**
+ * Whether `tryExecute` surfaces a notification for this error.
+ *
+ * This is the single definition of that rule: `tryExecute` uses it to decide whether to notify, and callers
+ * that add their own fallback messaging use it to avoid duplicating or contradicting the notification the
+ * user has already been shown.
+ * @param {unknown} error The error to inspect, typically the `error` of an `UmbApiResponse` or the `cause` of a wrapping error.
+ * @returns {boolean} True when a notification is shown for this error, false when it is suppressed.
+ */
+export function apiErrorWasNotified(error) {
+    // The UmbError type guards read `.name` off the argument, so anything that is not an object has to be
+    // rejected first. It also cannot have come from tryExecute, so nothing was notified for it.
+    if (error === null || typeof error !== 'object') {
+        return false;
+    }
+    if (UmbCancelError.isUmbCancelError(error)) {
+        return false;
+    }
+    if (!UmbApiError.isUmbApiError(error) || !error.problemDetails) {
+        // Falls through to the generic "unknown error" notification.
+        return true;
+    }
+    if (IGNORED_ERROR_CODES.has(error.problemDetails.status)) {
+        return false;
+    }
+    return !(error.problemDetails.operationStatus && IGNORED_OPERATION_STATUSES.has(error.problemDetails.operationStatus));
+}

package/dist-cms/packages/core/resources/try-execute/index.d.ts

@@ -1,3 +1,4 @@
+export * from './api-error-was-notified.function.js';
 export * from './batch-try-execute.function.js';
 export * from './try-execute.controller.js';
 export * from './tryExecute.function.js';

package/dist-cms/packages/core/resources/try-execute/index.js

@@ -1,3 +1,4 @@
+export * from './api-error-was-notified.function.js';
 export * from './batch-try-execute.function.js';
 export * from './try-execute.controller.js';
 export * from './tryExecute.function.js';

package/dist-cms/packages/core/resources/try-execute/try-execute.controller.d.ts

@@ -3,5 +3,4 @@ import type { UmbApiResponse, UmbTryExecuteOptions } from '../types.js';
 export declare class UmbTryExecuteController<T> extends UmbResourceController<T> {
     #private;
     tryExecute(opts?: UmbTryExecuteOptions): Promise<UmbApiResponse<T>>;
-    destroy(): void;
 }

package/dist-cms/packages/core/resources/try-execute/try-execute.controller.js

@@ -1,28 +1,11 @@
 import { UmbResourceController } from '../resource.controller.js';
 import { UmbCancelError } from '../umb-error.js';
-/**
- * Codes that are ignored for notifications.
- * These are typically non-fatal errors that the UI can handle gracefully,
- * such as 401 (Unauthorized), 403 (Forbidden), and 404 (Not Found).
- * The UI should handle these cases without showing a notification.
- */
-const IGNORED_ERROR_CODES = [401, 403, 404];
-/**
- * Operation statuses that are ignored for notifications.
- * These are operation statuses where the server already sends a notification
- * via the Umb-Notifications response header, so we avoid showing a duplicate
- * notification from the ProblemDetails body.
- */
-const IGNORED_OPERATION_STATUSES = ['CancelledByNotification'];
+import { apiErrorWasNotified } from './api-error-was-notified.function.js';
 export class UmbTryExecuteController extends UmbResourceController {
-    #abortSignal;
     async tryExecute(opts) {
         try {
-            if (opts?.abortSignal) {
-                this.#abortSignal = opts.abortSignal;
-                this.#abortSignal.addEventListener('abort', () => this.cancel(), { once: true });
-            }
-            return (await this._promise);
+            const promise = opts?.abortSignal ? this.#abortable(opts.abortSignal) : this._promise;
+            return (await promise);
         }
         catch (error) {
             // Error might be a legacy error, so we need to check if it is an UmbError
@@ -35,15 +18,32 @@ export class UmbTryExecuteController extends UmbResourceController {
             };
         }
     }
-    destroy() {
-        if (this.#abortSignal) {
-            this.#abortSignal.removeEventListener('abort', this.cancel);
-        }
-        super.destroy();
+    /**
+     * Settles with an UmbCancelError as soon as the signal aborts, also for a promise that cannot be cancelled.
+     * @param {AbortSignal} signal The signal to listen to.
+     * @returns {Promise<T>} The promise, or a rejection with an UmbCancelError once the signal aborts.
+     */
+    #abortable(signal) {
+        return new Promise((resolve, reject) => {
+            const abort = () => {
+                this.cancel();
+                reject(new UmbCancelError('Request aborted'));
+            };
+            Promise.resolve(this._promise)
+                .then(resolve, reject)
+                .finally(() => signal.removeEventListener('abort', abort));
+            if (signal.aborted) {
+                abort();
+            }
+            else {
+                signal.addEventListener('abort', abort, { once: true });
+            }
+        });
     }
     #notifyOnError(error) {
-        if (UmbCancelError.isUmbCancelError(error)) {
-            // Cancel error, do not show notification
+        if (!apiErrorWasNotified(error)) {
+            // Cancellations, non-fatal status codes, and statuses already covered by the Umb-Notifications
+            // header interceptor.
             return;
         }
         /** This is a constant on purpose, because the headline should not change. We cannot trust the error details to provide a reliable headline. */
@@ -54,17 +54,6 @@ export class UmbTryExecuteController extends UmbResourceController {
         const apiError = error;
         // Check if we can extract problem details from the error
         if (apiError.problemDetails) {
-            if (IGNORED_ERROR_CODES.includes(apiError.problemDetails.status)) {
-                // Non-fatal errors that the UI can handle gracefully
-                // so we avoid showing a notification
-                return;
-            }
-            if (apiError.problemDetails.operationStatus &&
-                IGNORED_OPERATION_STATUSES.includes(apiError.problemDetails.operationStatus)) {
-                // These operation statuses are already handled by the Umb-Notifications header interceptor
-                // so we avoid showing a duplicate notification
-                return;
-            }
             // UmbProblemDetails, show notification
             message = apiError.problemDetails.title;
             detail = apiError.problemDetails.detail;

package/dist-cms/packages/core/resources/types.d.ts

@@ -29,7 +29,9 @@ export interface UmbTryExecuteOptions {
      */
     disableNotifications?: boolean;
     /**
-     * Signal object to cancel the request.
+     * Signal that cancels the request. When it aborts, the call resolves straight away with an `UmbCancelError`
+     * and shows no notification. A promise with a `cancel()` method, such as an `UmbCancelablePromise`, is cancelled too.
+     * To also stop a fetch request, pass the same signal to the request.
      */
     abortSignal?: AbortSignal;
 }

package/dist-cms/packages/core/router/route/router-slot.element.js

@@ -27,8 +27,8 @@ let UmbRouterSlotElement = class UmbRouterSlotElement extends UmbLitElement {
     set routes(value) {
         value ??= [];
         const oldValue = this.#router.routes;
-        if (value.length !== oldValue?.length ||
-            value.filter((route) => oldValue?.findIndex((r) => r.path === route.path) === -1).length > 0) {
+        if (value.length !== (oldValue?.length ?? 0) ||
+            value.some((route) => oldValue?.findIndex((r) => r.path === route.path && r.unique === route.unique) === -1)) {
             this.#router.routes = value;
         }
     }
@@ -61,12 +61,12 @@ let UmbRouterSlotElement = class UmbRouterSlotElement extends UmbLitElement {
                 this._routerPath = newAbsolutePath;
                 this.#routeContext._internal_routerGotBasePath(this._routerPath);
                 this.dispatchEvent(new UmbRouterSlotInitEvent());
-                const newActiveLocalPath = this._constructLocalRouterPath();
-                if (this._activeLocalPath !== newActiveLocalPath) {
-                    this._activeLocalPath = newActiveLocalPath;
-                    this.#routeContext._internal_routerGotActiveLocalPath(this._activeLocalPath);
-                    this.dispatchEvent(new UmbRouterSlotChangeEvent());
-                }
+            }
+            const newActiveLocalPath = this._constructLocalRouterPath();
+            if (this._activeLocalPath !== newActiveLocalPath) {
+                this._activeLocalPath = newActiveLocalPath;
+                this.#routeContext._internal_routerGotActiveLocalPath(this._activeLocalPath);
+                this.dispatchEvent(new UmbRouterSlotChangeEvent());
             }
         };
         this._onNavigationChanged = (event) => {

package/dist-cms/packages/core/section/manifests.js

@@ -1,5 +1,6 @@
 import { manifest as defaultSectionManifest } from './default/default.section.kind.js';
 import { manifests as sectionUserPermissionConditionManifests } from './conditions/manifests.js';
+import { manifests as propertyEditorManifests } from './property-editor/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
 import { manifests as valueSummaryManifests } from './value-summary/manifests.js';
 import UmbSectionPickerModalElement from './section-picker-modal/section-picker-modal.element.js';
@@ -12,6 +13,7 @@ export const manifests = [
     },
     defaultSectionManifest,
     ...sectionUserPermissionConditionManifests,
+    ...propertyEditorManifests,
     ...repositoryManifests,
     ...valueSummaryManifests,
 ];

package/dist-cms/packages/core/section/property-editor/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/packages/core/section/property-editor/manifests.js

@@ -0,0 +1,2 @@
+import { manifests as sectionPickerManifests } from './section-picker/manifests.js';
+export const manifests = [...sectionPickerManifests];

package/dist-cms/packages/core/section/property-editor/section-picker/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/packages/core/section/property-editor/section-picker/manifests.js

@@ -0,0 +1,13 @@
+export const manifests = [
+    {
+        type: 'propertyEditorUi',
+        alias: 'Umb.PropertyEditorUi.SectionPicker',
+        name: 'Section Picker Property Editor UI',
+        element: () => import('./property-editor-ui-section-picker.element.js'),
+        meta: {
+            label: 'Section Picker',
+            icon: 'icon-grid',
+            group: '#propertyEditorUIGroups_pickers',
+        },
+    },
+];

package/dist-cms/packages/core/section/property-editor/section-picker/property-editor-ui-section-picker.element.d.ts

@@ -0,0 +1,16 @@
+import { UmbLitElement } from '../../../lit-element/index.js';
+import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../../property-editor/index.js';
+export declare class UmbSectionPickerPropertyEditorUIElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+    #private;
+    value: Array<string>;
+    set config(config: UmbPropertyEditorConfigCollection | undefined);
+    private _min;
+    private _max;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { UmbSectionPickerPropertyEditorUIElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-property-editor-ui-section-picker': UmbSectionPickerPropertyEditorUIElement;
+    }
+}

package/dist-cms/packages/core/section/property-editor/section-picker/property-editor-ui-section-picker.element.js

@@ -0,0 +1,48 @@
+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 { customElement, html, property, state } from '../../../../../external/lit/index.js';
+import { UmbChangeEvent } from '../../../event/index.js';
+import { UmbLitElement } from '../../../lit-element/index.js';
+let UmbSectionPickerPropertyEditorUIElement = class UmbSectionPickerPropertyEditorUIElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.value = [];
+        this._min = 0;
+        this._max = Infinity;
+    }
+    set config(config) {
+        if (!config)
+            return;
+        const minMax = config.getValueByAlias('validationLimit');
+        this._min = minMax?.min ?? 0;
+        this._max = minMax?.max ?? Infinity;
+    }
+    #onChange(event) {
+        this.value = event.target.selection;
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    render() {
+        return html `
+			<umb-input-section .selection=${this.value} .min=${this._min} .max=${this._max} @change=${this.#onChange}>
+			</umb-input-section>
+		`;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], UmbSectionPickerPropertyEditorUIElement.prototype, "value", void 0);
+__decorate([
+    state()
+], UmbSectionPickerPropertyEditorUIElement.prototype, "_min", void 0);
+__decorate([
+    state()
+], UmbSectionPickerPropertyEditorUIElement.prototype, "_max", void 0);
+UmbSectionPickerPropertyEditorUIElement = __decorate([
+    customElement('umb-property-editor-ui-section-picker')
+], UmbSectionPickerPropertyEditorUIElement);
+export { UmbSectionPickerPropertyEditorUIElement };
+export { UmbSectionPickerPropertyEditorUIElement as element };

package/dist-cms/packages/core/section/section-main-views/section-main-views.element.d.ts

@@ -8,7 +8,7 @@ export declare class UmbSectionMainViewElement extends UmbLitElement {
     private _routerPath?;
     private _activePath?;
     private _defaultView?;
-    private _routes;
+    private _routes?;
     private _hintMap;
     constructor();
     render(): import("lit-html").TemplateResult<1> | typeof nothing;

package/dist-cms/packages/core/section/section-main-views/section-main-views.element.js

@@ -19,7 +19,6 @@ let UmbSectionMainViewElement = class UmbSectionMainViewElement extends UmbLitEl
         super();
         this._views = [];
         this._dashboards = [];
-        this._routes = [];
         this._hintMap = new Map();
         this.#viewContexts = new Map();
         this.#hintObservers = [];
@@ -76,6 +75,8 @@ let UmbSectionMainViewElement = class UmbSectionMainViewElement extends UmbLitEl
         return view.meta?.label ? this.localize.string(view.meta.label) : (view.name ?? view.alias);
     }
     async #createRoutes() {
+        if (this._views === undefined && this._dashboards === undefined)
+            return;
         const viewAliases = new Set();
         const dashboardRoutes = this._dashboards?.map((manifest) => {
             viewAliases.add(manifest.alias);
@@ -95,7 +96,7 @@ let UmbSectionMainViewElement = class UmbSectionMainViewElement extends UmbLitEl
                     }
                 },
             };
-        });
+        }) ?? [];
         const viewRoutes = this._views?.map((manifest) => {
             viewAliases.add(manifest.alias);
             const context = this.#getOrCreateViewContext(manifest.alias);
@@ -114,13 +115,14 @@ let UmbSectionMainViewElement = class UmbSectionMainViewElement extends UmbLitEl
                     }
                 },
             };
-        });
+        }) ?? [];
         this.#cleanupViewContexts(viewAliases);
         const routes = [...dashboardRoutes, ...viewRoutes];
         if (routes.length > 0) {
             this._defaultView = routes[0].path;
             routes.push({
                 ...routes[0],
+                unique: routes[0].path,
                 path: '',
             });
             routes.push({
@@ -131,83 +133,87 @@ let UmbSectionMainViewElement = class UmbSectionMainViewElement extends UmbLitEl
         this._routes = routes;
     }
     render() {
-        return this._routes.length > 0
-            ? html `
-					<umb-body-layout main-no-padding>
-						${this.#renderDashboards()} ${this.#renderViews()}
-						<umb-router-slot
-							.routes=${this._routes}
-							@init=${(event) => {
-                this._routerPath = event.target.absoluteRouterPath;
-            }}
-							@change=${(event) => {
-                this._activePath = event.target.localActiveViewPath;
-            }}>
-						</umb-router-slot>
-					</umb-body-layout>
-				`
-            : nothing;
+        if (!this._routes || this._routes.length === 0) {
+            // If not routes, then render nothing.
+            // TODO: Remove this in v.19, this means sections must provide a dashboard or a view, otherwise the spinner will be shown forever. [NL]
+            // MAKE SURE WE HAVE COVERED USERS, MEMBERS.
+            return nothing;
+        }
+        return html `
+			<umb-body-layout main-no-padding>
+				${this.#renderDashboardsNav()} ${this.#renderViewsNav()}
+				<umb-router-slot
+					.routes=${this._routes}
+					@init=${(event) => {
+            this._routerPath = event.target.absoluteRouterPath;
+        }}
+					@change=${(event) => {
+            this._activePath = event.target.localActiveViewPath;
+        }}>
+					<umb-view-loader></umb-view-loader>
+				</umb-router-slot>
+			</umb-body-layout>
+		`;
     }
     #getDashboardName(dashboard) {
         return dashboard.meta?.label ? this.localize.string(dashboard.meta.label) : (dashboard.name ?? dashboard.alias);
     }
-    #renderDashboards() {
+    #renderDashboardsNav() {
+        if (!((this._dashboards?.length > 0 && this._views?.length > 0) || this._dashboards?.length > 1)) {
+            return nothing;
+        }
         // Only show dashboards if there are more than one dashboard or if there are both dashboards and views
-        return (this._dashboards.length > 0 && this._views.length > 0) || this._dashboards.length > 1
-            ? html `
-					<uui-tab-group slot="header" id="dashboards">
-						${this._dashboards.map((dashboard) => {
-                const dashboardPath = this.#constructDashboardPath(dashboard);
-                const dashboardName = this.#getDashboardName(dashboard);
-                const hint = this._hintMap.get(dashboard.alias);
-                // If this path matches, or if this is the default view and the active path is empty.
-                const isActive = this._activePath === dashboardPath || (this._defaultView === dashboardPath && this._activePath === '');
-                return html `
-								<uui-tab href="${this._routerPath}/${dashboardPath}" label=${dashboardName} ?active="${isActive}">
-									${dashboardName}
-									${hint && !isActive
-                    ? html `<umb-badge
-												slot="extra"
-												.color=${hint.color ?? 'default'}
-												?attention=${hint.color === 'invalid'}
-												>${hint.text}</umb-badge
-											>`
-                    : nothing}
-								</uui-tab>
-							`;
-            })}
-					</uui-tab-group>
-				`
-            : nothing;
+        return html `
+			<uui-tab-group slot="header" id="dashboards">
+				${this._dashboards.map((dashboard) => {
+            const dashboardPath = this.#constructDashboardPath(dashboard);
+            const dashboardName = this.#getDashboardName(dashboard);
+            const hint = this._hintMap.get(dashboard.alias);
+            // If this path matches, or if this is the default view and the active path is empty.
+            const isActive = this._activePath === dashboardPath || (this._defaultView === dashboardPath && this._activePath === '');
+            return html `
+						<uui-tab href="${this._routerPath}/${dashboardPath}" label=${dashboardName} ?active="${isActive}">
+							${dashboardName}
+							${hint && !isActive
+                ? html `<umb-badge slot="extra" .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
+										>${hint.text}</umb-badge
+									>`
+                : nothing}
+						</uui-tab>
+					`;
+        })}
+			</uui-tab-group>
+		`;
     }
-    #renderViews() {
+    #renderViewsNav() {
+        if (!((this._views?.length > 0 && this._dashboards?.length > 0) || this._views?.length > 1)) {
+            return nothing;
+        }
         // Only show views if there are more than one view or if there are both dashboards and views
-        return (this._views.length > 0 && this._dashboards.length > 0) || this._views.length > 1
-            ? html `
-					<uui-tab-group slot="navigation" id="views">
-						${this._views.map((view) => {
-                const viewName = this.#getViewName(view);
-                const viewPath = this.#constructViewPath(view);
-                const hint = this._hintMap.get(view.alias);
-                // If this path matches, or if this is the default view and the active path is empty.
-                const isActive = this._activePath === viewPath || (this._defaultView === viewPath && this._activePath === '');
-                return html `
-								<uui-tab href="${this._routerPath}/${viewPath}" label="${viewName}" ?active="${isActive}">
-									<div slot="icon">
-										<umb-icon name=${view.meta.icon}></umb-icon>
-										${hint && !isActive
-                    ? html `<umb-badge .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
-													>${hint.text}</umb-badge
-												>`
-                    : nothing}
-									</div>
-									${viewName}
-								</uui-tab>
-							`;
-            })}
-					</uui-tab-group>
-				`
-            : nothing;
+        return html `
+			<uui-tab-group slot="navigation" id="views">
+				${this._views.map((view) => {
+            const viewName = this.#getViewName(view);
+            const viewPath = this.#constructViewPath(view);
+            const hint = this._hintMap.get(view.alias);
+            // If this path matches, or if this is the default view and the active path is empty.
+            const isActive = this._activePath === viewPath || (this._defaultView === viewPath && this._activePath === '');
+            return html `
+						<uui-tab href="${this._routerPath}/${viewPath}" label="${viewName}" ?active="${isActive}">
+							<div slot="icon">
+								<umb-icon name=${view.meta.icon}></umb-icon>
+								${hint && !isActive
+                ? html `<umb-badge .color=${hint.color ?? 'default'} ?attention=${hint.color === 'invalid'}
+											>${hint.text}</umb-badge
+										>`
+                : nothing}
+							</div>
+							${viewName}
+						</uui-tab>
+					`;
+        })}
+			</uui-tab-group>
+		`;
     }
     static { this.styles = [
         UmbTextStyles,

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

@@ -1,5 +1,6 @@
 export * from './server-connection.js';
 export * from './server.context-token.js';
 export * from './server.context.js';
+export * from './signalr-reconnect-policy.js';
 export * from './conditions/index.js';
 export type * from './types.js';

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

@@ -1,4 +1,5 @@
 export * from './server-connection.js';
 export * from './server.context-token.js';
 export * from './server.context.js';
+export * from './signalr-reconnect-policy.js';
 export * from './conditions/index.js';

package/dist-cms/packages/core/server/signalr-reconnect-policy.d.ts

@@ -0,0 +1,15 @@
+import type { IRetryPolicy, RetryContext } from '../../../external/signalr/index.js';
+/**
+ * A SignalR retry policy that reconnects indefinitely with a capped backoff.
+ * The default `withAutomaticReconnect()` policy gives up after ~40 seconds, which leaves an idle
+ * backoffice (preview, server events) permanently disconnected.
+ */
+export declare class UmbSignalRReconnectPolicy implements IRetryPolicy {
+    /**
+     * Gets the delay before the next reconnect attempt, following the capped backoff schedule.
+     * @param {RetryContext} retryContext - The context for the current retry, including the previous retry count.
+     * @returns {number} The delay in milliseconds before the next reconnect attempt (never null, so retries continue indefinitely).
+     * @memberof UmbSignalRReconnectPolicy
+     */
+    nextRetryDelayInMilliseconds(retryContext: RetryContext): number;
+}

package/dist-cms/packages/core/server/signalr-reconnect-policy.js

@@ -0,0 +1,18 @@
+const RECONNECT_DELAYS_MS = [0, 2000, 5000, 10000];
+const MAX_RECONNECT_DELAY_MS = 30000;
+/**
+ * A SignalR retry policy that reconnects indefinitely with a capped backoff.
+ * The default `withAutomaticReconnect()` policy gives up after ~40 seconds, which leaves an idle
+ * backoffice (preview, server events) permanently disconnected.
+ */
+export class UmbSignalRReconnectPolicy {
+    /**
+     * Gets the delay before the next reconnect attempt, following the capped backoff schedule.
+     * @param {RetryContext} retryContext - The context for the current retry, including the previous retry count.
+     * @returns {number} The delay in milliseconds before the next reconnect attempt (never null, so retries continue indefinitely).
+     * @memberof UmbSignalRReconnectPolicy
+     */
+    nextRetryDelayInMilliseconds(retryContext) {
+        return RECONNECT_DELAYS_MS[retryContext.previousRetryCount] ?? MAX_RECONNECT_DELAY_MS;
+    }
+}