From ec21071e75554dc885bf1dc832993fe2f43d7d94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 13 Mar 2023 16:50:39 +0100
Subject: [PATCH 01/96] POC modal router as part of umb router-slot

---
 .../src/core/router/route.context.ts          | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/core/router/route.context.ts

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
new file mode 100644
index 0000000000..8fbb7cc61e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -0,0 +1,30 @@
+import { UmbContextProviderController, UmbContextToken } from '@umbraco-cms/context-api';
+import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+type GetResultType<T> = T extends UmbModalToken<infer Data, infer Result> ? Result : unknown;
+
+export type UmbModalRoute<UmbModalTokenResult> = {
+	path: string;
+	onSetup: (routeInfo: any) => void;
+	onSubmit: (data: UmbModalTokenResult) => void;
+	onReject: () => void;
+};
+
+export class UmbRouteContext {
+	#host: UmbControllerHostInterface;
+
+	constructor(host: UmbControllerHostInterface) {
+		this.#host = host;
+		new UmbContextProviderController(host, UMB_ROUTE_CONTEXT_TOKEN, this);
+	}
+
+	public registerModal<T extends UmbModalToken = UmbModalToken, R = GetResultType<T>>(
+		modalAlias: T,
+		options: UmbModalRoute<R>
+	) {
+		console.log('registerModalRoutee', modalAlias.toString(), options);
+	}
+}
+
+export const UMB_ROUTE_CONTEXT_TOKEN = new UmbContextToken<UmbRouteContext>('UmbSectionContext');

From f0692baf549b60b3a5b46cf64625ca326090349b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 13 Mar 2023 16:50:44 +0100
Subject: [PATCH 02/96] POC

---
 .../context-api/consume/context-consumer.ts   | 15 +++---
 .../input-multi-url-picker.element.ts         | 48 +++++++++++++++++++
 .../src/core/router/index.ts                  |  1 +
 .../src/core/router/route.context.ts          | 31 ++++++++++--
 .../src/core/router/router-slot.element.ts    | 23 +++++++--
 5 files changed, 104 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-consumer.ts b/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-consumer.ts
index 0fe4fc33d8..7d4d378078 100644
--- a/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-consumer.ts
+++ b/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-consumer.ts
@@ -7,10 +7,8 @@ import { UmbContextRequestEventImplementation, UmbContextCallback } from './cont
  * @class UmbContextConsumer
  */
 export class UmbContextConsumer<HostType extends EventTarget = EventTarget, T = unknown> {
-
-
 	_promise?: Promise<T>;
-	_promiseResolver?: (instance:T) => void;
+	_promiseResolver?: (instance: T) => void;
 
 	private _instance?: T;
 	get instance() {
@@ -38,15 +36,20 @@ export class UmbContextConsumer<HostType extends EventTarget = EventTarget, T =
 	}
 
 	protected _onResponse = (instance: T) => {
+		// TODO: check that this check is not giving us any problems:
+		if (this._instance === instance) return;
 		this._instance = instance;
 		this._callback?.(instance);
 		this._promiseResolver?.(instance);
 	};
 
 	public asPromise() {
-		return this._promise || (this._promise = new Promise<T>((resolve) => {
-			this._instance ? resolve(this._instance) : (this._promiseResolver = resolve);
-		}));
+		return (
+			this._promise ||
+			(this._promise = new Promise<T>((resolve) => {
+				this._instance ? resolve(this._instance) : (this._promiseResolver = resolve);
+			}))
+		);
 	}
 
 	/**
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index be778585ad..dc71b0b20b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
+import { UmbRouteContext, UMB_ROUTE_CONTEXT_TOKEN } from '@umbraco-cms/router';
 import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL_TOKEN } from '../../modals/link-picker';
 import { UmbLitElement } from '@umbraco-cms/element';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
@@ -97,6 +98,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 
 	private _urls: Array<UmbLinkPickerLink> = [];
 	private _modalContext?: UmbModalContext;
+	private _routeContext?: UmbRouteContext;
 
 	constructor() {
 		super();
@@ -114,6 +116,52 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 		this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => {
 			this._modalContext = instance;
 		});
+
+		this.consumeContext(UMB_ROUTE_CONTEXT_TOKEN, (instance) => {
+			this._routeContext = instance;
+
+			// Registre the routes of this UI:
+			// TODO: To avoid retriving the property alias, we might make use of the property context?
+			// Or maybe its not the property-alias, but something unique? as this might not be in a property?.
+			this._routeContext.registerModal(UMB_LINK_PICKER_MODAL_TOKEN, {
+				//path: `${'to-do-myPropertyAlias'}/:index`,
+				path: `modal`,
+				onSetup: (routeInfo) => {
+					// Get index from routeInfo:
+					const index = 0;
+					// Use the index to find data:
+					console.log('onSetup modal', routeInfo);
+					/*
+					modaldata = {
+						link: {
+							name: data?.name,
+							published: data?.published,
+							queryString: data?.queryString,
+							target: data?.target,
+							trashed: data?.trashed,
+							udi: data?.udi,
+							url: data?.url,
+						},
+						config: {
+							hideAnchor: this.hideAnchor,
+							ignoreUserStartNodes: this.ignoreUserStartNodes,
+							overlaySize: this.overlaySize || 'small',
+						},
+					};
+					return modaldata;
+					*/
+				},
+				onSubmit: (newUrl) => {
+					if (!newUrl) return;
+
+					const index = 0; // TODO: get the index in some way?.
+					this._setSelection(newUrl, index);
+				},
+				onReject: () => {
+					console.log('User cancelled dialog.');
+				},
+			});
+		});
 	}
 
 	private _removeItem(index: number) {
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/index.ts b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
index 75fd79f5e4..a6d871dbab 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
@@ -1,4 +1,5 @@
 export * from 'router-slot';
+export * from './route.context';
 export * from './router-slot.element';
 export * from './router-slot-change.event';
 export * from './router-slot-init.event';
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 8fbb7cc61e..6b9fff800a 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -1,9 +1,13 @@
-import { UmbContextProviderController, UmbContextToken } from '@umbraco-cms/context-api';
+import { IRoute } from 'router-slot';
+import { UmbContextConsumerController, UmbContextProviderController, UmbContextToken } from '@umbraco-cms/context-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
 import { UmbModalToken } from '@umbraco-cms/modal';
 
+// Get the second generic type of UmbModalToken:
 type GetResultType<T> = T extends UmbModalToken<infer Data, infer Result> ? Result : unknown;
 
+const EmptyDiv = document.createElement('div');
+
 export type UmbModalRoute<UmbModalTokenResult> = {
 	path: string;
 	onSetup: (routeInfo: any) => void;
@@ -13,18 +17,37 @@ export type UmbModalRoute<UmbModalTokenResult> = {
 
 export class UmbRouteContext {
 	#host: UmbControllerHostInterface;
+	#contextRoutes: IRoute[] = [];
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostInterface, private _onGotModals: (contextRoutes: any) => void) {
 		this.#host = host;
 		new UmbContextProviderController(host, UMB_ROUTE_CONTEXT_TOKEN, this);
+		/*new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (context) => {
+			console.log('got a parent', this === context, this, context);
+		});*/
+
+		// Consider using this event, to stay up to date with current full-URL. which is necessary for Modal opening.
+		// window.addEventListener('navigationsuccess', this._onNavigationChanged);
 	}
 
 	public registerModal<T extends UmbModalToken = UmbModalToken, R = GetResultType<T>>(
 		modalAlias: T,
 		options: UmbModalRoute<R>
 	) {
-		console.log('registerModalRoutee', modalAlias.toString(), options);
+		console.log('registerModalRoute', modalAlias.toString(), options);
+
+		this.#contextRoutes.push({
+			path: options.path,
+			component: EmptyDiv,
+			setup: (component, info) => {
+				console.log('modal open?', info);
+				options.onSetup(info);
+			},
+		});
+
+		//TODO: move to a method:
+		this._onGotModals(this.#contextRoutes);
 	}
 }
 
-export const UMB_ROUTE_CONTEXT_TOKEN = new UmbContextToken<UmbRouteContext>('UmbSectionContext');
+export const UMB_ROUTE_CONTEXT_TOKEN = new UmbContextToken<UmbRouteContext>('UmbRouterContext');
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index 1269dcd227..f404efc65f 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -1,9 +1,11 @@
 import type { IRoute } from 'router-slot/model';
 import { RouterSlot } from 'router-slot';
-import { LitElement, PropertyValueMap } from 'lit';
+import { html, PropertyValueMap } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbRouterSlotInitEvent } from './router-slot-init.event';
 import { UmbRouterSlotChangeEvent } from './router-slot-change.event';
+import { UmbRouteContext } from './route.context';
+import { UmbLitElement } from '@umbraco-cms/element';
 
 /**
  *  @element umb-router-slot-element
@@ -13,8 +15,9 @@ import { UmbRouterSlotChangeEvent } from './router-slot-change.event';
  * @fires {UmbRouterSlotChangeEvent} change - fires when a path of this router is changed
  */
 @customElement('umb-router-slot')
-export class UmbRouterSlotElement extends LitElement {
+export class UmbRouterSlotElement extends UmbLitElement {
 	#router: RouterSlot = new RouterSlot();
+	#modalRouter: RouterSlot = new RouterSlot();
 	#listening = false;
 
 	@property()
@@ -39,14 +42,26 @@ export class UmbRouterSlotElement extends LitElement {
 		return this._routerPath + '/' + this._activeLocalPath;
 	}
 
+	#routeContext = new UmbRouteContext(this, (contextRoutes) => {
+		(this.#modalRouter as any).routes = contextRoutes;
+		console.log(this.absoluteRouterPath, this.#router, this.#modalRouter, 'Router got context routes', contextRoutes);
+		// Force a render?
+		this.#modalRouter.render();
+	});
+
 	constructor() {
 		super();
+		this.#modalRouter.parent = this.#router;
 		this.#router.addEventListener('changestate', this._onChangeState);
-		this.#router.appendChild(document.createElement('slot'));
+		//this.#router.appendChild(this.#modalRouter);
+		//this.#router.appendChild(document.createElement('slot'));
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
+		// Currently we have to set this every time as RouteSlot looks for its parent every-time it is connected. Aka it has not way to explicitly set the parent.
+		// And we cannot insert the modal router as a slotted-child of the router, as it flushes its children on every route change.
+		this.#modalRouter.parent = this.#router;
 		if (this.#listening === false) {
 			window.addEventListener('navigationsuccess', this._onNavigationChanged);
 			this.#listening = true;
@@ -87,7 +102,7 @@ export class UmbRouterSlotElement extends LitElement {
 	};
 
 	render() {
-		return this.#router;
+		return html`${this.#router}${this.#modalRouter}`;
 	}
 }
 

From 763121df1f3e8e70f253c1d2ade024bdd9399506 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 14 Mar 2023 12:00:43 +0100
Subject: [PATCH 03/96] POC Modal deeplinking

---
 .../libs/modal/modal-handler.ts               |  4 +-
 .../libs/modal/modal.context.ts               |  2 +-
 .../libs/modal/token/modal-token.ts           |  2 +-
 .../input-multi-url-picker.element.ts         | 74 +++++++++++++------
 .../shared/modals/link-picker/index.ts        |  3 +-
 .../link-picker/link-picker-modal.element.ts  |  6 +-
 ...erty-editor-ui-multi-url-picker.element.ts |  1 +
 .../src/core/mocks/data/document.data.ts      | 12 ++-
 .../src/core/router/route.context.ts          | 61 ++++++++++-----
 .../src/core/router/router-slot.element.ts    |  1 -
 10 files changed, 117 insertions(+), 49 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
index bf46856f13..01f370afcd 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
@@ -13,7 +13,7 @@ import { ManifestModal } from '@umbraco-cms/extensions-registry';
 /**
  * Type which omits the real submit method, and replaces it with a submit method which accepts an optional argument depending on the generic type.
  */
-export type UmbModalHandler<ModalData = unknown, ModalResult = unknown> = Omit<
+export type UmbModalHandler<ModalData extends object = { [key: string]: unknown }, ModalResult = unknown> = Omit<
 	UmbModalHandlerClass<ModalData, ModalResult>,
 	'submit'
 > &
@@ -35,7 +35,7 @@ type OptionalSubmitArgumentIfUndefined<T> = T extends undefined
 	  };
 
 //TODO consider splitting this into two separate handlers
-export class UmbModalHandlerClass<ModalData, ModalResult> {
+export class UmbModalHandlerClass<ModalData extends object, ModalResult> {
 	private _submitPromise: Promise<ModalResult>;
 	private _submitResolver?: (value: ModalResult) => void;
 	private _submitRejecter?: () => void;
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
index aacb0f1646..3bf9eda86a 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
@@ -76,7 +76,7 @@ export class UmbModalContext {
 	 * @return {*}  {UmbModalHandler}
 	 * @memberof UmbModalContext
 	 */
-	public open<ModalData = unknown, ModalResult = unknown>(
+	public open<ModalData extends object = { [key: string]: unknown }, ModalResult = unknown>(
 		modalAlias: string | UmbModalToken<ModalData, ModalResult>,
 		data?: ModalData,
 		config?: UmbModalConfig
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts
index ab466d34d7..6dc7240081 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts
@@ -1,6 +1,6 @@
 import { UmbModalConfig } from '../modal.context';
 
-export class UmbModalToken<Data = unknown, Result = unknown> {
+export class UmbModalToken<Data extends object = { [key: string]: unknown }, Result = unknown> {
 	/**
 	 * Get the data type of the token's data.
 	 *
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index dc71b0b20b..7ba2791d09 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -3,10 +3,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
-import { UmbRouteContext, UMB_ROUTE_CONTEXT_TOKEN } from '@umbraco-cms/router';
+import { UmbModalRouteBuilder, UmbRouteContext, UMB_ROUTE_CONTEXT_TOKEN } from '@umbraco-cms/router';
 import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL_TOKEN } from '../../modals/link-picker';
 import { UmbLitElement } from '@umbraco-cms/element';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
 
 /**
  * @element umb-input-multi-url-picker
@@ -88,7 +87,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 	@property({ attribute: false })
 	set urls(data: Array<UmbLinkPickerLink>) {
 		if (!data) return;
-		this._urls = data;
+		this._urls = [...data]; // Unfreeze data coming from State, so we can manipulate it.
 		super.value = this._urls.map((x) => x.url).join(',');
 	}
 
@@ -97,9 +96,11 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 	}
 
 	private _urls: Array<UmbLinkPickerLink> = [];
-	private _modalContext?: UmbModalContext;
+	//private _modalContext?: UmbModalContext;
 	private _routeContext?: UmbRouteContext;
 
+	private _linkPickerURL?: UmbModalRouteBuilder;
+
 	constructor() {
 		super();
 		this.addValidator(
@@ -113,9 +114,11 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 			() => !!this.max && this.urls.length > this.max
 		);
 
+		/*
 		this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => {
 			this._modalContext = instance;
 		});
+		*/
 
 		this.consumeContext(UMB_ROUTE_CONTEXT_TOKEN, (instance) => {
 			this._routeContext = instance;
@@ -123,16 +126,29 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 			// Registre the routes of this UI:
 			// TODO: To avoid retriving the property alias, we might make use of the property context?
 			// Or maybe its not the property-alias, but something unique? as this might not be in a property?.
-			this._routeContext.registerModal(UMB_LINK_PICKER_MODAL_TOKEN, {
-				//path: `${'to-do-myPropertyAlias'}/:index`,
-				path: `modal`,
-				onSetup: (routeInfo) => {
+			this._linkPickerURL = this._routeContext.registerModal(UMB_LINK_PICKER_MODAL_TOKEN, {
+				path: `${'to-do-myPropertyAlias'}/:index`,
+				onSetup: (routingInfo) => {
 					// Get index from routeInfo:
-					const index = 0;
+					const indexParam = routingInfo.match.params.index;
+					if (!indexParam) return false;
+					let index: number | null = parseInt(routingInfo.match.params.index);
+					if (Number.isNaN(index)) return false;
+
 					// Use the index to find data:
-					console.log('onSetup modal', routeInfo);
-					/*
-					modaldata = {
+					console.log('onSetup modal index:', index);
+
+					let data: UmbLinkPickerLink | null = null;
+					if (index >= 0 && index < this.urls.length) {
+						data = this._getItemByIndex(index);
+					} else {
+						index = null;
+					}
+
+					console.log('onSetup modal got data:', data);
+
+					const modalData = {
+						index: index,
 						link: {
 							name: data?.name,
 							published: data?.published,
@@ -148,14 +164,12 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 							overlaySize: this.overlaySize || 'small',
 						},
 					};
-					return modaldata;
-					*/
+					return modalData;
 				},
-				onSubmit: (newUrl) => {
-					if (!newUrl) return;
-
-					const index = 0; // TODO: get the index in some way?.
-					this._setSelection(newUrl, index);
+				onSubmit: (submitData) => {
+					console.log('On submit in property editor input');
+					if (!submitData) return;
+					this._setSelection(submitData.link, submitData.index);
 				},
 				onReject: () => {
 					console.log('User cancelled dialog.');
@@ -169,9 +183,16 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 		this._dispatchChangeEvent();
 	}
 
-	private _setSelection(selection: UmbLinkPickerLink, index?: number) {
-		if (index !== undefined && index >= 0) this.urls[index] = selection;
-		else this.urls.push(selection);
+	private _getItemByIndex(index: number) {
+		return this.urls[index];
+	}
+
+	private _setSelection(selection: UmbLinkPickerLink, index: number | null) {
+		if (index !== null && index >= 0) {
+			this.urls[index] = selection;
+		} else {
+			this.urls.push(selection);
+		}
 
 		this._dispatchChangeEvent();
 	}
@@ -182,6 +203,8 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 	}
 
 	private _openPicker(data?: UmbLinkPickerLink, index?: number) {
+		console.log('JS open picker, should fail for now,');
+		/*
 		const modalHandler = this._modalContext?.open(UMB_LINK_PICKER_MODAL_TOKEN, {
 			link: {
 				name: data?.name,
@@ -203,11 +226,13 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 
 			this._setSelection(newUrl, index);
 		});
+		*/
 	}
 
 	render() {
 		return html`${this.urls?.map((link, index) => this._renderItem(link, index))}
-			<uui-button look="placeholder" label="Add" @click=${this._openPicker}>Add</uui-button>`;
+			<uui-button look="placeholder" label="Add" .href=${this._linkPickerURL?.({ index: -1 })}>Add</uui-button>`;
+		// "modal/Umb.Modal.LinkPicker/${'to-do-myPropertyAlias'}/-1"
 	}
 
 	private _renderItem(link: UmbLinkPickerLink, index: number) {
@@ -217,10 +242,11 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 			@open="${() => this._openPicker(link, index)}">
 			<uui-icon slot="icon" name="${link.icon || 'umb:link'}"></uui-icon>
 			<uui-action-bar slot="actions">
-				<uui-button @click="${() => this._openPicker(link, index)}" label="Edit link">Edit</uui-button>
+				<uui-button .href=${this._linkPickerURL?.({ index })} label="Edit link">Edit</uui-button>
 				<uui-button @click="${() => this._removeItem(index)}" label="Remove link">Remove</uui-button>
 			</uui-action-bar>
 		</uui-ref-node>`;
+		// "modal/Umb.Modal.LinkPicker/${'to-do-myPropertyAlias'}/${index}"
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/index.ts
index ecbd202e43..da95dca1d0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/index.ts
@@ -2,11 +2,12 @@ import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { UmbModalToken } from '@umbraco-cms/modal';
 
 export interface UmbLinkPickerModalData {
+	index: number | null;
 	link: UmbLinkPickerLink;
 	config: UmbLinkPickerConfig;
 }
 
-export type UmbLinkPickerModalResult = UmbLinkPickerLink;
+export type UmbLinkPickerModalResult = { index: number | null; link: UmbLinkPickerLink };
 
 export interface UmbLinkPickerLink {
 	icon?: string | null;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
index 73b31ccc82..dcd9b9181f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
@@ -46,6 +46,9 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 	@state()
 	_selectedKey?: string;
 
+	@state()
+	_index: number | null = null;
+
 	@state()
 	_link: UmbLinkPickerLink = {
 		icon: null,
@@ -76,6 +79,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.data) return;
+		this._index = this.data?.index;
 		this._link = this.data?.link;
 		this._layout = this.data?.config;
 
@@ -105,7 +109,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 	}
 
 	private _submit() {
-		this.modalHandler?.submit(this._link);
+		this.modalHandler?.submit({ index: this._index, link: this._link });
 	}
 
 	private _close() {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
index 1d74448439..f4b1f0b068 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
@@ -53,6 +53,7 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement impl
 
 	private _onChange(event: CustomEvent) {
 		this.value = (event.target as UmbInputMultiUrlPickerElement).urls;
+		console.log(this.value);
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
index 8f5b4bfd10..08b4fac6b4 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
@@ -47,7 +47,17 @@ export const data: Array<DocumentModel> = [
 				alias: 'multiUrlPicker',
 				culture: null,
 				segment: null,
-				value: null,
+				value: [
+					{
+						name: undefined,
+						published: undefined,
+						queryString: undefined,
+						target: undefined,
+						trashed: undefined,
+						udi: 'umb://document/c05da24d7740447b9cdcbd8ce2172e38',
+						url: 'umb://document/c05da24d7740447b9cdcbd8ce2172e38',
+					},
+				],
 			},
 			{
 				alias: 'multiNodeTreePicker',
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 6b9fff800a..3fbc8458cb 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -1,22 +1,23 @@
-import { IRoute } from 'router-slot';
+import { IRoute, IRoutingInfo, PARAM_IDENTIFIER, stripSlash } from 'router-slot';
 import { UmbContextConsumerController, UmbContextProviderController, UmbContextToken } from '@umbraco-cms/context-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
-import { UmbModalToken } from '@umbraco-cms/modal';
-
-// Get the second generic type of UmbModalToken:
-type GetResultType<T> = T extends UmbModalToken<infer Data, infer Result> ? Result : unknown;
+import { UmbModalToken, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
 
 const EmptyDiv = document.createElement('div');
 
-export type UmbModalRoute<UmbModalTokenResult> = {
+// TODO: Consider accepting the Token as a generic:
+export type UmbModalRoute<UmbModalTokenData extends object, UmbModalTokenResult> = {
 	path: string;
-	onSetup: (routeInfo: any) => void;
-	onSubmit: (data: UmbModalTokenResult) => void;
+	onSetup: (routingInfo: IRoutingInfo) => UmbModalTokenData | false;
+	onSubmit: (data: UmbModalTokenResult) => void | PromiseLike<void>;
 	onReject: () => void;
 };
 
+export type UmbModalRouteBuilder = (params: { [key: string]: string | number }) => string;
+
 export class UmbRouteContext {
 	#host: UmbControllerHostInterface;
+	#modalContext?: typeof UMB_MODAL_CONTEXT_TOKEN.TYPE;
 	#contextRoutes: IRoute[] = [];
 
 	constructor(host: UmbControllerHostInterface, private _onGotModals: (contextRoutes: any) => void) {
@@ -25,28 +26,54 @@ export class UmbRouteContext {
 		/*new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (context) => {
 			console.log('got a parent', this === context, this, context);
 		});*/
+		new UmbContextConsumerController(host, UMB_MODAL_CONTEXT_TOKEN, (context) => {
+			this.#modalContext = context;
+		});
 
 		// Consider using this event, to stay up to date with current full-URL. which is necessary for Modal opening.
 		// window.addEventListener('navigationsuccess', this._onNavigationChanged);
 	}
 
-	public registerModal<T extends UmbModalToken = UmbModalToken, R = GetResultType<T>>(
-		modalAlias: T,
-		options: UmbModalRoute<R>
-	) {
-		console.log('registerModalRoute', modalAlias.toString(), options);
-
+	public registerModal<D extends object = object, R = unknown>(
+		modalAlias: UmbModalToken<D, R> | string,
+		options: UmbModalRoute<D, R>
+	): UmbModalRouteBuilder {
+		const localPath = `modal/${modalAlias.toString()}/${options.path}`;
 		this.#contextRoutes.push({
-			path: options.path,
+			path: localPath,
+			pathMatch: 'suffix',
 			component: EmptyDiv,
 			setup: (component, info) => {
-				console.log('modal open?', info);
-				options.onSetup(info);
+				const modalData = options.onSetup(info);
+				if (modalData && this.#modalContext) {
+					const modalHandler = this.#modalContext.open<D, R>(modalAlias, modalData);
+					modalHandler.onSubmit().then(
+						() => this._removeModalPath(info),
+						() => this._removeModalPath(info)
+					);
+					modalHandler.onSubmit().then(options.onSubmit, options.onReject);
+				}
 			},
 		});
 
 		//TODO: move to a method:
 		this._onGotModals(this.#contextRoutes);
+
+		return (params: { [key: string]: string | number }) => {
+			const localRoutePath = stripSlash(
+				localPath.replace(PARAM_IDENTIFIER, (substring: string, ...args: string[]) => {
+					return params[args[0]];
+					//return `([^\/]+)`;
+				})
+			);
+			const baseRoutePath = window.location.href;
+			return (baseRoutePath.endsWith('/') ? baseRoutePath : baseRoutePath + '/') + localRoutePath;
+		};
+	}
+
+	private _removeModalPath(info: IRoutingInfo) {
+		window.history.pushState({}, '', window.location.href.split(info.match.fragments.consumed)[0]);
+		console.log('ask to remove path', info.match.fragments.consumed);
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index f404efc65f..fde2927bc8 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -44,7 +44,6 @@ export class UmbRouterSlotElement extends UmbLitElement {
 
 	#routeContext = new UmbRouteContext(this, (contextRoutes) => {
 		(this.#modalRouter as any).routes = contextRoutes;
-		console.log(this.absoluteRouterPath, this.#router, this.#modalRouter, 'Router got context routes', contextRoutes);
 		// Force a render?
 		this.#modalRouter.render();
 	});

From c6e42ddf6411b3d2a5bac9792e4644cd9624c89f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 14 Mar 2023 16:25:55 +0100
Subject: [PATCH 04/96] moved responsibility

---
 .../modal/elements/modal-element.element.ts   |   4 +-
 .../libs/modal/modal-handler.ts               |   4 +-
 .../modal/modal-registration-controller.ts    |  15 +++
 .../libs/modal/modal.context.ts               |   4 +-
 .../libs/modal/token/modal-token.ts           |   2 +-
 .../input-multi-url-picker.element.ts         |  33 +++--
 .../shared/modals/property-settings/index.ts  |   2 +-
 .../property-settings-modal.element.ts        |   2 +-
 .../src/core/router/route.context.ts          | 119 +++++++++++++-----
 .../src/core/router/router-slot.element.ts    |   2 +
 10 files changed, 134 insertions(+), 53 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/libs/modal/modal-registration-controller.ts

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/elements/modal-element.element.ts b/src/Umbraco.Web.UI.Client/libs/modal/elements/modal-element.element.ts
index e51b4f959a..6abc2ff93d 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/elements/modal-element.element.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/elements/modal-element.element.ts
@@ -3,7 +3,7 @@ import { UmbModalHandler } from '..';
 import { UmbLitElement } from '@umbraco-cms/element';
 
 @customElement('umb-modal-element')
-export class UmbModalBaseElement<UmbModalData = void, UmbModalResult = void> extends UmbLitElement {
+export class UmbModalBaseElement<UmbModalData extends object = object, UmbModalResult = unknown> extends UmbLitElement {
 	@property({ attribute: false })
 	modalHandler?: UmbModalHandler<UmbModalData, UmbModalResult>;
 
@@ -13,6 +13,6 @@ export class UmbModalBaseElement<UmbModalData = void, UmbModalResult = void> ext
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-modal-element': UmbModalBaseElement<unknown>;
+		'umb-modal-element': UmbModalBaseElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
index 01f370afcd..75aa43e2c2 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
@@ -13,7 +13,7 @@ import { ManifestModal } from '@umbraco-cms/extensions-registry';
 /**
  * Type which omits the real submit method, and replaces it with a submit method which accepts an optional argument depending on the generic type.
  */
-export type UmbModalHandler<ModalData extends object = { [key: string]: unknown }, ModalResult = unknown> = Omit<
+export type UmbModalHandler<ModalData extends object = object, ModalResult = any> = Omit<
 	UmbModalHandlerClass<ModalData, ModalResult>,
 	'submit'
 > &
@@ -35,7 +35,7 @@ type OptionalSubmitArgumentIfUndefined<T> = T extends undefined
 	  };
 
 //TODO consider splitting this into two separate handlers
-export class UmbModalHandlerClass<ModalData extends object, ModalResult> {
+export class UmbModalHandlerClass<ModalData extends object = object, ModalResult = unknown> {
 	private _submitPromise: Promise<ModalResult>;
 	private _submitResolver?: (value: ModalResult) => void;
 	private _submitRejecter?: () => void;
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-registration-controller.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-registration-controller.ts
new file mode 100644
index 0000000000..6dd45e6e52
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-registration-controller.ts
@@ -0,0 +1,15 @@
+import { UmbController, UmbControllerHostInterface } from '@umbraco-cms/controller';
+
+/*
+export class UmbModalRegistrationController<UmbModalToken, ModalData, ModalResult> extends UmbController {
+	constructor(host: UmbControllerHostInterface, modalAlias: string | NewType<UmbModalToken, ModalData, ModalResult>) {
+		super(host);
+		this.key = config?.key || uuidv4();
+	}
+
+	updateSetup() {}
+
+	hostConnected(): void {}
+	hostDisconnected(): void {}
+}
+*/
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
index 3bf9eda86a..c7dcb4c32e 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
@@ -22,7 +22,7 @@ export interface UmbModalConfig {
 export class UmbModalContext {
 	host: UmbControllerHostInterface;
 	// TODO: Investigate if we can get rid of HTML elements in our store, so we can use one of our states.
-	#modals = new BehaviorSubject(<Array<UmbModalHandler<any, any>>>[]);
+	#modals = new BehaviorSubject(<Array<UmbModalHandler>>[]);
 	public readonly modals = this.#modals.asObservable();
 
 	constructor(host: UmbControllerHostInterface) {
@@ -76,7 +76,7 @@ export class UmbModalContext {
 	 * @return {*}  {UmbModalHandler}
 	 * @memberof UmbModalContext
 	 */
-	public open<ModalData extends object = { [key: string]: unknown }, ModalResult = unknown>(
+	public open<ModalData extends object = object, ModalResult = unknown>(
 		modalAlias: string | UmbModalToken<ModalData, ModalResult>,
 		data?: ModalData,
 		config?: UmbModalConfig
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts
index 6dc7240081..99510c47a8 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/modal-token.ts
@@ -1,6 +1,6 @@
 import { UmbModalConfig } from '../modal.context';
 
-export class UmbModalToken<Data extends object = { [key: string]: unknown }, Result = unknown> {
+export class UmbModalToken<Data extends object = object, Result = unknown> {
 	/**
 	 * Get the data type of the token's data.
 	 *
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index 7ba2791d09..f6e2cabcb6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -1,6 +1,6 @@
 import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { UmbModalRouteBuilder, UmbRouteContext, UMB_ROUTE_CONTEXT_TOKEN } from '@umbraco-cms/router';
@@ -27,6 +27,10 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 	protected getFormElement() {
 		return undefined;
 	}
+
+	@property()
+	alias?: string;
+
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -99,6 +103,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 	//private _modalContext?: UmbModalContext;
 	private _routeContext?: UmbRouteContext;
 
+	@state()
 	private _linkPickerURL?: UmbModalRouteBuilder;
 
 	constructor() {
@@ -114,21 +119,19 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 			() => !!this.max && this.urls.length > this.max
 		);
 
-		/*
-		this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => {
-			this._modalContext = instance;
-		});
-		*/
-
 		this.consumeContext(UMB_ROUTE_CONTEXT_TOKEN, (instance) => {
 			this._routeContext = instance;
 
 			// Registre the routes of this UI:
-			// TODO: To avoid retriving the property alias, we might make use of the property context?
+			// TODO: Make a registreModal method on the property context
 			// Or maybe its not the property-alias, but something unique? as this might not be in a property?.
-			this._linkPickerURL = this._routeContext.registerModal(UMB_LINK_PICKER_MODAL_TOKEN, {
-				path: `${'to-do-myPropertyAlias'}/:index`,
+
+			this._routeContext.registerModal(UMB_LINK_PICKER_MODAL_TOKEN, {
+				path: `${'this.alias'}/:index`,
 				onSetup: (routingInfo) => {
+					console.log('call onSetup');
+					// TODO: Make onSetup optional.
+					// TODO: Maybe use UmbRouteLocation?
 					// Get index from routeInfo:
 					const indexParam = routingInfo.match.params.index;
 					if (!indexParam) return false;
@@ -147,8 +150,9 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 
 					console.log('onSetup modal got data:', data);
 
-					const modalData = {
+					return {
 						index: index,
+						lol: false,
 						link: {
 							name: data?.name,
 							published: data?.published,
@@ -161,10 +165,9 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 						config: {
 							hideAnchor: this.hideAnchor,
 							ignoreUserStartNodes: this.ignoreUserStartNodes,
-							overlaySize: this.overlaySize || 'small',
+							overlaySize: this.overlaySize || 'small', // TODO: this should not be here, but use the ModalToken.
 						},
 					};
-					return modalData;
 				},
 				onSubmit: (submitData) => {
 					console.log('On submit in property editor input');
@@ -174,6 +177,10 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 				onReject: () => {
 					console.log('User cancelled dialog.');
 				},
+				onUrlBuilder: (urlBuilder) => {
+					console.log('got onUrlBuilder');
+					this._linkPickerURL = urlBuilder;
+				},
 			});
 		});
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/index.ts
index c3719e1789..d8b1d5db61 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/index.ts
@@ -17,7 +17,7 @@ export interface UmbPropertySettingsModalResult {
 	};
 }
 
-export const UMB_PROPERTY_SETTINGS_MODAL_TOKEN = new UmbModalToken<undefined, UmbPropertySettingsModalResult>(
+export const UMB_PROPERTY_SETTINGS_MODAL_TOKEN = new UmbModalToken<object, UmbPropertySettingsModalResult>(
 	'Umb.Modal.PropertySettings',
 	{
 		type: 'sidebar',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
index 9aa4b3f305..ba166b2deb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
@@ -9,7 +9,7 @@ import { ManifestPropertyEditorUI } from '@umbraco-cms/extensions-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
 
 @customElement('umb-property-settings-modal')
-export class UmbPropertySettingsModalElement extends UmbModalBaseElement<undefined, UmbPropertySettingsModalResult> {
+export class UmbPropertySettingsModalElement extends UmbModalBaseElement<object, UmbPropertySettingsModalResult> {
 	static styles = [
 		UUITextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 3fbc8458cb..58029cf4b8 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -5,75 +5,132 @@ import { UmbModalToken, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
 
 const EmptyDiv = document.createElement('div');
 
+// Get the second generic type of UmbModalToken:
+type GetDataType<T> = T extends UmbModalToken<infer Data> ? Data : unknown;
+
+// Get the second generic type of UmbModalToken:
+type GetResultType<T> = T extends UmbModalToken<infer Data, infer Result> ? Result : unknown;
+
 // TODO: Consider accepting the Token as a generic:
-export type UmbModalRoute<UmbModalTokenData extends object, UmbModalTokenResult> = {
+export type UmbModalRouteOptions<UmbModalTokenData extends object = object, UmbModalTokenResult = unknown> = {
 	path: string;
 	onSetup: (routingInfo: IRoutingInfo) => UmbModalTokenData | false;
 	onSubmit: (data: UmbModalTokenResult) => void | PromiseLike<void>;
 	onReject: () => void;
+	onUrlBuilder?: (urlBuilder: UmbModalRouteBuilder) => void;
+};
+
+type UmbModalRouteRegistration<D extends object = object, R = any> = {
+	alias: UmbModalToken | string;
+	options: UmbModalRouteOptions<D, R>;
+	routeSetup: (component: HTMLElement, info: IRoutingInfo) => void;
 };
 
 export type UmbModalRouteBuilder = (params: { [key: string]: string | number }) => string;
 
 export class UmbRouteContext {
-	#host: UmbControllerHostInterface;
+	//#host: UmbControllerHostInterface;
+	#modalRegistrations: UmbModalRouteRegistration[] = [];
 	#modalContext?: typeof UMB_MODAL_CONTEXT_TOKEN.TYPE;
 	#contextRoutes: IRoute[] = [];
+	#routerBasePath?: string;
 
 	constructor(host: UmbControllerHostInterface, private _onGotModals: (contextRoutes: any) => void) {
-		this.#host = host;
+		//this.#host = host;
 		new UmbContextProviderController(host, UMB_ROUTE_CONTEXT_TOKEN, this);
 		/*new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (context) => {
 			console.log('got a parent', this === context, this, context);
+			// Why did i want a parent route? was it to capture and inherit routes?
+			// This is maybe not so necessary as it stands right now, so lets see how it goes.
 		});*/
 		new UmbContextConsumerController(host, UMB_MODAL_CONTEXT_TOKEN, (context) => {
 			this.#modalContext = context;
+			this.#generateContextRoutes();
 		});
 
 		// Consider using this event, to stay up to date with current full-URL. which is necessary for Modal opening.
-		// window.addEventListener('navigationsuccess', this._onNavigationChanged);
+		window.addEventListener('navigationsuccess', this.#onNavigationChanged as unknown as EventListener);
 	}
 
-	public registerModal<D extends object = object, R = unknown>(
-		modalAlias: UmbModalToken<D, R> | string,
-		options: UmbModalRoute<D, R>
-	): UmbModalRouteBuilder {
-		const localPath = `modal/${modalAlias.toString()}/${options.path}`;
-		this.#contextRoutes.push({
+	#removeModalPath(info: IRoutingInfo) {
+		window.history.pushState({}, '', window.location.href.split(info.match.fragments.consumed)[0]);
+	}
+
+	#generateRoute(modalRegistration: UmbModalRouteRegistration): IRoute {
+		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
+		return {
 			path: localPath,
 			pathMatch: 'suffix',
 			component: EmptyDiv,
-			setup: (component, info) => {
+			setup: modalRegistration.routeSetup,
+		};
+	}
+
+	#generateContextRoutes() {
+		this.#contextRoutes = this.#modalRegistrations.map((modalRegistration) => {
+			return this.#generateRoute(modalRegistration);
+		});
+
+		// TODO: Should we await one frame, to ensure we don't call back too much?.
+		this._onGotModals(this.#contextRoutes);
+	}
+
+	#onNavigationChanged = (event: Event) => {
+		console.log('route got navigation changed', event);
+		this.#generateNewURLs();
+	};
+
+	#generateNewURLs() {
+		this.#modalRegistrations.forEach(this.#generateNewURL);
+	}
+
+	#generateNewURL = (modalRegistration: UmbModalRouteRegistration) => {
+		console.log('#generateNewURL', this);
+		if (!modalRegistration.options.onUrlBuilder || !this.#routerBasePath) return;
+
+		const routeBasePath = this.#routerBasePath.endsWith('/') ? this.#routerBasePath : this.#routerBasePath + '/';
+		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
+
+		const urlBuilder = (params: { [key: string]: string | number }) => {
+			const localRoutePath = stripSlash(
+				localPath.replace(PARAM_IDENTIFIER, (substring: string, ...args: string[]) => {
+					return params[args[0]].toString();
+					//return `([^\/]+)`;
+				})
+			);
+			return routeBasePath + localRoutePath;
+		};
+
+		modalRegistration.options.onUrlBuilder(urlBuilder);
+	};
+	public registerModal<D extends object = object, R = any>(
+		alias: UmbModalToken<D, R> | string,
+		options: UmbModalRouteOptions<D, R>
+	) {
+		const registration = {
+			alias: alias,
+			options: options,
+			routeSetup: (component: HTMLElement, info: IRoutingInfo<any, any>) => {
 				const modalData = options.onSetup(info);
 				if (modalData && this.#modalContext) {
-					const modalHandler = this.#modalContext.open<D, R>(modalAlias, modalData);
+					const modalHandler = this.#modalContext.open(alias, modalData);
 					modalHandler.onSubmit().then(
-						() => this._removeModalPath(info),
-						() => this._removeModalPath(info)
+						() => this.#removeModalPath(info),
+						() => this.#removeModalPath(info)
 					);
 					modalHandler.onSubmit().then(options.onSubmit, options.onReject);
 				}
 			},
-		});
-
-		//TODO: move to a method:
-		this._onGotModals(this.#contextRoutes);
-
-		return (params: { [key: string]: string | number }) => {
-			const localRoutePath = stripSlash(
-				localPath.replace(PARAM_IDENTIFIER, (substring: string, ...args: string[]) => {
-					return params[args[0]];
-					//return `([^\/]+)`;
-				})
-			);
-			const baseRoutePath = window.location.href;
-			return (baseRoutePath.endsWith('/') ? baseRoutePath : baseRoutePath + '/') + localRoutePath;
 		};
+		this.#modalRegistrations.push(registration);
+		this.#generateNewURL(registration);
+		this.#generateContextRoutes();
 	}
 
-	private _removeModalPath(info: IRoutingInfo) {
-		window.history.pushState({}, '', window.location.href.split(info.match.fragments.consumed)[0]);
-		console.log('ask to remove path', info.match.fragments.consumed);
+	public _internal_routerGotBasePath(routerBasePath: string) {
+		if (this.#routerBasePath === routerBasePath) return;
+		this.#routerBasePath = routerBasePath;
+		this.#generateNewURLs();
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index fde2927bc8..07ab280e56 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -76,6 +76,7 @@ export class UmbRouterSlotElement extends UmbLitElement {
 	protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.firstUpdated(_changedProperties);
 		this._routerPath = this.#router.constructAbsolutePath('') || '';
+		this.#routeContext._internal_routerGotBasePath(this._routerPath);
 		this.dispatchEvent(new UmbRouterSlotInitEvent());
 	}
 
@@ -83,6 +84,7 @@ export class UmbRouterSlotElement extends UmbLitElement {
 		const newAbsolutePath = this.#router.constructAbsolutePath('') || '';
 		if (this._routerPath !== newAbsolutePath) {
 			this._routerPath = newAbsolutePath;
+			this.#routeContext._internal_routerGotBasePath(this._routerPath);
 			this.dispatchEvent(new UmbRouterSlotInitEvent());
 
 			const newActiveLocalPath = this.#router.match?.route.path;

From e23021657d95bc2fde49bbdc5233759812c292d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 14 Mar 2023 16:26:11 +0100
Subject: [PATCH 05/96] remove console.log

---
 src/Umbraco.Web.UI.Client/src/core/router/route.context.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 58029cf4b8..c14c3a9cdb 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -85,7 +85,6 @@ export class UmbRouteContext {
 	}
 
 	#generateNewURL = (modalRegistration: UmbModalRouteRegistration) => {
-		console.log('#generateNewURL', this);
 		if (!modalRegistration.options.onUrlBuilder || !this.#routerBasePath) return;
 
 		const routeBasePath = this.#routerBasePath.endsWith('/') ? this.#routerBasePath : this.#routerBasePath + '/';

From afed1fd890a09b7ba2268b46b8ac93dfa9441b76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 14 Mar 2023 16:33:28 +0100
Subject: [PATCH 06/96] remove generic utilities

---
 src/Umbraco.Web.UI.Client/src/core/router/route.context.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index c14c3a9cdb..542f2fdf59 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -5,12 +5,6 @@ import { UmbModalToken, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
 
 const EmptyDiv = document.createElement('div');
 
-// Get the second generic type of UmbModalToken:
-type GetDataType<T> = T extends UmbModalToken<infer Data> ? Data : unknown;
-
-// Get the second generic type of UmbModalToken:
-type GetResultType<T> = T extends UmbModalToken<infer Data, infer Result> ? Result : unknown;
-
 // TODO: Consider accepting the Token as a generic:
 export type UmbModalRouteOptions<UmbModalTokenData extends object = object, UmbModalTokenResult = unknown> = {
 	path: string;

From 7131d74e5ec7fb8a0ac17996988fcab9c0c3bb84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 14 Mar 2023 16:40:52 +0100
Subject: [PATCH 07/96] move methods

---
 .../src/core/router/route.context.ts          | 99 +++++++++----------
 1 file changed, 46 insertions(+), 53 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 542f2fdf59..23989b6a16 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -41,61 +41,8 @@ export class UmbRouteContext {
 			this.#modalContext = context;
 			this.#generateContextRoutes();
 		});
-
-		// Consider using this event, to stay up to date with current full-URL. which is necessary for Modal opening.
-		window.addEventListener('navigationsuccess', this.#onNavigationChanged as unknown as EventListener);
 	}
 
-	#removeModalPath(info: IRoutingInfo) {
-		window.history.pushState({}, '', window.location.href.split(info.match.fragments.consumed)[0]);
-	}
-
-	#generateRoute(modalRegistration: UmbModalRouteRegistration): IRoute {
-		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
-		return {
-			path: localPath,
-			pathMatch: 'suffix',
-			component: EmptyDiv,
-			setup: modalRegistration.routeSetup,
-		};
-	}
-
-	#generateContextRoutes() {
-		this.#contextRoutes = this.#modalRegistrations.map((modalRegistration) => {
-			return this.#generateRoute(modalRegistration);
-		});
-
-		// TODO: Should we await one frame, to ensure we don't call back too much?.
-		this._onGotModals(this.#contextRoutes);
-	}
-
-	#onNavigationChanged = (event: Event) => {
-		console.log('route got navigation changed', event);
-		this.#generateNewURLs();
-	};
-
-	#generateNewURLs() {
-		this.#modalRegistrations.forEach(this.#generateNewURL);
-	}
-
-	#generateNewURL = (modalRegistration: UmbModalRouteRegistration) => {
-		if (!modalRegistration.options.onUrlBuilder || !this.#routerBasePath) return;
-
-		const routeBasePath = this.#routerBasePath.endsWith('/') ? this.#routerBasePath : this.#routerBasePath + '/';
-		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
-
-		const urlBuilder = (params: { [key: string]: string | number }) => {
-			const localRoutePath = stripSlash(
-				localPath.replace(PARAM_IDENTIFIER, (substring: string, ...args: string[]) => {
-					return params[args[0]].toString();
-					//return `([^\/]+)`;
-				})
-			);
-			return routeBasePath + localRoutePath;
-		};
-
-		modalRegistration.options.onUrlBuilder(urlBuilder);
-	};
 	public registerModal<D extends object = object, R = any>(
 		alias: UmbModalToken<D, R> | string,
 		options: UmbModalRouteOptions<D, R>
@@ -125,6 +72,52 @@ export class UmbRouteContext {
 		this.#routerBasePath = routerBasePath;
 		this.#generateNewURLs();
 	}
+
+	#removeModalPath(info: IRoutingInfo) {
+		window.history.pushState({}, '', window.location.href.split(info.match.fragments.consumed)[0]);
+	}
+
+	#generateRoute(modalRegistration: UmbModalRouteRegistration): IRoute {
+		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
+		return {
+			path: localPath,
+			pathMatch: 'suffix',
+			component: EmptyDiv,
+			setup: modalRegistration.routeSetup,
+		};
+	}
+
+	#generateContextRoutes() {
+		this.#contextRoutes = this.#modalRegistrations.map((modalRegistration) => {
+			return this.#generateRoute(modalRegistration);
+		});
+
+		// TODO: Should we await one frame, to ensure we don't call back too much?.
+		this._onGotModals(this.#contextRoutes);
+	}
+
+	#generateNewURLs() {
+		this.#modalRegistrations.forEach(this.#generateNewURL);
+	}
+
+	#generateNewURL = (modalRegistration: UmbModalRouteRegistration) => {
+		if (!modalRegistration.options.onUrlBuilder || !this.#routerBasePath) return;
+
+		const routeBasePath = this.#routerBasePath.endsWith('/') ? this.#routerBasePath : this.#routerBasePath + '/';
+		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
+
+		const urlBuilder = (params: { [key: string]: string | number }) => {
+			const localRoutePath = stripSlash(
+				localPath.replace(PARAM_IDENTIFIER, (substring: string, ...args: string[]) => {
+					return params[args[0]].toString();
+					//return `([^\/]+)`;
+				})
+			);
+			return routeBasePath + localRoutePath;
+		};
+
+		modalRegistration.options.onUrlBuilder(urlBuilder);
+	};
 }
 
 export const UMB_ROUTE_CONTEXT_TOKEN = new UmbContextToken<UmbRouteContext>('UmbRouterContext');

From 991ed245566bfe5522872f387957bd42ad3a6172 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 14 Mar 2023 16:41:18 +0100
Subject: [PATCH 08/96] remove comment

---
 src/Umbraco.Web.UI.Client/src/core/router/route.context.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 23989b6a16..3f3851fb54 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -110,7 +110,6 @@ export class UmbRouteContext {
 			const localRoutePath = stripSlash(
 				localPath.replace(PARAM_IDENTIFIER, (substring: string, ...args: string[]) => {
 					return params[args[0]].toString();
-					//return `([^\/]+)`;
 				})
 			);
 			return routeBasePath + localRoutePath;

From c8a92f8b30fcae82b1eae8ecee3549469f691b20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 14 Mar 2023 16:49:37 +0100
Subject: [PATCH 09/96] TODO note

---
 .../input-multi-url-picker/input-multi-url-picker.element.ts    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index f6e2cabcb6..a961a8d4f4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -119,6 +119,8 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 			() => !!this.max && this.urls.length > this.max
 		);
 
+		// TODO: make a helper that get the context, watches one or more props to use to update the registration, can be or have something that is stateful so its easy to use the URLBuilder.
+
 		this.consumeContext(UMB_ROUTE_CONTEXT_TOKEN, (instance) => {
 			this._routeContext = instance;
 

From baef73dd67236615d068e6225e055c2b62ba9634 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 15 Mar 2023 12:46:32 +0100
Subject: [PATCH 10/96] bring back slot

---
 .../src/core/router/router-slot.element.ts                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index 07ab280e56..5dc12dcc0b 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -53,7 +53,7 @@ export class UmbRouterSlotElement extends UmbLitElement {
 		this.#modalRouter.parent = this.#router;
 		this.#router.addEventListener('changestate', this._onChangeState);
 		//this.#router.appendChild(this.#modalRouter);
-		//this.#router.appendChild(document.createElement('slot'));
+		this.#router.appendChild(document.createElement('slot'));
 	}
 
 	connectedCallback() {

From 4e5900c25fdb2a6c434be785227f121da277df00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 15 Mar 2023 13:28:57 +0100
Subject: [PATCH 11/96] import order

---
 .../documents/documents/workspace/document-workspace.element.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts
index d2f69c3f86..7de8fefaa8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts
@@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { IRoute, IRoutingInfo } from 'router-slot';
+import { UmbRouterSlotInitEvent } from '@umbraco-cms/router';
 import type { UmbWorkspaceEntityElement } from '../../../shared/components/workspace/workspace-entity-element.interface';
 import { UmbVariantId } from '../../../shared/variants/variant-id.class';
 import { ActiveVariant } from '../../../shared/components/workspace/workspace-context/workspace-split-view-manager.class';
@@ -10,7 +11,6 @@ import { UmbDocumentWorkspaceSplitViewElement } from './document-workspace-split
 import { UmbLitElement } from '@umbraco-cms/element';
 import '../../../shared/components/workspace/workspace-variant/workspace-variant.element';
 import { DocumentModel, VariantViewModelBaseModel } from '@umbraco-cms/backend-api';
-import { UmbRouterSlotInitEvent } from '@umbraco-cms/router';
 
 @customElement('umb-document-workspace')
 export class UmbDocumentWorkspaceElement extends UmbLitElement implements UmbWorkspaceEntityElement {

From ab08024e7f17d45799c01f43f83eb7e2f3ccb4f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 15 Mar 2023 14:02:11 +0100
Subject: [PATCH 12/96] fixing moving observable in DOM

---
 .../libs/context-api/consume/context-consumer.ts              | 4 +++-
 src/Umbraco.Web.UI.Client/libs/observable-api/observer.ts     | 3 ++-
 .../workspace-context/workspace-split-view-manager.class.ts   | 4 ++++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-consumer.ts b/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-consumer.ts
index 7d4d378078..4f725c4767 100644
--- a/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-consumer.ts
+++ b/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-consumer.ts
@@ -37,7 +37,9 @@ export class UmbContextConsumer<HostType extends EventTarget = EventTarget, T =
 
 	protected _onResponse = (instance: T) => {
 		// TODO: check that this check is not giving us any problems:
-		if (this._instance === instance) return;
+		if (this._instance === instance) {
+			return;
+		}
 		this._instance = instance;
 		this._callback?.(instance);
 		this._promiseResolver?.(instance);
diff --git a/src/Umbraco.Web.UI.Client/libs/observable-api/observer.ts b/src/Umbraco.Web.UI.Client/libs/observable-api/observer.ts
index bf7210c284..dc0b7993c0 100644
--- a/src/Umbraco.Web.UI.Client/libs/observable-api/observer.ts
+++ b/src/Umbraco.Web.UI.Client/libs/observable-api/observer.ts
@@ -12,7 +12,8 @@ export class UmbObserver<T> {
 	// Notice controller class implements empty hostConnected().
 
 	hostDisconnected() {
-		this.#subscription.unsubscribe();
+		// No cause then it cant re-connect, if the same element just was moved in DOM.
+		//this.#subscription.unsubscribe();
 	}
 
 	destroy(): void {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-split-view-manager.class.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-split-view-manager.class.ts
index d0e38cab9d..d1036b155b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-split-view-manager.class.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-split-view-manager.class.ts
@@ -21,6 +21,10 @@ export class UmbWorkspaceSplitViewManager {
 
 	constructor(host: UmbControllerHostInterface) {
 		this.#host = host;
+
+		this.activeVariantsInfo.subscribe((data) => {
+			console.log('— activeVariantsInfo 1 updated: ', data);
+		});
 	}
 
 	private _routeBase?: string;

From a5eacc214f328ab650bc4a3266afd8b75027e404 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 15 Mar 2023 14:02:26 +0100
Subject: [PATCH 13/96] remove test code

---
 .../workspace-context/workspace-split-view-manager.class.ts   | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-split-view-manager.class.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-split-view-manager.class.ts
index d1036b155b..d0e38cab9d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-split-view-manager.class.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-split-view-manager.class.ts
@@ -21,10 +21,6 @@ export class UmbWorkspaceSplitViewManager {
 
 	constructor(host: UmbControllerHostInterface) {
 		this.#host = host;
-
-		this.activeVariantsInfo.subscribe((data) => {
-			console.log('— activeVariantsInfo 1 updated: ', data);
-		});
 	}
 
 	private _routeBase?: string;

From 3490132194683c2346f404e3a1473be5bbf876d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 15 Mar 2023 17:14:35 +0100
Subject: [PATCH 14/96] variantID handling

---
 src/Umbraco.Web.UI.Client/src/app.ts          |  1 +
 .../workspace-property.context.ts             | 52 +++++++++---
 .../clear/property-action-clear.element.ts    | 10 ++-
 .../property-editor-ui-block-grid.element.ts  | 31 ++++----
 .../property-editor-ui-textarea.element.ts    |  2 +-
 .../src/core/router/index.ts                  |  1 +
 .../src/core/router/route.context.ts          |  2 +-
 .../src/core/router/router-slot.element.ts    | 16 ++--
 .../router/variant-router-slot.element.ts     | 79 +++++++++++++++++++
 9 files changed, 154 insertions(+), 40 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts
index 10fd0f49e3..1108ba4c71 100644
--- a/src/Umbraco.Web.UI.Client/src/app.ts
+++ b/src/Umbraco.Web.UI.Client/src/app.ts
@@ -9,6 +9,7 @@ import '@umbraco-ui/uui-modal-sidebar';
 import 'element-internals-polyfill';
 
 import './core/router/router-slot.element';
+import './core/router/variant-router-slot.element';
 import './core/notification/layouts/default';
 
 import { UUIIconRegistryEssential } from '@umbraco-ui/uui';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
index 5474e323a9..9140223273 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
@@ -3,8 +3,8 @@ import { UmbWorkspaceVariableEntityContextInterface } from '../workspace/workspa
 import { UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN } from '../workspace/workspace-variant/workspace-variant.context';
 import type { DataTypeModel } from '@umbraco-cms/backend-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
-import { ObjectState, StringState, UmbObserverController } from '@umbraco-cms/observable-api';
-import { UmbContextConsumerController, UmbContextProviderController } from '@umbraco-cms/context-api';
+import { ClassState, ObjectState, StringState, UmbObserverController } from '@umbraco-cms/observable-api';
+import { UmbContextConsumerController, UmbContextProviderController, UmbContextToken } from '@umbraco-cms/context-api';
 
 // If we get this from the server then we can consider using TypeScripts Partial<> around the model from the Management-API.
 export type WorkspacePropertyData<ValueType> = {
@@ -28,12 +28,16 @@ export class UmbWorkspacePropertyContext<ValueType = unknown> {
 	public readonly value = this._data.getObservablePart((data) => data.value);
 	public readonly config = this._data.getObservablePart((data) => data.config);
 
-	private _variantId?: UmbVariantId;
+	#workspaceVariantId?: UmbVariantId;
+
+	#variantId = new ClassState<UmbVariantId | undefined>(undefined);
+	public readonly variantId = this.#variantId.asObservable();
 
 	private _variantDifference = new StringState(undefined);
 	public readonly variantDifference = this._variantDifference.asObservable();
 
 	private _workspaceContext?: UmbWorkspaceVariableEntityContextInterface;
+	private _workspaceVariantConsumer?: UmbContextConsumerController<typeof UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN.TYPE>;
 
 	constructor(host: UmbControllerHostInterface) {
 		this.#host = host;
@@ -46,7 +50,32 @@ export class UmbWorkspacePropertyContext<ValueType = unknown> {
 			}
 		);
 
-		this._providerController = new UmbContextProviderController(host, 'umbPropertyContext', this);
+		this._providerController = new UmbContextProviderController(host, UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, this);
+
+		this.variantId.subscribe((propertyVariantId) => {
+			if (propertyVariantId) {
+				if (!this._workspaceVariantConsumer) {
+					this._workspaceVariantConsumer = new UmbContextConsumerController(
+						this.#host,
+						UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN,
+						(workspaceVariantContext) => {
+							new UmbObserverController(this.#host, workspaceVariantContext.variantId, (workspaceVariantId) => {
+								this.#workspaceVariantId = workspaceVariantId;
+								this._generateVariantDifferenceString();
+							});
+						}
+					);
+				} else {
+					this._generateVariantDifferenceString();
+				}
+			}
+		});
+	}
+
+	private _generateVariantDifferenceString() {
+		this._variantDifference.next(
+			this.#workspaceVariantId ? this.#variantId.getValue()?.toDifferencesString(this.#workspaceVariantId) : ''
+		);
 	}
 
 	public setAlias(alias: WorkspacePropertyData<ValueType>['alias']) {
@@ -67,22 +96,17 @@ export class UmbWorkspacePropertyContext<ValueType = unknown> {
 
 		const alias = this._data.getValue().alias;
 		if (alias) {
-			this._workspaceContext?.setPropertyValue(alias, value, this._variantId);
+			this._workspaceContext?.setPropertyValue(alias, value, this.#variantId.getValue());
 		}
 	}
 	public setConfig(config: WorkspacePropertyData<ValueType>['config']) {
 		this._data.update({ config });
 	}
 	public setVariantId(variantId: UmbVariantId | undefined) {
-		this._variantId = variantId;
-		new UmbContextConsumerController(this.#host, UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN, (variantContext) => {
-			new UmbObserverController(this.#host, variantContext.variantId, (variantId) => {
-				this._variantDifference.next(variantId ? this._variantId?.toDifferencesString(variantId) : '');
-			});
-		});
+		this.#variantId.next(variantId);
 	}
 	public getVariantId() {
-		return this._variantId;
+		return this.#variantId.getValue();
 	}
 
 	public resetValue() {
@@ -94,3 +118,7 @@ export class UmbWorkspacePropertyContext<ValueType = unknown> {
 		this._providerController.destroy(); // This would also be handled by the controller host, but if someone wanted to replace/remove this context without the host being destroyed. Then we have clean up out selfs here.
 	}
 }
+
+export const UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN = new UmbContextToken<UmbWorkspacePropertyContext>(
+	'UmbWorkspacePropertyContext'
+);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.element.ts
index 6df5a91cc9..dd9b66440d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.element.ts
@@ -2,12 +2,14 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 //import type { UmbPropertyActionMenuContext } from '../shared/property-action-menu/property-action-menu.context';
 import { UmbPropertyAction } from '../shared/property-action/property-action.model';
-import type { UmbWorkspacePropertyContext } from '../../components/workspace-property/workspace-property.context';
+import {
+	UmbWorkspacePropertyContext,
+	UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN,
+} from '../../components/workspace-property/workspace-property.context';
 import { UmbLitElement } from '@umbraco-cms/element';
 
 @customElement('umb-property-action-clear')
 export class UmbPropertyActionClearElement extends UmbLitElement implements UmbPropertyAction {
-
 	@property()
 	value = '';
 
@@ -23,7 +25,7 @@ export class UmbPropertyActionClearElement extends UmbLitElement implements UmbP
 			this._propertyActionMenuContext = propertyActionsContext;
 		});
 		*/
-		this.consumeContext('umbPropertyContext', (propertyContext: UmbWorkspacePropertyContext) => {
+		this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (propertyContext: UmbWorkspacePropertyContext) => {
 			this._propertyContext = propertyContext;
 		});
 	}
@@ -40,7 +42,7 @@ export class UmbPropertyActionClearElement extends UmbLitElement implements UmbP
 		//this.value = '';// This is though bad as it assumes we are dealing with a string. So wouldn't work as a generalized element.
 		//this.dispatchEvent(new CustomEvent('property-value-change'));
 		// Or you can do this:
-		this._propertyContext?.resetValue();// This resets value to what the property wants.
+		this._propertyContext?.resetValue(); // This resets value to what the property wants.
 	}
 
 	render() {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
index 88074e0bb5..8673788e1d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
@@ -2,10 +2,11 @@ import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { IRoute, IRoutingInfo } from 'router-slot';
-import { UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN } from '../../../../shared/components/workspace/workspace-variant/workspace-variant.context';
-import { UmbVariantId } from '../../../../shared/variants/variant-id.class';
 import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
 import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
+import { UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN } from '../../../../shared/components/workspace/workspace-variant/workspace-variant.context';
+import { UmbVariantId } from '../../../../shared/variants/variant-id.class';
+import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../../shared/components/workspace-property/workspace-property.context';
 import { UmbLitElement } from '@umbraco-cms/element';
 
 /**
@@ -38,10 +39,9 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 	constructor() {
 		super();
 
-		this.consumeContext(UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN, (context) => {
-			this._variantContext = context;
-			this.observe(this._variantContext?.variantId, (variantId) => {
-				this._variantId = variantId;
+		this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (context) => {
+			this.observe(context?.variantId, (propertyVariantId) => {
+				this._variantId = propertyVariantId;
 				this.setupRoutes();
 			});
 		});
@@ -52,7 +52,7 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 		if (this._variantId !== undefined) {
 			this._routes = [
 				{
-					path: this._variantId.toString() + '/modal-1',
+					path: 'modal-1',
 					component: () => {
 						return import('./property-editor-ui-block-grid-inner-test.element');
 					},
@@ -64,7 +64,7 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 					},
 				},
 				{
-					path: this._variantId.toString() + '/modal-2',
+					path: 'modal-2',
 					//pathMatch: 'full',
 					component: () => {
 						return import('./property-editor-ui-block-grid-inner-test.element');
@@ -88,17 +88,16 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 					<uui-tab-group slot="tabs">
 						<uui-tab
 							label="TAB 1"
-							href="${this._routerPath + '/' + this._variantId.toString()}/modal-1"
-							.active=${this._routerPath + '/' + this._variantId.toString() + '/modal-1' ===
-							this._activePath}></uui-tab>
+							href="${this._routerPath + '/'}modal-1"
+							.active=${this._routerPath + '/' + 'modal-1' === this._activePath}></uui-tab>
 						<uui-tab
 							label="TAB 2"
-							href="${this._routerPath + '/' + this._variantId.toString()}/modal-2"
-							.active=${this._routerPath + '/' + this._variantId.toString() + '/modal-2' ===
-							this._activePath}></uui-tab>
+							href="${this._routerPath + '/'}modal-2"
+							.active=${this._routerPath + '/' + 'modal-2' === this._activePath}></uui-tab>
 					</uui-tab-group>
 
-					<umb-router-slot
+					<umb-variant-router-slot
+						.variantId=${this._variantId}
 						id="router-slot"
 						.routes="${this._routes}"
 						@init=${(event: UmbRouterSlotInitEvent) => {
@@ -107,7 +106,7 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 						@change=${(event: UmbRouterSlotChangeEvent) => {
 							this._activePath = event.target.localActiveViewPath;
 						}}>
-					</umb-router-slot>
+					</umb-variant-router-slot>
 			  </div>`
 			: 'loading...';
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
index de39bfcbd7..4bf9190ba7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
@@ -28,7 +28,7 @@ export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements
 	constructor() {
 		super();
 
-		this.consumeContext('umbPropertyContext', (instance: UmbWorkspacePropertyContext<string>) => {
+		this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (instance: UmbWorkspacePropertyContext<string>) => {
 			this.propertyContext = instance;
 		});
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/index.ts b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
index a6d871dbab..c1fffae64a 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
@@ -3,3 +3,4 @@ export * from './route.context';
 export * from './router-slot.element';
 export * from './router-slot-change.event';
 export * from './router-slot-init.event';
+export * from './variant-router-slot.element';
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 3f3851fb54..70b430ed27 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -81,7 +81,7 @@ export class UmbRouteContext {
 		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
 		return {
 			path: localPath,
-			pathMatch: 'suffix',
+			//pathMatch: 'suffix',
 			component: EmptyDiv,
 			setup: modalRegistration.routeSetup,
 		};
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index 5dc12dcc0b..bdfad1f77b 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -10,7 +10,7 @@ import { UmbLitElement } from '@umbraco-cms/element';
 /**
  *  @element umb-router-slot-element
  *  @description - Component for wrapping Router Slot element, providing some local events for implementation.
- *  @extends UmbRouterSlotElement
+ *  @extends UmbLitElement
  * @fires {UmbRouterSlotInitEvent} init - fires when the router is connected
  * @fires {UmbRouterSlotChangeEvent} change - fires when a path of this router is changed
  */
@@ -51,11 +51,15 @@ export class UmbRouterSlotElement extends UmbLitElement {
 	constructor() {
 		super();
 		this.#modalRouter.parent = this.#router;
-		this.#router.addEventListener('changestate', this._onChangeState);
+		this.#router.addEventListener('changestate', this._updateRouterPath.bind(this));
 		//this.#router.appendChild(this.#modalRouter);
 		this.#router.appendChild(document.createElement('slot'));
 	}
 
+	protected _constructAbsoluteRouterPath() {
+		return this.#router.constructAbsolutePath('') || '';
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		// Currently we have to set this every time as RouteSlot looks for its parent every-time it is connected. Aka it has not way to explicitly set the parent.
@@ -75,13 +79,13 @@ export class UmbRouterSlotElement extends UmbLitElement {
 
 	protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.firstUpdated(_changedProperties);
-		this._routerPath = this.#router.constructAbsolutePath('') || '';
+		this._routerPath = this._constructAbsoluteRouterPath();
 		this.#routeContext._internal_routerGotBasePath(this._routerPath);
 		this.dispatchEvent(new UmbRouterSlotInitEvent());
 	}
 
-	private _onChangeState = () => {
-		const newAbsolutePath = this.#router.constructAbsolutePath('') || '';
+	protected _updateRouterPath() {
+		const newAbsolutePath = this._constructAbsoluteRouterPath();
 		if (this._routerPath !== newAbsolutePath) {
 			this._routerPath = newAbsolutePath;
 			this.#routeContext._internal_routerGotBasePath(this._routerPath);
@@ -93,7 +97,7 @@ export class UmbRouterSlotElement extends UmbLitElement {
 				this.dispatchEvent(new UmbRouterSlotChangeEvent());
 			}
 		}
-	};
+	}
 
 	private _onNavigationChanged = (event?: any) => {
 		if (event.detail.slot === this.#router) {
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
new file mode 100644
index 0000000000..f9cb7c574f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
@@ -0,0 +1,79 @@
+import { customElement, property } from 'lit/decorators.js';
+import { IRoute } from 'router-slot';
+import { UmbVariantId } from '../../backoffice/shared/variants/variant-id.class';
+import { UmbRouterSlotElement } from './router-slot.element';
+
+function variantIdsToString(variantIds: UmbVariantId[]): string {
+	return variantIds.map((id) => id.toString()).join('_&_');
+}
+
+/**
+ *  @element umb-variant-router-slot-element
+ *  @description - Component for wrapping Router Slot element, providing
+ *  @extends UmbRouterSlotElement
+ * @fires {UmbRouterSlotInitEvent} init - fires when the router is connected
+ * @fires {UmbRouterSlotChangeEvent} change - fires when a path of this router is changed
+ */
+@customElement('umb-variant-router-slot')
+export class UmbVariantRouterSlotElement extends UmbRouterSlotElement {
+	#variantIds: UmbVariantId[] = [];
+
+	#getPathPrefix() {
+		return variantIdsToString(this.#variantIds);
+	}
+
+	#currentPathPrefix = '';
+	private _routes?: IRoute[];
+	public get routes(): IRoute[] | undefined {
+		return this._routes;
+	}
+	public set routes(value: IRoute[] | undefined) {
+		this._routes = value;
+		if (this.#variantIds.length > 0) {
+			this._updateRoutes();
+		}
+	}
+
+	private _updateRoutes() {
+		const newPrefix = this.#getPathPrefix();
+		if (newPrefix !== this.#currentPathPrefix) {
+			this.#currentPathPrefix = newPrefix;
+			const prepend = newPrefix === '' ? '' : newPrefix + '/';
+			const mappedRoutes = this._routes?.map((route) => {
+				return {
+					...route,
+					path: prepend + route.path,
+				};
+			});
+			super.routes = mappedRoutes;
+			this._updateRouterPath();
+		}
+	}
+
+	@property()
+	public get variantId(): UmbVariantId[] {
+		return this.#variantIds;
+	}
+	public set variantId(value: UmbVariantId[] | UmbVariantId) {
+		if (Array.isArray(value)) {
+			this.#variantIds = [...(value as UmbVariantId[])];
+		} else if (value) {
+			this.#variantIds = [value];
+		} else {
+			this.#variantIds = [];
+		}
+		if (this._routes) {
+			this._updateRoutes();
+		}
+	}
+
+	protected _constructAbsoluteRouterPath() {
+		return super._constructAbsoluteRouterPath() + (this.#currentPathPrefix !== '' ? '/' + this.#currentPathPrefix : '');
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-router-slot': UmbRouterSlotElement;
+	}
+}

From 70ba4489ea1b049a892a9ff94855f5cf5b6d82a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 15 Mar 2023 20:34:56 +0100
Subject: [PATCH 15/96] clean up

---
 .../document-workspace-view-edit.element.ts   |  1 -
 .../input-multi-url-picker.element.ts         | 42 ++-----------------
 .../src/core/router/route.context.ts          | 12 +++---
 3 files changed, 10 insertions(+), 45 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit.element.ts
index 6dfc9ca79b..c9abb815fa 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/document-workspace-view-edit.element.ts
@@ -68,7 +68,6 @@ export class UmbDocumentWorkspaceViewEditElement extends UmbLitElement {
 		this.observe(
 			this._workspaceContext.rootPropertyStructures(),
 			(rootPropertyStructure) => {
-				console.log('rootPropertyStructure', rootPropertyStructure);
 				this._hasRootProperties = rootPropertyStructure.length > 0;
 				this._createRoutes();
 			},
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index a961a8d4f4..39e9082c4d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -131,7 +131,6 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 			this._routeContext.registerModal(UMB_LINK_PICKER_MODAL_TOKEN, {
 				path: `${'this.alias'}/:index`,
 				onSetup: (routingInfo) => {
-					console.log('call onSetup');
 					// TODO: Make onSetup optional.
 					// TODO: Maybe use UmbRouteLocation?
 					// Get index from routeInfo:
@@ -141,8 +140,6 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 					if (Number.isNaN(index)) return false;
 
 					// Use the index to find data:
-					console.log('onSetup modal index:', index);
-
 					let data: UmbLinkPickerLink | null = null;
 					if (index >= 0 && index < this.urls.length) {
 						data = this._getItemByIndex(index);
@@ -150,8 +147,6 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 						index = null;
 					}
 
-					console.log('onSetup modal got data:', data);
-
 					return {
 						index: index,
 						lol: false,
@@ -172,15 +167,10 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 					};
 				},
 				onSubmit: (submitData) => {
-					console.log('On submit in property editor input');
 					if (!submitData) return;
 					this._setSelection(submitData.link, submitData.index);
 				},
-				onReject: () => {
-					console.log('User cancelled dialog.');
-				},
 				onUrlBuilder: (urlBuilder) => {
-					console.log('got onUrlBuilder');
 					this._linkPickerURL = urlBuilder;
 				},
 			});
@@ -211,51 +201,27 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 		this.dispatchEvent(new CustomEvent('change', { composed: true, bubbles: true }));
 	}
 
-	private _openPicker(data?: UmbLinkPickerLink, index?: number) {
-		console.log('JS open picker, should fail for now,');
-		/*
-		const modalHandler = this._modalContext?.open(UMB_LINK_PICKER_MODAL_TOKEN, {
-			link: {
-				name: data?.name,
-				published: data?.published,
-				queryString: data?.queryString,
-				target: data?.target,
-				trashed: data?.trashed,
-				udi: data?.udi,
-				url: data?.url,
-			},
-			config: {
-				hideAnchor: this.hideAnchor,
-				ignoreUserStartNodes: this.ignoreUserStartNodes,
-				overlaySize: this.overlaySize || 'small',
-			},
-		});
-		modalHandler?.onSubmit().then((newUrl: UmbLinkPickerLink) => {
-			if (!newUrl) return;
-
-			this._setSelection(newUrl, index);
-		});
-		*/
+	// TODO: We should get a href property on uui-ref-node, and not use this method:
+	private _temporary_onClick_editItem(index: number) {
+		window.history.pushState({}, '', this._linkPickerURL?.({ index: index || -1 }));
 	}
 
 	render() {
 		return html`${this.urls?.map((link, index) => this._renderItem(link, index))}
 			<uui-button look="placeholder" label="Add" .href=${this._linkPickerURL?.({ index: -1 })}>Add</uui-button>`;
-		// "modal/Umb.Modal.LinkPicker/${'to-do-myPropertyAlias'}/-1"
 	}
 
 	private _renderItem(link: UmbLinkPickerLink, index: number) {
 		return html`<uui-ref-node
 			.name="${link.name || ''}"
 			.detail="${(link.url || '') + (link.queryString || '')}"
-			@open="${() => this._openPicker(link, index)}">
+			@open="${() => this._temporary_onClick_editItem(index)}">
 			<uui-icon slot="icon" name="${link.icon || 'umb:link'}"></uui-icon>
 			<uui-action-bar slot="actions">
 				<uui-button .href=${this._linkPickerURL?.({ index })} label="Edit link">Edit</uui-button>
 				<uui-button @click="${() => this._removeItem(index)}" label="Remove link">Remove</uui-button>
 			</uui-action-bar>
 		</uui-ref-node>`;
-		// "modal/Umb.Modal.LinkPicker/${'to-do-myPropertyAlias'}/${index}"
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 70b430ed27..65da282864 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -8,9 +8,9 @@ const EmptyDiv = document.createElement('div');
 // TODO: Consider accepting the Token as a generic:
 export type UmbModalRouteOptions<UmbModalTokenData extends object = object, UmbModalTokenResult = unknown> = {
 	path: string;
-	onSetup: (routingInfo: IRoutingInfo) => UmbModalTokenData | false;
-	onSubmit: (data: UmbModalTokenResult) => void | PromiseLike<void>;
-	onReject: () => void;
+	onSetup?: (routingInfo: IRoutingInfo) => UmbModalTokenData | false;
+	onSubmit?: (data: UmbModalTokenResult) => void | PromiseLike<void>;
+	onReject?: () => void;
 	onUrlBuilder?: (urlBuilder: UmbModalRouteBuilder) => void;
 };
 
@@ -51,9 +51,9 @@ export class UmbRouteContext {
 			alias: alias,
 			options: options,
 			routeSetup: (component: HTMLElement, info: IRoutingInfo<any, any>) => {
-				const modalData = options.onSetup(info);
-				if (modalData && this.#modalContext) {
-					const modalHandler = this.#modalContext.open(alias, modalData);
+				const modalData = options.onSetup?.(info);
+				if (modalData !== false && this.#modalContext) {
+					const modalHandler = this.#modalContext.open(alias, modalData || {});
 					modalHandler.onSubmit().then(
 						() => this.#removeModalPath(info),
 						() => this.#removeModalPath(info)

From 4d329e6a1113ebe621c4ec03ef2bc73e4dc81e12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 15 Mar 2023 21:07:41 +0100
Subject: [PATCH 16/96] use our own Route type

---
 .../documents/workspace/document-workspace.element.ts |  8 +++-----
 src/Umbraco.Web.UI.Client/src/core/router/index.ts    |  1 +
 .../src/core/router/route.interface.ts                | 11 +++++++++++
 .../src/core/router/router-slot.element.ts            |  9 +++++----
 .../src/core/router/variant-router-slot.element.ts    |  8 ++++----
 5 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/core/router/route.interface.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts
index 7de8fefaa8..9db5e82a1e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { IRoute, IRoutingInfo } from 'router-slot';
-import { UmbRouterSlotInitEvent } from '@umbraco-cms/router';
+import { UmbRoute, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
 import type { UmbWorkspaceEntityElement } from '../../../shared/components/workspace/workspace-entity-element.interface';
 import { UmbVariantId } from '../../../shared/variants/variant-id.class';
 import { ActiveVariant } from '../../../shared/components/workspace/workspace-context/workspace-split-view-manager.class';
@@ -33,7 +33,7 @@ export class UmbDocumentWorkspaceElement extends UmbLitElement implements UmbWor
 	_unique?: string;
 
 	@state()
-	_routes?: Array<IRoute>;
+	_routes?: Array<UmbRoute>;
 
 	@state()
 	_availableVariants: Array<VariantViewModelBaseModel> = [];
@@ -84,14 +84,13 @@ export class UmbDocumentWorkspaceElement extends UmbLitElement implements UmbWor
 		if (!this._availableVariants || this._availableVariants.length === 0) return;
 
 		// Generate split view routes for all available routes
-		const routes: Array<IRoute> = [];
+		const routes: Array<UmbRoute> = [];
 
 		// Split view routes:
 		this._availableVariants.forEach((variantA) => {
 			this._availableVariants.forEach((variantB) => {
 				routes.push({
 					path: new UmbVariantId(variantA).toString() + '_&_' + new UmbVariantId(variantB).toString(),
-					//component: () => import('./document-workspace-split-view.element'),
 					component: this.splitViewElement,
 					setup: (component: HTMLElement | Promise<HTMLElement>, info: IRoutingInfo) => {
 						// Set split view/active info..
@@ -108,7 +107,6 @@ export class UmbDocumentWorkspaceElement extends UmbLitElement implements UmbWor
 		this._availableVariants.forEach((variant) => {
 			routes.push({
 				path: new UmbVariantId(variant).toString(),
-				//component: () => import('./document-workspace-split-view.element'),
 				component: this.splitViewElement,
 				setup: (component: HTMLElement | Promise<HTMLElement>, info: IRoutingInfo) => {
 					// cause we might come from a split-view, we need to reset index 1.
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/index.ts b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
index c1fffae64a..eafdca757c 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
@@ -1,4 +1,5 @@
 export * from 'router-slot';
+export * from './route.interface';
 export * from './route.context';
 export * from './router-slot.element';
 export * from './router-slot-change.event';
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.interface.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.interface.ts
new file mode 100644
index 0000000000..0017d03325
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.interface.ts
@@ -0,0 +1,11 @@
+import type { IRoute } from 'router-slot/model';
+/*
+type Optional<T> = { [P in keyof T]?: T[P] };
+
+type IRouteWithComponentRoute = Exclude<IRoute, IComponentRoute>;
+type IComponentRouteWithOptionalComponent = Omit<IComponentRoute, 'component'> &
+	Optional<Pick<IComponentRoute, 'component'>>;
+
+export type UmbRoute = IRouteWithComponentRoute | IComponentRouteWithOptionalComponent;
+*/
+export type UmbRoute = IRoute;
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index bdfad1f77b..3f11fd66b6 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -1,10 +1,11 @@
-import type { IRoute } from 'router-slot/model';
+import type { IComponentRoute, IRedirectRoute, IResolverRoute, IRoute } from 'router-slot/model';
 import { RouterSlot } from 'router-slot';
 import { html, PropertyValueMap } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbRouterSlotInitEvent } from './router-slot-init.event';
 import { UmbRouterSlotChangeEvent } from './router-slot-change.event';
 import { UmbRouteContext } from './route.context';
+import { UmbRoute } from './route.interface';
 import { UmbLitElement } from '@umbraco-cms/element';
 
 /**
@@ -21,11 +22,11 @@ export class UmbRouterSlotElement extends UmbLitElement {
 	#listening = false;
 
 	@property()
-	public get routes(): IRoute[] | undefined {
+	public get routes(): UmbRoute[] | undefined {
 		return (this.#router as any).routes;
 	}
-	public set routes(value: IRoute[] | undefined) {
-		(this.#router as any).routes = value;
+	public set routes(value: UmbRoute[] | undefined) {
+		this.#router.routes = (value as IRoute[]) || [];
 	}
 
 	private _routerPath?: string;
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
index f9cb7c574f..94983c5ec9 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
@@ -1,6 +1,6 @@
 import { customElement, property } from 'lit/decorators.js';
-import { IRoute } from 'router-slot';
 import { UmbVariantId } from '../../backoffice/shared/variants/variant-id.class';
+import { UmbRoute } from './route.interface';
 import { UmbRouterSlotElement } from './router-slot.element';
 
 function variantIdsToString(variantIds: UmbVariantId[]): string {
@@ -23,11 +23,11 @@ export class UmbVariantRouterSlotElement extends UmbRouterSlotElement {
 	}
 
 	#currentPathPrefix = '';
-	private _routes?: IRoute[];
-	public get routes(): IRoute[] | undefined {
+	private _routes?: UmbRoute[];
+	public get routes(): UmbRoute[] | undefined {
 		return this._routes;
 	}
-	public set routes(value: IRoute[] | undefined) {
+	public set routes(value: UmbRoute[] | undefined) {
 		this._routes = value;
 		if (this.#variantIds.length > 0) {
 			this._updateRoutes();

From 5f1f68570237bec841d28b6b901531e407412e12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 15 Mar 2023 21:08:27 +0100
Subject: [PATCH 17/96] remove unused type

---
 .../documents/documents/workspace/document-workspace.element.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts
index 9db5e82a1e..396e6e4714 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { IRoute, IRoutingInfo } from 'router-slot';
+import { IRoutingInfo } from 'router-slot';
 import { UmbRoute, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
 import type { UmbWorkspaceEntityElement } from '../../../shared/components/workspace/workspace-entity-element.interface';
 import { UmbVariantId } from '../../../shared/variants/variant-id.class';

From 66102393dd706330dbf006b0fb5ebd00d8d37c77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 15 Mar 2023 21:11:13 +0100
Subject: [PATCH 18/96] clean up

---
 .../input-multi-url-picker/input-multi-url-picker.element.ts   | 1 -
 .../property-editor-ui-multi-url-picker.element.ts             | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index 39e9082c4d..1f610b4281 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -100,7 +100,6 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 	}
 
 	private _urls: Array<UmbLinkPickerLink> = [];
-	//private _modalContext?: UmbModalContext;
 	private _routeContext?: UmbRouteContext;
 
 	@state()
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
index f4b1f0b068..0541dd9f46 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
@@ -2,9 +2,9 @@ import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
+import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
 import { UmbInputMultiUrlPickerElement } from '../../../../shared/components/input-multi-url-picker/input-multi-url-picker.element';
 import { UmbLinkPickerLink } from '../../../../shared/modals/link-picker';
-import { UmbPropertyEditorElement } from '@umbraco-cms/property-editor';
 import { UmbLitElement } from '@umbraco-cms/element';
 import { DataTypePropertyModel } from '@umbraco-cms/backend-api';
 
@@ -53,7 +53,6 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement impl
 
 	private _onChange(event: CustomEvent) {
 		this.value = (event.target as UmbInputMultiUrlPickerElement).urls;
-		console.log(this.value);
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 

From 42851af47b08bb73e0a28a6a77a014c2eb5baa69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 15 Mar 2023 21:12:46 +0100
Subject: [PATCH 19/96] notes

---
 .../input-multi-url-picker.element.ts               | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index 1f610b4281..e4fa4a1d97 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -120,6 +120,19 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 
 		// TODO: make a helper that get the context, watches one or more props to use to update the registration, can be or have something that is stateful so its easy to use the URLBuilder.
 
+		/*
+
+		new UmbPropertyEditorModalRegistration(this, UMB_LINK_PICKER_MODAL_TOKEN, (modalToken) => {
+			...FormControlMixin
+		});
+
+		*/
+		/*
+
+		Or use a property context method..?
+
+		*/
+
 		this.consumeContext(UMB_ROUTE_CONTEXT_TOKEN, (instance) => {
 			this._routeContext = instance;
 

From 6c5196bc0be53cee770b18782a927a2e16e46d58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 12:55:50 +0100
Subject: [PATCH 20/96] UmbPropertyEditorModalRegistrationController

---
 .../input-multi-url-picker.element.ts         | 55 ++++++++++++--
 .../src/core/mocks/data/document-type.data.ts |  2 +-
 .../src/core/router/index.ts                  |  1 +
 .../router/modal-registration.controller.ts   | 47 ++++++++++++
 ...ty-editor-modal-registration.controller.ts | 76 +++++++++++++++++++
 .../src/core/router/route.context.ts          | 16 +++-
 6 files changed, 187 insertions(+), 10 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/core/router/modal-registration.controller.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index e4fa4a1d97..2a75248202 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -3,7 +3,11 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
-import { UmbModalRouteBuilder, UmbRouteContext, UMB_ROUTE_CONTEXT_TOKEN } from '@umbraco-cms/router';
+import {
+	UmbModalRouteBuilder,
+	UmbPropertyEditorModalRegistrationController,
+	UmbRouteContext,
+} from '@umbraco-cms/router';
 import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL_TOKEN } from '../../modals/link-picker';
 import { UmbLitElement } from '@umbraco-cms/element';
 
@@ -100,7 +104,6 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 	}
 
 	private _urls: Array<UmbLinkPickerLink> = [];
-	private _routeContext?: UmbRouteContext;
 
 	@state()
 	private _linkPickerURL?: UmbModalRouteBuilder;
@@ -119,20 +122,59 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 		);
 
 		// TODO: make a helper that get the context, watches one or more props to use to update the registration, can be or have something that is stateful so its easy to use the URLBuilder.
+		new UmbPropertyEditorModalRegistrationController(this, UMB_LINK_PICKER_MODAL_TOKEN, {
+			path: `:index`,
+			onSetup: (params) => {
+				// Get index:
+				const indexParam = params.index;
+				if (!indexParam) return false;
+				let index: number | null = parseInt(params.index);
+				if (Number.isNaN(index)) return false;
 
-		/*
+				// Use the index to find data:
+				let data: UmbLinkPickerLink | null = null;
+				if (index >= 0 && index < this.urls.length) {
+					data = this._getItemByIndex(index);
+				} else {
+					// If not then make a new pick:
+					index = null;
+				}
 
-		new UmbPropertyEditorModalRegistration(this, UMB_LINK_PICKER_MODAL_TOKEN, (modalToken) => {
-			...FormControlMixin
+				return {
+					index: index,
+					lol: false,
+					link: {
+						name: data?.name,
+						published: data?.published,
+						queryString: data?.queryString,
+						target: data?.target,
+						trashed: data?.trashed,
+						udi: data?.udi,
+						url: data?.url,
+					},
+					config: {
+						hideAnchor: this.hideAnchor,
+						ignoreUserStartNodes: this.ignoreUserStartNodes,
+						overlaySize: this.overlaySize || 'small',
+					},
+				};
+			},
+			onSubmit: (submitData) => {
+				if (!submitData) return;
+				this._setSelection(submitData.link, submitData.index);
+			},
+			onUrlBuilder: (urlBuilder) => {
+				this._linkPickerURL = urlBuilder;
+			},
 		});
 
-		*/
 		/*
 
 		Or use a property context method..?
 
 		*/
 
+		/*
 		this.consumeContext(UMB_ROUTE_CONTEXT_TOKEN, (instance) => {
 			this._routeContext = instance;
 
@@ -187,6 +229,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 				},
 			});
 		});
+		*/
 	}
 
 	private _removeItem(index: number) {
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts
index 2b25677dfc..442d917377 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts
@@ -84,7 +84,7 @@ export const data: Array<DocumentTypeModel> = [
 				name: 'Multi URL Picker',
 				description: '',
 				dataTypeKey: 'dt-multiUrlPicker',
-				variesByCulture: false,
+				variesByCulture: true,
 				variesBySegment: false,
 				validation: {
 					mandatory: true,
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/index.ts b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
index eafdca757c..b7252053b6 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
@@ -1,4 +1,5 @@
 export * from 'router-slot';
+export * from './property-editor-modal-registration.controller';
 export * from './route.interface';
 export * from './route.context';
 export * from './router-slot.element';
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/modal-registration.controller.ts b/src/Umbraco.Web.UI.Client/src/core/router/modal-registration.controller.ts
new file mode 100644
index 0000000000..0a88f36b09
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/router/modal-registration.controller.ts
@@ -0,0 +1,47 @@
+import {
+	UmbModalRegistrationToken,
+	UmbModalRouteOptions,
+	UmbRouteContext,
+	UMB_ROUTE_CONTEXT_TOKEN,
+} from './route.context';
+import { UmbContextConsumerController } from '@umbraco-cms/context-api';
+import { UmbController, UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { UmbModalToken } from '@umbraco-cms/modal';
+
+export class UmbModalRegistrationController<D extends object = object, R = any> extends UmbController {
+	#modalToken: UmbModalToken<D, R> | string;
+	#modalOptions: UmbModalRouteOptions<D, R>;
+	#routeContext?: UmbRouteContext;
+	#modalRegistration?: UmbModalRegistrationToken;
+
+	constructor(
+		host: UmbControllerHostInterface,
+		alias: UmbModalToken<D, R> | string,
+		options: UmbModalRouteOptions<D, R>
+	) {
+		super(host);
+		this.#modalToken = alias;
+		this.#modalOptions = options;
+
+		new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => {
+			this.#routeContext = _routeContext;
+			this._registererModal();
+		});
+	}
+
+	private _registererModal() {
+		this.#modalRegistration = this.#routeContext?.registerModal(this.#modalToken, this.#modalOptions);
+	}
+
+	hostConnected() {
+		if (!this.#modalRegistration) {
+			this._registererModal();
+		}
+	}
+	hostDisconnected(): void {
+		if (this.#modalRegistration) {
+			this.#routeContext?.unregisterModal(this.#modalRegistration);
+			this.#modalRegistration = undefined;
+		}
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts b/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts
new file mode 100644
index 0000000000..b32d778b89
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts
@@ -0,0 +1,76 @@
+import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../backoffice/shared/components/workspace-property/workspace-property.context';
+import {
+	UmbModalRegistrationToken,
+	UmbModalRouteOptions,
+	UmbRouteContext,
+	UMB_ROUTE_CONTEXT_TOKEN,
+} from './route.context';
+import { UmbContextConsumerController } from '@umbraco-cms/context-api';
+import { UmbController, UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { UmbModalToken } from '@umbraco-cms/modal';
+import { UmbObserverController } from '@umbraco-cms/observable-api';
+
+export class UmbPropertyEditorModalRegistrationController<D extends object = object, R = any> extends UmbController {
+	#modalToken: UmbModalToken<D, R> | string;
+	#modalOptions: UmbModalRouteOptions<D, R>;
+	#routeContext?: UmbRouteContext;
+	#propertyAlias?: string;
+	#variantId?: string;
+	#modalRegistration?: UmbModalRegistrationToken;
+
+	constructor(
+		host: UmbControllerHostInterface,
+		alias: UmbModalToken<D, R> | string,
+		options: UmbModalRouteOptions<D, R>
+	) {
+		super(host);
+		this.#modalToken = alias;
+		this.#modalOptions = options;
+
+		new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => {
+			this.#routeContext = _routeContext;
+			this._registererModal();
+		});
+
+		new UmbContextConsumerController(host, UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (_routeContext) => {
+			new UmbObserverController(host, _routeContext.alias, (alias) => {
+				this.#propertyAlias = alias;
+				this._registererModal();
+			});
+			new UmbObserverController(host, _routeContext.variantId, (variantId) => {
+				this.#variantId = variantId?.toString();
+				this._registererModal();
+			});
+		});
+	}
+
+	private _registererModal() {
+		console.log('try registrer');
+		if (!this.#routeContext || !this.#propertyAlias || !this.#variantId) return;
+		if (this.#modalRegistration) {
+			this.#routeContext.unregisterModal(this.#modalRegistration);
+		}
+
+		const modifiedModalOptions = {
+			...this.#modalOptions,
+			path: `${this.#propertyAlias}/${this.#variantId}/${this.#modalOptions.path}`,
+		};
+
+		console.log(this.#modalOptions);
+		console.log(modifiedModalOptions);
+
+		this.#modalRegistration = this.#routeContext?.registerModal(this.#modalToken, modifiedModalOptions);
+	}
+
+	hostConnected() {
+		if (!this.#modalRegistration) {
+			this._registererModal();
+		}
+	}
+	hostDisconnected(): void {
+		if (this.#modalRegistration) {
+			this.#routeContext?.unregisterModal(this.#modalRegistration);
+			this.#modalRegistration = undefined;
+		}
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 65da282864..9462dbf357 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -1,4 +1,4 @@
-import { IRoute, IRoutingInfo, PARAM_IDENTIFIER, stripSlash } from 'router-slot';
+import { IRoute, IRoutingInfo, Params, PARAM_IDENTIFIER, stripSlash } from 'router-slot';
 import { UmbContextConsumerController, UmbContextProviderController, UmbContextToken } from '@umbraco-cms/context-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
 import { UmbModalToken, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
@@ -8,12 +8,14 @@ const EmptyDiv = document.createElement('div');
 // TODO: Consider accepting the Token as a generic:
 export type UmbModalRouteOptions<UmbModalTokenData extends object = object, UmbModalTokenResult = unknown> = {
 	path: string;
-	onSetup?: (routingInfo: IRoutingInfo) => UmbModalTokenData | false;
+	onSetup?: (routingInfo: Params) => UmbModalTokenData | false;
 	onSubmit?: (data: UmbModalTokenResult) => void | PromiseLike<void>;
 	onReject?: () => void;
 	onUrlBuilder?: (urlBuilder: UmbModalRouteBuilder) => void;
 };
 
+export type UmbModalRegistrationToken = UmbModalRouteRegistration;
+
 type UmbModalRouteRegistration<D extends object = object, R = any> = {
 	alias: UmbModalToken | string;
 	options: UmbModalRouteOptions<D, R>;
@@ -51,7 +53,7 @@ export class UmbRouteContext {
 			alias: alias,
 			options: options,
 			routeSetup: (component: HTMLElement, info: IRoutingInfo<any, any>) => {
-				const modalData = options.onSetup?.(info);
+				const modalData = options.onSetup?.(info.match.params);
 				if (modalData !== false && this.#modalContext) {
 					const modalHandler = this.#modalContext.open(alias, modalData || {});
 					modalHandler.onSubmit().then(
@@ -65,6 +67,14 @@ export class UmbRouteContext {
 		this.#modalRegistrations.push(registration);
 		this.#generateNewURL(registration);
 		this.#generateContextRoutes();
+		return registration;
+	}
+
+	public unregisterModal(registrationToken: ReturnType<typeof this.registerModal>) {
+		const index = this.#modalRegistrations.indexOf(registrationToken);
+		if (index === -1) return;
+		this.#modalRegistrations.splice(index, 1);
+		this.#generateContextRoutes();
 	}
 
 	public _internal_routerGotBasePath(routerBasePath: string) {

From 855977f47ed68b20d6e89a3bab0dcf802188a70a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 12:56:58 +0100
Subject: [PATCH 21/96] rename to getUrlBuilder

---
 .../input-multi-url-picker.element.ts                       | 3 +--
 src/Umbraco.Web.UI.Client/src/core/router/route.context.ts  | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index 2a75248202..afe4177080 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -121,7 +121,6 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 			() => !!this.max && this.urls.length > this.max
 		);
 
-		// TODO: make a helper that get the context, watches one or more props to use to update the registration, can be or have something that is stateful so its easy to use the URLBuilder.
 		new UmbPropertyEditorModalRegistrationController(this, UMB_LINK_PICKER_MODAL_TOKEN, {
 			path: `:index`,
 			onSetup: (params) => {
@@ -163,7 +162,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 				if (!submitData) return;
 				this._setSelection(submitData.link, submitData.index);
 			},
-			onUrlBuilder: (urlBuilder) => {
+			getUrlBuilder: (urlBuilder) => {
 				this._linkPickerURL = urlBuilder;
 			},
 		});
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 9462dbf357..4dd0ab89c8 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -11,7 +11,7 @@ export type UmbModalRouteOptions<UmbModalTokenData extends object = object, UmbM
 	onSetup?: (routingInfo: Params) => UmbModalTokenData | false;
 	onSubmit?: (data: UmbModalTokenResult) => void | PromiseLike<void>;
 	onReject?: () => void;
-	onUrlBuilder?: (urlBuilder: UmbModalRouteBuilder) => void;
+	getUrlBuilder?: (urlBuilder: UmbModalRouteBuilder) => void;
 };
 
 export type UmbModalRegistrationToken = UmbModalRouteRegistration;
@@ -111,7 +111,7 @@ export class UmbRouteContext {
 	}
 
 	#generateNewURL = (modalRegistration: UmbModalRouteRegistration) => {
-		if (!modalRegistration.options.onUrlBuilder || !this.#routerBasePath) return;
+		if (!modalRegistration.options.getUrlBuilder || !this.#routerBasePath) return;
 
 		const routeBasePath = this.#routerBasePath.endsWith('/') ? this.#routerBasePath : this.#routerBasePath + '/';
 		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
@@ -125,7 +125,7 @@ export class UmbRouteContext {
 			return routeBasePath + localRoutePath;
 		};
 
-		modalRegistration.options.onUrlBuilder(urlBuilder);
+		modalRegistration.options.getUrlBuilder(urlBuilder);
 	};
 }
 

From 5a1e099fddb0e2fe5478ad5a14f506c4d9c16c20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 12:59:17 +0100
Subject: [PATCH 22/96] remove comment

---
 src/Umbraco.Web.UI.Client/src/core/router/route.context.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 4dd0ab89c8..e3677f2aba 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -5,7 +5,6 @@ import { UmbModalToken, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
 
 const EmptyDiv = document.createElement('div');
 
-// TODO: Consider accepting the Token as a generic:
 export type UmbModalRouteOptions<UmbModalTokenData extends object = object, UmbModalTokenResult = unknown> = {
 	path: string;
 	onSetup?: (routingInfo: Params) => UmbModalTokenData | false;

From 65b8dc3893948be1096d5a85a3427e0b23408d46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 12:59:45 +0100
Subject: [PATCH 23/96] remove comment

---
 src/Umbraco.Web.UI.Client/src/core/router/route.context.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index e3677f2aba..13dcf10596 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -90,7 +90,6 @@ export class UmbRouteContext {
 		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
 		return {
 			path: localPath,
-			//pathMatch: 'suffix',
 			component: EmptyDiv,
 			setup: modalRegistration.routeSetup,
 		};

From df8ecce7b35445553f471bbdadc08bdba17e1dcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 13:04:03 +0100
Subject: [PATCH 24/96] reorder content of class

---
 .../src/core/router/route.context.ts          | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 13dcf10596..538e9e42fb 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -44,6 +44,10 @@ export class UmbRouteContext {
 		});
 	}
 
+	#removeModalPath(info: IRoutingInfo) {
+		window.history.pushState({}, '', window.location.href.split(info.match.fragments.consumed)[0]);
+	}
+
 	public registerModal<D extends object = object, R = any>(
 		alias: UmbModalToken<D, R> | string,
 		options: UmbModalRouteOptions<D, R>
@@ -64,7 +68,7 @@ export class UmbRouteContext {
 			},
 		};
 		this.#modalRegistrations.push(registration);
-		this.#generateNewURL(registration);
+		this.#generateNewUrlBuilder(registration);
 		this.#generateContextRoutes();
 		return registration;
 	}
@@ -76,16 +80,6 @@ export class UmbRouteContext {
 		this.#generateContextRoutes();
 	}
 
-	public _internal_routerGotBasePath(routerBasePath: string) {
-		if (this.#routerBasePath === routerBasePath) return;
-		this.#routerBasePath = routerBasePath;
-		this.#generateNewURLs();
-	}
-
-	#removeModalPath(info: IRoutingInfo) {
-		window.history.pushState({}, '', window.location.href.split(info.match.fragments.consumed)[0]);
-	}
-
 	#generateRoute(modalRegistration: UmbModalRouteRegistration): IRoute {
 		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
 		return {
@@ -104,11 +98,17 @@ export class UmbRouteContext {
 		this._onGotModals(this.#contextRoutes);
 	}
 
-	#generateNewURLs() {
-		this.#modalRegistrations.forEach(this.#generateNewURL);
+	public _internal_routerGotBasePath(routerBasePath: string) {
+		if (this.#routerBasePath === routerBasePath) return;
+		this.#routerBasePath = routerBasePath;
+		this.#generateNewUrlBuilders();
 	}
 
-	#generateNewURL = (modalRegistration: UmbModalRouteRegistration) => {
+	#generateNewUrlBuilders() {
+		this.#modalRegistrations.forEach(this.#generateNewUrlBuilder);
+	}
+
+	#generateNewUrlBuilder = (modalRegistration: UmbModalRouteRegistration) => {
 		if (!modalRegistration.options.getUrlBuilder || !this.#routerBasePath) return;
 
 		const routeBasePath = this.#routerBasePath.endsWith('/') ? this.#routerBasePath : this.#routerBasePath + '/';

From c344fe5f6dc58a7e8dd7115d3d22113536521e9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 13:06:14 +0100
Subject: [PATCH 25/96] remove import

---
 .../input-multi-url-picker.element.ts                       | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index afe4177080..8917f2d48b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -3,11 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
-import {
-	UmbModalRouteBuilder,
-	UmbPropertyEditorModalRegistrationController,
-	UmbRouteContext,
-} from '@umbraco-cms/router';
+import { UmbModalRouteBuilder, UmbPropertyEditorModalRegistrationController } from '@umbraco-cms/router';
 import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL_TOKEN } from '../../modals/link-picker';
 import { UmbLitElement } from '@umbraco-cms/element';
 

From b81e042bb8ca71c6e2255e9d7396c6514690f81f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 13:06:29 +0100
Subject: [PATCH 26/96] remove out commented code

---
 .../input-multi-url-picker.element.ts         | 63 -------------------
 1 file changed, 63 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index 8917f2d48b..5802c5074e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -162,69 +162,6 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 				this._linkPickerURL = urlBuilder;
 			},
 		});
-
-		/*
-
-		Or use a property context method..?
-
-		*/
-
-		/*
-		this.consumeContext(UMB_ROUTE_CONTEXT_TOKEN, (instance) => {
-			this._routeContext = instance;
-
-			// Registre the routes of this UI:
-			// TODO: Make a registreModal method on the property context
-			// Or maybe its not the property-alias, but something unique? as this might not be in a property?.
-
-			this._routeContext.registerModal(UMB_LINK_PICKER_MODAL_TOKEN, {
-				path: `${'this.alias'}/:index`,
-				onSetup: (routingInfo) => {
-					// TODO: Make onSetup optional.
-					// TODO: Maybe use UmbRouteLocation?
-					// Get index from routeInfo:
-					const indexParam = routingInfo.match.params.index;
-					if (!indexParam) return false;
-					let index: number | null = parseInt(routingInfo.match.params.index);
-					if (Number.isNaN(index)) return false;
-
-					// Use the index to find data:
-					let data: UmbLinkPickerLink | null = null;
-					if (index >= 0 && index < this.urls.length) {
-						data = this._getItemByIndex(index);
-					} else {
-						index = null;
-					}
-
-					return {
-						index: index,
-						lol: false,
-						link: {
-							name: data?.name,
-							published: data?.published,
-							queryString: data?.queryString,
-							target: data?.target,
-							trashed: data?.trashed,
-							udi: data?.udi,
-							url: data?.url,
-						},
-						config: {
-							hideAnchor: this.hideAnchor,
-							ignoreUserStartNodes: this.ignoreUserStartNodes,
-							overlaySize: this.overlaySize || 'small', // TODO: this should not be here, but use the ModalToken.
-						},
-					};
-				},
-				onSubmit: (submitData) => {
-					if (!submitData) return;
-					this._setSelection(submitData.link, submitData.index);
-				},
-				onUrlBuilder: (urlBuilder) => {
-					this._linkPickerURL = urlBuilder;
-				},
-			});
-		});
-		*/
 	}
 
 	private _removeItem(index: number) {

From 306b91c6842e899d996d08a0a81e7664ad31aa3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 13:33:59 +0100
Subject: [PATCH 27/96] docs and todos

---
 .../libs/modal/stories/modal.mdx              |   5 +-
 .../src/stories/extending/modals/intro.mdx    | 125 ++++++++++++++++++
 2 files changed, 129 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/stories/extending/modals/intro.mdx

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/stories/modal.mdx b/src/Umbraco.Web.UI.Client/libs/modal/stories/modal.mdx
index 9cb19bc473..0d98e63508 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/stories/modal.mdx
+++ b/src/Umbraco.Web.UI.Client/libs/modal/stories/modal.mdx
@@ -42,7 +42,10 @@ class MyElement extends UmbElementMixin(LitElement) {
 
 ### Open a modal
 
-A modal is opened by calling the open method on the UmbModalContext. The methods will accept a modal token (or extension alias), an optional dataset, and optional modal options .It returns an instance of UmbModalHandler.
+TODO: consider the level of documentation we like to provide. Do we want user to have deep link able modals, or just simple modals like theses?
+TODO: referee to the doc on modal extension, and move the relevant into between these two.
+
+A modal can be opened by calling the open method on the UmbModalContext. The methods will accept a modal token (or extension alias), an optional dataset, and optional modal options. It returns an instance of UmbModalHandler.
 
 ```ts
 import { html, LitElement } from 'lit';
diff --git a/src/Umbraco.Web.UI.Client/src/stories/extending/modals/intro.mdx b/src/Umbraco.Web.UI.Client/src/stories/extending/modals/intro.mdx
new file mode 100644
index 0000000000..d9d5548f8c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/stories/extending/modals/intro.mdx
@@ -0,0 +1,125 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Guides/Extending the Backoffice/Modals/Intro" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
+
+# Modals
+
+// TODO: add description about what modals is
+
+- Sidebar
+- Infinite Editors
+- Dialogs
+
+## Define a Manifest for a Modal Type
+
+### Manifest
+
+```json
+{
+	"type": "modal",
+	"alias": "Our.Modal.SomethingPicker",
+	"name": "My Something Picker Modal",
+	"loader": "./my-something-picker-modal-element.js",
+},
+```
+
+## Implement a Modal
+
+### Modal Token
+
+For type safety we recommend that you make a Modal Token, Its posible to go without.
+The Modal Token binds the Modal Type to the Modal Data Type and Modal Result Type.
+
+``
+
+```ts
+import { ModalToken } from '@umbraco-cms/element';
+
+export type OurSomethingPickerModalData = {
+	key: string | null;
+};
+
+export type OurSomethingPickerModalResult = {
+	key: string;
+};
+
+export const MY_SOMETHING_PICKER_MODAL = new UmbModalToken<UmbLinkPickerModalData, UmbLinkPickerModalResult>(
+	'Our.Modal.SomethingPicker',
+	{
+		type: 'sidebar',
+		size: 'small',
+	}
+);
+```
+
+### Make a modal registration
+
+When registrering you need to be aware about the scope of the modal.
+A modal registred in a dashboard can be relatively simple.
+A modal registred in a property editor, needs to become specific for the property and the variant of that property.
+
+Notice we are using a Controller here, this means your element has to be a Controller Host (TODO: Insert link to story about Controller Host also available through the UmbElementMixin)
+
+#### Simple Modal Registration
+
+```ts
+new UmbModalRegistrationController(this, MY_SOMETHING_PICKER_MODAL, {
+	path: `:key`,
+	onSetup: (params) => {
+		const keyParam = params.key;
+		if (!keyParam) return false;
+
+		// Make a Data object to be used in the modal:
+		return {
+			key: keyParam,
+		};
+	},
+	onSubmit: (submitData) => {
+		// Here we got the Result object from the modal:
+		this._mySetPickedKey(submitData.key);
+	},
+	getUrlBuilder: (urlBuilder) => {
+		// Here we got a urlBuilder, read further down this document for more into on this:
+		this._myUrlBuilder = urlBuilder;
+	},
+});
+```
+
+#### Modal Registration in a Property Editor
+
+```ts
+new UmbPropertyEditorModalRegistrationController(this, MY_SOMETHING_PICKER_MODAL, {
+	path: `:key`,
+	onSetup: (params) => {
+		const keyParam = params.key;
+		if (!keyParam) return false;
+
+		// Make a Data object to be used in the modal:
+		return {
+			key: keyParam,
+		};
+	},
+	onSubmit: (submitData) => {
+		// Here we got the Result object from the modal:
+		this._mySetPickedKey(submitData.key);
+	},
+	getUrlBuilder: (urlBuilder) => {
+		// Here we got a urlBuilder, read further down this document for more into on this:
+		this._myUrlBuilder = urlBuilder;
+	},
+});
+```
+
+## Generate the URL to a Modal
+
+The Modal registration has an option to retrive a URL Builder, this is a function that can be used to generate a URL to a modal.
+
+```ts
+const modalLink = _myUrlBuilder?.({ key: 'my-key-1234' });
+```
+
+The modalLink from above could look like: /umbraco/backoffice/my/location/modal/Our.Modal.SomethingPicker/my-key-1234
+
+Notice the Property Editor registration will add the property alias and variant id to the URL, so it becomes:
+
+/umbraco/backoffice/my/location/modal/Our.Modal.SomethingPicker/my-property-alias/en-us/my-key-1234

From ee1d8616affe2999856751ea7297d0925bd480be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 13:39:17 +0100
Subject: [PATCH 28/96] overwrite modal config

---
 src/Umbraco.Web.UI.Client/src/core/router/route.context.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 538e9e42fb..ea8831e6c9 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -1,12 +1,13 @@
 import { IRoute, IRoutingInfo, Params, PARAM_IDENTIFIER, stripSlash } from 'router-slot';
 import { UmbContextConsumerController, UmbContextProviderController, UmbContextToken } from '@umbraco-cms/context-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
-import { UmbModalToken, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
+import { UmbModalConfig, UmbModalToken, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
 
 const EmptyDiv = document.createElement('div');
 
 export type UmbModalRouteOptions<UmbModalTokenData extends object = object, UmbModalTokenResult = unknown> = {
 	path: string;
+	config?: UmbModalConfig;
 	onSetup?: (routingInfo: Params) => UmbModalTokenData | false;
 	onSubmit?: (data: UmbModalTokenResult) => void | PromiseLike<void>;
 	onReject?: () => void;
@@ -58,7 +59,7 @@ export class UmbRouteContext {
 			routeSetup: (component: HTMLElement, info: IRoutingInfo<any, any>) => {
 				const modalData = options.onSetup?.(info.match.params);
 				if (modalData !== false && this.#modalContext) {
-					const modalHandler = this.#modalContext.open(alias, modalData || {});
+					const modalHandler = this.#modalContext.open(alias, modalData, options.config);
 					modalHandler.onSubmit().then(
 						() => this.#removeModalPath(info),
 						() => this.#removeModalPath(info)

From f18fab6298251823bca2892b83d5ddc4b943cc10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 14:20:59 +0100
Subject: [PATCH 29/96] modal handler corrections

---
 .../libs/modal/modal-handler.ts                 | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
index 75aa43e2c2..9ad3e7b469 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
@@ -43,7 +43,7 @@ export class UmbModalHandlerClass<ModalData extends object = object, ModalResult
 
 	public modalElement: UUIModalDialogElement | UUIModalSidebarElement;
 
-	#innerElement = new BehaviorSubject<any | undefined>(undefined);
+	#innerElement = new BehaviorSubject<HTMLElement | undefined>(undefined);
 	public readonly innerElement = this.#innerElement.asObservable();
 
 	#modalElement?: UUIModalSidebarElement | UUIDialogElement;
@@ -137,22 +137,25 @@ export class UmbModalHandlerClass<ModalData extends object = object, ModalResult
 			async (manifest) => {
 				if (manifest) {
 					const innerElement = await this.#createInnerElement(manifest, data);
-					this.#appendInnerElement(innerElement);
-				} else {
-					this.#removeInnerElement();
+					if (innerElement) {
+						this.#appendInnerElement(innerElement);
+						return;
+					}
 				}
+				this.#removeInnerElement();
 			}
 		);
 	}
 
-	#appendInnerElement(element: any) {
+	#appendInnerElement(element: HTMLElement) {
 		this.#modalElement?.appendChild(element);
 		this.#innerElement.next(element);
 	}
 
 	#removeInnerElement() {
-		if (this.#innerElement.getValue()) {
-			this.#modalElement?.removeChild(this.#innerElement.getValue());
+		const innerElement = this.#innerElement.getValue();
+		if (innerElement) {
+			this.#modalElement?.removeChild(innerElement);
 			this.#innerElement.next(undefined);
 		}
 	}

From 282521d2b21181b3a71d74823ef25b55a3a5e745 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 14:22:55 +0100
Subject: [PATCH 30/96] adjust comments

---
 src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
index 9ad3e7b469..7b24e84c08 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
@@ -103,7 +103,7 @@ export class UmbModalHandlerClass<ModalData extends object = object, ModalResult
 		const innerElement = (await createExtensionElement(manifest)) as any;
 
 		if (innerElement) {
-			innerElement.data = data; //
+			innerElement.data = data;
 			//innerElement.observable = this.#dataObservable;
 			innerElement.modalHandler = this;
 		}
@@ -111,7 +111,7 @@ export class UmbModalHandlerClass<ModalData extends object = object, ModalResult
 		return innerElement;
 	}
 
-	// note, this methods argument is not defined correctly here, but requires to be fix by appending the OptionalSubmitArgumentIfUndefined type when newing up this class.
+	// note, this methods is private  argument is not defined correctly here, but requires to be fix by appending the OptionalSubmitArgumentIfUndefined type when newing up this class.
 	private submit(result?: ModalResult) {
 		this._submitResolver?.(result as ModalResult);
 		this.modalElement.close();

From 9a79d977b64ab78f9e65a14c6edcd0e8ebcb5788 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 15:14:01 +0100
Subject: [PATCH 31/96] browser history and modals

---
 .../src/core/router/route.context.ts          | 48 ++++++++++++++++---
 .../src/core/router/router-slot.element.ts    |  4 ++
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index ea8831e6c9..a871e1def2 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -2,6 +2,7 @@ import { IRoute, IRoutingInfo, Params, PARAM_IDENTIFIER, stripSlash } from 'rout
 import { UmbContextConsumerController, UmbContextProviderController, UmbContextToken } from '@umbraco-cms/context-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
 import { UmbModalConfig, UmbModalToken, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
+import { v4 as uuidv4 } from 'uuid';
 
 const EmptyDiv = document.createElement('div');
 
@@ -17,6 +18,7 @@ export type UmbModalRouteOptions<UmbModalTokenData extends object = object, UmbM
 export type UmbModalRegistrationToken = UmbModalRouteRegistration;
 
 type UmbModalRouteRegistration<D extends object = object, R = any> = {
+	key: string;
 	alias: UmbModalToken | string;
 	options: UmbModalRouteOptions<D, R>;
 	routeSetup: (component: HTMLElement, info: IRoutingInfo) => void;
@@ -30,6 +32,7 @@ export class UmbRouteContext {
 	#modalContext?: typeof UMB_MODAL_CONTEXT_TOKEN.TYPE;
 	#contextRoutes: IRoute[] = [];
 	#routerBasePath?: string;
+	#activeModalPath?: string;
 
 	constructor(host: UmbControllerHostInterface, private _onGotModals: (contextRoutes: any) => void) {
 		//this.#host = host;
@@ -46,7 +49,10 @@ export class UmbRouteContext {
 	}
 
 	#removeModalPath(info: IRoutingInfo) {
-		window.history.pushState({}, '', window.location.href.split(info.match.fragments.consumed)[0]);
+		if (window.location.href.includes(info.match.fragments.consumed)) {
+			console.log('info.match.fragments.consumed', info.match.fragments.consumed);
+			window.history.pushState({}, '', window.location.href.split(info.match.fragments.consumed)[0]);
+		}
 	}
 
 	public registerModal<D extends object = object, R = any>(
@@ -54,17 +60,23 @@ export class UmbRouteContext {
 		options: UmbModalRouteOptions<D, R>
 	) {
 		const registration = {
+			key: options.config?.key || uuidv4(),
 			alias: alias,
 			options: options,
 			routeSetup: (component: HTMLElement, info: IRoutingInfo<any, any>) => {
 				const modalData = options.onSetup?.(info.match.params);
 				if (modalData !== false && this.#modalContext) {
-					const modalHandler = this.#modalContext.open(alias, modalData, options.config);
+					const modalHandler = this.#modalContext.open(alias, modalData, { ...options.config, key: registration.key });
 					modalHandler.onSubmit().then(
-						() => this.#removeModalPath(info),
-						() => this.#removeModalPath(info)
+						(data) => {
+							this.#removeModalPath(info);
+							options.onSubmit?.(data);
+						},
+						() => {
+							this.#removeModalPath(info);
+							options.onReject?.();
+						}
 					);
-					modalHandler.onSubmit().then(options.onSubmit, options.onReject);
 				}
 			},
 		};
@@ -81,10 +93,13 @@ export class UmbRouteContext {
 		this.#generateContextRoutes();
 	}
 
+	#getModalRoutePath(modalRegistration: UmbModalRouteRegistration) {
+		return `/modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
+	}
+
 	#generateRoute(modalRegistration: UmbModalRouteRegistration): IRoute {
-		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
 		return {
-			path: localPath,
+			path: this.#getModalRoutePath(modalRegistration),
 			component: EmptyDiv,
 			setup: modalRegistration.routeSetup,
 		};
@@ -95,6 +110,11 @@ export class UmbRouteContext {
 			return this.#generateRoute(modalRegistration);
 		});
 
+		this.#contextRoutes.push({
+			path: '',
+			component: EmptyDiv,
+		});
+
 		// TODO: Should we await one frame, to ensure we don't call back too much?.
 		this._onGotModals(this.#contextRoutes);
 	}
@@ -104,6 +124,20 @@ export class UmbRouteContext {
 		this.#routerBasePath = routerBasePath;
 		this.#generateNewUrlBuilders();
 	}
+	public _internal_modalRouterChanged(activeModalPath: string | undefined) {
+		if (this.#activeModalPath === activeModalPath) return;
+		if (this.#activeModalPath) {
+			console.log('closing active modal', this.#activeModalPath);
+			const activeModal = this.#modalRegistrations.find(
+				(registration) => this.#getModalRoutePath(registration) === this.#activeModalPath
+			);
+			if (activeModal) {
+				console.log('found active modal', activeModal);
+				this.#modalContext?.close(activeModal.key);
+			}
+		}
+		this.#activeModalPath = activeModalPath;
+	}
 
 	#generateNewUrlBuilders() {
 		this.#modalRegistrations.forEach(this.#generateNewUrlBuilder);
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index 3f11fd66b6..bcee30ac31 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -104,6 +104,10 @@ export class UmbRouterSlotElement extends UmbLitElement {
 		if (event.detail.slot === this.#router) {
 			this._activeLocalPath = event.detail.match.route.path;
 			this.dispatchEvent(new UmbRouterSlotChangeEvent());
+		} else if (event.detail.slot === this.#modalRouter) {
+			const newActiveModalLocalPath = event.detail.match.route.path;
+			console.log('!!!!!_modalRouterChanged', newActiveModalLocalPath);
+			this.#routeContext._internal_modalRouterChanged(newActiveModalLocalPath);
 		}
 	};
 

From a46cb8a841aa0e062f88cc2ac6e7d51e72aef47a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 15:16:05 +0100
Subject: [PATCH 32/96] clean up

---
 .../router/property-editor-modal-registration.controller.ts  | 4 ----
 src/Umbraco.Web.UI.Client/src/core/router/route.context.ts   | 5 +----
 .../src/core/router/router-slot.element.ts                   | 3 +--
 3 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts b/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts
index b32d778b89..c2533ad490 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts
@@ -45,7 +45,6 @@ export class UmbPropertyEditorModalRegistrationController<D extends object = obj
 	}
 
 	private _registererModal() {
-		console.log('try registrer');
 		if (!this.#routeContext || !this.#propertyAlias || !this.#variantId) return;
 		if (this.#modalRegistration) {
 			this.#routeContext.unregisterModal(this.#modalRegistration);
@@ -56,9 +55,6 @@ export class UmbPropertyEditorModalRegistrationController<D extends object = obj
 			path: `${this.#propertyAlias}/${this.#variantId}/${this.#modalOptions.path}`,
 		};
 
-		console.log(this.#modalOptions);
-		console.log(modifiedModalOptions);
-
 		this.#modalRegistration = this.#routeContext?.registerModal(this.#modalToken, modifiedModalOptions);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index a871e1def2..2dd618c754 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -1,8 +1,8 @@
 import { IRoute, IRoutingInfo, Params, PARAM_IDENTIFIER, stripSlash } from 'router-slot';
+import { v4 as uuidv4 } from 'uuid';
 import { UmbContextConsumerController, UmbContextProviderController, UmbContextToken } from '@umbraco-cms/context-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
 import { UmbModalConfig, UmbModalToken, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
-import { v4 as uuidv4 } from 'uuid';
 
 const EmptyDiv = document.createElement('div');
 
@@ -50,7 +50,6 @@ export class UmbRouteContext {
 
 	#removeModalPath(info: IRoutingInfo) {
 		if (window.location.href.includes(info.match.fragments.consumed)) {
-			console.log('info.match.fragments.consumed', info.match.fragments.consumed);
 			window.history.pushState({}, '', window.location.href.split(info.match.fragments.consumed)[0]);
 		}
 	}
@@ -127,12 +126,10 @@ export class UmbRouteContext {
 	public _internal_modalRouterChanged(activeModalPath: string | undefined) {
 		if (this.#activeModalPath === activeModalPath) return;
 		if (this.#activeModalPath) {
-			console.log('closing active modal', this.#activeModalPath);
 			const activeModal = this.#modalRegistrations.find(
 				(registration) => this.#getModalRoutePath(registration) === this.#activeModalPath
 			);
 			if (activeModal) {
-				console.log('found active modal', activeModal);
 				this.#modalContext?.close(activeModal.key);
 			}
 		}
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index bcee30ac31..9c25290b08 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -1,4 +1,4 @@
-import type { IComponentRoute, IRedirectRoute, IResolverRoute, IRoute } from 'router-slot/model';
+import type { IRoute } from 'router-slot/model';
 import { RouterSlot } from 'router-slot';
 import { html, PropertyValueMap } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -106,7 +106,6 @@ export class UmbRouterSlotElement extends UmbLitElement {
 			this.dispatchEvent(new UmbRouterSlotChangeEvent());
 		} else if (event.detail.slot === this.#modalRouter) {
 			const newActiveModalLocalPath = event.detail.match.route.path;
-			console.log('!!!!!_modalRouterChanged', newActiveModalLocalPath);
 			this.#routeContext._internal_modalRouterChanged(newActiveModalLocalPath);
 		}
 	};

From 3836148bbfe75b1f9cb396d4cc430f47587c69a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 15:34:45 +0100
Subject: [PATCH 33/96] some data for variant + concept for fixing this

---
 .../workspace/document-workspace.context.ts     | 12 ++++++++++++
 .../src/core/mocks/data/document.data.ts        | 17 ++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts
index f62c5943fc..cdd3188711 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts
@@ -45,6 +45,18 @@ export class UmbDocumentWorkspaceContext
 		this.splitView = new UmbWorkspaceSplitViewManager(this.host);
 
 		new UmbObserverController(this.host, this.documentTypeKey, (key) => this.structure.loadType(key));
+
+		/*
+		TODO: Concept for ensure variant values:
+		new UmbObserverController(this.host, this.variants, (variants) => {
+			if (!variants) return;
+			const draft = this.#draft.getValue();
+			if (!draft) return;
+
+			// Gather all properties from all document types.
+			// Loop through all properties for each variant and insert missing value objects.
+		}
+		*/
 	}
 
 	async load(entityKey: string) {
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
index 08b4fac6b4..875f988712 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
@@ -45,7 +45,7 @@ export const data: Array<DocumentModel> = [
 			},
 			{
 				alias: 'multiUrlPicker',
-				culture: null,
+				culture: 'en-us',
 				segment: null,
 				value: [
 					{
@@ -59,6 +59,12 @@ export const data: Array<DocumentModel> = [
 					},
 				],
 			},
+			{
+				alias: 'multiUrlPicker',
+				culture: 'da-dk',
+				segment: null,
+				value: null,
+			},
 			{
 				alias: 'multiNodeTreePicker',
 				culture: null,
@@ -244,6 +250,15 @@ export const data: Array<DocumentModel> = [
 				createDate: '2023-02-06T15:31:46.876902',
 				updateDate: '2023-02-06T15:31:51.354764',
 			},
+			{
+				state: ContentStateModel.PUBLISHED,
+				publishDate: '2023-02-06T15:31:51.354764',
+				culture: 'da-dk',
+				segment: null,
+				name: 'Alle redigeringsfelter',
+				createDate: '2023-02-06T15:31:46.876902',
+				updateDate: '2023-02-06T15:31:51.354764',
+			},
 		],
 	},
 	{

From d6cf7b743ae7f8e3d1496134c5e0bb67786ee112 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 15:37:48 +0100
Subject: [PATCH 34/96] note on potential issue:

---
 .../input-multi-url-picker/input-multi-url-picker.element.ts     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index 5802c5074e..e4238fc17b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -117,6 +117,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 			() => !!this.max && this.urls.length > this.max
 		);
 
+		// TODO: Need concept for contextual being aware about the context, as this might not work if input is used outside a property editor.
 		new UmbPropertyEditorModalRegistrationController(this, UMB_LINK_PICKER_MODAL_TOKEN, {
 			path: `:index`,
 			onSetup: (params) => {

From 6feb6e6430e81cc76f45cb96809328a2d843c159 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 16 Mar 2023 19:10:02 +0100
Subject: [PATCH 35/96] notes

---
 .../router/property-editor-modal-registration.controller.ts   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts b/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts
index c2533ad490..9e6d0e861a 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts
@@ -44,6 +44,10 @@ export class UmbPropertyEditorModalRegistrationController<D extends object = obj
 		});
 	}
 
+	// TODO: Concept about adding identifiers to the modal registration, which is one or more path-folders.
+	// To replace the specific implementation of propertyAlias and variantId.
+	// I think it could be a key value pair, where the key is the identifier so it can be updated/replaced at runtime.
+
 	private _registererModal() {
 		if (!this.#routeContext || !this.#propertyAlias || !this.#variantId) return;
 		if (this.#modalRegistration) {

From fd2051b2fb615cbf20fa04d9bf1a763c9339ca92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Fri, 17 Mar 2023 09:53:42 +0100
Subject: [PATCH 36/96] TODO: notes

---
 .../property-editor-modal-registration.controller.ts  | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts b/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts
index 9e6d0e861a..b979ae4837 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts
@@ -10,6 +10,7 @@ import { UmbController, UmbControllerHostInterface } from '@umbraco-cms/controll
 import { UmbModalToken } from '@umbraco-cms/modal';
 import { UmbObserverController } from '@umbraco-cms/observable-api';
 
+// TODO: Somehow get the modal handler via the controller? aka. va the registration.
 export class UmbPropertyEditorModalRegistrationController<D extends object = object, R = any> extends UmbController {
 	#modalToken: UmbModalToken<D, R> | string;
 	#modalOptions: UmbModalRouteOptions<D, R>;
@@ -21,7 +22,8 @@ export class UmbPropertyEditorModalRegistrationController<D extends object = obj
 	constructor(
 		host: UmbControllerHostInterface,
 		alias: UmbModalToken<D, R> | string,
-		options: UmbModalRouteOptions<D, R>
+		options: UmbModalRouteOptions<D, R>,
+		unique: Map<string, string | undefined> = new Map()
 	) {
 		super(host);
 		this.#modalToken = alias;
@@ -31,7 +33,6 @@ export class UmbPropertyEditorModalRegistrationController<D extends object = obj
 			this.#routeContext = _routeContext;
 			this._registererModal();
 		});
-
 		new UmbContextConsumerController(host, UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (_routeContext) => {
 			new UmbObserverController(host, _routeContext.alias, (alias) => {
 				this.#propertyAlias = alias;
@@ -44,6 +45,12 @@ export class UmbPropertyEditorModalRegistrationController<D extends object = obj
 		});
 	}
 
+	// 			"alias" : 'my-property-alias'
+	// 			"variant" : 'en_us'
+	addUniqueIdentifier(identifier: string, value: string) {
+		this._unique.set(identifier, value);
+	}
+
 	// TODO: Concept about adding identifiers to the modal registration, which is one or more path-folders.
 	// To replace the specific implementation of propertyAlias and variantId.
 	// I think it could be a key value pair, where the key is the identifier so it can be updated/replaced at runtime.

From 1116770ec84361ab9e4f5518ca392f9cfa58f239 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 20 Mar 2023 15:52:42 +0100
Subject: [PATCH 37/96] remove comments

---
 .../documents/workspace/document-workspace-edit.element.ts      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace-edit.element.ts
index e427be75ba..8d2a27167d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace-edit.element.ts
@@ -84,7 +84,6 @@ export class UmbDocumentWorkspaceEditElement extends UmbLitElement {
 			this._availableVariants.forEach((variantB) => {
 				routes.push({
 					path: new UmbVariantId(variantA).toString() + '_&_' + new UmbVariantId(variantB).toString(),
-					//component: () => import('./document-workspace-split-view.element'),
 					component: this.splitViewElement,
 					setup: (component: HTMLElement | Promise<HTMLElement>, info: IRoutingInfo) => {
 						// Set split view/active info..
@@ -101,7 +100,6 @@ export class UmbDocumentWorkspaceEditElement extends UmbLitElement {
 		this._availableVariants.forEach((variant) => {
 			routes.push({
 				path: new UmbVariantId(variant).toString(),
-				//component: () => import('./document-workspace-split-view.element'),
 				component: this.splitViewElement,
 				setup: (component: HTMLElement | Promise<HTMLElement>, info: IRoutingInfo) => {
 					// cause we might come from a split-view, we need to reset index 1.

From 401b469e54e01c56f18ed74c2b521d44e4a0b149 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 22 Mar 2023 16:13:37 +0100
Subject: [PATCH 38/96] update docs

---
 .../src/stories/extending/modals/intro.mdx    | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/stories/extending/modals/intro.mdx b/src/Umbraco.Web.UI.Client/src/stories/extending/modals/intro.mdx
index d9d5548f8c..4be5f44de7 100644
--- a/src/Umbraco.Web.UI.Client/src/stories/extending/modals/intro.mdx
+++ b/src/Umbraco.Web.UI.Client/src/stories/extending/modals/intro.mdx
@@ -63,20 +63,21 @@ Notice we are using a Controller here, this means your element has to be a Contr
 #### Simple Modal Registration
 
 ```ts
-new UmbModalRegistrationController(this, MY_SOMETHING_PICKER_MODAL, {
-	path: `:key`,
+new UmbPropertyEditorModalRegistrationController(this, MY_SOMETHING_PICKER_MODAL, {
+	path: `:alias`,
 	onSetup: (params) => {
-		const keyParam = params.key;
-		if (!keyParam) return false;
+		const aliasParam = params.alias;
+		if (!aliasParam) return false;
+		// In this example alias is not being used, but we could use it to get the right data set for the modal.
 
 		// Make a Data object to be used in the modal:
 		return {
-			key: keyParam,
+			key: this.myCurrentValue,
 		};
 	},
 	onSubmit: (submitData) => {
-		// Here we got the Result object from the modal:
-		this._mySetPickedKey(submitData.key);
+		// Here we got the Result object from the modal, which we can use to get the new selected key.
+		this.myCurrentValue = submitData.key;
 	},
 	getUrlBuilder: (urlBuilder) => {
 		// Here we got a urlBuilder, read further down this document for more into on this:
@@ -115,11 +116,11 @@ new UmbPropertyEditorModalRegistrationController(this, MY_SOMETHING_PICKER_MODAL
 The Modal registration has an option to retrive a URL Builder, this is a function that can be used to generate a URL to a modal.
 
 ```ts
-const modalLink = _myUrlBuilder?.({ key: 'my-key-1234' });
+const modalLink = _myUrlBuilder?.({ alias: 'my-input-alias' });
 ```
 
-The modalLink from above could look like: /umbraco/backoffice/my/location/modal/Our.Modal.SomethingPicker/my-key-1234
+The modalLink from above could look like: /umbraco/backoffice/my/location/modal/Our.Modal.SomethingPicker/my-input-alias
 
 Notice the Property Editor registration will add the property alias and variant id to the URL, so it becomes:
 
-/umbraco/backoffice/my/location/modal/Our.Modal.SomethingPicker/my-property-alias/en-us/my-key-1234
+/umbraco/backoffice/my/location/modal/Our.Modal.SomethingPicker/my-property-alias/en-us/my-input-alias

From 806a59ac99234fe00eb745208a605aec19a747fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 22 Mar 2023 16:14:37 +0100
Subject: [PATCH 39/96] correct imports

---
 .../input-multi-url-picker/input-multi-url-picker.element.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index ac6fbbbbf3..df34ed48b5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -3,9 +3,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
+import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL_TOKEN } from '../../modals/link-picker';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbModalRouteBuilder, UmbPropertyEditorModalRegistrationController } from '@umbraco-cms/internal/router';
-import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL_TOKEN } from '../../modals/link-picker';
 
 /**
  * @element umb-input-multi-url-picker

From f62c7c0453e59bd0672af79ce480acf9d827cd9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 22 Mar 2023 20:36:02 +0100
Subject: [PATCH 40/96] mega refactor

---
 .../.vscode/settings.json                     |  2 +-
 src/Umbraco.Web.UI.Client/libs/modal/index.ts |  1 +
 .../modal/modal-registration-controller.ts    | 15 ----
 .../modal/modal-registration.controller.ts    | 85 +++++++++++++++++++
 .../libs/modal/modal-route-registration.ts    | 80 +++++++++++++++++
 .../input-multi-url-picker.element.ts         |  8 +-
 .../workspace-property.context.ts             |  2 +-
 .../property-editor-ui-block-grid.element.ts  |  8 +-
 .../property-editor-ui-textarea.element.ts    |  5 +-
 .../src/core/mocks/data/document.data.ts      |  2 +
 .../src/core/router/index.ts                  |  1 -
 .../router/modal-registration.controller.ts   | 47 ----------
 ...ty-editor-modal-registration.controller.ts | 83 ------------------
 .../src/core/router/route.context.ts          | 67 +++++++++------
 .../src/core/router/router-slot.element.ts    |  2 +-
 .../router/variant-router-slot.element.ts     |  2 +-
 16 files changed, 225 insertions(+), 185 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/libs/modal/modal-registration-controller.ts
 create mode 100644 src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts
 create mode 100644 src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/core/router/modal-registration.controller.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts

diff --git a/src/Umbraco.Web.UI.Client/.vscode/settings.json b/src/Umbraco.Web.UI.Client/.vscode/settings.json
index 196b1d2b83..d2e313ff3b 100644
--- a/src/Umbraco.Web.UI.Client/.vscode/settings.json
+++ b/src/Umbraco.Web.UI.Client/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
 	"cssVariables.lookupFiles": ["node_modules/@umbraco-ui/uui-css/dist/custom-properties.css"],
-	"cSpell.words": ["combobox", "variantable"],
+	"cSpell.words": ["combobox", "nesecary", "variantable"],
 	"exportall.config.folderListener": [],
 	"exportall.config.relExclusion": []
 }
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/index.ts
index 3c252e27f2..be736301da 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/index.ts
@@ -1,4 +1,5 @@
 export * from './modal.context';
 export * from './modal-handler';
+export * from './modal-registration.controller';
 export * from './token/modal-token';
 export * from './modal.interfaces';
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-registration-controller.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-registration-controller.ts
deleted file mode 100644
index 6dd45e6e52..0000000000
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-registration-controller.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { UmbController, UmbControllerHostInterface } from '@umbraco-cms/controller';
-
-/*
-export class UmbModalRegistrationController<UmbModalToken, ModalData, ModalResult> extends UmbController {
-	constructor(host: UmbControllerHostInterface, modalAlias: string | NewType<UmbModalToken, ModalData, ModalResult>) {
-		super(host);
-		this.key = config?.key || uuidv4();
-	}
-
-	updateSetup() {}
-
-	hostConnected(): void {}
-	hostDisconnected(): void {}
-}
-*/
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts
new file mode 100644
index 0000000000..beaaeba8ba
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts
@@ -0,0 +1,85 @@
+import type { UmbRouteContext } from '../../src/core/router/route.context';
+// TODO: Be aware here we import a class from src!
+import { UMB_ROUTE_CONTEXT_TOKEN } from '../../src/core/router/route.context';
+import { UmbModalRouteBuilder, UmbModalRouteOptions, UmbModalRouteRegistration } from './modal-route-registration';
+import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+import { UmbControllerHostInterface } from 'libs/controller/controller-host.mixin';
+import { UmbController } from 'libs/controller/controller.class';
+
+export type UmbModalRegistrationToken = UmbModalRouteRegistration;
+
+export class UmbModalRegistrationController<D extends object = object, R = any> extends UmbController {
+	#modalToken: UmbModalToken<D, R> | string;
+	#modalOptions: UmbModalRouteOptions<D, R>;
+	#routeContext?: UmbRouteContext;
+	#modalRegistration?: UmbModalRegistrationToken;
+	#uniqueParts;
+	//#urlBuilder?: UmbModalRouteBuilder; // TODO: not going to work, as this will not trigger a re-render of the host element.
+
+	constructor(
+		host: UmbControllerHostInterface,
+		alias: UmbModalToken<D, R> | string,
+		options: UmbModalRouteOptions<D, R>,
+		unique: Map<string, string | undefined> = new Map()
+	) {
+		super(host);
+		this.#modalToken = alias;
+		this.#modalOptions = {
+			...options,
+			/*getUrlBuilder: (urlBuilder) => {
+				this.#urlBuilder = urlBuilder;
+			},*/
+		};
+		this.#uniqueParts = unique;
+
+		new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => {
+			this.#routeContext = _routeContext;
+			this._registererModal();
+		});
+	}
+
+	/*
+	public getUrl(params: { [key: string]: string | number }) {
+		return this.#urlBuilder?.(params) || null;
+	}
+	*/
+
+	setUniqueIdentifier(identifier: string, value: string) {
+		this.#uniqueParts.set(identifier, value);
+	}
+
+	private _registererModal() {
+		if (!this.#routeContext) return;
+		if (this.#modalRegistration) {
+			this.#routeContext.unregisterModal(this.#modalRegistration);
+		}
+
+		const pathParts = Array.from(this.#uniqueParts.values());
+
+		// Check if there is any undefined values of unique map:
+		if (pathParts.some((value) => value === undefined)) return;
+
+		// Add the configured part of the path:
+		pathParts.push(this.#modalOptions.path);
+
+		const modifiedModalOptions = {
+			...this.#modalOptions,
+			path: pathParts.join('/'),
+		};
+
+		this.#modalRegistration = this.#routeContext?.registerModal(this.#modalToken, modifiedModalOptions);
+	}
+
+	hostConnected() {
+		if (!this.#modalRegistration) {
+			this._registererModal();
+		}
+	}
+	hostDisconnected(): void {
+		if (this.#modalRegistration) {
+			this.#routeContext?.unregisterModal(this.#modalRegistration);
+			this.#modalRegistration = undefined;
+		}
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
new file mode 100644
index 0000000000..87b2804aaa
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
@@ -0,0 +1,80 @@
+import type { Params } from 'router-slot';
+import { v4 as uuidv4 } from 'uuid';
+import { UmbModalHandler } from './modal-handler';
+import { UmbModalConfig, UmbModalContext } from './modal.context';
+import { UmbModalToken } from './token/modal-token';
+
+export type UmbModalRouteBuilder = (params: { [key: string]: string | number }) => string;
+
+export type UmbModalRouteOptions<UmbModalTokenData extends object = object, UmbModalTokenResult = unknown> = {
+	path: string;
+	config?: UmbModalConfig;
+	onSetup?: (routingInfo: Params) => UmbModalTokenData | false;
+	onSubmit?: (data: UmbModalTokenResult) => void | PromiseLike<void>;
+	onReject?: () => void;
+	getUrlBuilder?: (urlBuilder: UmbModalRouteBuilder) => void;
+};
+
+export class UmbModalRouteRegistration<D extends object = object, R = any> {
+	#key;
+	#modalAlias: UmbModalToken<D, R> | string;
+	#options: UmbModalRouteOptions<D, R>;
+
+	#modalHandler: UmbModalHandler<D, R> | undefined;
+
+	// Notice i removed the key in the transferring to this class.
+	constructor(modalAlias: UmbModalToken<D, R> | string, options: UmbModalRouteOptions<D, R>) {
+		this.#key = options.config?.key || uuidv4();
+		this.#modalAlias = modalAlias;
+		this.#options = options;
+	}
+
+	public get key() {
+		return this.#key;
+	}
+
+	public get alias() {
+		return this.#modalAlias;
+	}
+
+	public get path() {
+		return this.#options.path;
+	}
+
+	public get options() {
+		return this.#options;
+	}
+
+	/**
+	 * Returns true if the modal is currently active.
+	 */
+	public get active() {
+		return !!this.#modalHandler;
+	}
+
+	/**
+	 * Returns the modal handler if the modal is currently active. Otherwise its undefined.
+	 */
+	public get modalHandler() {
+		return this.#modalHandler;
+	}
+
+	routeSetup(modalContext: UmbModalContext, params: Params) {
+		const modalData = this.#options.onSetup?.(params);
+		if (modalData !== false) {
+			this.#modalHandler = modalContext.open(this.#modalAlias, modalData, { ...this.#options.config, key: this.#key });
+			this.#modalHandler.onSubmit().then(
+				(data) => {
+					this.#options.onSubmit?.(data);
+					this.#modalHandler = undefined;
+				},
+				() => {
+					this.#options.onReject?.();
+					this.#modalHandler = undefined;
+				}
+			);
+			return this.#modalHandler;
+		}
+		return null;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index df34ed48b5..4073831db0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -5,7 +5,8 @@ import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL_TOKEN } from '../../modals/link-picker';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbModalRouteBuilder, UmbPropertyEditorModalRegistrationController } from '@umbraco-cms/internal/router';
+import { UmbModalRegistrationController } from 'libs/modal/modal-registration.controller';
+import type { UmbModalRouteBuilder } from 'libs/modal/modal-route-registration';
 
 /**
  * @element umb-input-multi-url-picker
@@ -104,6 +105,8 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 	@state()
 	private _linkPickerURL?: UmbModalRouteBuilder;
 
+	private myModalRegistration;
+
 	constructor() {
 		super();
 		this.addValidator(
@@ -118,7 +121,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 		);
 
 		// TODO: Need concept for contextual being aware about the context, as this might not work if input is used outside a property editor.
-		new UmbPropertyEditorModalRegistrationController(this, UMB_LINK_PICKER_MODAL_TOKEN, {
+		this.myModalRegistration = new UmbModalRegistrationController(this, UMB_LINK_PICKER_MODAL_TOKEN, {
 			path: `:index`,
 			onSetup: (params) => {
 				// Get index:
@@ -160,6 +163,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 				this._setSelection(submitData.link, submitData.index);
 			},
 			getUrlBuilder: (urlBuilder) => {
+				console.log('got link builder', urlBuilder);
 				this._linkPickerURL = urlBuilder;
 			},
 		});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
index 96d5e3459b..453b373c79 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
@@ -19,7 +19,7 @@ export type WorkspacePropertyData<ValueType> = {
 	config?: DataTypeResponseModel['values']; // This could potentially then come from hardcoded JS object and not the DataType store.
 };
 
-export class UmbWorkspacePropertyContext<ValueType = unknown> {
+export class UmbWorkspacePropertyContext<ValueType = any> {
 	#host: UmbControllerHostInterface;
 
 	private _providerController: UmbContextProviderController;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
index be2fdb7366..8939911174 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
@@ -2,12 +2,12 @@ import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { IRoute, IRoutingInfo } from 'router-slot';
-import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/internal/router';
-import { UmbPropertyEditorElement } from '@umbraco-cms/backoffice/property-editor';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbVariantId } from '../../../../shared/variants/variant-id.class';
 import { UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN } from '../../../../shared/components/workspace/workspace-variant/workspace-variant.context';
 import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../../shared/components/workspace-property/workspace-property.context';
+import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/internal/router';
+import { UmbPropertyEditorElement } from '@umbraco-cms/backoffice/property-editor';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 /**
  * @element umb-property-editor-ui-block-grid
@@ -97,7 +97,7 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 					</uui-tab-group>
 
 					<umb-variant-router-slot
-						.variantId=${this._variantId}
+						.variantId=${[this._variantId]}
 						id="router-slot"
 						.routes="${this._routes}"
 						@init=${(event: UmbRouterSlotInitEvent) => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
index 66605ef279..f39539b6a9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
@@ -2,7 +2,10 @@ import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { UUITextareaElement } from '@umbraco-ui/uui';
-import type { UmbWorkspacePropertyContext } from '../../../../shared/components/workspace-property/workspace-property.context';
+import {
+	UmbWorkspacePropertyContext,
+	UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN,
+} from '../../../../shared/components/workspace-property/workspace-property.context';
 import { UmbPropertyEditorElement } from '@umbraco-cms/backoffice/property-editor';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
index 8ff12a5682..811f630616 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
@@ -65,6 +65,7 @@ export const data: Array<DocumentResponseModel> = [
 				],
 			},
 			{
+				$type: '',
 				alias: 'multiUrlPicker',
 				culture: 'da-dk',
 				segment: null,
@@ -286,6 +287,7 @@ export const data: Array<DocumentResponseModel> = [
 				updateDate: '2023-02-06T15:31:51.354764',
 			},
 			{
+				$type: '',
 				state: ContentStateModel.PUBLISHED,
 				publishDate: '2023-02-06T15:31:51.354764',
 				culture: 'da-dk',
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/index.ts b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
index 56b50cb113..8977c05ae9 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
@@ -1,5 +1,4 @@
 export * from 'router-slot';
-export * from './property-editor-modal-registration.controller';
 export * from './route.interface';
 export * from './route.context';
 export * from './router-slot.element';
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/modal-registration.controller.ts b/src/Umbraco.Web.UI.Client/src/core/router/modal-registration.controller.ts
deleted file mode 100644
index 0a88f36b09..0000000000
--- a/src/Umbraco.Web.UI.Client/src/core/router/modal-registration.controller.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {
-	UmbModalRegistrationToken,
-	UmbModalRouteOptions,
-	UmbRouteContext,
-	UMB_ROUTE_CONTEXT_TOKEN,
-} from './route.context';
-import { UmbContextConsumerController } from '@umbraco-cms/context-api';
-import { UmbController, UmbControllerHostInterface } from '@umbraco-cms/controller';
-import { UmbModalToken } from '@umbraco-cms/modal';
-
-export class UmbModalRegistrationController<D extends object = object, R = any> extends UmbController {
-	#modalToken: UmbModalToken<D, R> | string;
-	#modalOptions: UmbModalRouteOptions<D, R>;
-	#routeContext?: UmbRouteContext;
-	#modalRegistration?: UmbModalRegistrationToken;
-
-	constructor(
-		host: UmbControllerHostInterface,
-		alias: UmbModalToken<D, R> | string,
-		options: UmbModalRouteOptions<D, R>
-	) {
-		super(host);
-		this.#modalToken = alias;
-		this.#modalOptions = options;
-
-		new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => {
-			this.#routeContext = _routeContext;
-			this._registererModal();
-		});
-	}
-
-	private _registererModal() {
-		this.#modalRegistration = this.#routeContext?.registerModal(this.#modalToken, this.#modalOptions);
-	}
-
-	hostConnected() {
-		if (!this.#modalRegistration) {
-			this._registererModal();
-		}
-	}
-	hostDisconnected(): void {
-		if (this.#modalRegistration) {
-			this.#routeContext?.unregisterModal(this.#modalRegistration);
-			this.#modalRegistration = undefined;
-		}
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts b/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts
deleted file mode 100644
index b979ae4837..0000000000
--- a/src/Umbraco.Web.UI.Client/src/core/router/property-editor-modal-registration.controller.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../backoffice/shared/components/workspace-property/workspace-property.context';
-import {
-	UmbModalRegistrationToken,
-	UmbModalRouteOptions,
-	UmbRouteContext,
-	UMB_ROUTE_CONTEXT_TOKEN,
-} from './route.context';
-import { UmbContextConsumerController } from '@umbraco-cms/context-api';
-import { UmbController, UmbControllerHostInterface } from '@umbraco-cms/controller';
-import { UmbModalToken } from '@umbraco-cms/modal';
-import { UmbObserverController } from '@umbraco-cms/observable-api';
-
-// TODO: Somehow get the modal handler via the controller? aka. va the registration.
-export class UmbPropertyEditorModalRegistrationController<D extends object = object, R = any> extends UmbController {
-	#modalToken: UmbModalToken<D, R> | string;
-	#modalOptions: UmbModalRouteOptions<D, R>;
-	#routeContext?: UmbRouteContext;
-	#propertyAlias?: string;
-	#variantId?: string;
-	#modalRegistration?: UmbModalRegistrationToken;
-
-	constructor(
-		host: UmbControllerHostInterface,
-		alias: UmbModalToken<D, R> | string,
-		options: UmbModalRouteOptions<D, R>,
-		unique: Map<string, string | undefined> = new Map()
-	) {
-		super(host);
-		this.#modalToken = alias;
-		this.#modalOptions = options;
-
-		new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => {
-			this.#routeContext = _routeContext;
-			this._registererModal();
-		});
-		new UmbContextConsumerController(host, UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (_routeContext) => {
-			new UmbObserverController(host, _routeContext.alias, (alias) => {
-				this.#propertyAlias = alias;
-				this._registererModal();
-			});
-			new UmbObserverController(host, _routeContext.variantId, (variantId) => {
-				this.#variantId = variantId?.toString();
-				this._registererModal();
-			});
-		});
-	}
-
-	// 			"alias" : 'my-property-alias'
-	// 			"variant" : 'en_us'
-	addUniqueIdentifier(identifier: string, value: string) {
-		this._unique.set(identifier, value);
-	}
-
-	// TODO: Concept about adding identifiers to the modal registration, which is one or more path-folders.
-	// To replace the specific implementation of propertyAlias and variantId.
-	// I think it could be a key value pair, where the key is the identifier so it can be updated/replaced at runtime.
-
-	private _registererModal() {
-		if (!this.#routeContext || !this.#propertyAlias || !this.#variantId) return;
-		if (this.#modalRegistration) {
-			this.#routeContext.unregisterModal(this.#modalRegistration);
-		}
-
-		const modifiedModalOptions = {
-			...this.#modalOptions,
-			path: `${this.#propertyAlias}/${this.#variantId}/${this.#modalOptions.path}`,
-		};
-
-		this.#modalRegistration = this.#routeContext?.registerModal(this.#modalToken, modifiedModalOptions);
-	}
-
-	hostConnected() {
-		if (!this.#modalRegistration) {
-			this._registererModal();
-		}
-	}
-	hostDisconnected(): void {
-		if (this.#modalRegistration) {
-			this.#routeContext?.unregisterModal(this.#modalRegistration);
-			this.#modalRegistration = undefined;
-		}
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 2dd618c754..4b5ce303eb 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -1,31 +1,16 @@
-import { IRoute, IRoutingInfo, Params, PARAM_IDENTIFIER, stripSlash } from 'router-slot';
-import { v4 as uuidv4 } from 'uuid';
-import { UmbContextConsumerController, UmbContextProviderController, UmbContextToken } from '@umbraco-cms/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/controller';
-import { UmbModalConfig, UmbModalToken, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal';
+import { IRoute, IRoutingInfo, PARAM_IDENTIFIER, stripSlash } from 'router-slot';
+import {
+	UmbContextConsumerController,
+	UmbContextProviderController,
+	UmbContextToken,
+} from '@umbraco-cms/backoffice/context-api';
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+import { UmbControllerHostInterface } from 'libs/controller/controller-host.mixin';
+import { UMB_MODAL_CONTEXT_TOKEN } from 'libs/modal/modal.context';
+import { UmbModalRouteOptions, UmbModalRouteRegistration } from 'libs/modal/modal-route-registration';
 
 const EmptyDiv = document.createElement('div');
 
-export type UmbModalRouteOptions<UmbModalTokenData extends object = object, UmbModalTokenResult = unknown> = {
-	path: string;
-	config?: UmbModalConfig;
-	onSetup?: (routingInfo: Params) => UmbModalTokenData | false;
-	onSubmit?: (data: UmbModalTokenResult) => void | PromiseLike<void>;
-	onReject?: () => void;
-	getUrlBuilder?: (urlBuilder: UmbModalRouteBuilder) => void;
-};
-
-export type UmbModalRegistrationToken = UmbModalRouteRegistration;
-
-type UmbModalRouteRegistration<D extends object = object, R = any> = {
-	key: string;
-	alias: UmbModalToken | string;
-	options: UmbModalRouteOptions<D, R>;
-	routeSetup: (component: HTMLElement, info: IRoutingInfo) => void;
-};
-
-export type UmbModalRouteBuilder = (params: { [key: string]: string | number }) => string;
-
 export class UmbRouteContext {
 	//#host: UmbControllerHostInterface;
 	#modalRegistrations: UmbModalRouteRegistration[] = [];
@@ -58,6 +43,7 @@ export class UmbRouteContext {
 		alias: UmbModalToken<D, R> | string,
 		options: UmbModalRouteOptions<D, R>
 	) {
+		/*
 		const registration = {
 			key: options.config?.key || uuidv4(),
 			alias: alias,
@@ -79,6 +65,10 @@ export class UmbRouteContext {
 				}
 			},
 		};
+		*/
+		const registration = new UmbModalRouteRegistration(alias, options);
+
+		console.log('Route Context Modal Registration', registration);
 		this.#modalRegistrations.push(registration);
 		this.#generateNewUrlBuilder(registration);
 		this.#generateContextRoutes();
@@ -93,14 +83,28 @@ export class UmbRouteContext {
 	}
 
 	#getModalRoutePath(modalRegistration: UmbModalRouteRegistration) {
-		return `/modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
+		return `/modal/${modalRegistration.alias.toString()}/${modalRegistration.path}`;
 	}
 
 	#generateRoute(modalRegistration: UmbModalRouteRegistration): IRoute {
 		return {
 			path: this.#getModalRoutePath(modalRegistration),
 			component: EmptyDiv,
-			setup: modalRegistration.routeSetup,
+			//setup: modalRegistration.routeSetup,
+			setup: (component: HTMLElement, info: IRoutingInfo<any, any>) => {
+				if (!this.#modalContext) return;
+				const modalHandler = modalRegistration.routeSetup(this.#modalContext, info.match.params);
+				if (modalHandler) {
+					modalHandler.onSubmit().then(
+						() => {
+							this.#removeModalPath(info);
+						},
+						() => {
+							this.#removeModalPath(info);
+						}
+					);
+				}
+			},
 		};
 	}
 
@@ -109,6 +113,8 @@ export class UmbRouteContext {
 			return this.#generateRoute(modalRegistration);
 		});
 
+		// Add an empty route, so that we can always have a route to go to for closing the modals.
+		// TODO: Check if this is nesecary with the _internal_modalRouterChanged present.
 		this.#contextRoutes.push({
 			path: '',
 			component: EmptyDiv,
@@ -123,9 +129,12 @@ export class UmbRouteContext {
 		this.#routerBasePath = routerBasePath;
 		this.#generateNewUrlBuilders();
 	}
+	// TODO: what is going on here, We need to make sure if the modals are still relevant then not close them.
+	// Also notice each registration should now hold its handler when its active.
 	public _internal_modalRouterChanged(activeModalPath: string | undefined) {
 		if (this.#activeModalPath === activeModalPath) return;
 		if (this.#activeModalPath) {
+			// If if there is a modal using the old path.
 			const activeModal = this.#modalRegistrations.find(
 				(registration) => this.#getModalRoutePath(registration) === this.#activeModalPath
 			);
@@ -144,7 +153,7 @@ export class UmbRouteContext {
 		if (!modalRegistration.options.getUrlBuilder || !this.#routerBasePath) return;
 
 		const routeBasePath = this.#routerBasePath.endsWith('/') ? this.#routerBasePath : this.#routerBasePath + '/';
-		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.options.path}`;
+		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.path}`;
 
 		const urlBuilder = (params: { [key: string]: string | number }) => {
 			const localRoutePath = stripSlash(
@@ -152,9 +161,11 @@ export class UmbRouteContext {
 					return params[args[0]].toString();
 				})
 			);
+			console.log('urlBuilder', params, localRoutePath);
 			return routeBasePath + localRoutePath;
 		};
 
+		console.log('Provide new url builder', urlBuilder, modalRegistration.options.getUrlBuilder);
 		modalRegistration.options.getUrlBuilder(urlBuilder);
 	};
 }
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index f43faafa36..6ceb4aedb5 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -1,6 +1,6 @@
 import type { IRoute } from 'router-slot/model';
 import { RouterSlot } from 'router-slot';
-import { css, PropertyValueMap } from 'lit';
+import { css, html, PropertyValueMap } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbLitElement } from '../lit-element';
 import { UmbRouterSlotInitEvent } from './router-slot-init.event';
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
index 94983c5ec9..748644267d 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
@@ -74,6 +74,6 @@ export class UmbVariantRouterSlotElement extends UmbRouterSlotElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-router-slot': UmbRouterSlotElement;
+		'umb-variant-router-slot': UmbVariantRouterSlotElement;
 	}
 }

From d329a1e56586a4ac2177cb805273a2eac9b1e589 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 22 Mar 2023 20:36:51 +0100
Subject: [PATCH 41/96] revert approved words

---
 src/Umbraco.Web.UI.Client/.vscode/settings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/.vscode/settings.json b/src/Umbraco.Web.UI.Client/.vscode/settings.json
index d2e313ff3b..196b1d2b83 100644
--- a/src/Umbraco.Web.UI.Client/.vscode/settings.json
+++ b/src/Umbraco.Web.UI.Client/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
 	"cssVariables.lookupFiles": ["node_modules/@umbraco-ui/uui-css/dist/custom-properties.css"],
-	"cSpell.words": ["combobox", "nesecary", "variantable"],
+	"cSpell.words": ["combobox", "variantable"],
 	"exportall.config.folderListener": [],
 	"exportall.config.relExclusion": []
 }

From fff8b2a9ebc648e4e6a945ae42227a2969853d6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 09:29:36 +0100
Subject: [PATCH 42/96] implemented

---
 .../modal/modal-registration.controller.ts    |  33 +++---
 .../libs/modal/modal-route-registration.ts    |   2 +-
 .../input-multi-url-picker.element.ts         | 109 ++++++++++--------
 .../workspace-property.element.ts             |  30 +++--
 ...erty-editor-ui-multi-url-picker.element.ts |  26 ++++-
 5 files changed, 121 insertions(+), 79 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts
index beaaeba8ba..b5b1bb25fd 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts
@@ -1,7 +1,7 @@
 import type { UmbRouteContext } from '../../src/core/router/route.context';
 // TODO: Be aware here we import a class from src!
 import { UMB_ROUTE_CONTEXT_TOKEN } from '../../src/core/router/route.context';
-import { UmbModalRouteBuilder, UmbModalRouteOptions, UmbModalRouteRegistration } from './modal-route-registration';
+import { UmbModalRouteOptions, UmbModalRouteRegistration } from './modal-route-registration';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 import { UmbControllerHostInterface } from 'libs/controller/controller-host.mixin';
@@ -14,24 +14,18 @@ export class UmbModalRegistrationController<D extends object = object, R = any>
 	#modalOptions: UmbModalRouteOptions<D, R>;
 	#routeContext?: UmbRouteContext;
 	#modalRegistration?: UmbModalRegistrationToken;
-	#uniqueParts;
-	//#urlBuilder?: UmbModalRouteBuilder; // TODO: not going to work, as this will not trigger a re-render of the host element.
+	#uniqueParts: Map<string, string | undefined>;
 
 	constructor(
 		host: UmbControllerHostInterface,
 		alias: UmbModalToken<D, R> | string,
-		options: UmbModalRouteOptions<D, R>,
-		unique: Map<string, string | undefined> = new Map()
+		unique: Map<string, string | undefined> | null,
+		options: UmbModalRouteOptions<D, R>
 	) {
 		super(host);
 		this.#modalToken = alias;
-		this.#modalOptions = {
-			...options,
-			/*getUrlBuilder: (urlBuilder) => {
-				this.#urlBuilder = urlBuilder;
-			},*/
-		};
-		this.#uniqueParts = unique;
+		this.#modalOptions = options;
+		this.#uniqueParts = unique || new Map();
 
 		new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => {
 			this.#routeContext = _routeContext;
@@ -39,20 +33,21 @@ export class UmbModalRegistrationController<D extends object = object, R = any>
 		});
 	}
 
-	/*
-	public getUrl(params: { [key: string]: string | number }) {
-		return this.#urlBuilder?.(params) || null;
-	}
-	*/
-
-	setUniqueIdentifier(identifier: string, value: string) {
+	setUniqueIdentifier(identifier: string, value: string | undefined) {
+		if (!this.#uniqueParts.has(identifier)) {
+			throw new Error(
+				`Identifier ${identifier} was not registered at the construction of the modal registration controller, it has to be.`
+			);
+		}
 		this.#uniqueParts.set(identifier, value);
+		this._registererModal();
 	}
 
 	private _registererModal() {
 		if (!this.#routeContext) return;
 		if (this.#modalRegistration) {
 			this.#routeContext.unregisterModal(this.#modalRegistration);
+			this.#modalRegistration = undefined;
 		}
 
 		const pathParts = Array.from(this.#uniqueParts.values());
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
index 87b2804aaa..9ffffd95be 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
@@ -16,7 +16,7 @@ export type UmbModalRouteOptions<UmbModalTokenData extends object = object, UmbM
 };
 
 export class UmbModalRouteRegistration<D extends object = object, R = any> {
-	#key;
+	#key: string;
 	#modalAlias: UmbModalToken<D, R> | string;
 	#options: UmbModalRouteOptions<D, R>;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index 4073831db0..c52aaf8e07 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -7,6 +7,7 @@ import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL_TOKEN } from '../../modals/lin
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbModalRegistrationController } from 'libs/modal/modal-registration.controller';
 import type { UmbModalRouteBuilder } from 'libs/modal/modal-route-registration';
+import { UmbVariantId } from '../../variants/variant-id.class';
 
 /**
  * @element umb-input-multi-url-picker
@@ -30,7 +31,16 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 	}
 
 	@property()
-	alias?: string;
+	public set alias(value: string | undefined) {
+		console.log('alias', value);
+		this.myModalRegistration.setUniqueIdentifier('propertyAlias', value);
+	}
+
+	@property()
+	public set variantId(value: string | UmbVariantId | undefined) {
+		console.log('variantId', value);
+		this.myModalRegistration.setUniqueIdentifier('variantId', value?.toString());
+	}
 
 	/**
 	 * This is a minimum amount of selected items in this input.
@@ -120,53 +130,60 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 			() => !!this.max && this.urls.length > this.max
 		);
 
-		// TODO: Need concept for contextual being aware about the context, as this might not work if input is used outside a property editor.
-		this.myModalRegistration = new UmbModalRegistrationController(this, UMB_LINK_PICKER_MODAL_TOKEN, {
-			path: `:index`,
-			onSetup: (params) => {
-				// Get index:
-				const indexParam = params.index;
-				if (!indexParam) return false;
-				let index: number | null = parseInt(params.index);
-				if (Number.isNaN(index)) return false;
+		this.myModalRegistration = new UmbModalRegistrationController(
+			this,
+			UMB_LINK_PICKER_MODAL_TOKEN,
+			new Map([
+				['propertyAlias', undefined],
+				['variantId', undefined],
+			]),
+			{
+				path: `:index`,
+				onSetup: (params) => {
+					// Get index:
+					const indexParam = params.index;
+					if (!indexParam) return false;
+					let index: number | null = parseInt(params.index);
+					if (Number.isNaN(index)) return false;
 
-				// Use the index to find data:
-				let data: UmbLinkPickerLink | null = null;
-				if (index >= 0 && index < this.urls.length) {
-					data = this._getItemByIndex(index);
-				} else {
-					// If not then make a new pick:
-					index = null;
-				}
+					// Use the index to find data:
+					let data: UmbLinkPickerLink | null = null;
+					if (index >= 0 && index < this.urls.length) {
+						data = this._getItemByIndex(index);
+					} else {
+						// If not then make a new pick:
+						index = null;
+					}
 
-				return {
-					index: index,
-					lol: false,
-					link: {
-						name: data?.name,
-						published: data?.published,
-						queryString: data?.queryString,
-						target: data?.target,
-						trashed: data?.trashed,
-						udi: data?.udi,
-						url: data?.url,
-					},
-					config: {
-						hideAnchor: this.hideAnchor,
-						ignoreUserStartNodes: this.ignoreUserStartNodes,
-						overlaySize: this.overlaySize || 'small',
-					},
-				};
-			},
-			onSubmit: (submitData) => {
-				if (!submitData) return;
-				this._setSelection(submitData.link, submitData.index);
-			},
-			getUrlBuilder: (urlBuilder) => {
-				console.log('got link builder', urlBuilder);
-				this._linkPickerURL = urlBuilder;
-			},
-		});
+					return {
+						index: index,
+						lol: false,
+						link: {
+							name: data?.name,
+							published: data?.published,
+							queryString: data?.queryString,
+							target: data?.target,
+							trashed: data?.trashed,
+							udi: data?.udi,
+							url: data?.url,
+						},
+						config: {
+							hideAnchor: this.hideAnchor,
+							ignoreUserStartNodes: this.ignoreUserStartNodes,
+							overlaySize: this.overlaySize || 'small',
+						},
+					};
+				},
+				onSubmit: (submitData) => {
+					if (!submitData) return;
+					this._setSelection(submitData.link, submitData.index);
+				},
+				getUrlBuilder: (urlBuilder) => {
+					console.log('got link builder', urlBuilder);
+					this._linkPickerURL = urlBuilder;
+				},
+			}
+		);
 	}
 
 	private _removeItem(index: number) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
index 2f270c7fef..b7965d8fe5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
@@ -211,17 +211,25 @@ export class UmbWorkspacePropertyElement extends UmbLitElement {
 				if (this._element) {
 					this._element.addEventListener('property-value-change', this._onPropertyEditorChange as any as EventListener);
 
-					this._valueObserver = this.observe(this._propertyContext.value, (value) => {
-						this._value = value;
-						if (this._element) {
-							this._element.value = value;
-						}
-					});
-					this._configObserver = this.observe(this._propertyContext.config, (config) => {
-						if (this._element && config) {
-							this._element.config = config;
-						}
-					});
+					this._valueObserver = this.observe(
+						this._propertyContext.value,
+						(value) => {
+							this._value = value;
+							if (this._element) {
+								this._element.value = value;
+							}
+						},
+						'_observePropertyValue'
+					);
+					this._configObserver = this.observe(
+						this._propertyContext.config,
+						(config) => {
+							if (this._element && config) {
+								this._element.config = config;
+							}
+						},
+						'_observePropertyConfig'
+					);
 				}
 
 				this.requestUpdate('element', oldValue);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
index fc439097b9..fb7aa67389 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
@@ -2,11 +2,12 @@ import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
+import { UmbInputMultiUrlPickerElement } from '../../../../shared/components/input-multi-url-picker/input-multi-url-picker.element';
+import { UmbLinkPickerLink } from '../../../../shared/modals/link-picker';
 import { UmbPropertyEditorElement } from '@umbraco-cms/backoffice/property-editor';
 import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbInputMultiUrlPickerElement } from '../../../../shared/components/input-multi-url-picker/input-multi-url-picker.element';
-import { UmbLinkPickerLink } from '../../../../shared/modals/link-picker';
+import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from 'src/backoffice/shared/components/workspace-property/workspace-property.context';
 
 /**
  * @element umb-property-editor-ui-multi-url-picker
@@ -50,6 +51,25 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement impl
 	@state()
 	private _minNumber?: number;
 
+	@state()
+	private _alias?: string;
+
+	@state()
+	private _propertyVariantId?: string;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (context) => {
+			this.observe(context.alias, (alias) => {
+				this._alias = alias;
+			});
+			this.observe(context.variantId, (variantId) => {
+				this._propertyVariantId = variantId?.toString() || 'invariant';
+			});
+		});
+	}
+
 	private _onChange(event: CustomEvent) {
 		this.value = (event.target as UmbInputMultiUrlPickerElement).urls;
 		this.dispatchEvent(new CustomEvent('property-value-change'));
@@ -57,6 +77,8 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement impl
 
 	render() {
 		return html`<umb-input-multi-url-picker
+			.alias="${this._alias}"
+			.variantId="${this._propertyVariantId}"
 			@change="${this._onChange}"
 			.overlaySize="${this._overlaySize}"
 			?hide-anchor="${this._hideAnchor}"

From 7624c6227536188f40f36595b070006b582611d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 10:36:52 +0100
Subject: [PATCH 43/96] refactor registration and controller

---
 src/Umbraco.Web.UI.Client/libs/modal/index.ts |   2 +-
 ...=> modal-route-registration.controller.ts} |  49 +++++----
 .../libs/modal/modal-route-registration.ts    |  92 ++++++++++------
 .../libs/modal/modal.context.ts               |   2 +-
 .../input-multi-url-picker.element.ts         | 102 +++++++++---------
 .../src/core/router/route.context.ts          |  40 ++-----
 6 files changed, 153 insertions(+), 134 deletions(-)
 rename src/Umbraco.Web.UI.Client/libs/modal/{modal-registration.controller.ts => modal-route-registration.controller.ts} (66%)

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/index.ts
index be736301da..f7eb94b760 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/index.ts
@@ -1,5 +1,5 @@
 export * from './modal.context';
 export * from './modal-handler';
-export * from './modal-registration.controller';
+export * from './modal-route-registration.controller';
 export * from './token/modal-token';
 export * from './modal.interfaces';
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
similarity index 66%
rename from src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
index b5b1bb25fd..bfe6c6bf63 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-registration.controller.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
@@ -1,31 +1,41 @@
 import type { UmbRouteContext } from '../../src/core/router/route.context';
 // TODO: Be aware here we import a class from src!
 import { UMB_ROUTE_CONTEXT_TOKEN } from '../../src/core/router/route.context';
-import { UmbModalRouteOptions, UmbModalRouteRegistration } from './modal-route-registration';
+import type { UmbControllerInterface } from '../controller';
+import { UmbModalRouteRegistration } from './modal-route-registration';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
-import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+import { UmbModalConfig, UmbModalToken } from '@umbraco-cms/backoffice/modal';
 import { UmbControllerHostInterface } from 'libs/controller/controller-host.mixin';
-import { UmbController } from 'libs/controller/controller.class';
 
 export type UmbModalRegistrationToken = UmbModalRouteRegistration;
 
-export class UmbModalRegistrationController<D extends object = object, R = any> extends UmbController {
-	#modalToken: UmbModalToken<D, R> | string;
-	#modalOptions: UmbModalRouteOptions<D, R>;
+export class UmbModalRouteRegistrationController<D extends object = object, R = any>
+	extends UmbModalRouteRegistration<D, R>
+	implements UmbControllerInterface
+{
+	//#host: UmbControllerHostInterface;
+
+	#configuredPath: string;
+	#uniqueParts: Map<string, string | undefined>;
+
 	#routeContext?: UmbRouteContext;
 	#modalRegistration?: UmbModalRegistrationToken;
-	#uniqueParts: Map<string, string | undefined>;
+
+	public get unique() {
+		return undefined;
+	}
 
 	constructor(
 		host: UmbControllerHostInterface,
 		alias: UmbModalToken<D, R> | string,
-		unique: Map<string, string | undefined> | null,
-		options: UmbModalRouteOptions<D, R>
+		path: string,
+		uniqueParts: Map<string, string | undefined> | null,
+		modalConfig?: UmbModalConfig
 	) {
-		super(host);
-		this.#modalToken = alias;
-		this.#modalOptions = options;
-		this.#uniqueParts = unique || new Map();
+		super(alias, path, modalConfig);
+		//this.#host = host;
+		this.#configuredPath = path;
+		this.#uniqueParts = uniqueParts || new Map();
 
 		new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => {
 			this.#routeContext = _routeContext;
@@ -56,14 +66,11 @@ export class UmbModalRegistrationController<D extends object = object, R = any>
 		if (pathParts.some((value) => value === undefined)) return;
 
 		// Add the configured part of the path:
-		pathParts.push(this.#modalOptions.path);
+		pathParts.push(this.#configuredPath);
 
-		const modifiedModalOptions = {
-			...this.#modalOptions,
-			path: pathParts.join('/'),
-		};
+		this._setPath(pathParts.join('/'));
 
-		this.#modalRegistration = this.#routeContext?.registerModal(this.#modalToken, modifiedModalOptions);
+		this.#modalRegistration = this.#routeContext.registerModal(this);
 	}
 
 	hostConnected() {
@@ -77,4 +84,8 @@ export class UmbModalRegistrationController<D extends object = object, R = any>
 			this.#modalRegistration = undefined;
 		}
 	}
+
+	public destroy(): void {
+		this.hostDisconnected();
+	}
 }
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
index 9ffffd95be..9ba22c4d70 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
@@ -6,27 +6,29 @@ import { UmbModalToken } from './token/modal-token';
 
 export type UmbModalRouteBuilder = (params: { [key: string]: string | number }) => string;
 
-export type UmbModalRouteOptions<UmbModalTokenData extends object = object, UmbModalTokenResult = unknown> = {
-	path: string;
-	config?: UmbModalConfig;
-	onSetup?: (routingInfo: Params) => UmbModalTokenData | false;
-	onSubmit?: (data: UmbModalTokenResult) => void | PromiseLike<void>;
-	onReject?: () => void;
-	getUrlBuilder?: (urlBuilder: UmbModalRouteBuilder) => void;
-};
-
-export class UmbModalRouteRegistration<D extends object = object, R = any> {
+export class UmbModalRouteRegistration<UmbModalTokenData extends object = object, UmbModalTokenResult = any> {
 	#key: string;
-	#modalAlias: UmbModalToken<D, R> | string;
-	#options: UmbModalRouteOptions<D, R>;
+	#path: string;
+	#modalAlias: UmbModalToken<UmbModalTokenData, UmbModalTokenResult> | string;
+	#modalConfig?: UmbModalConfig;
 
-	#modalHandler: UmbModalHandler<D, R> | undefined;
+	#onSetupCallback?: (routingInfo: Params) => UmbModalTokenData | false;
+	#onSubmitCallback?: (data: UmbModalTokenResult) => void;
+	#onRejectCallback?: () => void;
+
+	#modalHandler: UmbModalHandler<UmbModalTokenData, UmbModalTokenResult> | undefined;
+	#urlBuilderCallback: ((urlBuilder: UmbModalRouteBuilder) => void) | undefined;
 
 	// Notice i removed the key in the transferring to this class.
-	constructor(modalAlias: UmbModalToken<D, R> | string, options: UmbModalRouteOptions<D, R>) {
-		this.#key = options.config?.key || uuidv4();
+	constructor(
+		modalAlias: UmbModalToken<UmbModalTokenData, UmbModalTokenResult> | string,
+		path: string,
+		modalConfig?: UmbModalConfig
+	) {
+		this.#key = modalConfig?.key || uuidv4();
 		this.#modalAlias = modalAlias;
-		this.#options = options;
+		this.#path = path;
+		this.#modalConfig = { ...modalConfig, key: this.#key };
 	}
 
 	public get key() {
@@ -38,11 +40,15 @@ export class UmbModalRouteRegistration<D extends object = object, R = any> {
 	}
 
 	public get path() {
-		return this.#options.path;
+		return this.#path;
 	}
 
-	public get options() {
-		return this.#options;
+	protected _setPath(path: string) {
+		this.#path = path;
+	}
+
+	public get modalConfig() {
+		return this.#modalConfig;
 	}
 
 	/**
@@ -59,20 +65,44 @@ export class UmbModalRouteRegistration<D extends object = object, R = any> {
 		return this.#modalHandler;
 	}
 
+	public usesRouteBuilder(): boolean {
+		return !!this.#urlBuilderCallback;
+	}
+	public observeRouteBuilder(callback: (urlBuilder: UmbModalRouteBuilder) => void) {
+		this.#urlBuilderCallback = callback;
+		return this;
+	}
+	public _internal_setRouteBuilder(urlBuilder: UmbModalRouteBuilder) {
+		this.#urlBuilderCallback?.(urlBuilder);
+	}
+
+	public onSetup(callback: (routingInfo: Params) => UmbModalTokenData | false) {
+		this.#onSetupCallback = callback;
+		return this;
+	}
+	public onSubmit(callback: (data: UmbModalTokenResult) => void) {
+		this.#onSubmitCallback = callback;
+		return this;
+	}
+	public onReject(callback: () => void) {
+		this.#onRejectCallback = callback;
+		return this;
+	}
+
+	#onSubmit = (data: UmbModalTokenResult) => {
+		this.#onSubmitCallback?.(data);
+		this.#modalHandler = undefined;
+	};
+	#onReject = () => {
+		this.#onRejectCallback?.();
+		this.#modalHandler = undefined;
+	};
+
 	routeSetup(modalContext: UmbModalContext, params: Params) {
-		const modalData = this.#options.onSetup?.(params);
+		const modalData = this.#onSetupCallback ? this.#onSetupCallback(params) : true;
 		if (modalData !== false) {
-			this.#modalHandler = modalContext.open(this.#modalAlias, modalData, { ...this.#options.config, key: this.#key });
-			this.#modalHandler.onSubmit().then(
-				(data) => {
-					this.#options.onSubmit?.(data);
-					this.#modalHandler = undefined;
-				},
-				() => {
-					this.#options.onReject?.();
-					this.#modalHandler = undefined;
-				}
-			);
+			this.#modalHandler = modalContext.open(this.#modalAlias, modalData, this.modalConfig);
+			this.#modalHandler.onSubmit().then(this.#onSubmit, this.#onReject);
 			return this.#modalHandler;
 		}
 		return null;
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
index b237b925b0..7fd5caf42c 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
@@ -78,7 +78,7 @@ export class UmbModalContext {
 	 */
 	public open<ModalData extends object = object, ModalResult = unknown>(
 		modalAlias: string | UmbModalToken<ModalData, ModalResult>,
-		data?: ModalData,
+		data?: ModalData | true,
 		config?: UmbModalConfig
 	) {
 		const modalHandler = new UmbModalHandlerClass(this.host, modalAlias, data, config) as unknown as UmbModalHandler<
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index c52aaf8e07..074d77d9cc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -4,10 +4,10 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL_TOKEN } from '../../modals/link-picker';
+import type { UmbVariantId } from '../../variants/variant-id.class';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbModalRegistrationController } from 'libs/modal/modal-registration.controller';
+import { UmbModalRouteRegistrationController } from 'libs/modal/modal-route-registration.controller';
 import type { UmbModalRouteBuilder } from 'libs/modal/modal-route-registration';
-import { UmbVariantId } from '../../variants/variant-id.class';
 
 /**
  * @element umb-input-multi-url-picker
@@ -113,7 +113,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 	private _urls: Array<UmbLinkPickerLink> = [];
 
 	@state()
-	private _linkPickerURL?: UmbModalRouteBuilder;
+	private _modalRoute?: UmbModalRouteBuilder;
 
 	private myModalRegistration;
 
@@ -130,60 +130,56 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 			() => !!this.max && this.urls.length > this.max
 		);
 
-		this.myModalRegistration = new UmbModalRegistrationController(
+		this.myModalRegistration = new UmbModalRouteRegistrationController(
 			this,
 			UMB_LINK_PICKER_MODAL_TOKEN,
+			`:index`,
 			new Map([
 				['propertyAlias', undefined],
 				['variantId', undefined],
-			]),
-			{
-				path: `:index`,
-				onSetup: (params) => {
-					// Get index:
-					const indexParam = params.index;
-					if (!indexParam) return false;
-					let index: number | null = parseInt(params.index);
-					if (Number.isNaN(index)) return false;
+			])
+		)
+			.onSetup((params) => {
+				// Get index:
+				const indexParam = params.index;
+				if (!indexParam) return false;
+				let index: number | null = parseInt(params.index);
+				if (Number.isNaN(index)) return false;
 
-					// Use the index to find data:
-					let data: UmbLinkPickerLink | null = null;
-					if (index >= 0 && index < this.urls.length) {
-						data = this._getItemByIndex(index);
-					} else {
-						// If not then make a new pick:
-						index = null;
-					}
+				// Use the index to find data:
+				let data: UmbLinkPickerLink | null = null;
+				if (index >= 0 && index < this.urls.length) {
+					data = this._getItemByIndex(index);
+				} else {
+					// If not then make a new pick:
+					index = null;
+				}
 
-					return {
-						index: index,
-						lol: false,
-						link: {
-							name: data?.name,
-							published: data?.published,
-							queryString: data?.queryString,
-							target: data?.target,
-							trashed: data?.trashed,
-							udi: data?.udi,
-							url: data?.url,
-						},
-						config: {
-							hideAnchor: this.hideAnchor,
-							ignoreUserStartNodes: this.ignoreUserStartNodes,
-							overlaySize: this.overlaySize || 'small',
-						},
-					};
-				},
-				onSubmit: (submitData) => {
-					if (!submitData) return;
-					this._setSelection(submitData.link, submitData.index);
-				},
-				getUrlBuilder: (urlBuilder) => {
-					console.log('got link builder', urlBuilder);
-					this._linkPickerURL = urlBuilder;
-				},
-			}
-		);
+				return {
+					index: index,
+					link: {
+						name: data?.name,
+						published: data?.published,
+						queryString: data?.queryString,
+						target: data?.target,
+						trashed: data?.trashed,
+						udi: data?.udi,
+						url: data?.url,
+					},
+					config: {
+						hideAnchor: this.hideAnchor,
+						ignoreUserStartNodes: this.ignoreUserStartNodes,
+						overlaySize: this.overlaySize || 'small',
+					},
+				};
+			})
+			.onSubmit((submitData) => {
+				if (!submitData) return;
+				this._setSelection(submitData.link, submitData.index);
+			})
+			.observeRouteBuilder((routeBuilder) => {
+				this._modalRoute = routeBuilder;
+			});
 	}
 
 	private _removeItem(index: number) {
@@ -212,12 +208,12 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 
 	// TODO: We should get a href property on uui-ref-node, and not use this method:
 	private _temporary_onClick_editItem(index: number) {
-		window.history.pushState({}, '', this._linkPickerURL?.({ index: index || -1 }));
+		window.history.pushState({}, '', this._modalRoute?.({ index: index || -1 }));
 	}
 
 	render() {
 		return html`${this.urls?.map((link, index) => this._renderItem(link, index))}
-			<uui-button look="placeholder" label="Add" .href=${this._linkPickerURL?.({ index: -1 })}>Add</uui-button>`;
+			<uui-button look="placeholder" label="Add" .href=${this._modalRoute?.({ index: -1 })}>Add</uui-button>`;
 	}
 
 	private _renderItem(link: UmbLinkPickerLink, index: number) {
@@ -227,7 +223,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 			@open="${() => this._temporary_onClick_editItem(index)}">
 			<uui-icon slot="icon" name="${link.icon || 'umb:link'}"></uui-icon>
 			<uui-action-bar slot="actions">
-				<uui-button .href=${this._linkPickerURL?.({ index })} label="Edit link">Edit</uui-button>
+				<uui-button .href=${this._modalRoute?.({ index })} label="Edit link">Edit</uui-button>
 				<uui-button @click="${() => this._removeItem(index)}" label="Remove link">Remove</uui-button>
 			</uui-action-bar>
 		</uui-ref-node>`;
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 4b5ce303eb..1468ec1d52 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -39,36 +39,21 @@ export class UmbRouteContext {
 		}
 	}
 
+	/*
 	public registerModal<D extends object = object, R = any>(
 		alias: UmbModalToken<D, R> | string,
 		options: UmbModalRouteOptions<D, R>
 	) {
-		/*
-		const registration = {
-			key: options.config?.key || uuidv4(),
-			alias: alias,
-			options: options,
-			routeSetup: (component: HTMLElement, info: IRoutingInfo<any, any>) => {
-				const modalData = options.onSetup?.(info.match.params);
-				if (modalData !== false && this.#modalContext) {
-					const modalHandler = this.#modalContext.open(alias, modalData, { ...options.config, key: registration.key });
-					modalHandler.onSubmit().then(
-						(data) => {
-							this.#removeModalPath(info);
-							options.onSubmit?.(data);
-						},
-						() => {
-							this.#removeModalPath(info);
-							options.onReject?.();
-						}
-					);
-				}
-			},
-		};
-		*/
 		const registration = new UmbModalRouteRegistration(alias, options);
 
-		console.log('Route Context Modal Registration', registration);
+		this.#modalRegistrations.push(registration);
+		this.#generateNewUrlBuilder(registration);
+		this.#generateContextRoutes();
+		return registration;
+	}
+	*/
+
+	public registerModal(registration: UmbModalRouteRegistration) {
 		this.#modalRegistrations.push(registration);
 		this.#generateNewUrlBuilder(registration);
 		this.#generateContextRoutes();
@@ -90,7 +75,6 @@ export class UmbRouteContext {
 		return {
 			path: this.#getModalRoutePath(modalRegistration),
 			component: EmptyDiv,
-			//setup: modalRegistration.routeSetup,
 			setup: (component: HTMLElement, info: IRoutingInfo<any, any>) => {
 				if (!this.#modalContext) return;
 				const modalHandler = modalRegistration.routeSetup(this.#modalContext, info.match.params);
@@ -150,7 +134,7 @@ export class UmbRouteContext {
 	}
 
 	#generateNewUrlBuilder = (modalRegistration: UmbModalRouteRegistration) => {
-		if (!modalRegistration.options.getUrlBuilder || !this.#routerBasePath) return;
+		if (!modalRegistration.usesRouteBuilder() || !this.#routerBasePath) return;
 
 		const routeBasePath = this.#routerBasePath.endsWith('/') ? this.#routerBasePath : this.#routerBasePath + '/';
 		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.path}`;
@@ -161,12 +145,10 @@ export class UmbRouteContext {
 					return params[args[0]].toString();
 				})
 			);
-			console.log('urlBuilder', params, localRoutePath);
 			return routeBasePath + localRoutePath;
 		};
 
-		console.log('Provide new url builder', urlBuilder, modalRegistration.options.getUrlBuilder);
-		modalRegistration.options.getUrlBuilder(urlBuilder);
+		modalRegistration._internal_setRouteBuilder(urlBuilder);
 	};
 }
 

From 14d031ff018bf8af28d600eed23e423be3920781 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 10:38:38 +0100
Subject: [PATCH 44/96] option argument

---
 .../libs/modal/modal-route-registration.controller.ts           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
index bfe6c6bf63..46a4982046 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
@@ -29,7 +29,7 @@ export class UmbModalRouteRegistrationController<D extends object = object, R =
 		host: UmbControllerHostInterface,
 		alias: UmbModalToken<D, R> | string,
 		path: string,
-		uniqueParts: Map<string, string | undefined> | null,
+		uniqueParts?: Map<string, string | undefined> | null,
 		modalConfig?: UmbModalConfig
 	) {
 		super(alias, path, modalConfig);

From c6444f1a8b4cf6b2c1bf214f8ad900c0e447ae8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 10:41:39 +0100
Subject: [PATCH 45/96] comment

---
 .../libs/modal/modal-route-registration.controller.ts            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
index 46a4982046..9b0c01db4d 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
@@ -68,6 +68,7 @@ export class UmbModalRouteRegistrationController<D extends object = object, R =
 		// Add the configured part of the path:
 		pathParts.push(this.#configuredPath);
 
+		// Make this the path of the modal registration:
 		this._setPath(pathParts.join('/'));
 
 		this.#modalRegistration = this.#routeContext.registerModal(this);

From cfc6eed5c6a23e5e0fffb2b03cc618e16c2458d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 10:55:23 +0100
Subject: [PATCH 46/96] docs updates

---
 .../src/core/modal/stories/modal.mdx          | 57 ++++++++++++++-
 .../src/stories/extending/modals/intro.mdx    | 71 +------------------
 2 files changed, 56 insertions(+), 72 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
index 0d98e63508..dcf18f274d 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
@@ -42,8 +42,61 @@ class MyElement extends UmbElementMixin(LitElement) {
 
 ### Open a modal
 
-TODO: consider the level of documentation we like to provide. Do we want user to have deep link able modals, or just simple modals like theses?
-TODO: referee to the doc on modal extension, and move the relevant into between these two.
+A modal can be opned in two ways. Either you registrer the modal with a route or at runtime open the modal. Notice the first one will enable users to deep link to the modal, this might be preferable in some cases if not go for the last.
+
+#### Simple Modal Route Registration
+
+A modal can be registred via the UmbModalRouteRegistrationController. The registration will accept a modal token (or extension alias).
+
+Notice we are using a Controller here, this means your element has to be a Controller Host (TODO: Insert link to story about Controller Host also available through the UmbElementMixin)
+
+```ts
+this.myModalRegistration = new UmbModalRouteRegistrationController(this, UMB_LINK_PICKER_MODAL_TOKEN)
+	.onSubmit((submitData) => {
+		console.log('Modal submitted with data'.submitData);
+	})
+	.observeRouteBuilder((routeBuilder) => {
+		this._modalRouteBuilder = routeBuilder;
+	});
+```
+
+The registration holds an instance of its UmbModalHandler when the modal it active.
+The modal registration accepts 4 different callbacks:
+
+- onSetup - called when the modal is opened
+- onSubmit - called when the modal is submitted
+- onReject - called when the modal is rejected
+- observeRouteBuilder - called when the modal route changes, use the given route builder to build a route to open the modal.
+
+#### TODOS:
+
+descripe the addional features of the route Registration:
+
+##### Hints:
+
+- Add unique parts to the path. (How is this cone properly as part of a Property Editor)
+- A modal registred in a dashboard can be relatively simple.
+- A modal registred in a property editor, needs to become specific for the property and the variant of that property.
+
+- Build some data for the setup.
+- Reject a modal by returning false in setup.
+- Use a param as part of setup to determin the data going to the modal.
+
+#### Generate the URL to a Modal Route Registration
+
+The Modal registration has an option to retrive a URL Builder, this is a function that can be used to generate a URL to a modal.
+
+```ts
+const modalLink = _myUrlBuilder?.({ alias: 'my-input-alias' });
+```
+
+The modalLink from above could look like: /umbraco/backoffice/my/location/modal/Our.Modal.SomethingPicker/my-input-alias
+
+Notice the Property Editor registration will add the property alias and variant id to the URL, so it becomes:
+
+/umbraco/backoffice/my/location/modal/Our.Modal.SomethingPicker/my-property-alias/en-us/my-input-alias
+
+#### Open A Modal at own initiative
 
 A modal can be opened by calling the open method on the UmbModalContext. The methods will accept a modal token (or extension alias), an optional dataset, and optional modal options. It returns an instance of UmbModalHandler.
 
diff --git a/src/Umbraco.Web.UI.Client/src/stories/extending/modals/intro.mdx b/src/Umbraco.Web.UI.Client/src/stories/extending/modals/intro.mdx
index 4be5f44de7..cde473b6b8 100644
--- a/src/Umbraco.Web.UI.Client/src/stories/extending/modals/intro.mdx
+++ b/src/Umbraco.Web.UI.Client/src/stories/extending/modals/intro.mdx
@@ -54,73 +54,4 @@ export const MY_SOMETHING_PICKER_MODAL = new UmbModalToken<UmbLinkPickerModalDat
 
 ### Make a modal registration
 
-When registrering you need to be aware about the scope of the modal.
-A modal registred in a dashboard can be relatively simple.
-A modal registred in a property editor, needs to become specific for the property and the variant of that property.
-
-Notice we are using a Controller here, this means your element has to be a Controller Host (TODO: Insert link to story about Controller Host also available through the UmbElementMixin)
-
-#### Simple Modal Registration
-
-```ts
-new UmbPropertyEditorModalRegistrationController(this, MY_SOMETHING_PICKER_MODAL, {
-	path: `:alias`,
-	onSetup: (params) => {
-		const aliasParam = params.alias;
-		if (!aliasParam) return false;
-		// In this example alias is not being used, but we could use it to get the right data set for the modal.
-
-		// Make a Data object to be used in the modal:
-		return {
-			key: this.myCurrentValue,
-		};
-	},
-	onSubmit: (submitData) => {
-		// Here we got the Result object from the modal, which we can use to get the new selected key.
-		this.myCurrentValue = submitData.key;
-	},
-	getUrlBuilder: (urlBuilder) => {
-		// Here we got a urlBuilder, read further down this document for more into on this:
-		this._myUrlBuilder = urlBuilder;
-	},
-});
-```
-
-#### Modal Registration in a Property Editor
-
-```ts
-new UmbPropertyEditorModalRegistrationController(this, MY_SOMETHING_PICKER_MODAL, {
-	path: `:key`,
-	onSetup: (params) => {
-		const keyParam = params.key;
-		if (!keyParam) return false;
-
-		// Make a Data object to be used in the modal:
-		return {
-			key: keyParam,
-		};
-	},
-	onSubmit: (submitData) => {
-		// Here we got the Result object from the modal:
-		this._mySetPickedKey(submitData.key);
-	},
-	getUrlBuilder: (urlBuilder) => {
-		// Here we got a urlBuilder, read further down this document for more into on this:
-		this._myUrlBuilder = urlBuilder;
-	},
-});
-```
-
-## Generate the URL to a Modal
-
-The Modal registration has an option to retrive a URL Builder, this is a function that can be used to generate a URL to a modal.
-
-```ts
-const modalLink = _myUrlBuilder?.({ alias: 'my-input-alias' });
-```
-
-The modalLink from above could look like: /umbraco/backoffice/my/location/modal/Our.Modal.SomethingPicker/my-input-alias
-
-Notice the Property Editor registration will add the property alias and variant id to the URL, so it becomes:
-
-/umbraco/backoffice/my/location/modal/Our.Modal.SomethingPicker/my-property-alias/en-us/my-input-alias
+# TODO Link to modal documentation here.

From fb180fd400688e46d3dea9c8f4dc53cacb886851 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 11:02:46 +0100
Subject: [PATCH 47/96] remove console.logs

---
 .../input-multi-url-picker/input-multi-url-picker.element.ts    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index 074d77d9cc..a36ddef713 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -32,13 +32,11 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 
 	@property()
 	public set alias(value: string | undefined) {
-		console.log('alias', value);
 		this.myModalRegistration.setUniqueIdentifier('propertyAlias', value);
 	}
 
 	@property()
 	public set variantId(value: string | UmbVariantId | undefined) {
-		console.log('variantId', value);
 		this.myModalRegistration.setUniqueIdentifier('variantId', value?.toString());
 	}
 

From 9c72235177f54f14e18aa02e71296f534961a08a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 11:05:55 +0100
Subject: [PATCH 48/96] lint fixes

---
 .../provide/context-provider.controller.test.ts        |  2 +-
 src/Umbraco.Web.UI.Client/src/app.ts                   |  2 +-
 .../repository/document-type.repository.ts             |  8 ++++----
 .../documents/repository/document.repository.ts        |  8 ++++----
 .../documents/documents/workspace/manifests.ts         |  8 ++++----
 .../views/info/document-info-workspace-view.element.ts |  2 +-
 .../media-grid-collection-view.element.ts              |  2 +-
 .../media/media/repository/media.repository.ts         | 10 +++++-----
 .../backoffice/media/media/repository/media.store.ts   |  2 +-
 .../src/backoffice/media/media/workspace/manifests.ts  |  2 +-
 .../media/workspace/media-workspace-edit.element.ts    |  2 +-
 .../media/media/workspace/media-workspace.context.ts   |  2 +-
 .../media/media/workspace/media-workspace.element.ts   |  4 ++--
 .../workspace/member-group-workspace-edit.element.ts   |  4 ++--
 .../views/health-check-overview.element.ts             |  2 +-
 .../data-types/repository/data-type.repository.ts      |  8 ++++----
 .../backoffice-frame/backoffice-main.element.ts        |  6 +++---
 .../components/code-editor/code-editor.controller.ts   |  2 +-
 .../shared/components/debug/debug.element.ts           |  2 +-
 .../workspace-property/workspace-property.context.ts   |  6 +++---
 .../clear/property-action-clear.element.ts             |  2 +-
 .../property-editor-ui-multi-url-picker.element.ts     |  2 +-
 .../dictionary/repository/dictionary.repository.ts     | 10 +++++-----
 .../dictionary/repository/dictionary.store.ts          |  2 +-
 .../sources/dictionary.detail.server.data.ts           |  4 ++--
 .../workspace/dictionary-workspace.context.ts          |  4 ++--
 .../src/core/mocks/data/dictionary.data.ts             |  2 +-
 .../src/core/mocks/data/media.data.ts                  |  2 +-
 .../src/core/mocks/domains/dictionary.handlers.ts      |  2 +-
 .../src/core/mocks/domains/rte-embed.handlers.ts       |  2 +-
 30 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.controller.test.ts b/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.controller.test.ts
index 481a916122..7946d8b30b 100644
--- a/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.controller.test.ts
+++ b/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.controller.test.ts
@@ -1,7 +1,7 @@
 import { expect, fixture, defineCE } from '@open-wc/testing';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbContextConsumer } from '../consume/context-consumer';
 import { UmbContextProviderController } from './context-provider.controller';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 class MyClass {
 	prop = 'value from provider';
diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts
index c653dae2a4..d466b30bca 100644
--- a/src/Umbraco.Web.UI.Client/src/app.ts
+++ b/src/Umbraco.Web.UI.Client/src/app.ts
@@ -17,11 +17,11 @@ import { UUIIconRegistryEssential } from '@umbraco-ui/uui';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
+import { UmbIconStore } from './core/stores/icon/icon.store';
 import type { Guard, IRoute } from '@umbraco-cms/internal/router';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 import { OpenAPI, RuntimeLevelModel, ServerResource } from '@umbraco-cms/backoffice/backend-api';
-import { UmbIconStore } from './core/stores/icon/icon.store';
 import { umbDebugContextEventType } from '@umbraco-cms/backoffice/context-api';
 
 @customElement('umb-app')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.repository.ts
index 174b6d4f8f..7191342a68 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.repository.ts
@@ -1,3 +1,7 @@
+import { DocumentTypeTreeServerDataSource } from './sources/document-type.tree.server.data';
+import { UmbDocumentTypeServerDataSource } from './sources/document-type.server.data';
+import { UmbDocumentTypeTreeStore, UMB_DOCUMENT_TYPE_TREE_STORE_CONTEXT_TOKEN } from './document-type.tree.store';
+import { UmbDocumentTypeStore, UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN } from './document-type.store';
 import type {
 	RepositoryTreeDataSource,
 	UmbTreeRepository,
@@ -7,10 +11,6 @@ import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ProblemDetailsModel, DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
-import { DocumentTypeTreeServerDataSource } from './sources/document-type.tree.server.data';
-import { UmbDocumentTypeServerDataSource } from './sources/document-type.server.data';
-import { UmbDocumentTypeTreeStore, UMB_DOCUMENT_TYPE_TREE_STORE_CONTEXT_TOKEN } from './document-type.tree.store';
-import { UmbDocumentTypeStore, UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN } from './document-type.store';
 
 type ItemType = DocumentTypeResponseModel;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.repository.ts
index dd7fc1789c..8bc17134bd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.repository.ts
@@ -1,3 +1,7 @@
+import { DocumentTreeServerDataSource } from './sources/document.tree.server.data';
+import { UmbDocumentTreeStore, UMB_DOCUMENT_TREE_STORE_CONTEXT_TOKEN } from './document.tree.store';
+import { UmbDocumentStore, UMB_DOCUMENT_STORE_CONTEXT_TOKEN } from './document.store';
+import { UmbDocumentServerDataSource } from './sources/document.server.data';
 import type {
 	RepositoryTreeDataSource,
 	UmbTreeRepository,
@@ -7,10 +11,6 @@ import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ProblemDetailsModel, DocumentResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
-import { DocumentTreeServerDataSource } from './sources/document.tree.server.data';
-import { UmbDocumentTreeStore, UMB_DOCUMENT_TREE_STORE_CONTEXT_TOKEN } from './document.tree.store';
-import { UmbDocumentStore, UMB_DOCUMENT_STORE_CONTEXT_TOKEN } from './document.store';
-import { UmbDocumentServerDataSource } from './sources/document.server.data';
 
 type ItemType = DocumentResponseModel;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/manifests.ts
index bc08b979de..d8ada1659b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/manifests.ts
@@ -1,13 +1,13 @@
+import { UmbDocumentSaveAndPublishWorkspaceAction } from './actions/save-and-publish.action';
+import { UmbDocumentSaveAndPreviewWorkspaceAction } from './actions/save-and-preview.action';
+import { UmbSaveAndScheduleDocumentWorkspaceAction } from './actions/save-and-schedule.action';
+import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 import type {
 	ManifestWorkspace,
 	ManifestWorkspaceAction,
 	ManifestWorkspaceView,
 	ManifestWorkspaceViewCollection,
 } from '@umbraco-cms/backoffice/extensions-registry';
-import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
-import { UmbDocumentSaveAndPublishWorkspaceAction } from './actions/save-and-publish.action';
-import { UmbDocumentSaveAndPreviewWorkspaceAction } from './actions/save-and-preview.action';
-import { UmbSaveAndScheduleDocumentWorkspaceAction } from './actions/save-and-schedule.action';
 
 const workspace: ManifestWorkspace = {
 	type: 'workspace',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/info/document-info-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
index 439a076c13..fbf7e3544b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
@@ -3,9 +3,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { repeat } from 'lit/directives/repeat.js';
 import { customElement, state } from 'lit/decorators.js';
 import { UUIPaginationEvent } from '@umbraco-ui/uui';
+import { UmbEntityWorkspaceContextInterface } from '../../../../../shared/components/workspace/workspace-context/workspace-entity-context.interface';
 import type { DocumentResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbEntityWorkspaceContextInterface } from '../../../../../shared/components/workspace/workspace-context/workspace-entity-context.interface';
 
 interface HistoryNode {
 	userId?: number;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-grid-collection-view.element.ts
index 22ffd35e91..50fb77a885 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-grid-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-grid-collection-view.element.ts
@@ -2,10 +2,10 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from '../../../shared/collection/collection.context';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 // TODO: this should be a lib import
-import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from '../../../shared/collection/collection.context';
 
 @customElement('umb-media-grid-collection-view')
 export class UmbMediaGridCollectionViewElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
index 24e5fd28aa..6b74f80cf9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
@@ -1,14 +1,14 @@
+import type { MediaDetails } from '../';
+import { MediaTreeServerDataSource } from './sources/media.tree.server.data';
+import { UmbMediaTreeStore, UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN } from './media.tree.store';
+import { UmbMediaStore, UMB_MEDIA_STORE_CONTEXT_TOKEN } from './media.store';
+import { UmbMediaDetailServerDataSource } from './sources/media.detail.server.data';
 import type { RepositoryTreeDataSource } from '@umbraco-cms/backoffice/repository';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbDetailRepository } from '@umbraco-cms/backoffice/repository';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
-import type { MediaDetails } from '../';
-import { MediaTreeServerDataSource } from './sources/media.tree.server.data';
-import { UmbMediaTreeStore, UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN } from './media.tree.store';
-import { UmbMediaStore, UMB_MEDIA_STORE_CONTEXT_TOKEN } from './media.store';
-import { UmbMediaDetailServerDataSource } from './sources/media.detail.server.data';
 import type { UmbTreeRepository } from 'libs/repository/tree-repository.interface';
 
 type ItemDetailType = MediaDetails;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.store.ts
index a34e9e8da0..2d5dfc4c4c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.store.ts
@@ -1,8 +1,8 @@
+import type { MediaDetails } from '../';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
-import type { MediaDetails } from '../';
 
 /**
  * @export
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/manifests.ts
index c58ae9fbf1..7dbf6b198f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { MEDIA_REPOSITORY_ALIAS } from '../repository/manifests';
 import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 import type {
 	ManifestWorkspace,
@@ -5,7 +6,6 @@ import type {
 	ManifestWorkspaceView,
 	ManifestWorkspaceViewCollection,
 } from '@umbraco-cms/backoffice/extensions-registry';
-import { MEDIA_REPOSITORY_ALIAS } from '../repository/manifests';
 
 const workspace: ManifestWorkspace = {
 	type: 'workspace',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts
index 264902479b..5d59761c98 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts
@@ -1,8 +1,8 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbMediaWorkspaceContext } from './media-workspace.context';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-media-workspace-edit')
 export class UmbMediaWorkspaceEditElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.context.ts
index 7bffe8f9af..399b057a61 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.context.ts
@@ -1,9 +1,9 @@
 import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context';
 import { UmbMediaRepository } from '../repository/media.repository';
 import type { UmbEntityWorkspaceContextInterface } from '../../../shared/components/workspace/workspace-context/workspace-entity-context.interface';
+import type { MediaDetails } from '../';
 import { appendToFrozenArray, ObjectState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
-import type { MediaDetails } from '../';
 
 type EntityType = MediaDetails;
 export class UmbMediaWorkspaceContext
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.element.ts
index a2595863bf..cc3e954a76 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.element.ts
@@ -1,10 +1,10 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { IRoute, IRoutingInfo } from '@umbraco-cms/internal/router';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbMediaWorkspaceContext } from './media-workspace.context';
 import { UmbMediaWorkspaceEditElement } from './media-workspace-edit.element';
+import { IRoute, IRoutingInfo } from '@umbraco-cms/internal/router';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-media-workspace')
 export class UmbMediaWorkspaceElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts
index b4d65802a2..29149724d4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts
@@ -1,10 +1,10 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import type { MemberGroupDetails } from '@umbraco-cms/backoffice/models';
 import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
 import { UmbWorkspaceMemberGroupContext } from './member-group-workspace.context';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import type { MemberGroupDetails } from '@umbraco-cms/backoffice/models';
 
 /**
  * @element umb-member-group-edit-workspace
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts
index 71114fb667..dddf878b38 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts
@@ -3,11 +3,11 @@ import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UUIButtonState } from '@umbraco-ui/uui';
 
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import {
 	UmbHealthCheckDashboardContext,
 	UMB_HEALTHCHECK_DASHBOARD_CONTEXT_TOKEN,
 } from '../health-check-dashboard.context';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 import './health-check-group-box-overview.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.repository.ts
index bcdd0b5099..7b15596132 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.repository.ts
@@ -1,3 +1,7 @@
+import { UmbDataTypeTreeStore, UMB_DATA_TYPE_TREE_STORE_CONTEXT_TOKEN } from './data-type.tree.store';
+import { UmbDataTypeServerDataSource } from './sources/data-type.server.data';
+import { UmbDataTypeStore, UMB_DATA_TYPE_STORE_CONTEXT_TOKEN } from './data-type.store';
+import { DataTypeTreeServerDataSource } from './sources/data-type.tree.server.data';
 import type {
 	RepositoryTreeDataSource,
 	UmbTreeRepository,
@@ -7,10 +11,6 @@ import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ProblemDetailsModel, DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
-import { UmbDataTypeTreeStore, UMB_DATA_TYPE_TREE_STORE_CONTEXT_TOKEN } from './data-type.tree.store';
-import { UmbDataTypeServerDataSource } from './sources/data-type.server.data';
-import { UmbDataTypeStore, UMB_DATA_TYPE_STORE_CONTEXT_TOKEN } from './data-type.store';
-import { DataTypeTreeServerDataSource } from './sources/data-type.tree.server.data';
 
 type ItemType = DataTypeResponseModel;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
index e4b2dde68b..405d17304d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
@@ -2,13 +2,13 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { state } from 'lit/decorators.js';
+import { UmbSectionElement } from '../section/section.element';
+import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section/section.context';
+import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './backoffice.context';
 import type { UmbRouterSlotChangeEvent } from '@umbraco-cms/internal/router';
 import type { ManifestSection } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { createExtensionElementOrFallback } from '@umbraco-cms/backoffice/extensions-api';
-import { UmbSectionElement } from '../section/section.element';
-import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section/section.context';
-import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './backoffice.context';
 
 @defineElement('umb-backoffice-main')
 export class UmbBackofficeMain extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.controller.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.controller.ts
index f79acaeace..525e4442ef 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.controller.ts
@@ -1,4 +1,3 @@
-import { UmbChangeEvent, UmbInputEvent } from '@umbraco-cms/backoffice/events';
 import * as monaco from 'monaco-editor';
 import {
 	CodeEditorConstructorOptions,
@@ -12,6 +11,7 @@ import {
 	UmbCodeEditorSelection,
 } from './code-editor.model';
 import themes from './themes';
+import { UmbChangeEvent, UmbInputEvent } from '@umbraco-cms/backoffice/events';
 
 //TODO - consider firing change event on blur
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
index 559f490972..128dbb33bb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
@@ -1,10 +1,10 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing, TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { UMB_CONTEXT_DEBUGGER_MODAL_TOKEN } from './modals/debug';
 import { UmbContextDebugRequest } from '@umbraco-cms/backoffice/context-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
-import { UMB_CONTEXT_DEBUGGER_MODAL_TOKEN } from './modals/debug';
 
 @customElement('umb-debug')
 export class UmbDebug extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
index 453b373c79..655d0f11d3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
@@ -1,3 +1,6 @@
+import { UmbVariantId } from '../../variants/variant-id.class';
+import { UmbWorkspaceVariableEntityContextInterface } from '../workspace/workspace-context/workspace-variable-entity-context.interface';
+import { UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN } from '../workspace/workspace-variant/workspace-variant.context';
 import type { DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { ClassState, ObjectState, StringState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
@@ -6,9 +9,6 @@ import {
 	UmbContextProviderController,
 	UmbContextToken,
 } from '@umbraco-cms/backoffice/context-api';
-import { UmbVariantId } from '../../variants/variant-id.class';
-import { UmbWorkspaceVariableEntityContextInterface } from '../workspace/workspace-context/workspace-variable-entity-context.interface';
-import { UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN } from '../workspace/workspace-variant/workspace-variant.context';
 
 // If we get this from the server then we can consider using TypeScripts Partial<> around the model from the Management-API.
 export type WorkspacePropertyData<ValueType> = {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.element.ts
index 9e34b3bedd..12357bb9e7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/clear/property-action-clear.element.ts
@@ -1,11 +1,11 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbPropertyAction } from '../shared/property-action/property-action.model';
 import {
 	UmbWorkspacePropertyContext,
 	UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN,
 } from '../../components/workspace-property/workspace-property.context';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-property-action-clear')
 export class UmbPropertyActionClearElement extends UmbLitElement implements UmbPropertyAction {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
index fb7aa67389..e4691ec48e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
@@ -4,10 +4,10 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { UmbInputMultiUrlPickerElement } from '../../../../shared/components/input-multi-url-picker/input-multi-url-picker.element';
 import { UmbLinkPickerLink } from '../../../../shared/modals/link-picker';
+import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../../shared/components/workspace-property/workspace-property.context';
 import { UmbPropertyEditorElement } from '@umbraco-cms/backoffice/property-editor';
 import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from 'src/backoffice/shared/components/workspace-property/workspace-property.context';
 
 /**
  * @element umb-property-editor-ui-multi-url-picker
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.repository.ts
index a57b2c645f..59075cfc5a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.repository.ts
@@ -1,13 +1,13 @@
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
-import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
-import { RepositoryTreeDataSource, UmbDetailRepository, UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
-import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 import type { DictionaryDetails } from '../';
 import { UmbDictionaryStore, UMB_DICTIONARY_STORE_CONTEXT_TOKEN } from './dictionary.store';
 import { UmbDictionaryDetailServerDataSource } from './sources/dictionary.detail.server.data';
 import { UmbDictionaryTreeStore, UMB_DICTIONARY_TREE_STORE_CONTEXT_TOKEN } from './dictionary.tree.store';
 import { DictionaryTreeServerDataSource } from './sources/dictionary.tree.server.data';
+import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
+import { RepositoryTreeDataSource, UmbDetailRepository, UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
+import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 
 export class UmbDictionaryRepository implements UmbTreeRepository, UmbDetailRepository<DictionaryDetails> {
 	#init!: Promise<unknown>;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.store.ts
index f549e112b4..210f98c8dc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.store.ts
@@ -1,8 +1,8 @@
+import type { DictionaryDetails } from '../';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
-import type { DictionaryDetails } from '../';
 
 /**
  * @export
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/sources/dictionary.detail.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/sources/dictionary.detail.server.data.ts
index 1fb529a992..8a972cc326 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/sources/dictionary.detail.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/sources/dictionary.detail.server.data.ts
@@ -1,3 +1,5 @@
+import type { DictionaryDetails } from '../../';
+import { DictionaryDetailDataSource } from './dictionary.details.server.data.interface';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 import {
@@ -6,8 +8,6 @@ import {
 	LanguageResource,
 	ProblemDetailsModel,
 } from '@umbraco-cms/backoffice/backend-api';
-import type { DictionaryDetails } from '../../';
-import { DictionaryDetailDataSource } from './dictionary.details.server.data.interface';
 
 /**
  * @description - A data source for the Dictionary detail that fetches data from the server
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.context.ts
index fceb0e11ba..0692a4ffe9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.context.ts
@@ -1,9 +1,9 @@
-import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbDictionaryRepository } from '../repository/dictionary.repository';
 import { UmbWorkspaceContext } from '../../../../backoffice/shared/components/workspace/workspace-context/workspace-context';
 import { UmbEntityWorkspaceContextInterface } from '../../../../backoffice/shared/components/workspace/workspace-context/workspace-entity-context.interface';
 import type { DictionaryDetails } from '../';
+import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
 
 type EntityType = DictionaryDetails;
 
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/dictionary.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/dictionary.data.ts
index c3b27857dd..8a76f7c398 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/dictionary.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/dictionary.data.ts
@@ -1,7 +1,7 @@
-import type { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { DictionaryDetails } from '../../../backoffice/translation/dictionary';
 import { UmbEntityData } from './entity.data';
 import { createEntityTreeItem } from './utils';
+import type { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 export const data: Array<DictionaryDetails> = [
 	{
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/media.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/media.data.ts
index b7f70f41b9..82f1c4d25a 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/media.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/media.data.ts
@@ -1,7 +1,7 @@
-import { ContentTreeItemResponseModel, PagedContentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { MediaDetails } from '../../../backoffice/media/media';
 import { UmbEntityData } from './entity.data';
 import { createContentTreeItem } from './utils';
+import { ContentTreeItemResponseModel, PagedContentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 export const data: Array<MediaDetails> = [
 	{
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/dictionary.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/dictionary.handlers.ts
index e4b837534d..25df97d47a 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/dictionary.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/dictionary.handlers.ts
@@ -1,7 +1,7 @@
 import { rest } from 'msw';
-import { ImportDictionaryRequestModel, DictionaryOverviewResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { DictionaryDetails } from '../../../backoffice/translation/dictionary';
 import { umbDictionaryData } from '../data/dictionary.data';
+import { ImportDictionaryRequestModel, DictionaryOverviewResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 const uploadResponse: ImportDictionaryRequestModel = {
 	fileName: 'c:/path/to/tempfilename.udt',
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts
index b99050a812..3a8b1247e1 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts
@@ -1,6 +1,6 @@
 import { rest } from "msw";
-import { umbracoPath } from "@umbraco-cms/backoffice/utils";
 import { OEmbedResult, OEmbedStatus } from "../../../backoffice/shared/modals/embedded-media";
+import { umbracoPath } from "@umbraco-cms/backoffice/utils";
 
 export const handlers = [
 	rest.get(umbracoPath('/rteembed'), (req, res, ctx) => {

From 79f6eea67f17c9c3ef769e75b2c7911574b7348c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 11:13:39 +0100
Subject: [PATCH 49/96] type corrections

---
 .../libs/modal/modal-route-registration.ts      |  2 +-
 .../libs/modal/modal.context.ts                 |  2 +-
 .../src/core/router/route.context.ts            | 17 +----------------
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
index 9ba22c4d70..69ad304123 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
@@ -99,7 +99,7 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 	};
 
 	routeSetup(modalContext: UmbModalContext, params: Params) {
-		const modalData = this.#onSetupCallback ? this.#onSetupCallback(params) : true;
+		const modalData = this.#onSetupCallback ? this.#onSetupCallback(params) : undefined;
 		if (modalData !== false) {
 			this.#modalHandler = modalContext.open(this.#modalAlias, modalData, this.modalConfig);
 			this.#modalHandler.onSubmit().then(this.#onSubmit, this.#onReject);
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
index 7fd5caf42c..b237b925b0 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
@@ -78,7 +78,7 @@ export class UmbModalContext {
 	 */
 	public open<ModalData extends object = object, ModalResult = unknown>(
 		modalAlias: string | UmbModalToken<ModalData, ModalResult>,
-		data?: ModalData | true,
+		data?: ModalData,
 		config?: UmbModalConfig
 	) {
 		const modalHandler = new UmbModalHandlerClass(this.host, modalAlias, data, config) as unknown as UmbModalHandler<
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 1468ec1d52..4550de7311 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -4,10 +4,9 @@ import {
 	UmbContextProviderController,
 	UmbContextToken,
 } from '@umbraco-cms/backoffice/context-api';
-import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 import { UmbControllerHostInterface } from 'libs/controller/controller-host.mixin';
 import { UMB_MODAL_CONTEXT_TOKEN } from 'libs/modal/modal.context';
-import { UmbModalRouteOptions, UmbModalRouteRegistration } from 'libs/modal/modal-route-registration';
+import { UmbModalRouteRegistration } from 'libs/modal/modal-route-registration';
 
 const EmptyDiv = document.createElement('div');
 
@@ -39,20 +38,6 @@ export class UmbRouteContext {
 		}
 	}
 
-	/*
-	public registerModal<D extends object = object, R = any>(
-		alias: UmbModalToken<D, R> | string,
-		options: UmbModalRouteOptions<D, R>
-	) {
-		const registration = new UmbModalRouteRegistration(alias, options);
-
-		this.#modalRegistrations.push(registration);
-		this.#generateNewUrlBuilder(registration);
-		this.#generateContextRoutes();
-		return registration;
-	}
-	*/
-
 	public registerModal(registration: UmbModalRouteRegistration) {
 		this.#modalRegistrations.push(registration);
 		this.#generateNewUrlBuilder(registration);

From 8c07b4184fa20182529b26308ab823872de55984 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 11:13:56 +0100
Subject: [PATCH 50/96] wording

---
 src/Umbraco.Web.UI.Client/src/core/router/route.context.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 4550de7311..c686688be7 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -83,7 +83,7 @@ export class UmbRouteContext {
 		});
 
 		// Add an empty route, so that we can always have a route to go to for closing the modals.
-		// TODO: Check if this is nesecary with the _internal_modalRouterChanged present.
+		// TODO: Check if this is necessary with the _internal_modalRouterChanged present.
 		this.#contextRoutes.push({
 			path: '',
 			component: EmptyDiv,

From 605c6c47997625f2299b10195cf505476c03a817 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 11:17:42 +0100
Subject: [PATCH 51/96] clean up

---
 src/Umbraco.Web.UI.Client/src/core/router/route.context.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index c686688be7..40eae2d516 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -82,8 +82,7 @@ export class UmbRouteContext {
 			return this.#generateRoute(modalRegistration);
 		});
 
-		// Add an empty route, so that we can always have a route to go to for closing the modals.
-		// TODO: Check if this is necessary with the _internal_modalRouterChanged present.
+		// Add an empty route, so there is a route for the router to react on when no modals are open.
 		this.#contextRoutes.push({
 			path: '',
 			component: EmptyDiv,
@@ -98,7 +97,7 @@ export class UmbRouteContext {
 		this.#routerBasePath = routerBasePath;
 		this.#generateNewUrlBuilders();
 	}
-	// TODO: what is going on here, We need to make sure if the modals are still relevant then not close them.
+
 	// Also notice each registration should now hold its handler when its active.
 	public _internal_modalRouterChanged(activeModalPath: string | undefined) {
 		if (this.#activeModalPath === activeModalPath) return;

From 9ed16e6eaed87ce26693f27abb2108ebb05b5f02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 11:24:11 +0100
Subject: [PATCH 52/96] move method

---
 .../src/core/router/route.context.ts                 | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index 40eae2d516..bd9233aab9 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -32,12 +32,6 @@ export class UmbRouteContext {
 		});
 	}
 
-	#removeModalPath(info: IRoutingInfo) {
-		if (window.location.href.includes(info.match.fragments.consumed)) {
-			window.history.pushState({}, '', window.location.href.split(info.match.fragments.consumed)[0]);
-		}
-	}
-
 	public registerModal(registration: UmbModalRouteRegistration) {
 		this.#modalRegistrations.push(registration);
 		this.#generateNewUrlBuilder(registration);
@@ -77,6 +71,12 @@ export class UmbRouteContext {
 		};
 	}
 
+	#removeModalPath(info: IRoutingInfo) {
+		if (window.location.href.includes(info.match.fragments.consumed)) {
+			window.history.pushState({}, '', window.location.href.split(info.match.fragments.consumed)[0]);
+		}
+	}
+
 	#generateContextRoutes() {
 		this.#contextRoutes = this.#modalRegistrations.map((modalRegistration) => {
 			return this.#generateRoute(modalRegistration);

From 323ef15e19d72636fd36778d2883d6244c2b63e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 15:53:12 +0100
Subject: [PATCH 53/96] open method and docs

---
 src/Umbraco.Web.UI.Client/libs/modal/index.ts |  1 +
 .../modal-route-registration.controller.ts    |  7 +-
 .../libs/modal/modal-route-registration.ts    | 11 ++-
 .../libs/router/index.ts                      |  0
 .../input-multi-url-picker.element.ts         |  4 +-
 .../src/core/modal/stories/modal.mdx          | 77 ++++++++++++++++++-
 .../src/core/router/route.context.ts          |  7 +-
 7 files changed, 92 insertions(+), 15 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/libs/router/index.ts

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/index.ts
index f7eb94b760..eeb1d6be59 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/index.ts
@@ -1,5 +1,6 @@
 export * from './modal.context';
 export * from './modal-handler';
+export * from './modal-route-registration';
 export * from './modal-route-registration.controller';
 export * from './token/modal-token';
 export * from './modal.interfaces';
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
index 9b0c01db4d..8c13c00e5d 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
@@ -1,4 +1,3 @@
-import type { UmbRouteContext } from '../../src/core/router/route.context';
 // TODO: Be aware here we import a class from src!
 import { UMB_ROUTE_CONTEXT_TOKEN } from '../../src/core/router/route.context';
 import type { UmbControllerInterface } from '../controller';
@@ -7,8 +6,6 @@ import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-ap
 import { UmbModalConfig, UmbModalToken } from '@umbraco-cms/backoffice/modal';
 import { UmbControllerHostInterface } from 'libs/controller/controller-host.mixin';
 
-export type UmbModalRegistrationToken = UmbModalRouteRegistration;
-
 export class UmbModalRouteRegistrationController<D extends object = object, R = any>
 	extends UmbModalRouteRegistration<D, R>
 	implements UmbControllerInterface
@@ -18,8 +15,8 @@ export class UmbModalRouteRegistrationController<D extends object = object, R =
 	#configuredPath: string;
 	#uniqueParts: Map<string, string | undefined>;
 
-	#routeContext?: UmbRouteContext;
-	#modalRegistration?: UmbModalRegistrationToken;
+	#routeContext?: typeof UMB_ROUTE_CONTEXT_TOKEN.TYPE;
+	#modalRegistration?: UmbModalRouteRegistration;
 
 	public get unique() {
 		return undefined;
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
index 69ad304123..095da5f546 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts
@@ -17,6 +17,7 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 	#onRejectCallback?: () => void;
 
 	#modalHandler: UmbModalHandler<UmbModalTokenData, UmbModalTokenResult> | undefined;
+	#routeBuilder?: UmbModalRouteBuilder;
 	#urlBuilderCallback: ((urlBuilder: UmbModalRouteBuilder) => void) | undefined;
 
 	// Notice i removed the key in the transferring to this class.
@@ -58,6 +59,12 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 		return !!this.#modalHandler;
 	}
 
+	public open(params: { [key: string]: string | number }) {
+		if (this.active) return;
+
+		window.history.pushState({}, '', this.#routeBuilder?.(params));
+	}
+
 	/**
 	 * Returns the modal handler if the modal is currently active. Otherwise its undefined.
 	 */
@@ -65,14 +72,12 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 		return this.#modalHandler;
 	}
 
-	public usesRouteBuilder(): boolean {
-		return !!this.#urlBuilderCallback;
-	}
 	public observeRouteBuilder(callback: (urlBuilder: UmbModalRouteBuilder) => void) {
 		this.#urlBuilderCallback = callback;
 		return this;
 	}
 	public _internal_setRouteBuilder(urlBuilder: UmbModalRouteBuilder) {
+		this.#routeBuilder = urlBuilder;
 		this.#urlBuilderCallback?.(urlBuilder);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/libs/router/index.ts b/src/Umbraco.Web.UI.Client/libs/router/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index a36ddef713..cfef87d2ed 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -5,9 +5,9 @@ import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL_TOKEN } from '../../modals/link-picker';
 import type { UmbVariantId } from '../../variants/variant-id.class';
+import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbModalRouteRegistrationController } from 'libs/modal/modal-route-registration.controller';
-import type { UmbModalRouteBuilder } from 'libs/modal/modal-route-registration';
 
 /**
  * @element umb-input-multi-url-picker
@@ -206,7 +206,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 
 	// TODO: We should get a href property on uui-ref-node, and not use this method:
 	private _temporary_onClick_editItem(index: number) {
-		window.history.pushState({}, '', this._modalRoute?.({ index: index || -1 }));
+		this.myModalRegistration.open({ index });
 	}
 
 	render() {
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
index dcf18f274d..bff928ca0b 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
@@ -82,6 +82,81 @@ descripe the addional features of the route Registration:
 - Reject a modal by returning false in setup.
 - Use a param as part of setup to determin the data going to the modal.
 
+#### Modal registration for UI as part of a Property Editor
+
+```ts
+
+
+	@property()
+	public set alias(value: string | undefined) {
+		this.myModalRegistration.setUniqueIdentifier('propertyAlias', value);
+	}
+
+	@property()
+	public set variantId(value: string | UmbVariantId | undefined) {
+		this.myModalRegistration.setUniqueIdentifier('variantId', value?.toString());
+	}
+
+	private _items = [
+		{ name: 'Item 1' },
+		{ name: 'Item 2' },
+		{ name: 'Item 3' },
+	]
+
+
+	constructor() {
+		super();
+
+		this.myModalRegistration = new UmbModalRouteRegistrationController(
+			this,
+			MY_MODAL_TOKEN,
+			`:index`,
+			new Map([
+				['propertyAlias', undefined],
+				['variantId', undefined],
+			])
+		)
+		.onSetup((params) => {
+			// Get item index:
+			const indexParam = params.index;
+			if (!indexParam) return false;
+			let index: number | null = parseInt(params.index);
+			if (Number.isNaN(index)) return false;
+
+			// Use the index to find data:
+			let data = null;
+			if (index >= 0 && index < this._items.length) {
+				data = this._items[index];
+			} else {
+				// If not then make a new pick:
+				index = null;
+			}
+
+			return {
+				index: index,
+				itemData: {
+					name: data?.name
+				},
+			};
+		})
+		.onSubmit((submitData) => {
+			if (!submitData) return;
+			this._items[submitData.index] = submitData.itemData;
+		})
+		.observeRouteBuilder((routeBuilder) => {
+			this._modalRouteBuilder = routeBuilder;
+		});
+	}
+
+	render() {
+		return html`
+			${this._items?.map((item, index) =>
+				html`<uui-button look="placeholder" label="Edit item ${index}" .href=${this._modalRouteBuilder?.({ index: -1 })}>Add</uui-button>`
+			)}
+		`;
+	}
+```
+
 #### Generate the URL to a Modal Route Registration
 
 The Modal registration has an option to retrive a URL Builder, this is a function that can be used to generate a URL to a modal.
@@ -109,7 +184,7 @@ class MyElement extends UmbElementMixin(LitElement) {
 
 	constructor() {
 		super();
-		this.consumeContext(UMB_MODAL_CONTEXT_ALIAS, (instance) => {
+		this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => {
 			this.#modalContext = instance;
 			// modalContext is now ready to be used
 		});
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
index bd9233aab9..20999b8554 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
@@ -4,9 +4,8 @@ import {
 	UmbContextProviderController,
 	UmbContextToken,
 } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from 'libs/controller/controller-host.mixin';
-import { UMB_MODAL_CONTEXT_TOKEN } from 'libs/modal/modal.context';
-import { UmbModalRouteRegistration } from 'libs/modal/modal-route-registration';
+import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UMB_MODAL_CONTEXT_TOKEN, UmbModalRouteRegistration } from '@umbraco-cms/backoffice/modal';
 
 const EmptyDiv = document.createElement('div');
 
@@ -118,7 +117,7 @@ export class UmbRouteContext {
 	}
 
 	#generateNewUrlBuilder = (modalRegistration: UmbModalRouteRegistration) => {
-		if (!modalRegistration.usesRouteBuilder() || !this.#routerBasePath) return;
+		if (!this.#routerBasePath) return;
 
 		const routeBasePath = this.#routerBasePath.endsWith('/') ? this.#routerBasePath : this.#routerBasePath + '/';
 		const localPath = `modal/${modalRegistration.alias.toString()}/${modalRegistration.path}`;

From 13d4bb587338e7cdd9bcfc0fcfadf5d579d95f17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:20:39 +0100
Subject: [PATCH 54/96] move router to libs

---
 .../libs/modal/modal-route-registration.controller.ts      | 2 +-
 src/Umbraco.Web.UI.Client/libs/router/index.ts             | 3 +++
 .../{src/core => libs}/router/route-location.interface.ts  | 0
 .../{src/core => libs}/router/route.context.ts             | 7 ++++---
 .../{src/core => libs}/router/route.interface.ts           | 0
 src/Umbraco.Web.UI.Client/src/core/router/index.ts         | 3 ---
 .../src/core/router/router-slot.element.ts                 | 3 +--
 src/Umbraco.Web.UI.Client/tsconfig.json                    | 1 +
 8 files changed, 10 insertions(+), 9 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/core => libs}/router/route-location.interface.ts (100%)
 rename src/Umbraco.Web.UI.Client/{src/core => libs}/router/route.context.ts (95%)
 rename src/Umbraco.Web.UI.Client/{src/core => libs}/router/route.interface.ts (100%)

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
index 8c13c00e5d..f1ef34e69c 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
@@ -1,5 +1,5 @@
 // TODO: Be aware here we import a class from src!
-import { UMB_ROUTE_CONTEXT_TOKEN } from '../../src/core/router/route.context';
+import { UMB_ROUTE_CONTEXT_TOKEN } from '../router/route.context';
 import type { UmbControllerInterface } from '../controller';
 import { UmbModalRouteRegistration } from './modal-route-registration';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
diff --git a/src/Umbraco.Web.UI.Client/libs/router/index.ts b/src/Umbraco.Web.UI.Client/libs/router/index.ts
index e69de29bb2..5a49b1769d 100644
--- a/src/Umbraco.Web.UI.Client/libs/router/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/router/index.ts
@@ -0,0 +1,3 @@
+export * from './route-location.interface';
+export * from './route.context';
+export * from './route.interface';
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route-location.interface.ts b/src/Umbraco.Web.UI.Client/libs/router/route-location.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/core/router/route-location.interface.ts
rename to src/Umbraco.Web.UI.Client/libs/router/route-location.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts b/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
similarity index 95%
rename from src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
rename to src/Umbraco.Web.UI.Client/libs/router/route.context.ts
index 20999b8554..93cc0f64b8 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
@@ -1,4 +1,5 @@
-import { IRoute, IRoutingInfo, PARAM_IDENTIFIER, stripSlash } from 'router-slot';
+import { IRoutingInfo, PARAM_IDENTIFIER, stripSlash } from 'router-slot';
+import { UmbRoute } from './route.interface';
 import {
 	UmbContextConsumerController,
 	UmbContextProviderController,
@@ -13,7 +14,7 @@ export class UmbRouteContext {
 	//#host: UmbControllerHostInterface;
 	#modalRegistrations: UmbModalRouteRegistration[] = [];
 	#modalContext?: typeof UMB_MODAL_CONTEXT_TOKEN.TYPE;
-	#contextRoutes: IRoute[] = [];
+	#contextRoutes: UmbRoute[] = [];
 	#routerBasePath?: string;
 	#activeModalPath?: string;
 
@@ -49,7 +50,7 @@ export class UmbRouteContext {
 		return `/modal/${modalRegistration.alias.toString()}/${modalRegistration.path}`;
 	}
 
-	#generateRoute(modalRegistration: UmbModalRouteRegistration): IRoute {
+	#generateRoute(modalRegistration: UmbModalRouteRegistration): UmbRoute {
 		return {
 			path: this.#getModalRoutePath(modalRegistration),
 			component: EmptyDiv,
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/route.interface.ts b/src/Umbraco.Web.UI.Client/libs/router/route.interface.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/core/router/route.interface.ts
rename to src/Umbraco.Web.UI.Client/libs/router/route.interface.ts
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/index.ts b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
index 8977c05ae9..d3c5361842 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/index.ts
@@ -1,8 +1,5 @@
 export * from 'router-slot';
-export * from './route.interface';
-export * from './route.context';
 export * from './router-slot.element';
 export * from './router-slot-change.event';
 export * from './router-slot-init.event';
 export * from './variant-router-slot.element';
-export * from './route-location.interface';
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index 6ceb4aedb5..0881affd54 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -2,11 +2,10 @@ import type { IRoute } from 'router-slot/model';
 import { RouterSlot } from 'router-slot';
 import { css, html, PropertyValueMap } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { UmbRouteContext, UmbRoute } from '@umbraco-cms/backoffice/router';
 import { UmbLitElement } from '../lit-element';
 import { UmbRouterSlotInitEvent } from './router-slot-init.event';
 import { UmbRouterSlotChangeEvent } from './router-slot-change.event';
-import { UmbRouteContext } from './route.context';
-import { UmbRoute } from './route.interface';
 
 /**
  *  @element umb-router-slot
diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index 40bbd59d48..147a4a8288 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -35,6 +35,7 @@
 			"@umbraco-cms/backoffice/property-editor": ["libs/property-editor"],
 			"@umbraco-cms/backoffice/repository": ["libs/repository"],
 			"@umbraco-cms/backoffice/resources": ["libs/resources"],
+			"@umbraco-cms/backoffice/router": ["libs/router"],
 			"@umbraco-cms/backoffice/store": ["libs/store"],
 			"@umbraco-cms/backoffice/utils": ["libs/utils"],
 			"@umbraco-cms/backoffice/workspace": ["libs/workspace"],

From 24f30dd023481be67bcf85ffa02076ad5bef8c90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:24:38 +0100
Subject: [PATCH 55/96] Move UMB_CHANGE_PASSWORD_MODAL

---
 src/Umbraco.Web.UI.Client/libs/modal/token/index.ts  |  9 +++++++++
 .../change-password/change-password-modal.element.ts |  2 +-
 .../current-user/modals/change-password/index.ts     | 12 ------------
 .../current-user/current-user-modal.element.ts       |  4 ++--
 .../users/workspace/user-workspace-edit.element.ts   |  4 ++--
 5 files changed, 14 insertions(+), 17 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/index.ts

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
new file mode 100644
index 0000000000..b2db240cd6
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
@@ -0,0 +1,9 @@
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export interface UmbChangePasswordModalData {
+	requireOldPassword: boolean;
+}
+
+export const UMB_CHANGE_PASSWORD_MODAL = new UmbModalToken<UmbChangePasswordModalData>('Umb.Modal.ChangePassword', {
+	type: 'dialog',
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
index eb8830b5a0..f79414cb2d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, CSSResultGroup, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { UmbChangePasswordModalData } from '.';
+import { UmbChangePasswordModalData } from '../../../../../../libs/modal/token';
 import { UmbModalHandler } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/index.ts
deleted file mode 100644
index 686021241b..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
-
-export interface UmbChangePasswordModalData {
-	requireOldPassword: boolean;
-}
-
-export const UMB_CHANGE_PASSWORD_MODAL_TOKEN = new UmbModalToken<UmbChangePasswordModalData>(
-	'Umb.Modal.ChangePassword',
-	{
-		type: 'dialog',
-	}
-);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
index 959687fd9c..b987dae615 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
@@ -7,7 +7,7 @@ import {
 	UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN,
 } from '../../current-user-history.store';
 import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from '../../current-user.store';
-import { UMB_CHANGE_PASSWORD_MODAL_TOKEN } from '../change-password';
+import { UMB_CHANGE_PASSWORD_MODAL } from '../../../../../../libs/modal/token';
 import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import type { UserDetails } from '@umbraco-cms/backoffice/models';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -139,7 +139,7 @@ export class UmbCurrentUserModalElement extends UmbLitElement {
 	private _changePassword() {
 		if (!this._modalContext) return;
 
-		this._modalContext.open(UMB_CHANGE_PASSWORD_MODAL_TOKEN, {
+		this._modalContext.open(UMB_CHANGE_PASSWORD_MODAL, {
 			requireOldPassword: this._currentUserStore?.isAdmin || false,
 		});
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
index 67f89f7402..944a54f750 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
@@ -6,7 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from '../../current-user/current-user.store';
-import { UMB_CHANGE_PASSWORD_MODAL_TOKEN } from '../../current-user/modals/change-password';
+import { UMB_CHANGE_PASSWORD_MODAL } from '../../../../../libs/modal/token';
 import { UmbUserWorkspaceContext } from './user-workspace.context';
 import type { UmbModalContext } from '@umbraco-cms/backoffice/modal';
 import { getLookAndColorFromUserStatus } from '@umbraco-cms/backoffice/utils';
@@ -181,7 +181,7 @@ export class UmbUserWorkspaceEditElement extends UmbLitElement {
 	}
 
 	private _changePassword() {
-		this._modalContext?.open(UMB_CHANGE_PASSWORD_MODAL_TOKEN, {
+		this._modalContext?.open(UMB_CHANGE_PASSWORD_MODAL, {
 			requireOldPassword: this._currentUserStore?.isAdmin === false,
 		});
 	}

From 90db955f8774ffeef02d3c5400d8e974c81403e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:26:18 +0100
Subject: [PATCH 56/96] rename file of UMB_CHANGE_PASSWORD_MODAL

---
 src/Umbraco.Web.UI.Client/libs/modal/index.ts         |  2 +-
 .../libs/modal/token/change-password-modal.ts         |  9 +++++++++
 src/Umbraco.Web.UI.Client/libs/modal/token/index.ts   | 11 ++---------
 .../change-password/change-password-modal.element.ts  |  2 +-
 .../modals/current-user/current-user-modal.element.ts |  2 +-
 .../users/workspace/user-workspace-edit.element.ts    |  2 +-
 6 files changed, 15 insertions(+), 13 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/libs/modal/token/change-password-modal.ts

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/index.ts
index eeb1d6be59..3e2caa5f16 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/index.ts
@@ -2,5 +2,5 @@ export * from './modal.context';
 export * from './modal-handler';
 export * from './modal-route-registration';
 export * from './modal-route-registration.controller';
-export * from './token/modal-token';
+export * from './token';
 export * from './modal.interfaces';
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/change-password-modal.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/change-password-modal.ts
new file mode 100644
index 0000000000..b2db240cd6
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/change-password-modal.ts
@@ -0,0 +1,9 @@
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export interface UmbChangePasswordModalData {
+	requireOldPassword: boolean;
+}
+
+export const UMB_CHANGE_PASSWORD_MODAL = new UmbModalToken<UmbChangePasswordModalData>('Umb.Modal.ChangePassword', {
+	type: 'dialog',
+});
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
index b2db240cd6..856be1a277 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
@@ -1,9 +1,2 @@
-import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
-
-export interface UmbChangePasswordModalData {
-	requireOldPassword: boolean;
-}
-
-export const UMB_CHANGE_PASSWORD_MODAL = new UmbModalToken<UmbChangePasswordModalData>('Umb.Modal.ChangePassword', {
-	type: 'dialog',
-});
+export * from './modal-token';
+export * from './change-password-modal';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
index f79414cb2d..0da190f340 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, CSSResultGroup, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { UmbChangePasswordModalData } from '../../../../../../libs/modal/token';
+import { UmbChangePasswordModalData } from '../../../../../../libs/modal/token/change-password-modal';
 import { UmbModalHandler } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
index b987dae615..a54a7ede81 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
@@ -7,7 +7,7 @@ import {
 	UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN,
 } from '../../current-user-history.store';
 import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from '../../current-user.store';
-import { UMB_CHANGE_PASSWORD_MODAL } from '../../../../../../libs/modal/token';
+import { UMB_CHANGE_PASSWORD_MODAL } from '../../../../../../libs/modal/token/change-password-modal';
 import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import type { UserDetails } from '@umbraco-cms/backoffice/models';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
index 944a54f750..0bf4c53f72 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
@@ -6,7 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from '../../current-user/current-user.store';
-import { UMB_CHANGE_PASSWORD_MODAL } from '../../../../../libs/modal/token';
+import { UMB_CHANGE_PASSWORD_MODAL } from '../../../../../libs/modal/token/change-password-modal';
 import { UmbUserWorkspaceContext } from './user-workspace.context';
 import type { UmbModalContext } from '@umbraco-cms/backoffice/modal';
 import { getLookAndColorFromUserStatus } from '@umbraco-cms/backoffice/utils';

From c7a77c23e2f4cf2c8edcb55f3efbe8d31f0f899b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:27:28 +0100
Subject: [PATCH 57/96] confirm modal

---
 .../actions/delete/delete.action.ts              |  4 ++--
 .../entity-action/actions/trash/trash.action.ts  |  4 ++--
 ...d-modal.ts => change-password-modal.token.ts} |  0
 .../modal/token/confirm-modal.token.ts}          |  9 +++------
 .../libs/modal/token/index.ts                    |  2 +-
 .../dashboard-redirect-management.element.ts     |  8 ++++----
 .../entity-bulk-actions/trash/trash.action.ts    |  4 ++--
 .../created/packages-created-overview.element.ts |  4 ++--
 ...stalled-packages-section-view-item.element.ts |  4 ++--
 .../views/section-view-examine-indexers.ts       |  4 ++--
 .../dashboard-published-status.element.ts        | 12 ++++++------
 .../extension-root-workspace.element.ts          | 16 +++++++++-------
 .../input-document-picker.element.ts             |  4 ++--
 .../input-language-picker.element.ts             |  4 ++--
 .../input-media-picker.element.ts                |  4 ++--
 .../modals/confirm/confirm-modal.element.ts      |  2 +-
 .../modals/confirm/confirm-modal.stories.ts      |  2 +-
 .../input-multiple-text-string-item.element.ts   |  4 ++--
 .../change-password-modal.element.ts             |  2 +-
 .../current-user/current-user-modal.element.ts   |  2 +-
 .../workspace/user-workspace-edit.element.ts     |  2 +-
 21 files changed, 48 insertions(+), 49 deletions(-)
 rename src/Umbraco.Web.UI.Client/libs/modal/token/{change-password-modal.ts => change-password-modal.token.ts} (100%)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/shared/modals/confirm/index.ts => libs/modal/token/confirm-modal.token.ts} (67%)

diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts
index 91b855ca74..8d49922ce6 100644
--- a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts
+++ b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts
@@ -1,4 +1,4 @@
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../../../src/backoffice/shared/modals/confirm';
+import { UMB_CONFIRM_MODAL } from '../../../modal/token/confirm-modal.token';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
@@ -25,7 +25,7 @@ export class UmbDeleteEntityAction<
 		if (data) {
 			const item = data[0];
 
-			const modalHandler = this.#modalContext.open(UMB_CONFIRM_MODAL_TOKEN, {
+			const modalHandler = this.#modalContext.open(UMB_CONFIRM_MODAL, {
 				headline: `Delete ${item.name}`,
 				content: 'Are you sure you want to delete this item?',
 				color: 'danger',
diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts
index 95888d0ec9..0e001c305e 100644
--- a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts
+++ b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts
@@ -1,4 +1,4 @@
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../../../src/backoffice/shared/modals/confirm';
+import { UMB_CONFIRM_MODAL } from '../../../modal/token/confirm-modal.token';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
@@ -25,7 +25,7 @@ export class UmbTrashEntityAction<
 		if (data) {
 			const item = data[0];
 
-			const modalHandler = this.#modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+			const modalHandler = this.#modalContext?.open(UMB_CONFIRM_MODAL, {
 				headline: `Trash ${item.name}`,
 				content: 'Are you sure you want to move this item to the recycle bin?',
 				color: 'danger',
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/change-password-modal.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/change-password-modal.token.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/libs/modal/token/change-password-modal.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/change-password-modal.token.ts
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/confirm-modal.token.ts
similarity index 67%
rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/confirm-modal.token.ts
index 17a03869d0..612881bc26 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/confirm-modal.token.ts
@@ -10,9 +10,6 @@ export interface UmbConfirmModalData {
 
 export type UmbConfirmModalResult = undefined;
 
-export const UMB_CONFIRM_MODAL_TOKEN = new UmbModalToken<UmbConfirmModalData, UmbConfirmModalResult>(
-	'Umb.Modal.Confirm',
-	{
-		type: 'dialog',
-	}
-);
+export const UMB_CONFIRM_MODAL = new UmbModalToken<UmbConfirmModalData, UmbConfirmModalResult>('Umb.Modal.Confirm', {
+	type: 'dialog',
+});
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
index 856be1a277..16add9a4ab 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
@@ -1,2 +1,2 @@
 export * from './modal-token';
-export * from './change-password-modal';
+export * from './change-password-modal.token';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
index 174905edee..d0c8dbd954 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing } from 'lit';
 import { customElement, state, query, property } from 'lit/decorators.js';
 import { UUIButtonState, UUIPaginationElement, UUIPaginationEvent } from '@umbraco-ui/uui';
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../../shared/modals/confirm';
+import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import {
@@ -21,7 +21,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
 				display: block;
 				margin: var(--uui-size-layout-1);
 			}
-			
+
 			.actions {
 				display: flex;
 				gap: var(--uui-size-space-1);
@@ -136,7 +136,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
 	}
 
 	private _removeRedirectHandler(data: RedirectUrlResponseModel) {
-		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, {
 			headline: 'Delete',
 			content: html`
 				<div style="width:300px">
@@ -167,7 +167,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
 	}
 
 	private _disableRedirectHandler() {
-		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, {
 			headline: 'Disable URL tracker',
 			content: html`Are you sure you want to disable the URL tracker?`,
 			color: 'danger',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts
index 0b14d85089..d3f611a4e0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts
@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import type { UmbMediaRepository } from '../../repository/media.repository';
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../../../shared/modals/confirm';
+import { UMB_CONFIRM_MODAL } from '../../../../../../libs/modal/token/confirm-modal.token';
 import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
@@ -26,7 +26,7 @@ export class UmbMediaTrashEntityBulkAction extends UmbEntityBulkActionBase<UmbMe
 
 		if (data) {
 			// TODO: use correct markup
-			const modalHandler = this.#modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+			const modalHandler = this.#modalContext?.open(UMB_CONFIRM_MODAL, {
 				headline: `Deleting ${this.selection.length} items`,
 				content: html`
 					This will delete the following files:
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/packages-created-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/packages-created-overview.element.ts
index c51f1dbb9a..f74e1134fe 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/packages-created-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/packages-created-overview.element.ts
@@ -3,7 +3,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { customElement, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { UUIPaginationEvent } from '@umbraco-ui/uui';
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../../../shared/modals/confirm';
+import { UMB_CONFIRM_MODAL } from '../../../../../../libs/modal/token/confirm-modal.token';
 import { PackageDefinitionResponseModel, PackageResource } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
@@ -135,7 +135,7 @@ export class UmbPackagesCreatedOverviewElement extends UmbLitElement {
 
 	async #deletePackage(p: PackageDefinitionResponseModel) {
 		if (!p.key) return;
-		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, {
 			color: 'danger',
 			headline: `Remove ${p.name}?`,
 			content: 'Are you sure you want to delete this package',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
index bce3d35726..c414f278ea 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { firstValueFrom, map } from 'rxjs';
 import { UUIButtonState } from '@umbraco-ui/uui';
 
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../../../shared/modals/confirm';
+import { UMB_CONFIRM_MODAL } from '../../../../../../libs/modal/token/confirm-modal.token';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 
@@ -82,7 +82,7 @@ export class UmbInstalledPackagesSectionViewItem extends UmbLitElement {
 
 	async _onMigration() {
 		if (!this.name) return;
-		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, {
 			color: 'positive',
 			headline: `Run migrations for ${this.name}?`,
 			content: `Do you want to start run migrations for ${this.name}`,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts
index 6920abc579..88ae36623a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUIButtonState } from '@umbraco-ui/uui-button';
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../../../shared/modals/confirm';
+import { UMB_CONFIRM_MODAL } from '../../../../../../libs/modal/token/confirm-modal.token';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { HealthStatusModel, IndexResponseModel, IndexerResource } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -118,7 +118,7 @@ export class UmbDashboardExamineIndexElement extends UmbLitElement {
 	}
 
 	private async _onRebuildHandler() {
-		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, {
 			headline: `Rebuild ${this.indexName}`,
 			content: html`
 				This will cause the index to be rebuilt.<br />
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
index 650a285706..615b95128d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
@@ -2,7 +2,7 @@ import { UUIButtonState } from '@umbraco-ui/uui';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../../shared/modals/confirm';
+import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { PublishedCacheResource } from '@umbraco-cms/backoffice/backend-api';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
@@ -14,10 +14,10 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
 		UUITextStyles,
 		css`
 			:host {
-				display:block;
-				margin:var(--uui-size-layout-1);
+				display: block;
+				margin: var(--uui-size-layout-1);
 			}
-			
+
 			uui-box + uui-box {
 				margin-top: var(--uui-size-space-5);
 			}
@@ -86,7 +86,7 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
 		}
 	}
 	private async _onReloadCacheHandler() {
-		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, {
 			headline: 'Reload',
 			content: html` Trigger a in-memory and local file cache reload on all servers. `,
 			color: 'danger',
@@ -109,7 +109,7 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
 	}
 
 	private async _onRebuildCacheHandler() {
-		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, {
 			headline: 'Rebuild',
 			content: html` Rebuild content in cmsContentNu database table. Expensive.`,
 			color: 'danger',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
index 0d9292a280..070fe402f5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
@@ -1,7 +1,7 @@
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { map } from 'rxjs';
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../../shared/modals/confirm';
+import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
 import { isManifestElementNameType, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 import type { ManifestTypes } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -9,11 +9,13 @@ import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffic
 
 @customElement('umb-extension-root-workspace')
 export class UmbExtensionRootWorkspaceElement extends UmbLitElement {
-	static styles = [css`
-		uui-box {
-			margin: var(--uui-size-layout-1);
-		}
-	`]
+	static styles = [
+		css`
+			uui-box {
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 
 	@state()
 	private _extensions?: Array<ManifestTypes> = undefined;
@@ -50,7 +52,7 @@ export class UmbExtensionRootWorkspaceElement extends UmbLitElement {
 	}
 
 	async #removeExtension(extension: ManifestTypes) {
-		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, {
 			headline: 'Unload extension',
 			confirmLabel: 'Unload',
 			content: html`<p>Are you sure you want to unload the extension <strong>${extension.alias}</strong>?</p>`,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
index 7b3d2bdea9..4a4fd09ebf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UMB_DOCUMENT_TREE_STORE_CONTEXT_TOKEN } from '../../../documents/documents/repository/document.tree.store';
 import type { UmbDocumentTreeStore } from '../../../documents/documents/repository/document.tree.store';
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../modals/confirm';
+import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
 import { UMB_DOCUMENT_PICKER_MODAL_TOKEN } from '../../../documents/documents/modals/document-picker';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -134,7 +134,7 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
 	}
 
 	private async _removeItem(item: EntityTreeItemResponseModel) {
-		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, {
 			color: 'danger',
 			headline: `Remove ${item.name}?`,
 			content: 'Are you sure you want to remove this item',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
index cd21264afa..0a123c8cf9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UmbLanguageRepository } from '../../../settings/languages/repository/language.repository';
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../modals/confirm';
+import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
 import { UMB_LANGUAGE_PICKER_MODAL_TOKEN } from '../../../settings/languages/modals/language-picker';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
@@ -133,7 +133,7 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen
 	}
 
 	private _removeItem(item: LanguageResponseModel) {
-		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, {
 			color: 'danger',
 			headline: `Remove ${item.name}?`,
 			content: 'Are you sure you want to remove this item',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
index d497dda6df..ed4e6f2134 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UmbMediaRepository } from '../../../media/media/repository/media.repository';
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../modals/confirm';
+import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
 import { UMB_MEDIA_PICKER_MODAL_TOKEN } from '../../../media/media/modals/media-picker';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -148,7 +148,7 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
 	}
 
 	private _removeItem(item: EntityTreeItemResponseModel) {
-		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, {
 			color: 'danger',
 			headline: `Remove ${item.name}?`,
 			content: 'Are you sure you want to remove this item',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts
index 6f1735ad30..9e25f29734 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts
@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
-import { UmbConfirmModalData, UmbConfirmModalResult } from '.';
+import { UmbConfirmModalData, UmbConfirmModalResult } from '../../../../../libs/modal/token/confirm-modal.token';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbModalHandler } from '@umbraco-cms/backoffice/modal';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.stories.ts
index 8a33def986..382d9f9ff0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.stories.ts
@@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
 import type { UmbConfirmModalElement } from './confirm-modal.element';
-import type { UmbConfirmModalData } from './';
+import type { UmbConfirmModalData } from '../../../../../libs/modal/token/confirm-modal.token';
 
 export default {
 	title: 'API/Modals/Layouts/Confirm',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
index 825c8dd11c..0fcb4875a6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
@@ -4,7 +4,7 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIInputEvent } from '@umbraco-ui/uui-input';
 import { UUIInputElement } from '@umbraco-ui/uui';
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../../../modals/confirm';
+import { UMB_CONFIRM_MODAL } from '../../../../../../../libs/modal/token/confirm-modal.token';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/events';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -66,7 +66,7 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL
 	}
 
 	#onDelete() {
-		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, {
 			headline: `Delete ${this.value || 'item'}`,
 			content: 'Are you sure you want to delete this item?',
 			color: 'danger',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
index 0da190f340..a777278239 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, CSSResultGroup, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { UmbChangePasswordModalData } from '../../../../../../libs/modal/token/change-password-modal';
+import { UmbChangePasswordModalData } from '../../../../../../libs/modal/token/change-password-modal.token';
 import { UmbModalHandler } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
index a54a7ede81..6a9b3d1ab7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
@@ -7,7 +7,7 @@ import {
 	UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN,
 } from '../../current-user-history.store';
 import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from '../../current-user.store';
-import { UMB_CHANGE_PASSWORD_MODAL } from '../../../../../../libs/modal/token/change-password-modal';
+import { UMB_CHANGE_PASSWORD_MODAL } from '../../../../../../libs/modal/token/change-password-modal.token';
 import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import type { UserDetails } from '@umbraco-cms/backoffice/models';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
index 0bf4c53f72..b9b8ebad54 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
@@ -6,7 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from '../../current-user/current-user.store';
-import { UMB_CHANGE_PASSWORD_MODAL } from '../../../../../libs/modal/token/change-password-modal';
+import { UMB_CHANGE_PASSWORD_MODAL } from '../../../../../libs/modal/token/change-password-modal.token';
 import { UmbUserWorkspaceContext } from './user-workspace.context';
 import type { UmbModalContext } from '@umbraco-cms/backoffice/modal';
 import { getLookAndColorFromUserStatus } from '@umbraco-cms/backoffice/utils';

From ac88e200d980bc6d819c437780ab03520d9fece1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:28:22 +0100
Subject: [PATCH 58/96] UMB_ALLOWED_DOCUMENT_TYPES_MODAL

---
 .../modal/token/allowed-document-types-modal.token.ts}       | 2 +-
 .../allowed-document-types-modal.element.ts                  | 5 ++++-
 .../documents/entity-actions/create/create.action.ts         | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/documents/document-types/modals/allowed-document-types/index.ts => libs/modal/token/allowed-document-types-modal.token.ts} (83%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/allowed-document-types-modal.token.ts
similarity index 83%
rename from src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/allowed-document-types-modal.token.ts
index f4c5820dd4..74e37ca564 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/allowed-document-types-modal.token.ts
@@ -8,7 +8,7 @@ export interface UmbAllowedDocumentTypesModalResult {
 	documentTypeKey: string;
 }
 
-export const UMB_ALLOWED_DOCUMENT_TYPES_MODAL_TOKEN = new UmbModalToken<
+export const UMB_ALLOWED_DOCUMENT_TYPES_MODAL = new UmbModalToken<
 	UmbAllowedDocumentTypesModalData,
 	UmbAllowedDocumentTypesModalResult
 >('Umb.Modal.AllowedDocumentTypes', {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
index 85a14bb33c..b133a5d74c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
@@ -3,7 +3,10 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { UmbDocumentTypeRepository } from '../../repository/document-type.repository';
-import { UmbAllowedDocumentTypesModalData, UmbAllowedDocumentTypesModalResult } from '.';
+import {
+	UmbAllowedDocumentTypesModalData,
+	UmbAllowedDocumentTypesModalResult,
+} from '../../../../../../libs/modal/token/allowed-document-types-modal.token';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 import { DocumentTypeTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts
index 2c0bdfbcc1..e2d4f6b5dd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts
@@ -1,4 +1,4 @@
-import { UMB_ALLOWED_DOCUMENT_TYPES_MODAL_TOKEN } from '../../../document-types/modals/allowed-document-types';
+import { UMB_ALLOWED_DOCUMENT_TYPES_MODAL } from '../../../../../../libs/modal/token/allowed-document-types-modal.token';
 import type { UmbDocumentRepository } from '../../repository/document.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
@@ -24,7 +24,7 @@ export class UmbCreateDocumentEntityAction extends UmbEntityActionBase<UmbDocume
 		const { data } = await this.repository.requestByKey(this.unique);
 
 		if (data && data.contentTypeKey) {
-			const modalHandler = this.#modalContext?.open(UMB_ALLOWED_DOCUMENT_TYPES_MODAL_TOKEN, {
+			const modalHandler = this.#modalContext?.open(UMB_ALLOWED_DOCUMENT_TYPES_MODAL, {
 				key: data.contentTypeKey,
 			});
 

From 48894ef7ff515616baea42e17f60b6dcc078feaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:29:09 +0100
Subject: [PATCH 59/96] UMB_ICON_PICKER_MODAL

---
 .../index.ts => libs/modal/token/icon-picker-modal.token.ts} | 2 +-
 .../workspace/document-type-workspace-edit.element.ts        | 4 ++--
 .../shared/modals/icon-picker/icon-picker-modal.element.ts   | 5 ++++-
 .../shared/modals/icon-picker/icon-picker-modal.stories.ts   | 2 +-
 .../icon-picker/property-editor-ui-icon-picker.element.ts    | 4 ++--
 5 files changed, 10 insertions(+), 7 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/shared/modals/icon-picker/index.ts => libs/modal/token/icon-picker-modal.token.ts} (74%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/icon-picker-modal.token.ts
similarity index 74%
rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/icon-picker-modal.token.ts
index 50badac9ec..0ae41a9fbb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/icon-picker-modal.token.ts
@@ -10,7 +10,7 @@ export interface UmbIconPickerModalResult {
 	icon: string | undefined;
 }
 
-export const UMB_ICON_PICKER_MODAL_TOKEN = new UmbModalToken<UmbIconPickerModalData, UmbIconPickerModalResult>(
+export const UMB_ICON_PICKER_MODAL = new UmbModalToken<UmbIconPickerModalData, UmbIconPickerModalResult>(
 	'Umb.Modal.IconPicker',
 	{
 		type: 'sidebar',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-edit.element.ts
index 57d9095924..179b8c2631 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-edit.element.ts
@@ -2,7 +2,7 @@ import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UMB_ICON_PICKER_MODAL_TOKEN } from '../../../shared/modals/icon-picker';
+import { UMB_ICON_PICKER_MODAL } from '../../../../../libs/modal/token/icon-picker-modal.token';
 import { UmbWorkspaceDocumentTypeContext } from './document-type-workspace.context';
 import type { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -83,7 +83,7 @@ export class UmbDocumentTypeWorkspaceEditElement extends UmbLitElement {
 	}
 
 	private async _handleIconClick() {
-		const modalHandler = this._modalContext?.open(UMB_ICON_PICKER_MODAL_TOKEN);
+		const modalHandler = this._modalContext?.open(UMB_ICON_PICKER_MODAL);
 
 		modalHandler?.onSubmit().then((saved) => {
 			if (saved.icon) this.#workspaceContext?.setIcon(saved.icon);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts
index 758696c00d..c74cb4893d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts
@@ -6,7 +6,10 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import icons from '../../../../../public-assets/icons/icons.json';
-import { UmbIconPickerModalData, UmbIconPickerModalResult } from '.';
+import {
+	UmbIconPickerModalData,
+	UmbIconPickerModalResult,
+} from '../../../../../libs/modal/token/icon-picker-modal.token';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 // TODO: Make use of UmbPickerLayoutBase
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.stories.ts
index 2facbfb42a..6298779683 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.stories.ts
@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
 import type { UmbIconPickerModalElement } from './icon-picker-modal.element';
-import { UmbIconPickerModalData } from '.';
+import { UmbIconPickerModalData } from '../../../../../libs/modal/token/icon-picker-modal.token';
 
 export default {
 	title: 'API/Modals/Layouts/Icon Picker',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
index 6448b70d4b..e2f8a94f37 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
-import { UMB_ICON_PICKER_MODAL_TOKEN } from '../../../modals/icon-picker';
+import { UMB_ICON_PICKER_MODAL } from '../../../../../../libs/modal/token/icon-picker-modal.token';
 import { UmbPropertyEditorElement } from '@umbraco-cms/backoffice/property-editor';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -29,7 +29,7 @@ export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement implemen
 	}
 
 	private _openModal() {
-		this._modalContext?.open(UMB_ICON_PICKER_MODAL_TOKEN);
+		this._modalContext?.open(UMB_ICON_PICKER_MODAL);
 	}
 
 	render() {

From 88fd5e246707bb2ca23064c6ba51e6bc4a4d9f17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:29:53 +0100
Subject: [PATCH 60/96] document picker

---
 .../modal/token/document-picker-modal.token.ts}    | 14 +++++++-------
 .../document-picker-modal.element.ts               |  5 ++++-
 .../document-picker-modal.stories.ts               |  2 +-
 .../input-document-picker.element.ts               |  4 ++--
 4 files changed, 14 insertions(+), 11 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/documents/documents/modals/document-picker/index.ts => libs/modal/token/document-picker-modal.token.ts} (55%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/document-picker-modal.token.ts
similarity index 55%
rename from src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/document-picker-modal.token.ts
index 4452cf228d..133318c692 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/document-picker-modal.token.ts
@@ -9,10 +9,10 @@ export interface UmbDocumentPickerModalResult {
 	selection: Array<string>;
 }
 
-export const UMB_DOCUMENT_PICKER_MODAL_TOKEN = new UmbModalToken<
-	UmbDocumentPickerModalData,
-	UmbDocumentPickerModalResult
->('Umb.Modal.DocumentPicker', {
-	type: 'sidebar',
-	size: 'small',
-});
+export const UMB_DOCUMENT_PICKER_MODAL = new UmbModalToken<UmbDocumentPickerModalData, UmbDocumentPickerModalResult>(
+	'Umb.Modal.DocumentPicker',
+	{
+		type: 'sidebar',
+		size: 'small',
+	}
+);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts
index 1fc81dbb4a..858ba72458 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts
@@ -2,7 +2,10 @@ import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
 import type { UmbTreeElement } from '../../../../shared/components/tree/tree.element';
-import { UmbDocumentPickerModalData, UmbDocumentPickerModalResult } from '.';
+import {
+	UmbDocumentPickerModalData,
+	UmbDocumentPickerModalResult,
+} from '../../../../../../libs/modal/token/document-picker-modal.token';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 // TODO: make use of UmbPickerLayoutBase
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts
index 8c61ae22cf..38d722cca2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts
@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
 import type { UmbDocumentPickerModalElement } from './document-picker-modal.element';
-import type { UmbDocumentPickerModalData } from './index';
+import type { UmbDocumentPickerModalData } from '../../../../../../libs/modal/token/document-picker-modal.token';
 
 export default {
 	title: 'API/Modals/Layouts/Content Picker',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
index 4a4fd09ebf..fbfa1475c2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
@@ -6,7 +6,7 @@ import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UMB_DOCUMENT_TREE_STORE_CONTEXT_TOKEN } from '../../../documents/documents/repository/document.tree.store';
 import type { UmbDocumentTreeStore } from '../../../documents/documents/repository/document.tree.store';
 import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
-import { UMB_DOCUMENT_PICKER_MODAL_TOKEN } from '../../../documents/documents/modals/document-picker';
+import { UMB_DOCUMENT_PICKER_MODAL } from '../../../../../libs/modal/token/document-picker-modal.token';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DocumentTreeItemResponseModel, EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -123,7 +123,7 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
 
 	private _openPicker() {
 		// We send a shallow copy(good enough as its just an array of keys) of our this._selectedKeys, as we don't want the modal to manipulate our data:
-		const modalHandler = this._modalContext?.open(UMB_DOCUMENT_PICKER_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_DOCUMENT_PICKER_MODAL, {
 			multiple: this.max === 1 ? false : true,
 			selection: [...this._selectedKeys],
 		});

From 868d14920d5800300fef113372d0e489ad49c6e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:30:56 +0100
Subject: [PATCH 61/96] imports

---
 .../data-types/workspace/data-type-workspace-edit.element.ts    | 2 +-
 .../src/core/router/variant-router-slot.element.ts              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace-edit.element.ts
index 26dfe86ba8..0c14a68c68 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace-edit.element.ts
@@ -2,8 +2,8 @@ import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { UmbRouteLocation } from '@umbraco-cms/backoffice/router';
 import { UmbDataTypeWorkspaceContext } from './data-type-workspace.context';
-import { UmbRouteLocation } from '@umbraco-cms/internal/router';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { ManifestWorkspace } from '@umbraco-cms/backoffice/extensions-registry';
 
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
index 748644267d..1b1b513308 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
@@ -1,6 +1,6 @@
 import { customElement, property } from 'lit/decorators.js';
+import { UmbRoute } from '@umbraco-cms/backoffice/router';
 import { UmbVariantId } from '../../backoffice/shared/variants/variant-id.class';
-import { UmbRoute } from './route.interface';
 import { UmbRouterSlotElement } from './router-slot.element';
 
 function variantIdsToString(variantIds: UmbVariantId[]): string {

From 77c4fa74ae2a05431901c1078780229f40c3ab2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:34:05 +0100
Subject: [PATCH 62/96] more tokens

---
 .../modal/token/media-picker-modal.token.ts}                 | 2 +-
 .../libs/modal/token/search-modal.token.ts                   | 3 +++
 .../media/media/entity-bulk-actions/move/move.action.ts      | 4 ++--
 .../media/modals/media-picker/media-picker-modal.element.ts  | 5 ++++-
 .../src/backoffice/search/modals/search/index.ts             | 3 ---
 .../input-media-picker/input-media-picker.element.ts         | 4 ++--
 6 files changed, 12 insertions(+), 9 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/media/media/modals/media-picker/index.ts => libs/modal/token/media-picker-modal.token.ts} (72%)
 create mode 100644 src/Umbraco.Web.UI.Client/libs/modal/token/search-modal.token.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/index.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/media-picker-modal.token.ts
similarity index 72%
rename from src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/media-picker-modal.token.ts
index 4cb0657504..94607575c4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/media-picker-modal.token.ts
@@ -9,7 +9,7 @@ export interface UmbMediaPickerModalResult {
 	selection: Array<string>;
 }
 
-export const UMB_MEDIA_PICKER_MODAL_TOKEN = new UmbModalToken<UmbMediaPickerModalData, UmbMediaPickerModalResult>(
+export const UMB_MEDIA_PICKER_MODAL = new UmbModalToken<UmbMediaPickerModalData, UmbMediaPickerModalResult>(
 	'Umb.Modal.MediaPicker',
 	{
 		type: 'sidebar',
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/search-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/search-modal.token.ts
new file mode 100644
index 0000000000..e3a99aab38
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/search-modal.token.ts
@@ -0,0 +1,3 @@
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export const UMB_SEARCH_MODAL = new UmbModalToken('Umb.Modal.Search');
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts
index 2e2496632c..0836900bed 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts
@@ -1,5 +1,5 @@
 import type { UmbMediaRepository } from '../../repository/media.repository';
-import { UMB_MEDIA_PICKER_MODAL_TOKEN } from '../../modals/media-picker';
+import { UMB_MEDIA_PICKER_MODAL } from '../../../../../../libs/modal/token/media-picker-modal.token';
 import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
@@ -18,7 +18,7 @@ export class UmbMediaMoveEntityBulkAction extends UmbEntityBulkActionBase<UmbMed
 
 	async execute() {
 		// TODO: the picker should be single picker by default
-		const modalHandler = this.#modalContext?.open(UMB_MEDIA_PICKER_MODAL_TOKEN, {
+		const modalHandler = this.#modalContext?.open(UMB_MEDIA_PICKER_MODAL, {
 			selection: [],
 			multiple: false,
 		});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts
index 8fa0de909e..1c49ee55a5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts
@@ -2,7 +2,10 @@ import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbTreeElement } from '../../../../shared/components/tree/tree.element';
-import { UmbMediaPickerModalData, UmbMediaPickerModalResult } from '.';
+import {
+	UmbMediaPickerModalData,
+	UmbMediaPickerModalResult,
+} from '../../../../../../libs/modal/token/media-picker-modal.token';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 @customElement('umb-media-picker-modal')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/index.ts
deleted file mode 100644
index 8044cac830..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
-
-export const UMB_SEARCH_MODAL_TOKEN = new UmbModalToken('Umb.Modal.Search');
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
index ed4e6f2134..85f73e3c28 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UmbMediaRepository } from '../../../media/media/repository/media.repository';
 import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
-import { UMB_MEDIA_PICKER_MODAL_TOKEN } from '../../../media/media/modals/media-picker';
+import { UMB_MEDIA_PICKER_MODAL } from '../../../../../libs/modal/token/media-picker-modal.token';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -137,7 +137,7 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
 
 	private _openPicker() {
 		// We send a shallow copy(good enough as its just an array of keys) of our this._selectedKeys, as we don't want the modal to manipulate our data:
-		const modalHandler = this._modalContext?.open(UMB_MEDIA_PICKER_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_MEDIA_PICKER_MODAL, {
 			multiple: this.max === 1 ? false : true,
 			selection: [...this._selectedKeys],
 		});

From bcd7fa23b5fa5ed40ad8db38c5734203be4797fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:35:02 +0100
Subject: [PATCH 63/96] UMB_EXAMINE_FIELDS_SETTINGS_MODAL

---
 .../token/examine-fields-settings-modal.token.ts}      |  2 +-
 .../views/modal-views/fields-settings.element.ts       |  5 ++++-
 .../views/section-view-examine-searchers.ts            | 10 +++++++---
 3 files changed, 12 insertions(+), 5 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/settings/dashboards/examine-management/views/modal-views/index.ts => libs/modal/token/examine-fields-settings-modal.token.ts} (84%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/examine-fields-settings-modal.token.ts
similarity index 84%
rename from src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/examine-fields-settings-modal.token.ts
index 1e1e727379..d6f6aec2d7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/examine-fields-settings-modal.token.ts
@@ -9,7 +9,7 @@ export interface UmbCreateDocumentModalResultData {
 	fields?: UmbExamineFieldsSettingsModalData;
 }
 
-export const UMB_EXAMINE_FIELDS_SETTINGS_MODAL_TOKEN = new UmbModalToken<
+export const UMB_EXAMINE_FIELDS_SETTINGS_MODAL = new UmbModalToken<
 	UmbExamineFieldsSettingsModalData,
 	UmbCreateDocumentModalResultData
 >('Umb.Modal.ExamineFieldsSettings', {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
index 60a1acfb8e..0844ab9751 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
@@ -1,7 +1,10 @@
 import { html, css } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbCreateDocumentModalResultData, UmbExamineFieldsSettingsModalData } from '.';
+import {
+	UmbCreateDocumentModalResultData,
+	UmbExamineFieldsSettingsModalData,
+} from '../../../../../../../libs/modal/token/examine-fields-settings-modal.token';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 @customElement('umb-examine-fields-settings-modal')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
index 10439bad30..8aa1f5aea0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
@@ -1,14 +1,18 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing } from 'lit';
 import { customElement, state, query, property } from 'lit/decorators.js';
+import { UMB_EXAMINE_FIELDS_SETTINGS_MODAL } from '../../../../../../libs/modal/token/examine-fields-settings-modal.token';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
-import { SearchResultResponseModel, SearcherResource, FieldPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import {
+	SearchResultResponseModel,
+	SearcherResource,
+	FieldPresentationModel,
+} from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 import './modal-views/fields-viewer.element';
 import './modal-views/fields-settings.element';
-import { UMB_EXAMINE_FIELDS_SETTINGS_MODAL_TOKEN } from './modal-views';
 
 interface ExposedSearchResultField {
 	name?: string | null;
@@ -174,7 +178,7 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement {
 	}
 
 	private _onFieldFilterClick() {
-		const modalHandler = this._modalContext?.open(UMB_EXAMINE_FIELDS_SETTINGS_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_EXAMINE_FIELDS_SETTINGS_MODAL, {
 			...this._exposedFields,
 		});
 		modalHandler?.onSubmit().then(({ fields } = {}) => {

From 08a33fc16ced08a65d097e99ab0391e5935e24cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:36:04 +0100
Subject: [PATCH 64/96] property-editor-ui-picker-modal.token

---
 .../modal/token/property-editor-ui-picker-modal.token.ts}    | 2 +-
 .../details/data-type-details-workspace-view.element.ts      | 4 ++--
 .../property-settings/property-settings-modal.element.ts     | 4 ++--
 .../property-editor-ui-picker-modal.element.ts               | 5 ++++-
 .../property-editor-ui-picker-modal.stories.ts               | 2 +-
 5 files changed, 10 insertions(+), 7 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/shared/property-editors/modals/property-editor-ui-picker/index.ts => libs/modal/token/property-editor-ui-picker-modal.token.ts} (84%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/property-editor-ui-picker-modal.token.ts
similarity index 84%
rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/property-editor-ui-picker-modal.token.ts
index 4c3f86509f..9bff24f2fe 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/property-editor-ui-picker-modal.token.ts
@@ -9,7 +9,7 @@ export type UmbPropertyEditorUIPickerModalResult = {
 	selection: Array<string>;
 };
 
-export const UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN = new UmbModalToken<
+export const UMB_PROPERTY_EDITOR_UI_PICKER_MODAL = new UmbModalToken<
 	UmbPropertyEditorUIPickerModalData,
 	UmbPropertyEditorUIPickerModalResult
 >('Umb.Modal.PropertyEditorUIPicker', {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts
index b5c5da1ce6..e300052f4a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbDataTypeWorkspaceContext } from '../../data-type-workspace.context';
-import { UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN } from '../../../../../shared/property-editors/modals/property-editor-ui-picker';
+import { UMB_PROPERTY_EDITOR_UI_PICKER_MODAL } from '../../../../../../../libs/modal/token/property-editor-ui-picker-modal.token';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -101,7 +101,7 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement {
 	private _openPropertyEditorUIPicker() {
 		if (!this._dataType) return;
 
-		const modalHandler = this._modalContext?.open(UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, {
 			selection: this._propertyEditorUiAlias ? [this._propertyEditorUiAlias] : [],
 		});
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
index 83c189408c..37e3d4cc3a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
@@ -2,7 +2,7 @@ import { UUIBooleanInputEvent, UUIInputEvent, UUISelectEvent } from '@umbraco-ui
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN } from '../../property-editors/modals/property-editor-ui-picker';
+import { UMB_PROPERTY_EDITOR_UI_PICKER_MODAL } from '../../../../../libs/modal/token/property-editor-ui-picker-modal.token';
 import { UmbPropertySettingsModalResult } from '.';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { ManifestPropertyEditorUI } from '@umbraco-cms/backoffice/extensions-registry';
@@ -261,7 +261,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<object,
 	}
 
 	#onOpenPropertyEditorUIPicker() {
-		const modalHandler = this.#modalContext?.open(UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN, {
+		const modalHandler = this.#modalContext?.open(UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, {
 			selection: [],
 		});
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
index 0c41abf92c..8369f59e4b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
@@ -4,7 +4,10 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { groupBy } from 'lodash-es';
 import type { UUIInputEvent } from '@umbraco-ui/uui';
-import { UmbPropertyEditorUIPickerModalData, UmbPropertyEditorUIPickerModalResult } from '.';
+import {
+	UmbPropertyEditorUIPickerModalData,
+	UmbPropertyEditorUIPickerModalResult,
+} from '../../../../../../libs/modal/token/property-editor-ui-picker-modal.token';
 import type { UmbModalHandler } from '@umbraco-cms/backoffice/modal';
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/backoffice/extensions-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
index 16d9f48b9d..77ad621ccf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 import type { UmbPropertyEditorUIPickerModalElement } from './property-editor-ui-picker-modal.element';
-import type { UmbPropertyEditorUIPickerModalData } from './';
+import type { UmbPropertyEditorUIPickerModalData } from '../../../../../../libs/modal/token/property-editor-ui-picker-modal.token';
 
 import './property-editor-ui-picker-modal.element';
 import '../../../components/body-layout/body-layout.element';

From 2618d680ec3aa4229327c8380d1e5373490285f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:36:48 +0100
Subject: [PATCH 65/96] language-picker-modal

---
 .../modal/token/language-picker-modal.token.ts}    | 14 +++++++-------
 .../input-language-picker.element.ts               |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/settings/languages/modals/language-picker/index.ts => libs/modal/token/language-picker-modal.token.ts} (65%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/language-picker-modal.token.ts
similarity index 65%
rename from src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/language-picker-modal.token.ts
index 477754bc5d..fb47287bd9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/language-picker-modal.token.ts
@@ -11,10 +11,10 @@ export interface UmbLanguagePickerModalResult {
 	selection: Array<string>;
 }
 
-export const UMB_LANGUAGE_PICKER_MODAL_TOKEN = new UmbModalToken<
-	UmbLanguagePickerModalData,
-	UmbLanguagePickerModalResult
->('Umb.Modal.LanguagePicker', {
-	type: 'sidebar',
-	size: 'small',
-});
+export const UMB_LANGUAGE_PICKER_MODAL = new UmbModalToken<UmbLanguagePickerModalData, UmbLanguagePickerModalResult>(
+	'Umb.Modal.LanguagePicker',
+	{
+		type: 'sidebar',
+		size: 'small',
+	}
+);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
index 0a123c8cf9..b34f197fc2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UmbLanguageRepository } from '../../../settings/languages/repository/language.repository';
 import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
-import { UMB_LANGUAGE_PICKER_MODAL_TOKEN } from '../../../settings/languages/modals/language-picker';
+import { UMB_LANGUAGE_PICKER_MODAL } from '../../../../../libs/modal/token/language-picker-modal.token';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -121,7 +121,7 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen
 	}
 
 	private _openPicker() {
-		const modalHandler = this._modalContext?.open(UMB_LANGUAGE_PICKER_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_LANGUAGE_PICKER_MODAL, {
 			multiple: this.max === 1 ? false : true,
 			selection: [...this._selectedIsoCodes],
 			filter: this.filter,

From a1cebcb5e0af00cce5920818134cade6c066d4be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:37:28 +0100
Subject: [PATCH 66/96] debug-modal

---
 .../modal/token/debug-modal.token.ts}                 | 11 ++++-------
 .../shared/components/debug/debug.element.ts          |  4 ++--
 .../debug/modals/debug/debug-modal.element.ts         |  2 +-
 3 files changed, 7 insertions(+), 10 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/shared/components/debug/modals/debug/index.ts => libs/modal/token/debug-modal.token.ts} (52%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/debug-modal.token.ts
similarity index 52%
rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/debug-modal.token.ts
index 760efebb80..7e3f797a38 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/debug-modal.token.ts
@@ -5,10 +5,7 @@ export interface UmbContextDebuggerModalData {
 	content: TemplateResult | string;
 }
 
-export const UMB_CONTEXT_DEBUGGER_MODAL_TOKEN = new UmbModalToken<UmbContextDebuggerModalData>(
-	'Umb.Modal.ContextDebugger',
-	{
-		type: 'sidebar',
-		size: 'small',
-	}
-);
+export const UMB_CONTEXT_DEBUGGER_MODAL = new UmbModalToken<UmbContextDebuggerModalData>('Umb.Modal.ContextDebugger', {
+	type: 'sidebar',
+	size: 'small',
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
index 128dbb33bb..6f26c559c2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing, TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { UMB_CONTEXT_DEBUGGER_MODAL_TOKEN } from './modals/debug';
+import { UMB_CONTEXT_DEBUGGER_MODAL } from '../../../../../libs/modal/token/debug-modal.token';
 import { UmbContextDebugRequest } from '@umbraco-cms/backoffice/context-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
@@ -107,7 +107,7 @@ export class UmbDebug extends UmbLitElement {
 	}
 
 	private _openDialog() {
-		this._modalContext?.open(UMB_CONTEXT_DEBUGGER_MODAL_TOKEN, {
+		this._modalContext?.open(UMB_CONTEXT_DEBUGGER_MODAL, {
 			content: html`${this._renderContextAliases()}`,
 		});
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts
index ba14f65b7a..a68255a98b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts
@@ -1,7 +1,7 @@
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css';
-import { UmbContextDebuggerModalData } from '.';
+import { UmbContextDebuggerModalData } from '../../../../../../../libs/modal/token/debug-modal.token';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 @customElement('umb-context-debugger-modal')

From 88c9467bb772a4a1b154677e59ff3daf5bd3ebc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:38:49 +0100
Subject: [PATCH 67/96] link-picker-modal

---
 .../modal/token/link-picker-modal.token.ts}                | 2 +-
 .../input-multi-url-picker.element.ts                      | 4 ++--
 .../shared/modals/link-picker/link-picker-modal.element.ts | 7 ++++++-
 .../property-editor-ui-multi-url-picker.element.ts         | 2 +-
 4 files changed, 10 insertions(+), 5 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/shared/modals/link-picker/index.ts => libs/modal/token/link-picker-modal.token.ts} (88%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/link-picker-modal.token.ts
similarity index 88%
rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/link-picker-modal.token.ts
index 566a7f1177..fca977b35b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/link-picker-modal.token.ts
@@ -27,7 +27,7 @@ export interface UmbLinkPickerConfig {
 	overlaySize?: UUIModalSidebarSize;
 }
 
-export const UMB_LINK_PICKER_MODAL_TOKEN = new UmbModalToken<UmbLinkPickerModalData, UmbLinkPickerModalResult>(
+export const UMB_LINK_PICKER_MODAL = new UmbModalToken<UmbLinkPickerModalData, UmbLinkPickerModalResult>(
 	'Umb.Modal.LinkPicker',
 	{
 		type: 'sidebar',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index cfef87d2ed..81dcc552d2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -3,7 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
-import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL_TOKEN } from '../../modals/link-picker';
+import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL } from '../../../../../libs/modal/token/link-picker-modal.token';
 import type { UmbVariantId } from '../../variants/variant-id.class';
 import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -130,7 +130,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 
 		this.myModalRegistration = new UmbModalRouteRegistrationController(
 			this,
-			UMB_LINK_PICKER_MODAL_TOKEN,
+			UMB_LINK_PICKER_MODAL,
 			`:index`,
 			new Map([
 				['propertyAlias', undefined],
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
index a471aed7e8..eda086a941 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
@@ -3,7 +3,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, query, state } from 'lit/decorators.js';
 import { UUIBooleanInputEvent, UUIInputElement } from '@umbraco-ui/uui';
 import { UmbTreeElement } from '../../components/tree/tree.element';
-import { UmbLinkPickerConfig, UmbLinkPickerLink, UmbLinkPickerModalData, UmbLinkPickerModalResult } from '.';
+import {
+	UmbLinkPickerConfig,
+	UmbLinkPickerLink,
+	UmbLinkPickerModalData,
+	UmbLinkPickerModalResult,
+} from '../../../../../libs/modal/token/link-picker-modal.token';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 import { buildUdi, getKeyFromUdi } from '@umbraco-cms/backoffice/utils';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
index e4691ec48e..fc9dfb512a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
@@ -3,7 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { UmbInputMultiUrlPickerElement } from '../../../../shared/components/input-multi-url-picker/input-multi-url-picker.element';
-import { UmbLinkPickerLink } from '../../../../shared/modals/link-picker';
+import { UmbLinkPickerLink } from '../../../../../../libs/modal/token/link-picker-modal.token';
 import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../../shared/components/workspace-property/workspace-property.context';
 import { UmbPropertyEditorElement } from '@umbraco-cms/backoffice/property-editor';
 import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';

From 093c7873b912879b71ab5f1478b4ca74477e12a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:40:49 +0100
Subject: [PATCH 68/96] UMB_SECTION_PICKER_MODAL

---
 .../modal/token/section-picker-modal.token.ts}                | 2 +-
 .../shared/components/input-section/input-section.element.ts  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/shared/modals/section-picker/index.ts => libs/modal/token/section-picker-modal.token.ts} (61%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/section-picker/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/section-picker-modal.token.ts
similarity index 61%
rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/section-picker/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/section-picker-modal.token.ts
index 95edf154c6..c74346cc70 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/section-picker/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/section-picker-modal.token.ts
@@ -5,7 +5,7 @@ export interface UmbSectionPickerModalData {
 	selection: string[];
 }
 
-export const UMB_SECTION_PICKER_MODAL_TOKEN = new UmbModalToken<UmbSectionPickerModalData>('Umb.Modal.SectionPicker', {
+export const UMB_SECTION_PICKER_MODAL = new UmbModalToken<UmbSectionPickerModalData>('Umb.Modal.SectionPicker', {
 	type: 'sidebar',
 	size: 'small',
 });
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts
index 34799eeeff..30913d3b16 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbInputListBase } from '../input-list-base/input-list-base';
-import { UMB_SECTION_PICKER_MODAL_TOKEN } from '../../modals/section-picker';
+import { UMB_SECTION_PICKER_MODAL } from '../../../../../libs/modal/token/section-picker-modal.token';
 import type { ManifestSection } from '@umbraco-cms/backoffice/extensions-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 
@@ -42,7 +42,7 @@ export class UmbInputPickerSectionElement extends UmbInputListBase {
 
 	connectedCallback(): void {
 		super.connectedCallback();
-		this.pickerToken = UMB_SECTION_PICKER_MODAL_TOKEN;
+		this.pickerToken = UMB_SECTION_PICKER_MODAL;
 		this._observeSections();
 	}
 

From 8f9c2cf42207f6e7336c57847f6e6677677bb991 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:42:10 +0100
Subject: [PATCH 69/96] UMB_USER_PICKER_MODAL

---
 .../index.ts => libs/modal/token/user-picker-modal.token.ts}  | 2 +-
 .../shared/components/input-user/input-user.element.ts        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/users/users/modals/user-picker/index.ts => libs/modal/token/user-picker-modal.token.ts} (61%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/user-picker-modal.token.ts
similarity index 61%
rename from src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/user-picker-modal.token.ts
index 4e247bef86..c1bf2c975a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/user-picker-modal.token.ts
@@ -1,7 +1,7 @@
 import type { UserDetails } from '@umbraco-cms/backoffice/models';
 import { UmbModalToken, UmbPickerModalData } from '@umbraco-cms/backoffice/modal';
 
-export const UMB_USER_PICKER_MODAL_TOKEN = new UmbModalToken<UmbPickerModalData<UserDetails>>('Umb.Modal.UserPicker', {
+export const UMB_USER_PICKER_MODAL = new UmbModalToken<UmbPickerModalData<UserDetails>>('Umb.Modal.UserPicker', {
 	type: 'sidebar',
 	size: 'small',
 });
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
index 87fd8c3b19..fca0035d35 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
@@ -3,7 +3,7 @@ import { css, html, nothing, PropertyValueMap } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbInputListBase } from '../input-list-base/input-list-base';
 import { UmbUserStore, UMB_USER_STORE_CONTEXT_TOKEN } from '../../../users/users/repository/user.store';
-import { UMB_USER_PICKER_MODAL_TOKEN } from '../../../users/users/modals/user-picker';
+import { UMB_USER_PICKER_MODAL } from '../../../../../libs/modal/token/user-picker-modal.token';
 import type { UserEntity } from '@umbraco-cms/backoffice/models';
 
 @customElement('umb-input-user')
@@ -39,7 +39,7 @@ export class UmbPickerUserElement extends UmbInputListBase {
 
 	connectedCallback(): void {
 		super.connectedCallback();
-		this.pickerToken = UMB_USER_PICKER_MODAL_TOKEN;
+		this.pickerToken = UMB_USER_PICKER_MODAL;
 		this.consumeContext(UMB_USER_STORE_CONTEXT_TOKEN, (userStore) => {
 			this._userStore = userStore;
 			this._observeUser();

From 99d430b65067daa1470e6031bc2b1fe3f69976ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:43:33 +0100
Subject: [PATCH 70/96] user-group-picker-modal

---
 .../modal/token/user-group-picker-modal.token.ts}             | 2 +-
 .../components/input-user-group/input-user-group.element.ts   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/users/user-groups/modals/user-group-picker/index.ts => libs/modal/token/user-group-picker-modal.token.ts} (69%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/user-group-picker-modal.token.ts
similarity index 69%
rename from src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/user-group-picker-modal.token.ts
index 5c67576638..4264345e24 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/user-group-picker-modal.token.ts
@@ -1,7 +1,7 @@
 import type { UserDetails } from '@umbraco-cms/backoffice/models';
 import { UmbModalToken, UmbPickerModalData } from '@umbraco-cms/backoffice/modal';
 
-export const UMB_USER_GROUP_PICKER_MODAL_TOKEN = new UmbModalToken<UmbPickerModalData<UserDetails>>(
+export const UMB_USER_GROUP_PICKER_MODAL = new UmbModalToken<UmbPickerModalData<UserDetails>>(
 	'Umb.Modal.UserGroupPicker',
 	{
 		type: 'sidebar',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
index d27245d136..143aa867c6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
@@ -7,7 +7,7 @@ import {
 	UMB_USER_GROUP_STORE_CONTEXT_TOKEN,
 } from '../../../users/user-groups/repository/user-group.store';
 
-import { UMB_USER_GROUP_PICKER_MODAL_TOKEN } from '../../../users/user-groups/modals/user-group-picker';
+import { UMB_USER_GROUP_PICKER_MODAL } from '../../../../../libs/modal/token/user-group-picker-modal.token';
 import type { UserGroupEntity } from '@umbraco-cms/backoffice/models';
 
 @customElement('umb-input-user-group')
@@ -48,7 +48,7 @@ export class UmbInputPickerUserGroupElement extends UmbInputListBase {
 
 	connectedCallback(): void {
 		super.connectedCallback();
-		this.pickerToken = UMB_USER_GROUP_PICKER_MODAL_TOKEN;
+		this.pickerToken = UMB_USER_GROUP_PICKER_MODAL;
 		this.consumeContext(UMB_USER_GROUP_STORE_CONTEXT_TOKEN, (usersContext) => {
 			this._userGroupStore = usersContext;
 			this._observeUserGroups();

From 96e7c8f1fc4b32cb367bccffa85ceb4ced52940e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:44:27 +0100
Subject: [PATCH 71/96] UMB_EMBEDDED_MEDIA_MODAL

---
 .../modal/token/embedded-media-modal.token.ts}       |  2 +-
 .../embedded-media/embedded-media-modal.element.ts   |  7 ++++++-
 .../embedded-media/embedded-media-modal.stories.ts   |  2 +-
 .../src/core/mocks/domains/rte-embed.handlers.ts     | 12 ++++++------
 4 files changed, 14 insertions(+), 9 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/shared/modals/embedded-media/index.ts => libs/modal/token/embedded-media-modal.token.ts} (83%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/embedded-media-modal.token.ts
similarity index 83%
rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/embedded-media-modal.token.ts
index 94cde2a310..610b935d80 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/embedded-media-modal.token.ts
@@ -26,7 +26,7 @@ export type UmbEmbeddedMediaModalResult = {
 	selection: OEmbedResult;
 };
 
-export const UMB_EMBEDDED_MEDIA_MODAL_TOKEN = new UmbModalToken<UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalResult>(
+export const UMB_EMBEDDED_MEDIA_MODAL = new UmbModalToken<UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalResult>(
 	'Umb.Modal.EmbeddedMedia',
 	{
 		type: 'sidebar',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.element.ts
index 6df72714a6..1cbcbcf091 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.element.ts
@@ -3,7 +3,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit-html/directives/when.js';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { OEmbedResult, OEmbedStatus, UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalResult } from '.';
+import {
+	OEmbedResult,
+	OEmbedStatus,
+	UmbEmbeddedMediaModalData,
+	UmbEmbeddedMediaModalResult,
+} from '../../../../../libs/modal/token/embedded-media-modal.token';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbModalHandler } from '@umbraco-cms/backoffice/modal';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.stories.ts
index 5eb102c153..068a9c5af0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.stories.ts
@@ -3,7 +3,7 @@ import './embedded-media-modal.element';
 
 import { Meta } from '@storybook/web-components';
 import { html } from 'lit';
-import { UmbEmbeddedMediaModalData } from '.';
+import { UmbEmbeddedMediaModalData } from '../../../../../libs/modal/token/embedded-media-modal.token';
 
 export default {
 	title: 'API/Modals/Layouts/Embedded Media',
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts
index 3a8b1247e1..9d2adb5296 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts
@@ -1,17 +1,17 @@
-import { rest } from "msw";
-import { OEmbedResult, OEmbedStatus } from "../../../backoffice/shared/modals/embedded-media";
-import { umbracoPath } from "@umbraco-cms/backoffice/utils";
+import { rest } from 'msw';
+import { OEmbedResult, OEmbedStatus } from '../../../../libs/modal/token/embedded-media-modal.token';
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 
 export const handlers = [
 	rest.get(umbracoPath('/rteembed'), (req, res, ctx) => {
 		const width = req.url.searchParams.get('width') ?? 360;
 		const height = req.url.searchParams.get('height') ?? 240;
 		const response: OEmbedResult = {
-			supportsDimensions: true,			
+			supportsDimensions: true,
 			markup: `<iframe width="${width}" height="${height}" src="https://www.youtube.com/embed/wJNbtYdr-Hg?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen title="Sleep Token - The Summoning"></iframe>`,
-			oEmbedStatus: OEmbedStatus.Success,			
+			oEmbedStatus: OEmbedStatus.Success,
 		};
 
 		return res(ctx.status(200), ctx.json(response));
 	}),
-];
\ No newline at end of file
+];

From 22386935c1e1be43e45d2fb70bb5a372a324fdd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:44:51 +0100
Subject: [PATCH 72/96] UMB_PROPERTY_SETTINGS_MODAL

---
 .../modal/token/property-settings-modal.token.ts}             | 2 +-
 .../property-settings/property-settings-modal.element.ts      | 2 +-
 .../shared/property-creator/property-creator.element.ts       | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/shared/modals/property-settings/index.ts => libs/modal/token/property-settings-modal.token.ts} (81%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/property-settings-modal.token.ts
similarity index 81%
rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/property-settings-modal.token.ts
index 8d4060d0b2..80d28d4578 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/property-settings-modal.token.ts
@@ -17,7 +17,7 @@ export interface UmbPropertySettingsModalResult {
 	};
 }
 
-export const UMB_PROPERTY_SETTINGS_MODAL_TOKEN = new UmbModalToken<object, UmbPropertySettingsModalResult>(
+export const UMB_PROPERTY_SETTINGS_MODAL = new UmbModalToken<object, UmbPropertySettingsModalResult>(
 	'Umb.Modal.PropertySettings',
 	{
 		type: 'sidebar',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
index 37e3d4cc3a..bfd59f6178 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
@@ -3,7 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UMB_PROPERTY_EDITOR_UI_PICKER_MODAL } from '../../../../../libs/modal/token/property-editor-ui-picker-modal.token';
-import { UmbPropertySettingsModalResult } from '.';
+import { UmbPropertySettingsModalResult } from '../../../../../libs/modal/token/property-settings-modal.token';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { ManifestPropertyEditorUI } from '@umbraco-cms/backoffice/extensions-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-creator/property-creator.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-creator/property-creator.element.ts
index 9959e13c7d..00c62eef10 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-creator/property-creator.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-creator/property-creator.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { UMB_PROPERTY_SETTINGS_MODAL_TOKEN } from '../modals/property-settings';
+import { UMB_PROPERTY_SETTINGS_MODAL } from '../../../../libs/modal/token/property-settings-modal.token';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
@@ -18,7 +18,7 @@ export class UmbPropertyCreatorElement extends UmbLitElement {
 	}
 
 	#onAddProperty() {
-		const modalHandler = this.#modalContext?.open(UMB_PROPERTY_SETTINGS_MODAL_TOKEN);
+		const modalHandler = this.#modalContext?.open(UMB_PROPERTY_SETTINGS_MODAL);
 
 		modalHandler?.onSubmit().then((result) => {
 			console.log('result', result);

From 1cee94db6dd7debc4b45105656d06dd554935904 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:45:30 +0100
Subject: [PATCH 73/96] create-dictionary-modal.token.ts

---
 .../modal/token/create-dictionary-modal.token.ts}            | 2 +-
 .../dictionary/dashboard-translation-dictionary.element.ts   | 4 ++--
 .../create/create-dictionary-modal-layout.element.ts         | 5 ++++-
 .../dictionary/entity-actions/create/create.action.ts        | 4 ++--
 4 files changed, 9 insertions(+), 6 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/translation/dictionary/entity-actions/create/index.ts => libs/modal/token/create-dictionary-modal.token.ts} (87%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/create-dictionary-modal.token.ts
similarity index 87%
rename from src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/create-dictionary-modal.token.ts
index 16ab4fd003..3e635f2cc4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/create-dictionary-modal.token.ts
@@ -12,7 +12,7 @@ export interface UmbCreateDictionaryModalResult {
 	name?: string;
 }
 
-export const UMB_CREATE_DICTIONARY_MODAL_TOKEN = new UmbModalToken<
+export const UMB_CREATE_DICTIONARY_MODAL = new UmbModalToken<
 	UmbCreateDictionaryModalData,
 	UmbCreateDictionaryModalResult
 >('Umb.Modal.CreateDictionary', {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
index 8107a3c8f4..82c6e54a68 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
@@ -4,7 +4,7 @@ import { customElement, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { UmbTableConfig, UmbTableColumn, UmbTableItem } from '../../../../backoffice/shared/components/table';
 import { UmbDictionaryRepository } from '../../dictionary/repository/dictionary.repository';
-import { UMB_CREATE_DICTIONARY_MODAL_TOKEN } from '../../dictionary/entity-actions/create/';
+import { UMB_CREATE_DICTIONARY_MODAL } from '../../../../../libs/modal/token/create-dictionary-modal.token';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { DictionaryOverviewResponseModel, LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
@@ -157,7 +157,7 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
 		// TODO: what to do if modal service is not available?
 		if (!this.#modalContext) return;
 
-		const modalHandler = this.#modalContext?.open(UMB_CREATE_DICTIONARY_MODAL_TOKEN, { unique: null });
+		const modalHandler = this.#modalContext?.open(UMB_CREATE_DICTIONARY_MODAL, { unique: null });
 
 		// TODO: get type from modal result
 		const { name } = await modalHandler.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
index 984a59dacf..a41b18efc3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
@@ -2,7 +2,10 @@ import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, query } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
-import { UmbCreateDictionaryModalData, UmbCreateDictionaryModalResult } from '.';
+import {
+	UmbCreateDictionaryModalData,
+	UmbCreateDictionaryModalResult,
+} from '../../../../../../libs/modal/token/create-dictionary-modal.token';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 @customElement('umb-create-dictionary-modal')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts
index 0f9020988f..db492774a7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts
@@ -4,7 +4,7 @@ import {
 	UmbSectionSidebarContext,
 	UMB_SECTION_SIDEBAR_CONTEXT_TOKEN,
 } from '../../../../../backoffice/shared/components/section/section-sidebar/section-sidebar.context';
-import { UMB_CREATE_DICTIONARY_MODAL_TOKEN } from '.';
+import { UMB_CREATE_DICTIONARY_MODAL } from '../../../../../../libs/modal/token/create-dictionary-modal.token';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
@@ -38,7 +38,7 @@ export default class UmbCreateDictionaryEntityAction extends UmbEntityActionBase
 
 		// TODO: how can we get the current entity detail in the modal? Passing the observable
 		// feels a bit hacky. Works, but hacky.
-		const modalHandler = this.#modalContext?.open(UMB_CREATE_DICTIONARY_MODAL_TOKEN, {
+		const modalHandler = this.#modalContext?.open(UMB_CREATE_DICTIONARY_MODAL, {
 			unique: this.unique,
 			parentName: this.#sectionSidebarContext.headline,
 		});

From ce404dcf6a5be9785d733742fc9c4933e641ec8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:49:20 +0100
Subject: [PATCH 74/96] import-dictionary-modal.token

---
 .../modal/token/export-dictionary-modal.token.ts}   |  2 +-
 .../modal/token/import-dictionary-modal.token.ts}   |  2 +-
 .../create-dictionary-modal-layout.element.ts       |  6 +++---
 ...lement.ts => export-dictionary-modal.element.ts} | 13 ++++++++-----
 .../entity-actions/export/export.action.ts          |  6 +++---
 ...lement.ts => import-dictionary-modal.element.ts} | 13 ++++++++-----
 .../entity-actions/import/import.action.ts          |  6 +++---
 .../dictionary/entity-actions/manifests.ts          |  4 ++--
 8 files changed, 29 insertions(+), 23 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/translation/dictionary/entity-actions/export/index.ts => libs/modal/token/export-dictionary-modal.token.ts} (83%)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/translation/dictionary/entity-actions/import/index.ts => libs/modal/token/import-dictionary-modal.token.ts} (86%)
 rename src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/{export-dictionary-modal-layout.element.ts => export-dictionary-modal.element.ts} (79%)
 rename src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/{import-dictionary-modal-layout.element.ts => import-dictionary-modal.element.ts} (91%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/export-dictionary-modal.token.ts
similarity index 83%
rename from src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/export-dictionary-modal.token.ts
index 003aae1dfc..4ae285e25f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/export-dictionary-modal.token.ts
@@ -8,7 +8,7 @@ export interface UmbExportDictionaryModalResult {
 	includeChildren?: boolean;
 }
 
-export const UMB_EXPORT_DICTIONARY_MODAL_TOKEN = new UmbModalToken<
+export const UMB_EXPORT_DICTIONARY_MODAL = new UmbModalToken<
 	UmbExportDictionaryModalData,
 	UmbExportDictionaryModalResult
 >('Umb.Modal.ExportDictionary', {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/import-dictionary-modal.token.ts
similarity index 86%
rename from src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/import-dictionary-modal.token.ts
index 6172aaf811..745279c619 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/import-dictionary-modal.token.ts
@@ -11,7 +11,7 @@ export interface UmbImportDictionaryModalResult {
 	parentKey?: string;
 }
 
-export const UMB_IMPORT_DICTIONARY_MODAL_TOKEN = new UmbModalToken<
+export const UMB_IMPORT_DICTIONARY_MODAL = new UmbModalToken<
 	UmbImportDictionaryModalData,
 	UmbImportDictionaryModalResult
 >('Umb.Modal.ImportDictionary', {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
index a41b18efc3..f0eaecdf60 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
@@ -9,7 +9,7 @@ import {
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 @customElement('umb-create-dictionary-modal')
-export class UmbCreateDictionaryModalLayoutElement extends UmbModalBaseElement<
+export class UmbCreateDictionaryModalElement extends UmbModalBaseElement<
 	UmbCreateDictionaryModalData,
 	UmbCreateDictionaryModalResult
 > {
@@ -74,10 +74,10 @@ export class UmbCreateDictionaryModalLayoutElement extends UmbModalBaseElement<
 	}
 }
 
-export default UmbCreateDictionaryModalLayoutElement;
+export default UmbCreateDictionaryModalElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-create-dictionary-modal': UmbCreateDictionaryModalLayoutElement;
+		'umb-create-dictionary-modal': UmbCreateDictionaryModalElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal.element.ts
similarity index 79%
rename from src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal-layout.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal.element.ts
index 75355409cb..1cb2faa92a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal.element.ts
@@ -1,11 +1,14 @@
 import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, query } from 'lit/decorators.js';
-import { UmbExportDictionaryModalData, UmbExportDictionaryModalResult } from '.';
+import {
+	UmbExportDictionaryModalData,
+	UmbExportDictionaryModalResult,
+} from '../../../../../../libs/modal/token/export-dictionary-modal.token';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
-@customElement('umb-export-dictionary-modal-layout')
-export class UmbExportDictionaryModalLayoutElement extends UmbModalBaseElement<
+@customElement('umb-export-dictionary-modal')
+export class UmbExportDictionaryModalElement extends UmbModalBaseElement<
 	UmbExportDictionaryModalData,
 	UmbExportDictionaryModalResult
 > {
@@ -49,10 +52,10 @@ export class UmbExportDictionaryModalLayoutElement extends UmbModalBaseElement<
 	}
 }
 
-export default UmbExportDictionaryModalLayoutElement;
+export default UmbExportDictionaryModalElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-export-dictionary-modal-layout': UmbExportDictionaryModalLayoutElement;
+		'umb-export-dictionary-modal': UmbExportDictionaryModalElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts
index 4ed076c561..10798aa321 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts
@@ -1,12 +1,12 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { UmbDictionaryRepository } from '../../repository/dictionary.repository';
-import { UMB_EXPORT_DICTIONARY_MODAL_TOKEN } from '.';
+import { UMB_EXPORT_DICTIONARY_MODAL } from '../../../../../../libs/modal/token/export-dictionary-modal.token';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 
-import './export-dictionary-modal-layout.element';
+import './export-dictionary-modal.element';
 
 export default class UmbExportDictionaryEntityAction extends UmbEntityActionBase<UmbDictionaryRepository> {
 	static styles = [UUITextStyles];
@@ -25,7 +25,7 @@ export default class UmbExportDictionaryEntityAction extends UmbEntityActionBase
 		// TODO: what to do if modal service is not available?
 		if (!this.#modalContext) return;
 
-		const modalHandler = this.#modalContext?.open(UMB_EXPORT_DICTIONARY_MODAL_TOKEN, { unique: this.unique });
+		const modalHandler = this.#modalContext?.open(UMB_EXPORT_DICTIONARY_MODAL, { unique: this.unique });
 
 		// TODO: get type from modal result
 		const { includeChildren } = await modalHandler.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal.element.ts
similarity index 91%
rename from src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal-layout.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal.element.ts
index 3dc06e07e5..f5e180997b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal.element.ts
@@ -5,12 +5,15 @@ import { when } from 'lit/directives/when.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { UmbTreeElement } from '../../../../shared/components/tree/tree.element';
 import { UmbDictionaryRepository } from '../../repository/dictionary.repository';
-import { UmbImportDictionaryModalData, UmbImportDictionaryModalResult } from '.';
+import {
+	UmbImportDictionaryModalData,
+	UmbImportDictionaryModalResult,
+} from '../../../../../../libs/modal/token/import-dictionary-modal.token';
 import { UploadDictionaryResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
-@customElement('umb-import-dictionary-modal-layout')
-export class UmbImportDictionaryModalLayoutElement extends UmbModalBaseElement<
+@customElement('umb-import-dictionary-modal')
+export class UmbImportDictionaryModalLayout extends UmbModalBaseElement<
 	UmbImportDictionaryModalData,
 	UmbImportDictionaryModalResult
 > {
@@ -156,10 +159,10 @@ export class UmbImportDictionaryModalLayoutElement extends UmbModalBaseElement<
 	}
 }
 
-export default UmbImportDictionaryModalLayoutElement;
+export default UmbImportDictionaryModalLayout;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-import-dictionary-modal-layout': UmbImportDictionaryModalLayoutElement;
+		'umb-import-dictionary-modal': UmbImportDictionaryModalLayout;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts
index 562d8618dd..24230ff92e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts
@@ -1,12 +1,12 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { UmbDictionaryRepository } from '../../repository/dictionary.repository';
-import { UMB_IMPORT_DICTIONARY_MODAL_TOKEN } from '.';
+import { UMB_IMPORT_DICTIONARY_MODAL } from '../../../../../../libs/modal/token/import-dictionary-modal.token';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 
-import './import-dictionary-modal-layout.element';
+import './import-dictionary-modal.element';
 
 export default class UmbImportDictionaryEntityAction extends UmbEntityActionBase<UmbDictionaryRepository> {
 	static styles = [UUITextStyles];
@@ -25,7 +25,7 @@ export default class UmbImportDictionaryEntityAction extends UmbEntityActionBase
 		// TODO: what to do if modal service is not available?
 		if (!this.#modalContext) return;
 
-		const modalHandler = this.#modalContext?.open(UMB_IMPORT_DICTIONARY_MODAL_TOKEN, { unique: this.unique });
+		const modalHandler = this.#modalContext?.open(UMB_IMPORT_DICTIONARY_MODAL, { unique: this.unique });
 
 		// TODO: get type from modal result
 		const { fileName, parentKey } = await modalHandler.onSubmit();
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/manifests.ts
index 181aedb3fc..fc79433c06 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/manifests.ts
@@ -113,13 +113,13 @@ const modals: Array<ManifestModal> = [
 		type: 'modal',
 		alias: 'Umb.Modal.ExportDictionary',
 		name: 'Export Dictionary Modal',
-		loader: () => import('./export/export-dictionary-modal-layout.element'),
+		loader: () => import('./export/export-dictionary-modal.element'),
 	},
 	{
 		type: 'modal',
 		alias: 'Umb.Modal.ImportDictionary',
 		name: 'Import Dictionary Modal',
-		loader: () => import('./import/import-dictionary-modal-layout.element'),
+		loader: () => import('./import/import-dictionary-modal.element'),
 	},
 ];
 

From 88977a9d708b234c07644746b8b47ce97833e317 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:50:08 +0100
Subject: [PATCH 75/96] current-user-modal.token

---
 .../index.ts => libs/modal/token/current-user-modal.token.ts} | 2 +-
 .../users/current-user/current-user-header-app.element.ts     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/users/current-user/modals/current-user/index.ts => libs/modal/token/current-user-modal.token.ts} (53%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/current-user-modal.token.ts
similarity index 53%
rename from src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/current-user-modal.token.ts
index 382b450ae7..5a78080a7a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/current-user-modal.token.ts
@@ -1,6 +1,6 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
-export const UMB_CURRENT_USER_MODAL_TOKEN = new UmbModalToken('Umb.Modal.CurrentUser', {
+export const UMB_CURRENT_USER_MODAL = new UmbModalToken('Umb.Modal.CurrentUser', {
 	type: 'sidebar',
 	size: 'small',
 });
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
index 209cf80101..456e407085 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, CSSResultGroup, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from './current-user.store';
-import { UMB_CURRENT_USER_MODAL_TOKEN } from './modals/current-user';
+import { UMB_CURRENT_USER_MODAL } from '../../../../libs/modal/token/current-user-modal.token';
 import type { UserDetails } from '@umbraco-cms/backoffice/models';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -47,7 +47,7 @@ export class UmbCurrentUserHeaderApp extends UmbLitElement {
 	}
 
 	private _handleUserClick() {
-		this._modalContext?.open(UMB_CURRENT_USER_MODAL_TOKEN);
+		this._modalContext?.open(UMB_CURRENT_USER_MODAL);
 	}
 
 	render() {

From b785524faeeaee5e0513f140ac76195a5ba59977 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 21:51:44 +0100
Subject: [PATCH 76/96] last one

---
 .../modal/token/create-user-modal.token.ts}               | 2 +-
 .../modal/token/invite-user-modal.token.ts}               | 2 +-
 .../views/users/workspace-view-users-overview.element.ts  | 8 ++++----
 .../src/core/modal/stories/modal.mdx                      | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/users/users/modals/create-user/index.ts => libs/modal/token/create-user-modal.token.ts} (53%)
 rename src/Umbraco.Web.UI.Client/{src/backoffice/users/users/modals/invite-user/index.ts => libs/modal/token/invite-user-modal.token.ts} (53%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/create-user/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/create-user-modal.token.ts
similarity index 53%
rename from src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/create-user/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/create-user-modal.token.ts
index 8a5868f272..5ac7a0a780 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/create-user/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/create-user-modal.token.ts
@@ -1,6 +1,6 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
-export const UMB_CREATE_USER_MODAL_TOKEN = new UmbModalToken('Umb.Modal.CreateUser', {
+export const UMB_CREATE_USER_MODAL = new UmbModalToken('Umb.Modal.CreateUser', {
 	type: 'dialog',
 	size: 'small',
 });
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/invite-user/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/invite-user-modal.token.ts
similarity index 53%
rename from src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/invite-user/index.ts
rename to src/Umbraco.Web.UI.Client/libs/modal/token/invite-user-modal.token.ts
index 713bb7ae62..20bb006c54 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/invite-user/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/invite-user-modal.token.ts
@@ -1,6 +1,6 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
-export const UMB_INVITE_USER_MODAL_TOKEN = new UmbModalToken('Umb.Modal.InviteUser', {
+export const UMB_INVITE_USER_MODAL = new UmbModalToken('Umb.Modal.InviteUser', {
 	type: 'dialog',
 	size: 'small',
 });
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts
index b0e9bb188b..5121930b61 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts
@@ -2,8 +2,8 @@ import { css, html, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
 import { UUIPopoverElement } from '@umbraco-ui/uui';
-import { UMB_INVITE_USER_MODAL_TOKEN } from '../../../../users/users/modals/invite-user';
-import { UMB_CREATE_USER_MODAL_TOKEN } from '../../../../users/users/modals/create-user';
+import { UMB_INVITE_USER_MODAL } from '../../../../../../libs/modal/token/invite-user-modal.token';
+import { UMB_CREATE_USER_MODAL } from '../../../../../../libs/modal/token/create-user-modal.token';
 import type { UmbSectionViewUsersElement } from './section-view-users.element';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import type { IRoute } from '@umbraco-cms/internal/router';
@@ -160,9 +160,9 @@ export class UmbWorkspaceViewUsersOverviewElement extends UmbLitElement {
 		let token = undefined;
 		// TODO: we need to find a better way to determine if we should create or invite
 		if (this.isCloud) {
-			token = UMB_INVITE_USER_MODAL_TOKEN;
+			token = UMB_INVITE_USER_MODAL;
 		} else {
-			token = UMB_CREATE_USER_MODAL_TOKEN;
+			token = UMB_CREATE_USER_MODAL;
 		}
 
 		this._modalContext?.open(token);
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
index bff928ca0b..197252a30e 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
@@ -51,7 +51,7 @@ A modal can be registred via the UmbModalRouteRegistrationController. The regist
 Notice we are using a Controller here, this means your element has to be a Controller Host (TODO: Insert link to story about Controller Host also available through the UmbElementMixin)
 
 ```ts
-this.myModalRegistration = new UmbModalRouteRegistrationController(this, UMB_LINK_PICKER_MODAL_TOKEN)
+this.myModalRegistration = new UmbModalRouteRegistrationController(this, UMB_LINK_PICKER_MODAL)
 	.onSubmit((submitData) => {
 		console.log('Modal submitted with data'.submitData);
 	})
@@ -193,7 +193,7 @@ class MyElement extends UmbElementMixin(LitElement) {
 	#onClick() {
 		const data = {'data goes here'};
 		const options {'options go here'};
-		const modalHandler = this.#modalContext?.open(SOME_MODAL_TOKEN), data, options);
+		const modalHandler = this.#modalContext?.open(MY_MODAL_TOKEN), data, options);
 
 		modalHandler?.onSubmit().then((data) => {
 			// if modal submitted, then data is supplied here.

From 3a8b8089bf8ad795cfac0fe5e60423c6a041d816 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 22:04:49 +0100
Subject: [PATCH 77/96] correct imports

---
 .../actions/delete/delete.action.ts           |  3 +--
 .../actions/trash/trash.action.ts             |  3 +--
 .../libs/modal/token/index.ts                 | 21 +++++++++++++++++++
 .../dashboard-redirect-management.element.ts  |  3 +--
 .../document-type-workspace-edit.element.ts   |  3 +--
 .../entity-actions/create/create.action.ts    |  7 +++++--
 .../document-picker-modal.stories.ts          |  2 +-
 .../entity-bulk-actions/move/move.action.ts   |  3 +--
 .../entity-bulk-actions/trash/trash.action.ts |  3 +--
 .../packages-created-overview.element.ts      |  3 +--
 ...lled-packages-section-view-item.element.ts |  4 +---
 .../views/section-view-examine-indexers.ts    |  3 +--
 .../views/section-view-examine-searchers.ts   |  7 +++++--
 .../dashboard-published-status.element.ts     |  3 +--
 .../data-type-workspace-edit.element.ts       |  2 +-
 ...ata-type-details-workspace-view.element.ts |  7 +++++--
 .../extension-root-workspace.element.ts       |  3 +--
 .../shared/components/debug/debug.element.ts  |  3 +--
 .../input-document-picker.element.ts          |  9 +++++---
 .../input-language-picker.element.ts          |  9 +++++---
 .../input-media-picker.element.ts             |  9 +++++---
 .../modals/confirm/confirm-modal.stories.ts   |  2 +-
 .../icon-picker/icon-picker-modal.stories.ts  |  2 +-
 ...property-editor-ui-picker-modal.stories.ts |  2 +-
 .../current-user-header-app.element.ts        |  2 +-
 .../src/core/router/router-slot.element.ts    |  2 +-
 .../router/variant-router-slot.element.ts     |  2 +-
 27 files changed, 74 insertions(+), 48 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts
index 8d49922ce6..d45acc3534 100644
--- a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts
+++ b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts
@@ -1,8 +1,7 @@
-import { UMB_CONFIRM_MODAL } from '../../../modal/token/confirm-modal.token';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 
 export class UmbDeleteEntityAction<
 	T extends { delete(unique: string): Promise<void>; requestItems(uniques: Array<string>): any }
diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts
index 0e001c305e..6a3eb3b745 100644
--- a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts
+++ b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts
@@ -1,8 +1,7 @@
-import { UMB_CONFIRM_MODAL } from '../../../modal/token/confirm-modal.token';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 
 export class UmbTrashEntityAction<
 	T extends { trash(unique: Array<string>): Promise<void>; requestTreeItems(uniques: Array<string>): any }
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
index 16add9a4ab..8110b172c2 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
@@ -1,2 +1,23 @@
 export * from './modal-token';
+export * from './allowed-document-types-modal.token';
 export * from './change-password-modal.token';
+export * from './confirm-modal.token';
+export * from './create-dictionary-modal.token';
+export * from './create-user-modal.token';
+export * from './debug-modal.token';
+export * from './document-picker-modal.token';
+export * from './embedded-media-modal.token';
+export * from './examine-fields-settings-modal.token';
+export * from './export-dictionary-modal.token';
+export * from './icon-picker-modal.token';
+export * from './import-dictionary-modal.token';
+export * from './invite-user-modal.token';
+export * from './language-picker-modal.token';
+export * from './link-picker-modal.token';
+export * from './media-picker-modal.token';
+export * from './property-editor-ui-picker-modal.token';
+export * from './property-settings-modal.token';
+export * from './search-modal.token';
+export * from './section-picker-modal.token';
+export * from './user-group-picker-modal.token';
+export * from './user-picker-modal.token';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
index d0c8dbd954..42fa9ae950 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
@@ -2,8 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing } from 'lit';
 import { customElement, state, query, property } from 'lit/decorators.js';
 import { UUIButtonState, UUIPaginationElement, UUIPaginationEvent } from '@umbraco-ui/uui';
-import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import {
 	RedirectManagementResource,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-edit.element.ts
index 179b8c2631..205a57e93d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-edit.element.ts
@@ -2,11 +2,10 @@ import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UMB_ICON_PICKER_MODAL } from '../../../../../libs/modal/token/icon-picker-modal.token';
 import { UmbWorkspaceDocumentTypeContext } from './document-type-workspace.context';
 import type { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_ICON_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 
 @customElement('umb-document-type-workspace-edit')
 export class UmbDocumentTypeWorkspaceEditElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts
index e2d4f6b5dd..de691cf39c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts
@@ -1,8 +1,11 @@
-import { UMB_ALLOWED_DOCUMENT_TYPES_MODAL } from '../../../../../../libs/modal/token/allowed-document-types-modal.token';
 import type { UmbDocumentRepository } from '../../repository/document.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import {
+	UmbModalContext,
+	UMB_MODAL_CONTEXT_TOKEN,
+	UMB_ALLOWED_DOCUMENT_TYPES_MODAL,
+} from '@umbraco-cms/backoffice/modal';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 
 export class UmbCreateDocumentEntityAction extends UmbEntityActionBase<UmbDocumentRepository> {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts
index 38d722cca2..0e599203f7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts
@@ -4,8 +4,8 @@ import './document-picker-modal.element';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
-import type { UmbDocumentPickerModalElement } from './document-picker-modal.element';
 import type { UmbDocumentPickerModalData } from '../../../../../../libs/modal/token/document-picker-modal.token';
+import type { UmbDocumentPickerModalElement } from './document-picker-modal.element';
 
 export default {
 	title: 'API/Modals/Layouts/Content Picker',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts
index 0836900bed..9903168c0d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts
@@ -1,9 +1,8 @@
 import type { UmbMediaRepository } from '../../repository/media.repository';
-import { UMB_MEDIA_PICKER_MODAL } from '../../../../../../libs/modal/token/media-picker-modal.token';
 import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_MEDIA_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 
 export class UmbMediaMoveEntityBulkAction extends UmbEntityBulkActionBase<UmbMediaRepository> {
 	#modalContext?: UmbModalContext;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts
index d3f611a4e0..86ee61ce1d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts
@@ -1,10 +1,9 @@
 import { html } from 'lit';
 import type { UmbMediaRepository } from '../../repository/media.repository';
-import { UMB_CONFIRM_MODAL } from '../../../../../../libs/modal/token/confirm-modal.token';
 import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 
 export class UmbMediaTrashEntityBulkAction extends UmbEntityBulkActionBase<UmbMediaRepository> {
 	#modalContext?: UmbModalContext;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/packages-created-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/packages-created-overview.element.ts
index f74e1134fe..11cd97a2fc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/packages-created-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/packages-created-overview.element.ts
@@ -3,11 +3,10 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { customElement, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { UUIPaginationEvent } from '@umbraco-ui/uui';
-import { UMB_CONFIRM_MODAL } from '../../../../../../libs/modal/token/confirm-modal.token';
 import { PackageDefinitionResponseModel, PackageResource } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 
 @customElement('umb-packages-created-overview')
 export class UmbPackagesCreatedOverviewElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
index c414f278ea..e4f9cd4b4c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
@@ -3,9 +3,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import { firstValueFrom, map } from 'rxjs';
 import { UUIButtonState } from '@umbraco-ui/uui';
-
-import { UMB_CONFIRM_MODAL } from '../../../../../../libs/modal/token/confirm-modal.token';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 
 import type { ManifestPackageView } from '@umbraco-cms/backoffice/extensions-registry';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts
index 88ae36623a..9dcfc67150 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts
@@ -2,8 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUIButtonState } from '@umbraco-ui/uui-button';
-import { UMB_CONFIRM_MODAL } from '../../../../../../libs/modal/token/confirm-modal.token';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 import { HealthStatusModel, IndexResponseModel, IndexerResource } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
index 8aa1f5aea0..18cad41a37 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
@@ -1,8 +1,11 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing } from 'lit';
 import { customElement, state, query, property } from 'lit/decorators.js';
-import { UMB_EXAMINE_FIELDS_SETTINGS_MODAL } from '../../../../../../libs/modal/token/examine-fields-settings-modal.token';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import {
+	UmbModalContext,
+	UMB_MODAL_CONTEXT_TOKEN,
+	UMB_EXAMINE_FIELDS_SETTINGS_MODAL,
+} from '@umbraco-cms/backoffice/modal';
 import {
 	SearchResultResponseModel,
 	SearcherResource,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
index 615b95128d..1601dfd6b6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
@@ -2,8 +2,7 @@ import { UUIButtonState } from '@umbraco-ui/uui';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 import { PublishedCacheResource } from '@umbraco-cms/backoffice/backend-api';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace-edit.element.ts
index 0c14a68c68..0edb193b9f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace-edit.element.ts
@@ -2,8 +2,8 @@ import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { UmbRouteLocation } from '@umbraco-cms/backoffice/router';
 import { UmbDataTypeWorkspaceContext } from './data-type-workspace.context';
+import { UmbRouteLocation } from '@umbraco-cms/backoffice/router';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { ManifestWorkspace } from '@umbraco-cms/backoffice/extensions-registry';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts
index e300052f4a..11a5ef4aa4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts
@@ -2,8 +2,11 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbDataTypeWorkspaceContext } from '../../data-type-workspace.context';
-import { UMB_PROPERTY_EDITOR_UI_PICKER_MODAL } from '../../../../../../../libs/modal/token/property-editor-ui-picker-modal.token';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import {
+	UmbModalContext,
+	UMB_MODAL_CONTEXT_TOKEN,
+	UMB_PROPERTY_EDITOR_UI_PICKER_MODAL,
+} from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
index 070fe402f5..5831501295 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
@@ -1,11 +1,10 @@
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { map } from 'rxjs';
-import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
 import { isManifestElementNameType, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 import type { ManifestTypes } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 
 @customElement('umb-extension-root-workspace')
 export class UmbExtensionRootWorkspaceElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
index 6f26c559c2..7045ed5d56 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
@@ -1,10 +1,9 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing, TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { UMB_CONTEXT_DEBUGGER_MODAL } from '../../../../../libs/modal/token/debug-modal.token';
 import { UmbContextDebugRequest } from '@umbraco-cms/backoffice/context-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONTEXT_DEBUGGER_MODAL } from '@umbraco-cms/backoffice/modal';
 
 @customElement('umb-debug')
 export class UmbDebug extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
index fbfa1475c2..cf5bd39230 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
@@ -5,9 +5,12 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UMB_DOCUMENT_TREE_STORE_CONTEXT_TOKEN } from '../../../documents/documents/repository/document.tree.store';
 import type { UmbDocumentTreeStore } from '../../../documents/documents/repository/document.tree.store';
-import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
-import { UMB_DOCUMENT_PICKER_MODAL } from '../../../../../libs/modal/token/document-picker-modal.token';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import {
+	UmbModalContext,
+	UMB_MODAL_CONTEXT_TOKEN,
+	UMB_CONFIRM_MODAL,
+	UMB_DOCUMENT_PICKER_MODAL,
+} from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DocumentTreeItemResponseModel, EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
index b34f197fc2..263d9c76f0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts
@@ -4,9 +4,12 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UmbLanguageRepository } from '../../../settings/languages/repository/language.repository';
-import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
-import { UMB_LANGUAGE_PICKER_MODAL } from '../../../../../libs/modal/token/language-picker-modal.token';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import {
+	UmbModalContext,
+	UMB_MODAL_CONTEXT_TOKEN,
+	UMB_CONFIRM_MODAL,
+	UMB_LANGUAGE_PICKER_MODAL,
+} from '@umbraco-cms/backoffice/modal';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
index 85f73e3c28..626bfd9def 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
@@ -4,9 +4,12 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UmbMediaRepository } from '../../../media/media/repository/media.repository';
-import { UMB_CONFIRM_MODAL } from '../../../../../libs/modal/token/confirm-modal.token';
-import { UMB_MEDIA_PICKER_MODAL } from '../../../../../libs/modal/token/media-picker-modal.token';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import {
+	UmbModalContext,
+	UMB_MODAL_CONTEXT_TOKEN,
+	UMB_CONFIRM_MODAL,
+	UMB_MEDIA_PICKER_MODAL,
+} from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.stories.ts
index 382d9f9ff0..c9b1eb8b65 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.stories.ts
@@ -3,8 +3,8 @@ import './confirm-modal.element';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
-import type { UmbConfirmModalElement } from './confirm-modal.element';
 import type { UmbConfirmModalData } from '../../../../../libs/modal/token/confirm-modal.token';
+import type { UmbConfirmModalElement } from './confirm-modal.element';
 
 export default {
 	title: 'API/Modals/Layouts/Confirm',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.stories.ts
index 6298779683..5e65653ef8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.stories.ts
@@ -4,8 +4,8 @@ import './icon-picker-modal.element';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
-import type { UmbIconPickerModalElement } from './icon-picker-modal.element';
 import { UmbIconPickerModalData } from '../../../../../libs/modal/token/icon-picker-modal.token';
+import type { UmbIconPickerModalElement } from './icon-picker-modal.element';
 
 export default {
 	title: 'API/Modals/Layouts/Icon Picker',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
index 77ad621ccf..beba15f095 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
-import type { UmbPropertyEditorUIPickerModalElement } from './property-editor-ui-picker-modal.element';
 import type { UmbPropertyEditorUIPickerModalData } from '../../../../../../libs/modal/token/property-editor-ui-picker-modal.token';
+import type { UmbPropertyEditorUIPickerModalElement } from './property-editor-ui-picker-modal.element';
 
 import './property-editor-ui-picker-modal.element';
 import '../../../components/body-layout/body-layout.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
index 456e407085..1d40add964 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
@@ -1,8 +1,8 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, CSSResultGroup, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from './current-user.store';
 import { UMB_CURRENT_USER_MODAL } from '../../../../libs/modal/token/current-user-modal.token';
+import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from './current-user.store';
 import type { UserDetails } from '@umbraco-cms/backoffice/models';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index 0881affd54..1dc354dc29 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -2,10 +2,10 @@ import type { IRoute } from 'router-slot/model';
 import { RouterSlot } from 'router-slot';
 import { css, html, PropertyValueMap } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { UmbRouteContext, UmbRoute } from '@umbraco-cms/backoffice/router';
 import { UmbLitElement } from '../lit-element';
 import { UmbRouterSlotInitEvent } from './router-slot-init.event';
 import { UmbRouterSlotChangeEvent } from './router-slot-change.event';
+import { UmbRouteContext, UmbRoute } from '@umbraco-cms/backoffice/router';
 
 /**
  *  @element umb-router-slot
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
index 1b1b513308..c5e125fee7 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/variant-router-slot.element.ts
@@ -1,7 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
-import { UmbRoute } from '@umbraco-cms/backoffice/router';
 import { UmbVariantId } from '../../backoffice/shared/variants/variant-id.class';
 import { UmbRouterSlotElement } from './router-slot.element';
+import { UmbRoute } from '@umbraco-cms/backoffice/router';
 
 function variantIdsToString(variantIds: UmbVariantId[]): string {
 	return variantIds.map((id) => id.toString()).join('_&_');

From df11d77fdbe43811d1ab084e6cf41cae4b618172 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 22:08:24 +0100
Subject: [PATCH 78/96] import

---
 .../input-multi-url-picker/input-multi-url-picker.element.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index 81dcc552d2..fa471d1be1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -3,8 +3,8 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
-import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL } from '../../../../../libs/modal/token/link-picker-modal.token';
 import type { UmbVariantId } from '../../variants/variant-id.class';
+import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbModalRouteRegistrationController } from 'libs/modal/modal-route-registration.controller';

From 91841d3db82a28abb56283933e32fddac7235332 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 22:15:44 +0100
Subject: [PATCH 79/96] correct token imports

---
 src/Umbraco.Web.UI.Client/libs/modal/token/index.ts      | 1 +
 .../components/input-section/input-section.element.ts    | 2 +-
 .../input-user-group/input-user-group.element.ts         | 2 +-
 .../shared/components/input-user/input-user.element.ts   | 2 +-
 .../property-settings/property-settings-modal.element.ts | 9 ++++++---
 .../shared/property-creator/property-creator.element.ts  | 3 +--
 .../property-editor-ui-icon-picker.element.ts            | 3 +--
 .../input-multiple-text-string-item.element.ts           | 3 +--
 .../dashboard-translation-dictionary.element.ts          | 3 +--
 .../dictionary/entity-actions/create/create.action.ts    | 3 +--
 .../dictionary/entity-actions/export/export.action.ts    | 3 +--
 .../dictionary/entity-actions/import/import.action.ts    | 3 +--
 .../current-user/current-user-header-app.element.ts      | 3 +--
 .../modals/current-user/current-user-modal.element.ts    | 8 ++++++--
 .../views/users/workspace-view-users-overview.element.ts | 9 ++++++---
 15 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
index 8110b172c2..5840ca1bee 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts
@@ -4,6 +4,7 @@ export * from './change-password-modal.token';
 export * from './confirm-modal.token';
 export * from './create-dictionary-modal.token';
 export * from './create-user-modal.token';
+export * from './current-user-modal.token';
 export * from './debug-modal.token';
 export * from './document-picker-modal.token';
 export * from './embedded-media-modal.token';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts
index 30913d3b16..3f560bd6f7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts
@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbInputListBase } from '../input-list-base/input-list-base';
-import { UMB_SECTION_PICKER_MODAL } from '../../../../../libs/modal/token/section-picker-modal.token';
+import { UMB_SECTION_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import type { ManifestSection } from '@umbraco-cms/backoffice/extensions-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
index 143aa867c6..7315cd5a81 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
@@ -7,7 +7,7 @@ import {
 	UMB_USER_GROUP_STORE_CONTEXT_TOKEN,
 } from '../../../users/user-groups/repository/user-group.store';
 
-import { UMB_USER_GROUP_PICKER_MODAL } from '../../../../../libs/modal/token/user-group-picker-modal.token';
+import { UMB_USER_GROUP_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import type { UserGroupEntity } from '@umbraco-cms/backoffice/models';
 
 @customElement('umb-input-user-group')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
index fca0035d35..bd72e5713b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
@@ -3,7 +3,7 @@ import { css, html, nothing, PropertyValueMap } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbInputListBase } from '../input-list-base/input-list-base';
 import { UmbUserStore, UMB_USER_STORE_CONTEXT_TOKEN } from '../../../users/users/repository/user.store';
-import { UMB_USER_PICKER_MODAL } from '../../../../../libs/modal/token/user-picker-modal.token';
+import { UMB_USER_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import type { UserEntity } from '@umbraco-cms/backoffice/models';
 
 @customElement('umb-input-user')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
index bfd59f6178..c57165fe42 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
@@ -2,9 +2,12 @@ import { UUIBooleanInputEvent, UUIInputEvent, UUISelectEvent } from '@umbraco-ui
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UMB_PROPERTY_EDITOR_UI_PICKER_MODAL } from '../../../../../libs/modal/token/property-editor-ui-picker-modal.token';
-import { UmbPropertySettingsModalResult } from '../../../../../libs/modal/token/property-settings-modal.token';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import {
+	UmbModalContext,
+	UMB_MODAL_CONTEXT_TOKEN,
+	UMB_PROPERTY_EDITOR_UI_PICKER_MODAL,
+	UmbPropertySettingsModalResult,
+} from '@umbraco-cms/backoffice/modal';
 import { ManifestPropertyEditorUI } from '@umbraco-cms/backoffice/extensions-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-creator/property-creator.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-creator/property-creator.element.ts
index 00c62eef10..a925a8299a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-creator/property-creator.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-creator/property-creator.element.ts
@@ -1,8 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { UMB_PROPERTY_SETTINGS_MODAL } from '../../../../libs/modal/token/property-settings-modal.token';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_PROPERTY_SETTINGS_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-property-creator')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
index e2f8a94f37..aebdeeb989 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
@@ -1,9 +1,8 @@
 import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
-import { UMB_ICON_PICKER_MODAL } from '../../../../../../libs/modal/token/icon-picker-modal.token';
 import { UmbPropertyEditorElement } from '@umbraco-cms/backoffice/property-editor';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_ICON_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 /**
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
index 0fcb4875a6..cbc21787b0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
@@ -4,8 +4,7 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIInputEvent } from '@umbraco-ui/uui-input';
 import { UUIInputElement } from '@umbraco-ui/uui';
-import { UMB_CONFIRM_MODAL } from '../../../../../../../libs/modal/token/confirm-modal.token';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/events';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
index 82c6e54a68..d324fb3b32 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
@@ -4,10 +4,9 @@ import { customElement, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { UmbTableConfig, UmbTableColumn, UmbTableItem } from '../../../../backoffice/shared/components/table';
 import { UmbDictionaryRepository } from '../../dictionary/repository/dictionary.repository';
-import { UMB_CREATE_DICTIONARY_MODAL } from '../../../../../libs/modal/token/create-dictionary-modal.token';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { DictionaryOverviewResponseModel, LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CREATE_DICTIONARY_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 
 @customElement('umb-dashboard-translation-dictionary')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts
index db492774a7..7e0686e77a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts
@@ -4,11 +4,10 @@ import {
 	UmbSectionSidebarContext,
 	UMB_SECTION_SIDEBAR_CONTEXT_TOKEN,
 } from '../../../../../backoffice/shared/components/section/section-sidebar/section-sidebar.context';
-import { UMB_CREATE_DICTIONARY_MODAL } from '../../../../../../libs/modal/token/create-dictionary-modal.token';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CREATE_DICTIONARY_MODAL } from '@umbraco-cms/backoffice/modal';
 
 // TODO: temp import
 import './create-dictionary-modal-layout.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts
index 10798aa321..d3351707bc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts
@@ -1,10 +1,9 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { UmbDictionaryRepository } from '../../repository/dictionary.repository';
-import { UMB_EXPORT_DICTIONARY_MODAL } from '../../../../../../libs/modal/token/export-dictionary-modal.token';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_EXPORT_DICTIONARY_MODAL } from '@umbraco-cms/backoffice/modal';
 
 import './export-dictionary-modal.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts
index 24230ff92e..83c4f68cee 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts
@@ -1,10 +1,9 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { UmbDictionaryRepository } from '../../repository/dictionary.repository';
-import { UMB_IMPORT_DICTIONARY_MODAL } from '../../../../../../libs/modal/token/import-dictionary-modal.token';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_IMPORT_DICTIONARY_MODAL } from '@umbraco-cms/backoffice/modal';
 
 import './import-dictionary-modal.element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
index 1d40add964..baca5d0566 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
@@ -1,10 +1,9 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, CSSResultGroup, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UMB_CURRENT_USER_MODAL } from '../../../../libs/modal/token/current-user-modal.token';
 import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from './current-user.store';
 import type { UserDetails } from '@umbraco-cms/backoffice/models';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CURRENT_USER_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-current-user-header-app')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
index 6a9b3d1ab7..3b60bc0f36 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
@@ -7,8 +7,12 @@ import {
 	UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN,
 } from '../../current-user-history.store';
 import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from '../../current-user.store';
-import { UMB_CHANGE_PASSWORD_MODAL } from '../../../../../../libs/modal/token/change-password-modal.token';
-import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import {
+	UmbModalHandler,
+	UmbModalContext,
+	UMB_MODAL_CONTEXT_TOKEN,
+	UMB_CHANGE_PASSWORD_MODAL,
+} from '@umbraco-cms/backoffice/modal';
 import type { UserDetails } from '@umbraco-cms/backoffice/models';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts
index 5121930b61..5aa001acf5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts
@@ -2,10 +2,13 @@ import { css, html, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
 import { UUIPopoverElement } from '@umbraco-ui/uui';
-import { UMB_INVITE_USER_MODAL } from '../../../../../../libs/modal/token/invite-user-modal.token';
-import { UMB_CREATE_USER_MODAL } from '../../../../../../libs/modal/token/create-user-modal.token';
 import type { UmbSectionViewUsersElement } from './section-view-users.element';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import {
+	UmbModalContext,
+	UMB_MODAL_CONTEXT_TOKEN,
+	UMB_INVITE_USER_MODAL,
+	UMB_CREATE_USER_MODAL,
+} from '@umbraco-cms/backoffice/modal';
 import type { IRoute } from '@umbraco-cms/internal/router';
 
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';

From 27795f46c17c907025db1f14464fa9b8559f019d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 22:48:57 +0100
Subject: [PATCH 80/96] fix lib imports

---
 .../libs/modal/modal-route-registration.controller.ts  |  3 +--
 src/Umbraco.Web.UI.Client/libs/observable-api/index.ts |  1 +
 .../documents/documents/repository/manifests.ts        |  3 +--
 .../media/media-types/repository/manifests.ts          |  3 +--
 .../backoffice/media/media/entity-actions/manifests.ts |  2 +-
 .../src/backoffice/media/media/repository/manifests.ts |  3 +--
 .../media/media/repository/media.repository.ts         |  3 +--
 .../members/member-groups/entity-actions/manifests.ts  |  2 +-
 .../members/member-groups/repository/manifests.ts      |  3 +--
 .../members/members/entity-actions/manifests.ts        |  2 +-
 .../backoffice/members/members/repository/manifests.ts |  3 +--
 .../src/backoffice/packages/repository/manifests.ts    |  3 +--
 .../settings/cultures/repository/manifests.ts          |  2 +-
 .../settings/data-types/repository/manifests.ts        |  3 +--
 .../settings/languages/repository/manifests.ts         |  3 +--
 .../settings/logviewer/workspace/logviewer.context.ts  | 10 ++++++++--
 .../settings/relation-types/repository/manifests.ts    |  3 +--
 .../repository/relation-type.repository.ts             |  3 +--
 .../backoffice/shared/collection/collection.context.ts |  3 +--
 .../entity-action/entity-action-list.element.ts        |  2 +-
 .../input-multi-url-picker.element.ts                  |  7 +++++--
 .../section/section-sidebar/section-sidebar.context.ts |  5 ++---
 .../templating/templates/entity-actions/manifests.ts   |  2 +-
 .../templating/templates/repository/manifests.ts       |  3 +--
 .../templates/repository/template.repository.ts        |  3 +--
 .../translation/dictionary/repository/manifests.ts     |  3 +--
 26 files changed, 38 insertions(+), 45 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
index f1ef34e69c..8d3ffae513 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
@@ -1,10 +1,9 @@
 // TODO: Be aware here we import a class from src!
 import { UMB_ROUTE_CONTEXT_TOKEN } from '../router/route.context';
-import type { UmbControllerInterface } from '../controller';
+import type { UmbControllerHostInterface, UmbControllerInterface } from '../controller';
 import { UmbModalRouteRegistration } from './modal-route-registration';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbModalConfig, UmbModalToken } from '@umbraco-cms/backoffice/modal';
-import { UmbControllerHostInterface } from 'libs/controller/controller-host.mixin';
 
 export class UmbModalRouteRegistrationController<D extends object = object, R = any>
 	extends UmbModalRouteRegistration<D, R>
diff --git a/src/Umbraco.Web.UI.Client/libs/observable-api/index.ts b/src/Umbraco.Web.UI.Client/libs/observable-api/index.ts
index dbfa7cf4b5..424099e1ec 100644
--- a/src/Umbraco.Web.UI.Client/libs/observable-api/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/observable-api/index.ts
@@ -1,5 +1,6 @@
 export * from './observer.controller';
 export * from './observer';
+export * from './basic-state';
 export * from './boolean-state';
 export * from './number-state';
 export * from './string-state';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/manifests.ts
index 6276b2c00b..b53c170e43 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/manifests.ts
@@ -1,8 +1,7 @@
 import { UmbDocumentRepository } from '../repository/document.repository';
 import { UmbDocumentStore } from './document.store';
 import { UmbDocumentTreeStore } from './document.tree.store';
-import { ManifestRepository } from 'libs/extensions-registry/repository.models';
-import { ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry';
+import type { ManifestRepository, ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const DOCUMENT_REPOSITORY_ALIAS = 'Umb.Repository.Document';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/manifests.ts
index 23906ac74e..57dd021694 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/manifests.ts
@@ -1,8 +1,7 @@
 import { UmbMediaTypeRepository } from './media-type.repository';
 import { UmbMediaTypeStore } from './media-type.detail.store';
 import { UmbMediaTypeTreeStore } from './media-type.tree.store';
-import { ManifestRepository } from 'libs/extensions-registry/repository.models';
-import { ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry';
+import type { ManifestStore, ManifestTreeStore, ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const MEDIA_TYPE_REPOSITORY_ALIAS = 'Umb.Repository.MediaType';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-actions/manifests.ts
index eb7b4c6ce0..c8b4e44629 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-actions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-actions/manifests.ts
@@ -1,6 +1,6 @@
 import { MEDIA_REPOSITORY_ALIAS } from '../repository/manifests';
+import type { ManifestEntityAction } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbTrashEntityAction } from '@umbraco-cms/backoffice/entity-action';
-import { ManifestEntityAction } from 'libs/extensions-registry/entity-action.models';
 
 const entityActions: Array<ManifestEntityAction> = [
 	{
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/manifests.ts
index 30c09e5a8b..7ccfb8b76a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/manifests.ts
@@ -1,8 +1,7 @@
 import { UmbMediaRepository } from './media.repository';
 import { UmbMediaStore } from './media.store';
 import { UmbMediaTreeStore } from './media.tree.store';
-import { ManifestRepository } from 'libs/extensions-registry/repository.models';
-import { ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry';
+import type { ManifestStore, ManifestTreeStore, ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const MEDIA_REPOSITORY_ALIAS = 'Umb.Repository.Media';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
index 6b74f80cf9..97f159183e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
@@ -7,9 +7,8 @@ import type { RepositoryTreeDataSource } from '@umbraco-cms/backoffice/repositor
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbDetailRepository } from '@umbraco-cms/backoffice/repository';
+import { UmbDetailRepository, UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
-import type { UmbTreeRepository } from 'libs/repository/tree-repository.interface';
 
 type ItemDetailType = MediaDetails;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/entity-actions/manifests.ts
index 174945b696..90bd62d4f2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/entity-actions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/entity-actions/manifests.ts
@@ -1,6 +1,6 @@
 import { MEMBER_GROUP_REPOSITORY_ALIAS } from '../repository/manifests';
+import type { ManifestEntityAction } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbDeleteEntityAction } from '@umbraco-cms/backoffice/entity-action';
-import { ManifestEntityAction } from 'libs/extensions-registry/entity-action.models';
 
 const entityActions: Array<ManifestEntityAction> = [
 	{
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/manifests.ts
index c9efa0f4be..038a11fe8e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/manifests.ts
@@ -1,8 +1,7 @@
 import { UmbMemberGroupRepository } from './member-group.repository';
 import { UmbMemberGroupStore } from './member-group.store';
 import { UmbMemberGroupTreeStore } from './member-group.tree.store';
-import { ManifestRepository } from 'libs/extensions-registry/repository.models';
-import { ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry';
+import type { ManifestStore, ManifestTreeStore, ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const MEMBER_GROUP_REPOSITORY_ALIAS = 'Umb.Repository.MemberGroup';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/entity-actions/manifests.ts
index b9a055bbd6..9f2f9a28b2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/entity-actions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/entity-actions/manifests.ts
@@ -1,6 +1,6 @@
 import { MEMBER_REPOSITORY_ALIAS } from '../repository/manifests';
+import type { ManifestEntityAction } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbDeleteEntityAction } from '@umbraco-cms/backoffice/entity-action';
-import { ManifestEntityAction } from 'libs/extensions-registry/entity-action.models';
 
 const entityActions: Array<ManifestEntityAction> = [
 	{
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/manifests.ts
index e5cd53441d..15c055c885 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/manifests.ts
@@ -1,8 +1,7 @@
 import { UmbMemberRepository } from './member.repository';
 import { UmbMemberStore } from './member.store';
 import { UmbMemberTreeStore } from './member.tree.store';
-import { ManifestRepository } from 'libs/extensions-registry/repository.models';
-import { ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry';
+import type { ManifestStore, ManifestTreeStore, ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const MEMBER_REPOSITORY_ALIAS = 'Umb.Repository.Member';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/manifests.ts
index f59cbfc4c5..b2a0069d5b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/manifests.ts
@@ -1,7 +1,6 @@
 import { UmbPackageRepository } from './package.repository';
 import { UmbPackageStore } from './package.store';
-import { ManifestRepository } from 'libs/extensions-registry/repository.models';
-import { ManifestStore } from '@umbraco-cms/backoffice/extensions-registry';
+import type { ManifestStore, ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const PACKAGE_REPOSITORY_ALIAS = 'Umb.Repository.Package';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/cultures/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/cultures/repository/manifests.ts
index 7502a562d3..0496f4acff 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/cultures/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/cultures/repository/manifests.ts
@@ -1,5 +1,5 @@
 import { UmbCultureRepository } from '../repository/culture.repository';
-import { ManifestRepository } from 'libs/extensions-registry/repository.models';
+import { ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const CULTURE_REPOSITORY_ALIAS = 'Umb.Repository.Culture';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/manifests.ts
index 8e68419718..0217359bf7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/manifests.ts
@@ -1,8 +1,7 @@
 import { UmbDataTypeRepository } from '../repository/data-type.repository';
 import { UmbDataTypeStore } from './data-type.store';
 import { UmbDataTypeTreeStore } from './data-type.tree.store';
-import { ManifestRepository } from 'libs/extensions-registry/repository.models';
-import { ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry';
+import type { ManifestStore, ManifestTreeStore, ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const DATA_TYPE_REPOSITORY_ALIAS = 'Umb.Repository.DataType';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/manifests.ts
index a068bc239f..75dcb127c4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/manifests.ts
@@ -1,7 +1,6 @@
 import { UmbLanguageRepository } from '../repository/language.repository';
 import { UmbLanguageStore } from './language.store';
-import { ManifestRepository } from 'libs/extensions-registry/repository.models';
-import { ManifestStore } from '@umbraco-cms/backoffice/extensions-registry';
+import type { ManifestStore, ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const LANGUAGE_REPOSITORY_ALIAS = 'Umb.Repository.Language';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts
index c03196a421..272cccd715 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts
@@ -1,5 +1,12 @@
 import { UmbLogViewerRepository } from '../repository/log-viewer.repository';
-import { ArrayState, createObservablePart, DeepState, ObjectState, StringState } from '@umbraco-cms/backoffice/observable-api';
+import {
+	BasicState,
+	ArrayState,
+	createObservablePart,
+	DeepState,
+	ObjectState,
+	StringState,
+} from '@umbraco-cms/backoffice/observable-api';
 import {
 	DirectionModel,
 	LogLevelCountsReponseModel,
@@ -11,7 +18,6 @@ import {
 } from '@umbraco-cms/backoffice/backend-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { BasicState } from 'libs/observable-api/basic-state';
 
 export type PoolingInterval = 0 | 2000 | 5000 | 10000 | 20000 | 30000;
 export interface PoolingCOnfig {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/manifests.ts
index fbbf4e87bb..7859009b6f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/manifests.ts
@@ -1,8 +1,7 @@
 import { UmbRelationTypeRepository } from '../repository/relation-type.repository';
 import { UmbRelationTypeStore } from './relation-type.store';
 import { UmbRelationTypeTreeStore } from './relation-type.tree.store';
-import { ManifestRepository } from 'libs/extensions-registry/repository.models';
-import { ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry';
+import { ManifestStore, ManifestTreeStore, ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const RELATION_TYPE_REPOSITORY_ALIAS = 'Umb.Repository.RelationType';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.repository.ts
index 5ba5077140..4c068d3a48 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.repository.ts
@@ -6,8 +6,7 @@ import { RelationTypeTreeDataSource } from './sources';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ProblemDetailsModel, RelationTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import type { UmbTreeRepository } from 'libs/repository/tree-repository.interface';
-import { UmbDetailRepository } from '@umbraco-cms/backoffice/repository';
+import { UmbDetailRepository, UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 
 type ItemType = RelationTypeResponseModel;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.context.ts
index 4347266039..d520450aa7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.context.ts
@@ -4,8 +4,7 @@ import type { UmbTreeStore } from '@umbraco-cms/backoffice/store';
 import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextToken, UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ArrayState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
-import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
-import { createExtensionClass } from 'libs/extensions-api/create-extension-class.function';
+import { umbExtensionsRegistry, createExtensionClass } from '@umbraco-cms/backoffice/extensions-api';
 import { UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
 
 // TODO: Clean up the need for store as Media has switched to use Repositories(repository).
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/entity-action/entity-action-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/entity-action/entity-action-list.element.ts
index a3edc8b9f8..3ea2640821 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/entity-action/entity-action-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/entity-action/entity-action-list.element.ts
@@ -1,9 +1,9 @@
 import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { map } from 'rxjs';
+import { ManifestEntityAction } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
-import { ManifestEntityAction } from 'libs/extensions-registry/entity-action.models';
 
 @customElement('umb-entity-action-list')
 class UmbEntityActionListElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index fa471d1be1..9f9d6ba441 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -4,10 +4,13 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import type { UmbVariantId } from '../../variants/variant-id.class';
-import { UmbLinkPickerLink, UMB_LINK_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
+import {
+	UmbLinkPickerLink,
+	UMB_LINK_PICKER_MODAL,
+	UmbModalRouteRegistrationController,
+} from '@umbraco-cms/backoffice/modal';
 import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbModalRouteRegistrationController } from 'libs/modal/modal-route-registration.controller';
 
 /**
  * @element umb-input-multi-url-picker
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.context.ts
index 4ef7539100..ef32bc34fb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.context.ts
@@ -1,11 +1,10 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
-import { StringState } from '@umbraco-cms/backoffice/observable-api';
-import { BasicState } from 'libs/observable-api/basic-state';
+import { StringState, BooleanState } from '@umbraco-cms/backoffice/observable-api';
 
 export class UmbSectionSidebarContext {
 	#host: UmbControllerHostInterface;
-	#contextMenuIsOpen = new BasicState<boolean>(false);
+	#contextMenuIsOpen = new BooleanState(false);
 	contextMenuIsOpen = this.#contextMenuIsOpen.asObservable();
 
 	#entityType = new StringState<undefined>(undefined);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/manifests.ts
index 81e96d6281..a85363c686 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/manifests.ts
@@ -1,7 +1,7 @@
 import { TEMPLATE_REPOSITORY_ALIAS } from '../repository/manifests';
 import { UmbCreateEntityAction } from './create/create.action';
+import { ManifestEntityAction } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbDeleteEntityAction } from '@umbraco-cms/backoffice/entity-action';
-import { ManifestEntityAction } from 'libs/extensions-registry/entity-action.models';
 
 const entityActions: Array<ManifestEntityAction> = [
 	{
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/manifests.ts
index 031c27f56a..2ff152e430 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/manifests.ts
@@ -1,8 +1,7 @@
 import { UmbTemplateRepository } from '../repository/template.repository';
 import { UmbTemplateTreeStore } from './template.tree.store';
 import { UmbTemplateStore } from './template.store';
-import { ManifestRepository } from 'libs/extensions-registry/repository.models';
-import { ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry';
+import { ManifestStore, ManifestTreeStore, ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const TEMPLATE_REPOSITORY_ALIAS = 'Umb.Repository.Template';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.repository.ts
index ef0bb4852e..f7bdb4dd69 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.repository.ts
@@ -2,12 +2,11 @@ import { UmbTemplateDetailServerDataSource } from './sources/template.detail.ser
 import { TemplateTreeServerDataSource } from './sources/template.tree.server.data';
 import { UmbTemplateStore, UMB_TEMPLATE_STORE_CONTEXT_TOKEN } from './template.store';
 import { UmbTemplateTreeStore, UMB_TEMPLATE_TREE_STORE_CONTEXT_TOKEN } from './template.tree.store';
+import type { UmbDetailRepository, UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
 import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ProblemDetailsModel, TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbDetailRepository } from 'libs/repository/detail-repository.interface';
-import { UmbTreeRepository } from 'libs/repository/tree-repository.interface';
 
 export class UmbTemplateRepository implements UmbTreeRepository, UmbDetailRepository<TemplateResponseModel> {
 	#init;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/manifests.ts
index 688a4769a7..012668b989 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/manifests.ts
@@ -1,8 +1,7 @@
 import { UmbDictionaryRepository } from '../repository/dictionary.repository';
 import { UmbDictionaryTreeStore } from './dictionary.tree.store';
 import { UmbDictionaryStore } from './dictionary.store';
-import { ManifestRepository } from 'libs/extensions-registry/repository.models';
-import { ManifestStore, ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry';
+import { ManifestStore, ManifestTreeStore, ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const DICTIONARY_REPOSITORY_ALIAS = 'Umb.Repository.Dictionary';
 

From 85fcfda1f53d690761e301d32b1eec3f603227a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 23:04:34 +0100
Subject: [PATCH 81/96] commit for test

---
 .../components/input-user-group/input-user-group.element.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
index 7315cd5a81..143aa867c6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
@@ -7,7 +7,7 @@ import {
 	UMB_USER_GROUP_STORE_CONTEXT_TOKEN,
 } from '../../../users/user-groups/repository/user-group.store';
 
-import { UMB_USER_GROUP_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
+import { UMB_USER_GROUP_PICKER_MODAL } from '../../../../../libs/modal/token/user-group-picker-modal.token';
 import type { UserGroupEntity } from '@umbraco-cms/backoffice/models';
 
 @customElement('umb-input-user-group')

From bc1119b0c688d12c0708869a4dedc97d93f6d3cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 23:05:58 +0100
Subject: [PATCH 82/96] Revert "commit for test"

This reverts commit 85fcfda1f53d690761e301d32b1eec3f603227a9.
---
 .../components/input-user-group/input-user-group.element.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
index 143aa867c6..7315cd5a81 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
@@ -7,7 +7,7 @@ import {
 	UMB_USER_GROUP_STORE_CONTEXT_TOKEN,
 } from '../../../users/user-groups/repository/user-group.store';
 
-import { UMB_USER_GROUP_PICKER_MODAL } from '../../../../../libs/modal/token/user-group-picker-modal.token';
+import { UMB_USER_GROUP_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import type { UserGroupEntity } from '@umbraco-cms/backoffice/models';
 
 @customElement('umb-input-user-group')

From fadc5580d05fc15c2350bfde5cf457f872cafa9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 23:06:29 +0100
Subject: [PATCH 83/96] rule to ensure libs imports

---
 src/Umbraco.Web.UI.Client/.eslintrc.json      |  1 +
 .../eslint-local-rules.cjs                    | 77 +++++++++++++++----
 2 files changed, 64 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/.eslintrc.json b/src/Umbraco.Web.UI.Client/.eslintrc.json
index 7725f81d2c..5fd970bda6 100644
--- a/src/Umbraco.Web.UI.Client/.eslintrc.json
+++ b/src/Umbraco.Web.UI.Client/.eslintrc.json
@@ -35,6 +35,7 @@
 				"local-rules/bad-type-import": "error",
 				"local-rules/no-direct-api-import": "warn",
 				"local-rules/prefer-import-aliases": "error",
+				"local-rules/prefer-umbraco-cms-imports": "error",
 				"@typescript-eslint/no-non-null-assertion": "off"
 			},
 			"settings": {
diff --git a/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs b/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
index 1ec3bed82c..ae3a715e1a 100644
--- a/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
+++ b/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
@@ -20,18 +20,21 @@ module.exports = {
 		create: function (context) {
 			return {
 				ImportDeclaration: function (node) {
-					if (node.source.parent.importKind !== 'type' && (node.source.value.endsWith('/models') || node.source.value === 'router-slot/model')) {
+					if (
+						node.source.parent.importKind !== 'type' &&
+						(node.source.value.endsWith('/models') || node.source.value === 'router-slot/model')
+					) {
 						const sourceCode = context.getSourceCode();
 						const nodeSource = sourceCode.getText(node);
 						context.report({
 							node,
 							message: 'Use `import type` instead of `import`.',
-							fix: fixer => fixer.replaceText(node, nodeSource.replace('import', 'import type')),
+							fix: (fixer) => fixer.replaceText(node, nodeSource.replace('import', 'import type')),
 						});
 					}
 				},
 			};
-		}
+		},
 	},
 
 	/** @type {import('eslint').Rule.RuleModule} */
@@ -39,9 +42,10 @@ module.exports = {
 		meta: {
 			type: 'suggestion',
 			docs: {
-				description: 'Ensures that any API resources from the `@umbraco-cms/backend-api` module are not used directly. Instead you should use the `tryExecuteAndNotify` function from the `@umbraco-cms/resources` module.',
+				description:
+					'Ensures that any API resources from the `@umbraco-cms/backend-api` module are not used directly. Instead you should use the `tryExecuteAndNotify` function from the `@umbraco-cms/resources` module.',
 				category: 'Best Practices',
-				recommended: true
+				recommended: true,
 			},
 			fixable: 'code',
 			schema: [],
@@ -50,19 +54,30 @@ module.exports = {
 			return {
 				// If methods called on *Resource classes are not already wrapped with `await tryExecuteAndNotify()`, then we should suggest to wrap them.
 				CallExpression: function (node) {
-					if (node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.object.name.endsWith('Resource') && node.callee.property.type === 'Identifier' && node.callee.property.name !== 'constructor') {
-						const hasTryExecuteAndNotify = node.parent && node.parent.callee && (node.parent.callee.name === 'tryExecute' || node.parent.callee.name === 'tryExecuteAndNotify');
+					if (
+						node.callee.type === 'MemberExpression' &&
+						node.callee.object.type === 'Identifier' &&
+						node.callee.object.name.endsWith('Resource') &&
+						node.callee.property.type === 'Identifier' &&
+						node.callee.property.name !== 'constructor'
+					) {
+						const hasTryExecuteAndNotify =
+							node.parent &&
+							node.parent.callee &&
+							(node.parent.callee.name === 'tryExecute' || node.parent.callee.name === 'tryExecuteAndNotify');
 						if (!hasTryExecuteAndNotify) {
 							context.report({
 								node,
 								message: 'Wrap this call with `tryExecuteAndNotify()`. Make sure to `await` the result.',
-								fix: fixer => [fixer.insertTextBefore(node, 'tryExecuteAndNotify(this, '), fixer.insertTextAfter(node, ')')],
+								fix: (fixer) => [
+									fixer.insertTextBefore(node, 'tryExecuteAndNotify(this, '),
+									fixer.insertTextAfter(node, ')'),
+								],
 							});
 						}
 					}
-				}
+				},
 			};
-
 		},
 	},
 
@@ -71,9 +86,10 @@ module.exports = {
 		meta: {
 			type: 'suggestion',
 			docs: {
-				description: 'Ensures that the application does not rely on file system paths for imports. Instead, use import aliases or relative imports. This also solves a problem where GitHub fails on the test runner step.',
+				description:
+					'Ensures that the application does not rely on file system paths for imports. Instead, use import aliases or relative imports. This also solves a problem where GitHub fails on the test runner step.',
 				category: 'Best Practices',
-				recommended: true
+				recommended: true,
 			},
 			schema: [],
 		},
@@ -83,11 +99,44 @@ module.exports = {
 					if (node.source.value.startsWith('src/')) {
 						context.report({
 							node,
-							message: 'Prefer using import aliases or relative imports instead of absolute imports. Example: `import { MyComponent } from "src/components/MyComponent";` should be `import { MyComponent } from "@components/MyComponent";`'
+							message:
+								'Prefer using import aliases or relative imports instead of absolute imports. Example: `import { MyComponent } from "src/components/MyComponent";` should be `import { MyComponent } from "@components/MyComponent";`',
 						});
 					}
 				},
 			};
-		}
+		},
+	},
+
+	/** @type {import('eslint').Rule.RuleModule} */
+	'prefer-umbraco-cms-imports': {
+		meta: {
+			type: 'suggestion',
+			docs: {
+				description: 'Ensure that imports from "libs" namespace are replaced with "@umbraco-cms/backoffice" namespace',
+				category: 'Best Practices',
+				recommended: true,
+			},
+			fixable: 'code',
+			schema: [],
+		},
+		create: function (context) {
+			return {
+				ImportDeclaration: function (node) {
+					if (node.source.value.startsWith('libs/')) {
+						const newImportPath = node.source.value.replace(/^libs\//, '@umbraco-cms/backoffice/');
+						const specifiers = node.specifiers.map((specifier) => specifier.local.name).join(', ');
+						const newImportStatement = `import { ${specifiers} } from '${newImportPath}';`;
+						context.report({
+							node,
+							message: `Use '${newImportPath}' instead of '${node.source.value}' for imports from 'libs' namespace.`,
+							fix: function (fixer) {
+								return fixer.replaceText(node, newImportStatement);
+							},
+						});
+					}
+				},
+			};
+		},
 	},
 };

From 4a4a3965dc3bc7143fcb57989b072c0c461673a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 23:10:13 +0100
Subject: [PATCH 84/96] import fix

---
 .../allowed-document-types-modal.element.ts                  | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
index b133a5d74c..ff55e6dfc3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
@@ -3,10 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { UmbDocumentTypeRepository } from '../../repository/document-type.repository';
-import {
-	UmbAllowedDocumentTypesModalData,
-	UmbAllowedDocumentTypesModalResult,
-} from '../../../../../../libs/modal/token/allowed-document-types-modal.token';
+import { UmbAllowedDocumentTypesModalData, UmbAllowedDocumentTypesModalResult } from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 import { DocumentTypeTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 

From c4b12554ce1a54f2fe5a3ab0e214c0437859773b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 23:28:29 +0100
Subject: [PATCH 85/96] corrected imports

---
 .../eslint-local-rules.cjs                     | 18 +++++++++++-------
 .../document-picker-modal.element.ts           |  5 +----
 .../document-picker-modal.stories.ts           |  2 +-
 .../media-picker/media-picker-modal.element.ts |  5 +----
 .../modal-views/fields-settings.element.ts     |  5 +----
 5 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs b/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
index ae3a715e1a..0bd5d759ae 100644
--- a/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
+++ b/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
@@ -108,12 +108,13 @@ module.exports = {
 		},
 	},
 
+	// TODO: Its not bullet proof, but it will catch most/some cases.
 	/** @type {import('eslint').Rule.RuleModule} */
 	'prefer-umbraco-cms-imports': {
 		meta: {
 			type: 'suggestion',
 			docs: {
-				description: 'Ensure that imports from "libs" namespace are replaced with "@umbraco-cms/backoffice" namespace',
+				description: 'Replace relative imports to libs/... with @umbraco-cms/backoffice/...',
 				category: 'Best Practices',
 				recommended: true,
 			},
@@ -121,17 +122,20 @@ module.exports = {
 			schema: [],
 		},
 		create: function (context) {
+			const libsRegex = /(\.\.\/)*libs\/(.*)/;
 			return {
 				ImportDeclaration: function (node) {
-					if (node.source.value.startsWith('libs/')) {
-						const newImportPath = node.source.value.replace(/^libs\//, '@umbraco-cms/backoffice/');
-						const specifiers = node.specifiers.map((specifier) => specifier.local.name).join(', ');
-						const newImportStatement = `import { ${specifiers} } from '${newImportPath}';`;
+					const sourceValue = node.source.value;
+					if (sourceValue.startsWith('libs/') || libsRegex.test(sourceValue)) {
+						const importPath = sourceValue.replace(libsRegex, (match, p1, p2) => {
+							const levels = p1.match(/\.\.\//g) || [];
+							return `@umbraco-cms/backoffice/${p2}`;
+						});
 						context.report({
 							node,
-							message: `Use '${newImportPath}' instead of '${node.source.value}' for imports from 'libs' namespace.`,
+							message: `Use import alias @umbraco-cms/backoffice instead of relative path "${sourceValue}".`,
 							fix: function (fixer) {
-								return fixer.replaceText(node, newImportStatement);
+								return fixer.replaceTextRange(node.source.range, `'${importPath}'`);
 							},
 						});
 					}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts
index 858ba72458..88429ab1a7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts
@@ -2,10 +2,7 @@ import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
 import type { UmbTreeElement } from '../../../../shared/components/tree/tree.element';
-import {
-	UmbDocumentPickerModalData,
-	UmbDocumentPickerModalResult,
-} from '../../../../../../libs/modal/token/document-picker-modal.token';
+import { UmbDocumentPickerModalData, UmbDocumentPickerModalResult } from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 // TODO: make use of UmbPickerLayoutBase
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts
index 0e599203f7..ec43ba460e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.stories.ts
@@ -4,8 +4,8 @@ import './document-picker-modal.element';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
-import type { UmbDocumentPickerModalData } from '../../../../../../libs/modal/token/document-picker-modal.token';
 import type { UmbDocumentPickerModalElement } from './document-picker-modal.element';
+import type { UmbDocumentPickerModalData } from '@umbraco-cms/backoffice/modal';
 
 export default {
 	title: 'API/Modals/Layouts/Content Picker',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts
index 1c49ee55a5..e141291a0b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts
@@ -2,10 +2,7 @@ import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbTreeElement } from '../../../../shared/components/tree/tree.element';
-import {
-	UmbMediaPickerModalData,
-	UmbMediaPickerModalResult,
-} from '../../../../../../libs/modal/token/media-picker-modal.token';
+import { UmbMediaPickerModalData, UmbMediaPickerModalResult } from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 @customElement('umb-media-picker-modal')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
index 0844ab9751..337623cfcc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
@@ -1,10 +1,7 @@
 import { html, css } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
-import {
-	UmbCreateDocumentModalResultData,
-	UmbExamineFieldsSettingsModalData,
-} from '../../../../../../../libs/modal/token/examine-fields-settings-modal.token';
+import { UmbCreateDocumentModalResultData, UmbExamineFieldsSettingsModalData } from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 @customElement('umb-examine-fields-settings-modal')

From e9e88b49071f1bd0becbf83febacf54c4134b279 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 23:34:51 +0100
Subject: [PATCH 86/96] correct imports to use index

---
 .../components/debug/modals/debug/debug-modal.element.ts     | 2 +-
 .../shared/modals/confirm/confirm-modal.element.ts           | 3 +--
 .../shared/modals/confirm/confirm-modal.stories.ts           | 2 +-
 .../modals/embedded-media/embedded-media-modal.element.ts    | 4 ++--
 .../modals/embedded-media/embedded-media-modal.stories.ts    | 2 +-
 .../shared/modals/icon-picker/icon-picker-modal.element.ts   | 5 +----
 .../shared/modals/icon-picker/icon-picker-modal.stories.ts   | 2 +-
 .../shared/modals/link-picker/link-picker-modal.element.ts   | 2 +-
 .../property-editor-ui-picker-modal.element.ts               | 2 +-
 .../property-editor-ui-picker-modal.stories.ts               | 2 +-
 .../property-editor-ui-multi-url-picker.element.ts           | 2 +-
 .../create/create-dictionary-modal-layout.element.ts         | 5 +----
 .../entity-actions/export/export-dictionary-modal.element.ts | 5 +----
 .../entity-actions/import/import-dictionary-modal.element.ts | 5 +----
 .../modals/change-password/change-password-modal.element.ts  | 3 +--
 .../users/users/workspace/user-workspace-edit.element.ts     | 2 +-
 .../src/core/mocks/domains/rte-embed.handlers.ts             | 2 +-
 17 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts
index a68255a98b..74e5ade59c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts
@@ -1,7 +1,7 @@
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css';
-import { UmbContextDebuggerModalData } from '../../../../../../../libs/modal/token/debug-modal.token';
+import { UmbContextDebuggerModalData } from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 @customElement('umb-context-debugger-modal')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts
index 9e25f29734..f710783f81 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts
@@ -1,9 +1,8 @@
 import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
-import { UmbConfirmModalData, UmbConfirmModalResult } from '../../../../../libs/modal/token/confirm-modal.token';
+import { UmbConfirmModalData, UmbConfirmModalResult, UmbModalHandler } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbModalHandler } from '@umbraco-cms/backoffice/modal';
 
 @customElement('umb-confirm-modal')
 export class UmbConfirmModalElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.stories.ts
index c9b1eb8b65..790bc96c46 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.stories.ts
@@ -3,8 +3,8 @@ import './confirm-modal.element';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
-import type { UmbConfirmModalData } from '../../../../../libs/modal/token/confirm-modal.token';
 import type { UmbConfirmModalElement } from './confirm-modal.element';
+import type { UmbConfirmModalData } from '@umbraco-cms/backoffice/modal';
 
 export default {
 	title: 'API/Modals/Layouts/Confirm',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.element.ts
index 1cbcbcf091..6f38cc48dc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.element.ts
@@ -8,10 +8,10 @@ import {
 	OEmbedStatus,
 	UmbEmbeddedMediaModalData,
 	UmbEmbeddedMediaModalResult,
-} from '../../../../../libs/modal/token/embedded-media-modal.token';
+	UmbModalHandler,
+} from '@umbraco-cms/backoffice/modal';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbModalHandler } from '@umbraco-cms/backoffice/modal';
 
 interface UmbEmbeddedMediaModalModel {
 	url?: string;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.stories.ts
index 068a9c5af0..2638f0142c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.stories.ts
@@ -3,7 +3,7 @@ import './embedded-media-modal.element';
 
 import { Meta } from '@storybook/web-components';
 import { html } from 'lit';
-import { UmbEmbeddedMediaModalData } from '../../../../../libs/modal/token/embedded-media-modal.token';
+import { UmbEmbeddedMediaModalData } from '@umbraco-cms/backoffice/modal';
 
 export default {
 	title: 'API/Modals/Layouts/Embedded Media',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts
index c74cb4893d..ff0cab31b1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.element.ts
@@ -6,10 +6,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import icons from '../../../../../public-assets/icons/icons.json';
-import {
-	UmbIconPickerModalData,
-	UmbIconPickerModalResult,
-} from '../../../../../libs/modal/token/icon-picker-modal.token';
+import { UmbIconPickerModalData, UmbIconPickerModalResult } from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 // TODO: Make use of UmbPickerLayoutBase
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.stories.ts
index 5e65653ef8..53ee8a5bdb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/icon-picker/icon-picker-modal.stories.ts
@@ -4,8 +4,8 @@ import './icon-picker-modal.element';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
-import { UmbIconPickerModalData } from '../../../../../libs/modal/token/icon-picker-modal.token';
 import type { UmbIconPickerModalElement } from './icon-picker-modal.element';
+import { UmbIconPickerModalData } from '@umbraco-cms/backoffice/modal';
 
 export default {
 	title: 'API/Modals/Layouts/Icon Picker',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
index eda086a941..7325caf339 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
@@ -8,7 +8,7 @@ import {
 	UmbLinkPickerLink,
 	UmbLinkPickerModalData,
 	UmbLinkPickerModalResult,
-} from '../../../../../libs/modal/token/link-picker-modal.token';
+} from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 import { buildUdi, getKeyFromUdi } from '@umbraco-cms/backoffice/utils';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
index 8369f59e4b..62dfc7906e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
@@ -7,7 +7,7 @@ import type { UUIInputEvent } from '@umbraco-ui/uui';
 import {
 	UmbPropertyEditorUIPickerModalData,
 	UmbPropertyEditorUIPickerModalResult,
-} from '../../../../../../libs/modal/token/property-editor-ui-picker-modal.token';
+} from '@umbraco-cms/backoffice/modal';
 import type { UmbModalHandler } from '@umbraco-cms/backoffice/modal';
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/backoffice/extensions-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
index beba15f095..fd6291ef18 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
-import type { UmbPropertyEditorUIPickerModalData } from '../../../../../../libs/modal/token/property-editor-ui-picker-modal.token';
 import type { UmbPropertyEditorUIPickerModalElement } from './property-editor-ui-picker-modal.element';
+import type { UmbPropertyEditorUIPickerModalData } from '@umbraco-cms/backoffice/modal';
 
 import './property-editor-ui-picker-modal.element';
 import '../../../components/body-layout/body-layout.element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
index fc9dfb512a..e292357618 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
@@ -3,8 +3,8 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { UmbInputMultiUrlPickerElement } from '../../../../shared/components/input-multi-url-picker/input-multi-url-picker.element';
-import { UmbLinkPickerLink } from '../../../../../../libs/modal/token/link-picker-modal.token';
 import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../../shared/components/workspace-property/workspace-property.context';
+import { UmbLinkPickerLink } from '@umbraco-cms/backoffice/modal';
 import { UmbPropertyEditorElement } from '@umbraco-cms/backoffice/property-editor';
 import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
index f0eaecdf60..6756740c65 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
@@ -2,10 +2,7 @@ import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, query } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
-import {
-	UmbCreateDictionaryModalData,
-	UmbCreateDictionaryModalResult,
-} from '../../../../../../libs/modal/token/create-dictionary-modal.token';
+import { UmbCreateDictionaryModalData, UmbCreateDictionaryModalResult } from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 @customElement('umb-create-dictionary-modal')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal.element.ts
index 1cb2faa92a..9f746ae2e1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal.element.ts
@@ -1,10 +1,7 @@
 import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, query } from 'lit/decorators.js';
-import {
-	UmbExportDictionaryModalData,
-	UmbExportDictionaryModalResult,
-} from '../../../../../../libs/modal/token/export-dictionary-modal.token';
+import { UmbExportDictionaryModalData, UmbExportDictionaryModalResult } from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 @customElement('umb-export-dictionary-modal')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal.element.ts
index f5e180997b..92e2e6f507 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import-dictionary-modal.element.ts
@@ -5,10 +5,7 @@ import { when } from 'lit/directives/when.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { UmbTreeElement } from '../../../../shared/components/tree/tree.element';
 import { UmbDictionaryRepository } from '../../repository/dictionary.repository';
-import {
-	UmbImportDictionaryModalData,
-	UmbImportDictionaryModalResult,
-} from '../../../../../../libs/modal/token/import-dictionary-modal.token';
+import { UmbImportDictionaryModalData, UmbImportDictionaryModalResult } from '@umbraco-cms/backoffice/modal';
 import { UploadDictionaryResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
index a777278239..f5fc28ad43 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
@@ -1,8 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, CSSResultGroup, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { UmbChangePasswordModalData } from '../../../../../../libs/modal/token/change-password-modal.token';
-import { UmbModalHandler } from '@umbraco-cms/backoffice/modal';
+import { UmbModalHandler, UmbChangePasswordModalData } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-change-password-modal')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
index b9b8ebad54..06e603d4d9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
@@ -6,8 +6,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { UmbCurrentUserStore, UMB_CURRENT_USER_STORE_CONTEXT_TOKEN } from '../../current-user/current-user.store';
-import { UMB_CHANGE_PASSWORD_MODAL } from '../../../../../libs/modal/token/change-password-modal.token';
 import { UmbUserWorkspaceContext } from './user-workspace.context';
+import { UMB_CHANGE_PASSWORD_MODAL } from '@umbraco-cms/backoffice/modal';
 import type { UmbModalContext } from '@umbraco-cms/backoffice/modal';
 import { getLookAndColorFromUserStatus } from '@umbraco-cms/backoffice/utils';
 import type { UserDetails } from '@umbraco-cms/backoffice/models';
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts
index 9d2adb5296..dd811943f0 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts
@@ -1,5 +1,5 @@
 import { rest } from 'msw';
-import { OEmbedResult, OEmbedStatus } from '../../../../libs/modal/token/embedded-media-modal.token';
+import { OEmbedResult, OEmbedStatus } from '@umbraco-cms/backoffice/modal';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 
 export const handlers = [

From d5e767230b2b67578c112023323b7e985f9a8a42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 23 Mar 2023 23:36:56 +0100
Subject: [PATCH 87/96] correct story

---
 src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
index 197252a30e..e04cdacc9e 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx
@@ -151,7 +151,7 @@ descripe the addional features of the route Registration:
 	render() {
 		return html`
 			${this._items?.map((item, index) =>
-				html`<uui-button look="placeholder" label="Edit item ${index}" .href=${this._modalRouteBuilder?.({ index: -1 })}>Add</uui-button>`
+				html`<uui-button look="placeholder" label="Edit item ${index}" .href=${this._modalRouteBuilder?.({ index })}>Add</uui-button>`
 			)}
 		`;
 	}

From 59cb83d42a1c245320333c12f6ff43dc64349baf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 27 Mar 2023 13:48:46 +0200
Subject: [PATCH 88/96] remove comments

---
 src/Umbraco.Web.UI.Client/libs/router/route.context.ts   | 7 -------
 src/Umbraco.Web.UI.Client/libs/router/route.interface.ts | 8 --------
 2 files changed, 15 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/router/route.context.ts b/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
index 93cc0f64b8..9c240d704d 100644
--- a/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
@@ -11,7 +11,6 @@ import { UMB_MODAL_CONTEXT_TOKEN, UmbModalRouteRegistration } from '@umbraco-cms
 const EmptyDiv = document.createElement('div');
 
 export class UmbRouteContext {
-	//#host: UmbControllerHostInterface;
 	#modalRegistrations: UmbModalRouteRegistration[] = [];
 	#modalContext?: typeof UMB_MODAL_CONTEXT_TOKEN.TYPE;
 	#contextRoutes: UmbRoute[] = [];
@@ -19,13 +18,7 @@ export class UmbRouteContext {
 	#activeModalPath?: string;
 
 	constructor(host: UmbControllerHostInterface, private _onGotModals: (contextRoutes: any) => void) {
-		//this.#host = host;
 		new UmbContextProviderController(host, UMB_ROUTE_CONTEXT_TOKEN, this);
-		/*new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (context) => {
-			console.log('got a parent', this === context, this, context);
-			// Why did i want a parent route? was it to capture and inherit routes?
-			// This is maybe not so necessary as it stands right now, so lets see how it goes.
-		});*/
 		new UmbContextConsumerController(host, UMB_MODAL_CONTEXT_TOKEN, (context) => {
 			this.#modalContext = context;
 			this.#generateContextRoutes();
diff --git a/src/Umbraco.Web.UI.Client/libs/router/route.interface.ts b/src/Umbraco.Web.UI.Client/libs/router/route.interface.ts
index 0017d03325..b76705bd13 100644
--- a/src/Umbraco.Web.UI.Client/libs/router/route.interface.ts
+++ b/src/Umbraco.Web.UI.Client/libs/router/route.interface.ts
@@ -1,11 +1,3 @@
 import type { IRoute } from 'router-slot/model';
-/*
-type Optional<T> = { [P in keyof T]?: T[P] };
 
-type IRouteWithComponentRoute = Exclude<IRoute, IComponentRoute>;
-type IComponentRouteWithOptionalComponent = Omit<IComponentRoute, 'component'> &
-	Optional<Pick<IComponentRoute, 'component'>>;
-
-export type UmbRoute = IRouteWithComponentRoute | IComponentRouteWithOptionalComponent;
-*/
 export type UmbRoute = IRoute;

From 7dc614751b329790b9499f729aaa6790e1bb3890 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 28 Mar 2023 10:57:28 +0200
Subject: [PATCH 89/96] change to use type import

---
 src/Umbraco.Web.UI.Client/libs/router/route.context.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/router/route.context.ts b/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
index 9c240d704d..67ab065308 100644
--- a/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
@@ -1,4 +1,4 @@
-import { IRoutingInfo, PARAM_IDENTIFIER, stripSlash } from 'router-slot';
+import type { IRoutingInfo, PARAM_IDENTIFIER, stripSlash } from 'router-slot';
 import { UmbRoute } from './route.interface';
 import {
 	UmbContextConsumerController,

From d63419ccda787a6afee33d56ecf50248c0f15dd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 28 Mar 2023 13:04:11 +0200
Subject: [PATCH 90/96] make sure to only import types from router-slot in
 libs.

---
 .../libs/router/route.context.ts                    | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/router/route.context.ts b/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
index 67ab065308..021495954d 100644
--- a/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
@@ -1,4 +1,4 @@
-import type { IRoutingInfo, PARAM_IDENTIFIER, stripSlash } from 'router-slot';
+import type { IRoutingInfo, ISlashOptions } from 'router-slot';
 import { UmbRoute } from './route.interface';
 import {
 	UmbContextConsumerController,
@@ -10,6 +10,17 @@ import { UMB_MODAL_CONTEXT_TOKEN, UmbModalRouteRegistration } from '@umbraco-cms
 
 const EmptyDiv = document.createElement('div');
 
+const PARAM_IDENTIFIER = /:([^\\/]+)/g;
+
+function stripSlash(path: string): string {
+	return slashify(path, { start: false, end: false });
+}
+
+function slashify(path: string, { start = true, end = true }: Partial<ISlashOptions> = {}): string {
+	path = start && !path.startsWith('/') ? `/${path}` : !start && path.startsWith('/') ? path.slice(1) : path;
+	return end && !path.endsWith('/') ? `${path}/` : !end && path.endsWith('/') ? path.slice(0, path.length - 1) : path;
+}
+
 export class UmbRouteContext {
 	#modalRegistrations: UmbModalRouteRegistration[] = [];
 	#modalContext?: typeof UMB_MODAL_CONTEXT_TOKEN.TYPE;

From feacedb686fc64719cac1d1799699110c973e995 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 28 Mar 2023 13:04:32 +0200
Subject: [PATCH 91/96] make watch script do the same as build. Still missing
 watch feature for libs.

---
 src/Umbraco.Web.UI.Client/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index b09fa44cd1..2d00798d91 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -30,8 +30,8 @@
 		"build": "tsc && vite build --mode staging",
 		"build:libs": "npm run wc-analyze && npm run wc-analyze:vscode && rollup -c rollup-libs.config.js && node utils/move-libs.js",
 		"build:for:static": "tsc && vite build",
-		"build:for:cms": "tsc && vite build -c vite.cms.config.ts && npm run build:libs",
-		"build:for:cms:watch": "vite build -c vite.cms.config.ts --watch",
+		"build:for:cms": "tsc && npm run build:libs && vite build -c vite.cms.config.ts",
+		"build:for:cms:watch": "tsc && npm run build:libs && vite build -c vite.cms.config.ts --watch",
 		"preview": "vite preview --open",
 		"test": "web-test-runner --coverage",
 		"test:watch": "web-test-runner --watch",

From f9b4f5050ad80cdcdc9688731301e3b9c7630652 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 28 Mar 2023 15:03:48 +0200
Subject: [PATCH 92/96] do not empty outDir to prevent vite from overwriting
 libs

---
 src/Umbraco.Web.UI.Client/vite.cms.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/vite.cms.config.ts b/src/Umbraco.Web.UI.Client/vite.cms.config.ts
index b174cd7f82..2d0006a27b 100644
--- a/src/Umbraco.Web.UI.Client/vite.cms.config.ts
+++ b/src/Umbraco.Web.UI.Client/vite.cms.config.ts
@@ -14,7 +14,7 @@ export default defineConfig({
 			external: [/^@umbraco-cms\/backoffice\//]
 		},
 		outDir: '../Umbraco.Cms.StaticAssets/wwwroot/umbraco/backoffice',
-		emptyOutDir: true,
+		emptyOutDir: false,
 		sourcemap: true,
 	},
 	base: '/umbraco/backoffice/',

From e384a2687a0b4588021a51ed7e125d13e3f477ce Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 29 Mar 2023 10:46:13 +0200
Subject: [PATCH 93/96] fix observe actions when the tree item is set

---
 .../tree/tree-item-base/tree-item-base.context.ts      | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts
index 25c3a500cb..7216fb0683 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts
@@ -15,6 +15,7 @@ import {
 } from '@umbraco-cms/backoffice/context-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 import type { TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import { ManifestEntityAction } from 'libs/extensions-registry/entity-action.models';
 
 // add type for unique function
 export type UmbTreeItemUniqueFunction<T extends TreeItemPresentationModel> = (x: T) => string | null | undefined;
@@ -54,11 +55,11 @@ export class UmbTreeItemContextBase<T extends TreeItemPresentationModel = TreeIt
 	#sectionContext?: UmbSectionContext;
 	#sectionSidebarContext?: UmbSectionSidebarContext;
 	#getUniqueFunction: UmbTreeItemUniqueFunction<T>;
+	#actionObserver?: UmbObserverController<ManifestEntityAction[]>;
 
 	constructor(host: UmbControllerHostInterface, getUniqueFunction: UmbTreeItemUniqueFunction<T>) {
 		this.host = host;
 		this.#getUniqueFunction = getUniqueFunction;
-		this.#observeTreeItemActions();
 		this.#consumeContexts();
 		new UmbContextProviderController(host, UMB_TREE_ITEM_CONTEXT_TOKEN, this);
 	}
@@ -77,6 +78,7 @@ export class UmbTreeItemContextBase<T extends TreeItemPresentationModel = TreeIt
 		this.type = treeItem.type;
 
 		this.#hasChildren.next(treeItem.hasChildren || false);
+		this.#observeActions();
 		this.#treeItem.next(treeItem);
 	}
 
@@ -160,8 +162,10 @@ export class UmbTreeItemContextBase<T extends TreeItemPresentationModel = TreeIt
 		});
 	}
 
-	#observeTreeItemActions() {
-		new UmbObserverController(
+	#observeActions() {
+		if (this.#actionObserver) this.#actionObserver.destroy();
+
+		this.#actionObserver = new UmbObserverController(
 			this.host,
 			umbExtensionsRegistry
 				.extensionsOfType('entityAction')

From f19f4041e78572cf2943204d42aea91932695eaf Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 29 Mar 2023 11:25:01 +0200
Subject: [PATCH 94/96] context controllers doesn't return a promise. add temp
 initialisation

---
 .../media/repository/media.repository.ts      | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
index cacafa2709..ab2d992be6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
@@ -14,8 +14,6 @@ import type { UmbTreeRepository } from 'libs/repository/tree-repository.interfac
 type ItemDetailType = MediaDetails;
 
 export class UmbMediaRepository implements UmbTreeRepository, UmbDetailRepository<ItemDetailType> {
-	#init!: Promise<unknown>;
-
 	#host: UmbControllerHostInterface;
 
 	#treeSource: UmbTreeDataSource;
@@ -26,6 +24,9 @@ export class UmbMediaRepository implements UmbTreeRepository, UmbDetailRepositor
 
 	#notificationContext?: UmbNotificationContext;
 
+	#initResolver?: () => void;
+	#initialized = false;
+
 	constructor(host: UmbControllerHostInterface) {
 		this.#host = host;
 
@@ -33,19 +34,32 @@ export class UmbMediaRepository implements UmbTreeRepository, UmbDetailRepositor
 		this.#treeSource = new MediaTreeServerDataSource(this.#host);
 		this.#detailDataSource = new UmbMediaDetailServerDataSource(this.#host);
 
-		this.#init = Promise.all([
-			new UmbContextConsumerController(this.#host, UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN, (instance) => {
-				this.#treeStore = instance;
-			}),
+		new UmbContextConsumerController(this.#host, UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN, (instance) => {
+			this.#treeStore = instance;
+			this.#checkIfInitialized();
+		});
 
-			new UmbContextConsumerController(this.#host, UMB_MEDIA_STORE_CONTEXT_TOKEN, (instance) => {
-				this.#store = instance;
-			}),
+		new UmbContextConsumerController(this.#host, UMB_MEDIA_STORE_CONTEXT_TOKEN, (instance) => {
+			this.#store = instance;
+			this.#checkIfInitialized();
+		});
 
-			new UmbContextConsumerController(this.#host, UMB_NOTIFICATION_CONTEXT_TOKEN, (instance) => {
-				this.#notificationContext = instance;
-			}),
-		]);
+		new UmbContextConsumerController(this.#host, UMB_NOTIFICATION_CONTEXT_TOKEN, (instance) => {
+			this.#notificationContext = instance;
+			this.#checkIfInitialized();
+		});
+	}
+
+	// TODO: make a generic way to wait for initialization
+	#init = new Promise<void>((resolve) => {
+		this.#initialized ? resolve() : (this.#initResolver = resolve);
+	});
+
+	#checkIfInitialized() {
+		if (this.#treeStore && this.#store && this.#notificationContext) {
+			this.#initialized = true;
+			this.#initResolver?.();
+		}
 	}
 
 	async requestRootTreeItems() {

From dfbd83c464c255b4a33f4118df1aef3b77086334 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 29 Mar 2023 16:05:00 +0200
Subject: [PATCH 95/96] lint fixes

---
 src/Umbraco.Web.UI.Client/eslint-local-rules.cjs              | 1 -
 .../src/backoffice/media/media/repository/media.repository.ts | 2 +-
 .../components/tree/tree-item-base/tree-item-base.context.ts  | 2 +-
 .../shared/components/tree/tree-item.context.interface.ts     | 2 +-
 .../shared/components/tree/tree-item/tree-item.element.ts     | 4 ++--
 .../shared/modals/template/template-modal.element.ts          | 4 ++--
 .../backoffice/templating/stylesheets/repository/manifests.ts | 2 +-
 7 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs b/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
index 0bd5d759ae..2a50f6a70a 100644
--- a/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
+++ b/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
@@ -128,7 +128,6 @@ module.exports = {
 					const sourceValue = node.source.value;
 					if (sourceValue.startsWith('libs/') || libsRegex.test(sourceValue)) {
 						const importPath = sourceValue.replace(libsRegex, (match, p1, p2) => {
-							const levels = p1.match(/\.\.\//g) || [];
 							return `@umbraco-cms/backoffice/${p2}`;
 						});
 						context.report({
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
index ab2d992be6..0c17a6e36a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
@@ -1,3 +1,4 @@
+import type { UmbTreeRepository } from '@umbraco-cms/backoffice/repository/tree-repository.interface';
 import type { MediaDetails } from '../';
 import { MediaTreeServerDataSource } from './sources/media.tree.server.data';
 import { UmbMediaTreeStore, UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN } from './media.tree.store';
@@ -9,7 +10,6 @@ import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-ap
 import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbDetailRepository } from '@umbraco-cms/backoffice/repository';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
-import type { UmbTreeRepository } from 'libs/repository/tree-repository.interface';
 
 type ItemDetailType = MediaDetails;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts
index 7216fb0683..8afb5da7cb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts
@@ -1,4 +1,5 @@
 import { map } from 'rxjs';
+import { ManifestEntityAction } from '@umbraco-cms/backoffice/extensions-registry/entity-action.models';
 import {
 	UmbSectionSidebarContext,
 	UMB_SECTION_SIDEBAR_CONTEXT_TOKEN,
@@ -15,7 +16,6 @@ import {
 } from '@umbraco-cms/backoffice/context-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 import type { TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
-import { ManifestEntityAction } from 'libs/extensions-registry/entity-action.models';
 
 // add type for unique function
 export type UmbTreeItemUniqueFunction<T extends TreeItemPresentationModel> = (x: T) => string | null | undefined;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.context.interface.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.context.interface.ts
index 0144422f76..7f78041319 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.context.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.context.interface.ts
@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
+import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller/controller-host.mixin';
 import { ProblemDetailsModel, TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from 'libs/controller/controller-host.mixin';
 
 // TODO: temp type. Add paged response type to the repository interface
 interface PagedResponse<T> {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts
index 9cecba3412..da60d3d1f0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts
@@ -1,9 +1,9 @@
 import { css, html, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
+import { TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api/src';
+import { ManifestTreeItem } from '@umbraco-cms/backoffice/extensions-registry/tree-item.models';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { TreeItemPresentationModel } from 'libs/backend-api/src';
-import { ManifestTreeItem } from 'libs/extensions-registry/tree-item.models';
 
 @customElement('umb-tree-item')
 export class UmbTreeItemElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/template/template-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/template/template-modal.element.ts
index 57086d24eb..8e3c73dcb9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/template/template-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/template/template-modal.element.ts
@@ -3,11 +3,11 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUIInputEvent } from '@umbraco-ui/uui';
+import { UmbInputEvent } from '@umbraco-cms/backoffice/umb-events/input.event';
+import { TemplateResource, TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api/src';
 import { UmbCodeEditor } from '../../components/code-editor';
 import { UmbTemplateModalData, UmbTemplateModalResult } from '.';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
-import { UmbInputEvent } from 'libs/umb-events/input.event';
-import { TemplateResource, TemplateResponseModel } from 'libs/backend-api/src';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 //TODO: make a default tree-picker that can be used across multiple pickers
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/manifests.ts
index 34225d54b8..31a346ebde 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/manifests.ts
@@ -1,6 +1,6 @@
+import { ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry/repository.models';
 import { UmbStylesheetRepository } from './stylesheet.repository';
 import { UmbStylesheetTreeStore } from './stylesheet.tree.store';
-import { ManifestRepository } from 'libs/extensions-registry/repository.models';
 import { ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const STYLESHEET_REPOSITORY_ALIAS = 'Umb.Repository.Stylesheet';

From 70c2f704202b128a89c1e4e8baa1fa70be975790 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 29 Mar 2023 17:56:39 +0200
Subject: [PATCH 96/96] Chore: Eslint rule to enforce element suffix (#625)

* add eslint rule to enforce element suffix on elements

* remove fixer

* rename first round of elements

* add element to element class name

* add element suffix

* rename element

* add element to UmbControllerHost instead of interface

* update imports after merge

* remove fixable flag

* fix after merge
---
 src/Umbraco.Web.UI.Client/.eslintrc.json      |   1 +
 .../apps/auth/src/auth-layout.element.ts      |   4 +-
 .../apps/auth/src/login.element.ts            |   4 +-
 .../apps/auth/src/login.test.ts               |   6 +-
 .../eslint-local-rules.cjs                    |  29 ++
 .../consume/context-consumer.controller.ts    |   6 +-
 .../provide/context-provider.controller.ts    |   6 +-
 .../libs/controller/controller-host.mixin.ts  |   6 +-
 .../libs/controller/controller.class.ts       |   6 +-
 .../libs/controller/controller.test.ts        |   6 +-
 .../libs/element/element.mixin.ts             |   4 +-
 .../libs/entity-action/action.ts              |   8 +-
 .../entity-action/actions/copy/copy.action.ts |   4 +-
 .../actions/delete/delete.action.ts           |   4 +-
 .../entity-action/actions/move/move.action.ts |   4 +-
 .../sort-children-of.action.ts                |   4 +-
 .../actions/trash/trash.action.ts             |   4 +-
 .../libs/entity-action/entity-action.ts       |   4 +-
 .../libs/entity-action/entity-bulk-action.ts  |   4 +-
 .../extensions-api/umb-lifecycle.interface.ts |   4 +-
 .../entry-point-extension-initializer.ts      |   4 +-
 .../libs/modal/modal-handler.ts               |   6 +-
 .../modal-route-registration.controller.ts    |   4 +-
 .../libs/modal/modal.context.ts               |   6 +-
 .../observable-api/observer.controller.ts     |   4 +-
 .../libs/resources/resource.controller.ts     |   4 +-
 .../resources/tryExecuteAndNotify.function.ts |   4 +-
 .../libs/router/route.context.ts              |   4 +-
 .../libs/store/store-base.ts                  |   4 +-
 .../workspace/actions/save/save.action.ts     |   4 +-
 .../actions/workspace-action-base.ts          |   8 +-
 .../context/workspace-context.interface.ts    |   4 +-
 src/Umbraco.Web.UI.Client/src/app.ts          |   4 +-
 .../document-blueprint.detail.store.ts        |   4 +-
 .../document-blueprint.tree.store.ts          |   4 +-
 .../repository/document-type.repository.ts    |   6 +-
 .../repository/document-type.store.ts         |  10 +-
 .../repository/document-type.tree.store.ts    |   6 +-
 .../sources/document-type.server.data.ts      |   8 +-
 .../sources/document-type.tree.server.data.ts |   8 +-
 .../document-type-workspace.context.ts        |   4 +-
 .../entity-actions/create-blueprint.action.ts |   4 +-
 .../entity-actions/create/create.action.ts    |   4 +-
 .../culture-and-hostnames.action.ts           |   4 +-
 .../entity-actions/permissions.action.ts      |   4 +-
 .../entity-actions/public-access.action.ts    |   4 +-
 .../entity-actions/publish.action.ts          |   4 +-
 .../entity-actions/rollback.action.ts         |   4 +-
 .../entity-actions/unpublish.action.ts        |   4 +-
 .../entity-bulk-actions/copy/copy.action.ts   |   4 +-
 .../entity-bulk-actions/move/move.action.ts   |   4 +-
 .../repository/document.repository.ts         |   6 +-
 .../documents/repository/document.store.ts    |   6 +-
 .../repository/document.tree.store.ts         |   6 +-
 .../sources/document.server.data.ts           |   8 +-
 .../sources/document.tree.server.data.ts      |   8 +-
 .../tree-item/document-tree-item.context.ts   |   4 +-
 .../actions/save-and-preview.action.ts        |   4 +-
 .../actions/save-and-publish.action.ts        |   4 +-
 .../actions/save-and-schedule.action.ts       |   4 +-
 .../workspace/document-workspace.context.ts   |   4 +-
 .../entity-actions/create.action.ts           |   4 +-
 .../entity-actions/reload.action.ts           |   4 +-
 .../repository/media-type.detail.store.ts     |   4 +-
 .../repository/media-type.repository.ts       |   6 +-
 .../repository/media-type.tree.store.ts       |   6 +-
 .../sources/media-type.detail.server.data.ts  |   6 +-
 .../sources/media-type.tree.server.data.ts    |   8 +-
 .../workspace/media-type-workspace.context.ts |   4 +-
 .../entity-bulk-actions/copy/copy.action.ts   |   4 +-
 .../entity-bulk-actions/move/move.action.ts   |   4 +-
 .../entity-bulk-actions/trash/trash.action.ts |   4 +-
 .../media/repository/media.repository.ts      |   9 +-
 .../media/media/repository/media.store.ts     |   6 +-
 .../media/repository/media.tree.store.ts      |   6 +-
 .../sources/media.detail.server.data.ts       |   8 +-
 .../sources/media.tree.server.data.ts         |   8 +-
 .../workspace/media-workspace.context.ts      |   4 +-
 .../repository/member-group.repository.ts     |   6 +-
 .../repository/member-group.store.ts          |   4 +-
 .../repository/member-group.tree.store.ts     |   6 +-
 .../member-group.detail.server.data.ts        |   6 +-
 .../sources/member-group.tree.server.data.ts  |   8 +-
 .../member-group-workspace.context.ts         |   4 +-
 .../repository/member-type.repository.ts      |   6 +-
 .../repository/member-type.store.ts           |   4 +-
 .../repository/member-type.tree.store.ts      |   4 +-
 .../sources/member-type.detail.server.data.ts |   6 +-
 .../sources/member-type.tree.server.data.ts   |   8 +-
 .../member-type-workspace.context.ts          |   4 +-
 .../members/members/member.detail.store.ts    |   4 +-
 .../members/repository/member.repository.ts   |   6 +-
 .../members/repository/member.store.ts        |   4 +-
 .../members/repository/member.tree.store.ts   |   6 +-
 .../sources/member.tree.server.data.ts        |   8 +-
 .../workspace/member-workspace.context.ts     |   4 +-
 ...lled-packages-section-view-item.element.ts |   4 +-
 ...installed-packages-section-view.element.ts |   6 +-
 .../packages/repository/package.repository.ts |   4 +-
 .../packages/repository/package.store.ts      |   6 +-
 .../repository/server-extension.controller.ts |   6 +-
 .../repository/sources/package.server.data.ts |   9 +-
 .../search/umb-search-header-app.element.ts   |   6 +-
 .../cultures/repository/culture.repository.ts |   6 +-
 .../repository/sources/culture.server.data.ts |   8 +-
 .../health-check/health-check.context.ts      |   6 +-
 .../repository/data-type.repository.ts        |   6 +-
 .../data-types/repository/data-type.store.ts  |   6 +-
 .../repository/data-type.tree.store.ts        |   6 +-
 .../sources/data-type.server.data.ts          |   8 +-
 .../sources/data-type.tree.server.data.ts     |   8 +-
 .../workspace/data-type-workspace.context.ts  |   4 +-
 .../app-language.context.ts                   |   6 +-
 .../repository/language.repository.ts         |   6 +-
 .../languages/repository/language.store.ts    |   5 +-
 .../sources/language.server.data.ts           |   8 +-
 .../language/language-workspace.context.ts    |   4 +-
 .../repository/log-viewer.repository.ts       |   6 +-
 .../sources/log-viewer.server.data.ts         | 305 +++++++++---------
 .../logviewer/workspace/logviewer.context.ts  |   6 +-
 .../repository/relation-type.repository.ts    |   6 +-
 .../repository/relation-type.store.ts         |   6 +-
 .../repository/relation-type.tree.store.ts    |   6 +-
 .../sources/relation-type.server.data.ts      |   8 +-
 .../sources/relation-type.tree.server.data.ts |   8 +-
 .../relation-type-workspace.context.ts        |   4 +-
 .../shared/collection/collection.context.ts   |   6 +-
 .../backoffice-header-apps.element.ts         |   4 +-
 .../backoffice-header-sections.element.ts     |   4 +-
 .../backoffice-header.element.ts              |   6 +-
 .../backoffice-main.element.ts                |   4 +-
 .../backoffice-modal-container.element.ts     |   4 +-
 ...ckoffice-notification-container.element.ts |   4 +-
 .../body-layout/body-layout.element.ts        |   4 +-
 .../body-layout/body-layout.stories.ts        |   6 +-
 .../code-block/code-block.element.ts          |   4 +-
 .../code-block/code-block.stories.ts          |   6 +-
 .../code-editor/code-editor.stories.ts        |   4 +-
 .../shared/components/debug/debug.element.ts  |   4 +-
 .../footer-layout/footer-layout.element.ts    |   4 +-
 .../footer-layout/footer-layout.stories.ts    |   4 +-
 .../header-app/header-app-button.element.ts   |   6 +-
 .../header-app/header-app.stories.ts          |   6 +-
 .../input-document-type-picker.element.ts     |   5 +-
 .../input-list-base/input-list-base.ts        |   2 +-
 .../input-section/input-section.element.ts    |   4 +-
 .../input-user-group.element.ts               |   4 +-
 .../input-user/input-user.element.ts          |   4 +-
 .../components/menu-item/menu-item.element.ts |   4 +-
 .../section-sidebar-context-menu.element.ts   |   4 +-
 .../section-sidebar.context.ts                |   6 +-
 .../tree-context-menu-page.service.ts         |   9 +-
 .../context-menu/tree-context-menu.service.ts |   6 +-
 .../entity-tree-item.context.ts               |   4 +-
 .../tree-item-base/tree-item-base.context.ts  |   8 +-
 .../tree/tree-item.context.interface.ts       |   4 +-
 .../tree/tree-item/tree-item.element.ts       |   4 +-
 .../shared/components/tree/tree.context.ts    |   6 +-
 .../workspace-property.context.ts             |   6 +-
 .../entity-manager-controller.ts              |   4 +-
 .../workspace-context/workspace-context.ts    |   6 +-
 ...kspace-property-structure-manager.class.ts |   6 +-
 .../workspace-split-view-manager.class.ts     |   6 +-
 .../workspace-footer-layout.element.ts        |   4 +-
 .../workspace-footer-layout.stories.ts        |   4 +-
 .../workspace-layout.element.ts               |   4 +-
 .../workspace-layout.stories.ts               |   4 +-
 .../workspace-variant.context.ts              |  12 +-
 .../modals/template/template-modal.element.ts |   4 +-
 .../property-action-menu.context.ts           |   4 +-
 .../file-system-tree-item.context.ts          |   4 +-
 .../stylesheets/repository/manifests.ts       |   3 +-
 .../sources/stylesheet.server.data.ts         |   8 +-
 .../sources/stylesheet.tree.server.data.ts    |   8 +-
 .../repository/stylesheet.repository.ts       |   4 +-
 .../repository/stylesheet.tree.store.ts       |   6 +-
 .../workspace/stylesheet-workspace.context.ts |   4 +-
 .../entity-actions/create/create.action.ts    |   4 +-
 .../sources/template.detail.server.data.ts    |   8 +-
 .../sources/template.tree.server.data.ts      |   8 +-
 .../repository/template.repository.ts         |   6 +-
 .../templates/repository/template.store.ts    |   6 +-
 .../repository/template.tree.store.ts         |   6 +-
 .../workspace/template-workspace.context.ts   |   4 +-
 .../src/backoffice/themes/theme.context.ts    |   6 +-
 .../entity-actions/create/create.action.ts    |   4 +-
 .../entity-actions/export/export.action.ts    |   4 +-
 .../entity-actions/import/import.action.ts    |   4 +-
 .../entity-actions/reload.action.ts           |   4 +-
 .../repository/dictionary.repository.ts       |   6 +-
 .../dictionary/repository/dictionary.store.ts |   4 +-
 .../repository/dictionary.tree.store.ts       |   6 +-
 .../sources/dictionary.detail.server.data.ts  |   6 +-
 .../sources/dictionary.tree.server.data.ts    |   8 +-
 .../workspace/dictionary-workspace.context.ts |   4 +-
 .../current-user-header-app.element.ts        |   6 +-
 .../repository/user-group.repository.ts       |   6 +-
 .../repository/user-group.store.ts            |   4 +-
 .../workspace/user-group-workspace.context.ts |   4 +-
 .../users/users/repository/user.repository.ts |   6 +-
 .../users/users/repository/user.store.ts      |   4 +-
 .../users/workspace/user-workspace.context.ts |   4 +-
 .../context-provider.element.ts               |   4 +-
 .../controller-host-test.element.ts           |   4 +-
 .../controller-host-test.test.ts              |   4 +-
 .../core/mocks/domains/rte-embed.handlers.ts  |   2 +-
 .../src/stories/extending/entity-actions.mdx  |  10 +-
 .../src/stories/extending/tree.mdx            |   4 +-
 .../stories/extending/workspaces/actions.mdx  |   4 +-
 .../src/stories/store.mdx                     |   4 +-
 .../src/upgrader/upgrader-view.element.ts     |   6 +-
 .../src/upgrader/upgrader-view.test.ts        |   6 +-
 .../src/upgrader/upgrader.element.ts          |   6 +-
 .../src/upgrader/upgrader.stories.ts          |   6 +-
 .../src/upgrader/upgrader.test.ts             |   6 +-
 215 files changed, 739 insertions(+), 712 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/.eslintrc.json b/src/Umbraco.Web.UI.Client/.eslintrc.json
index 5fd970bda6..62976c7e21 100644
--- a/src/Umbraco.Web.UI.Client/.eslintrc.json
+++ b/src/Umbraco.Web.UI.Client/.eslintrc.json
@@ -35,6 +35,7 @@
 				"local-rules/bad-type-import": "error",
 				"local-rules/no-direct-api-import": "warn",
 				"local-rules/prefer-import-aliases": "error",
+				"local-rules/enforce-element-suffix-on-element-class-name": "error",
 				"local-rules/prefer-umbraco-cms-imports": "error",
 				"@typescript-eslint/no-non-null-assertion": "off"
 			},
diff --git a/src/Umbraco.Web.UI.Client/apps/auth/src/auth-layout.element.ts b/src/Umbraco.Web.UI.Client/apps/auth/src/auth-layout.element.ts
index 28a5120e7f..8ad4209637 100644
--- a/src/Umbraco.Web.UI.Client/apps/auth/src/auth-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/apps/auth/src/auth-layout.element.ts
@@ -4,7 +4,7 @@ import logoImg from '/umbraco_logomark_white.svg';
 import loginImg from '/login.jpeg';
 
 @customElement('umb-auth-layout')
-export class UmbAuthLayout extends LitElement {
+export class UmbAuthLayoutElement extends LitElement {
 	static styles: CSSResultGroup = [
 		css`
 			#background {
@@ -69,6 +69,6 @@ export class UmbAuthLayout extends LitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-auth-layout': UmbAuthLayout;
+		'umb-auth-layout': UmbAuthLayoutElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/apps/auth/src/login.element.ts b/src/Umbraco.Web.UI.Client/apps/auth/src/login.element.ts
index d63b68f72d..018d87b14d 100644
--- a/src/Umbraco.Web.UI.Client/apps/auth/src/login.element.ts
+++ b/src/Umbraco.Web.UI.Client/apps/auth/src/login.element.ts
@@ -6,7 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import './auth-layout.element';
 
 @customElement('umb-login')
-export default class UmbLogin extends LitElement {
+export default class UmbLoginElement extends LitElement {
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
@@ -113,6 +113,6 @@ export default class UmbLogin extends LitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-login': UmbLogin;
+		'umb-login': UmbLoginElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/apps/auth/src/login.test.ts b/src/Umbraco.Web.UI.Client/apps/auth/src/login.test.ts
index d633c813aa..2b2d0a2ded 100644
--- a/src/Umbraco.Web.UI.Client/apps/auth/src/login.test.ts
+++ b/src/Umbraco.Web.UI.Client/apps/auth/src/login.test.ts
@@ -1,16 +1,16 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
-import UmbLogin from './login.element';
+import UmbLoginElement from './login.element';
 
 describe('UmbLogin', () => {
-	let element: UmbLogin;
+	let element: UmbLoginElement;
 
 	beforeEach(async () => {
 		element = await fixture(html`<umb-login></umb-login>`);
 	});
 
 	it('is defined with its own instance', () => {
-		expect(element).to.be.instanceOf(UmbLogin);
+		expect(element).to.be.instanceOf(UmbLoginElement);
 	});
 
 	it('passes the a11y audit', async () => {
diff --git a/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs b/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
index 2a50f6a70a..eb0fb35f03 100644
--- a/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
+++ b/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
@@ -107,7 +107,36 @@ module.exports = {
 			};
 		},
 	},
+	/** @type {import('eslint').Rule.RuleModule} */
+	'enforce-element-suffix-on-element-class-name': {
+		meta: {
+			type: 'suggestion',
+			docs: {
+				description: 'Enforce Element class name to end with "Element".',
+				category: 'Naming',
+				recommended: true,
+			},
+		},
+		create: function (context) {
+			return {
+				ClassDeclaration(node) {
+					// check if the class extends HTMLElement, LitElement, or UmbLitElement
+					const isExtendingElement =
+						node.superClass && ['HTMLElement', 'LitElement', 'UmbLitElement'].includes(node.superClass.name);
+					// check if the class name ends with 'Element'
+					const isClassNameValid = node.id.name.endsWith('Element');
 
+					if (isExtendingElement && !isClassNameValid) {
+						context.report({
+							node,
+							message: "Element class name should end with 'Element'.",
+							// There us no fixer on purpose because it's not safe to rename the class. We want to do that trough the refactoring tool.
+						});
+					}
+				},
+			};
+		},
+	},
 	// TODO: Its not bullet proof, but it will catch most/some cases.
 	/** @type {import('eslint').Rule.RuleModule} */
 	'prefer-umbraco-cms-imports': {
diff --git a/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-consumer.controller.ts b/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-consumer.controller.ts
index f9b72588b2..ed5bd3eeb2 100644
--- a/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-consumer.controller.ts
+++ b/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-consumer.controller.ts
@@ -1,10 +1,10 @@
 import { UmbContextToken } from '../token/context-token';
 import { UmbContextConsumer } from './context-consumer';
 import { UmbContextCallback } from './context-request.event';
-import type { UmbControllerHostInterface, UmbControllerInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement, UmbControllerInterface } from '@umbraco-cms/backoffice/controller';
 
 export class UmbContextConsumerController<T = unknown>
-	extends UmbContextConsumer<UmbControllerHostInterface, T>
+	extends UmbContextConsumer<UmbControllerHostElement, T>
 	implements UmbControllerInterface
 {
 	public get unique() {
@@ -12,7 +12,7 @@ export class UmbContextConsumerController<T = unknown>
 	}
 
 	constructor(
-		host: UmbControllerHostInterface,
+		host: UmbControllerHostElement,
 		contextAlias: string | UmbContextToken<T>,
 		callback: UmbContextCallback<T>
 	) {
diff --git a/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.controller.ts b/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.controller.ts
index 7412ae6a0c..46d4c9c1b5 100644
--- a/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.controller.ts
+++ b/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.controller.ts
@@ -1,16 +1,16 @@
 import { UmbContextToken } from '../token/context-token';
 import { UmbContextProvider } from './context-provider';
-import type { UmbControllerHostInterface, UmbControllerInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement, UmbControllerInterface } from '@umbraco-cms/backoffice/controller';
 
 export class UmbContextProviderController<T = unknown>
-	extends UmbContextProvider<UmbControllerHostInterface>
+	extends UmbContextProvider<UmbControllerHostElement>
 	implements UmbControllerInterface
 {
 	public get unique() {
 		return this._contextAlias.toString();
 	}
 
-	constructor(host: UmbControllerHostInterface, contextAlias: string | UmbContextToken<T>, instance: T) {
+	constructor(host: UmbControllerHostElement, contextAlias: string | UmbContextToken<T>, instance: T) {
 		super(host, contextAlias, instance);
 
 		// If this API is already provided with this alias? Then we do not want to register this controller:
diff --git a/src/Umbraco.Web.UI.Client/libs/controller/controller-host.mixin.ts b/src/Umbraco.Web.UI.Client/libs/controller/controller-host.mixin.ts
index 7c7b2a7913..221da8d54b 100644
--- a/src/Umbraco.Web.UI.Client/libs/controller/controller-host.mixin.ts
+++ b/src/Umbraco.Web.UI.Client/libs/controller/controller-host.mixin.ts
@@ -1,9 +1,7 @@
 import { UmbControllerInterface } from './controller.interface';
 import type { HTMLElementConstructor } from '@umbraco-cms/backoffice/models';
 
-export declare class UmbControllerHostInterface extends HTMLElement {
-	//#controllers:UmbController[];
-	//#attached:boolean;
+export declare class UmbControllerHostElement extends HTMLElement {
 	hasController(controller: UmbControllerInterface): boolean;
 	getControllers(filterMethod: (ctrl: UmbControllerInterface) => boolean): UmbControllerInterface[];
 	addController(controller: UmbControllerInterface): void;
@@ -101,7 +99,7 @@ export const UmbControllerHostMixin = <T extends HTMLElementConstructor>(superCl
 		}
 	}
 
-	return UmbContextConsumerClass as unknown as HTMLElementConstructor<UmbControllerHostInterface> & T;
+	return UmbContextConsumerClass as unknown as HTMLElementConstructor<UmbControllerHostElement> & T;
 };
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/libs/controller/controller.class.ts b/src/Umbraco.Web.UI.Client/libs/controller/controller.class.ts
index c34be538a7..f461faf6fc 100644
--- a/src/Umbraco.Web.UI.Client/libs/controller/controller.class.ts
+++ b/src/Umbraco.Web.UI.Client/libs/controller/controller.class.ts
@@ -1,15 +1,15 @@
-import { UmbControllerHostInterface } from './controller-host.mixin';
+import { UmbControllerHostElement } from './controller-host.mixin';
 import { UmbControllerInterface } from './controller.interface';
 
 export abstract class UmbController implements UmbControllerInterface {
-	protected host?: UmbControllerHostInterface;
+	protected host?: UmbControllerHostElement;
 
 	private _alias?: string;
 	public get unique() {
 		return this._alias;
 	}
 
-	constructor(host: UmbControllerHostInterface, alias?: string) {
+	constructor(host: UmbControllerHostElement, alias?: string) {
 		this.host = host;
 		this._alias = alias;
 		this.host.addController(this);
diff --git a/src/Umbraco.Web.UI.Client/libs/controller/controller.test.ts b/src/Umbraco.Web.UI.Client/libs/controller/controller.test.ts
index 445af3b6d3..993bc546ca 100644
--- a/src/Umbraco.Web.UI.Client/libs/controller/controller.test.ts
+++ b/src/Umbraco.Web.UI.Client/libs/controller/controller.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
 import { customElement } from 'lit/decorators.js';
-import { UmbControllerHostInterface, UmbControllerHostMixin } from './controller-host.mixin';
+import { UmbControllerHostElement, UmbControllerHostMixin } from './controller-host.mixin';
 import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
 
 class MyClass {
@@ -11,13 +11,13 @@ class MyClass {
 export class MyHostElement extends UmbControllerHostMixin(HTMLElement) {}
 
 describe('UmbContextProvider', () => {
-	type NewType = UmbControllerHostInterface;
+	type NewType = UmbControllerHostElement;
 
 	let hostElement: NewType;
 	const contextInstance = new MyClass();
 
 	beforeEach(() => {
-		hostElement = document.createElement('test-my-controller-host') as UmbControllerHostInterface;
+		hostElement = document.createElement('test-my-controller-host') as UmbControllerHostElement;
 	});
 
 	describe('Destroyed controllers is gone from host', () => {
diff --git a/src/Umbraco.Web.UI.Client/libs/element/element.mixin.ts b/src/Umbraco.Web.UI.Client/libs/element/element.mixin.ts
index aa81248a25..a53c101822 100644
--- a/src/Umbraco.Web.UI.Client/libs/element/element.mixin.ts
+++ b/src/Umbraco.Web.UI.Client/libs/element/element.mixin.ts
@@ -2,7 +2,7 @@ import { Observable } from 'rxjs';
 
 import type { HTMLElementConstructor } from '@umbraco-cms/backoffice/models';
 
-import { UmbControllerHostInterface, UmbControllerHostMixin } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement, UmbControllerHostMixin } from '@umbraco-cms/backoffice/controller';
 import {
 	UmbContextToken,
 	UmbContextCallback,
@@ -16,7 +16,7 @@ interface ResolvedContexts {
 	[key: string]: any;
 }
 
-export declare class UmbElementMixinInterface extends UmbControllerHostInterface {
+export declare class UmbElementMixinInterface extends UmbControllerHostElement {
 	observe<T>(source: Observable<T>, callback: (_value: T) => void, unique?: string): UmbObserverController<T>;
 	provideContext<R = unknown>(alias: string | UmbContextToken<R>, instance: R): UmbContextProviderController<R>;
 	consumeContext<R = unknown>(
diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/action.ts
index 939ba6712a..536c4df85d 100644
--- a/src/Umbraco.Web.UI.Client/libs/entity-action/action.ts
+++ b/src/Umbraco.Web.UI.Client/libs/entity-action/action.ts
@@ -1,18 +1,18 @@
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { umbExtensionsRegistry, createExtensionClass } from '@umbraco-cms/backoffice/extensions-api';
 import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
 export interface UmbAction<RepositoryType = unknown> {
-	host: UmbControllerHostInterface;
+	host: UmbControllerHostElement;
 	repository: RepositoryType;
 	execute(): Promise<void>;
 }
 
 export class UmbActionBase<RepositoryType> {
-	host: UmbControllerHostInterface;
+	host: UmbControllerHostElement;
 	repository?: RepositoryType;
 
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string) {
 		this.host = host;
 
 		// TODO: unsure a method can't be called before everything is initialized
diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/copy/copy.action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/copy/copy.action.ts
index bb2ff47436..f647d7f092 100644
--- a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/copy/copy.action.ts
+++ b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/copy/copy.action.ts
@@ -1,8 +1,8 @@
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbCopyEntityAction<T extends { copy(): Promise<void> }> extends UmbEntityActionBase<T> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts
index d45acc3534..0dfc13f22d 100644
--- a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts
+++ b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/delete/delete.action.ts
@@ -1,6 +1,6 @@
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 
 export class UmbDeleteEntityAction<
@@ -8,7 +8,7 @@ export class UmbDeleteEntityAction<
 > extends UmbEntityActionBase<T> {
 	#modalContext?: UmbModalContext;
 
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 
 		new UmbContextConsumerController(this.host, UMB_MODAL_CONTEXT_TOKEN, (instance) => {
diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/move/move.action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/move/move.action.ts
index 284e33aba4..2744029e82 100644
--- a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/move/move.action.ts
+++ b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/move/move.action.ts
@@ -1,8 +1,8 @@
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbMoveEntityAction<T extends { move(): Promise<void> }> extends UmbEntityActionBase<T> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/sort-children-of/sort-children-of.action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/sort-children-of/sort-children-of.action.ts
index ec055860c2..4816e9d1ff 100644
--- a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/sort-children-of/sort-children-of.action.ts
+++ b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/sort-children-of/sort-children-of.action.ts
@@ -1,10 +1,10 @@
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbSortChildrenOfEntityAction<
 	T extends { sortChildrenOf(): Promise<void> }
 > extends UmbEntityActionBase<T> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts
index 6a3eb3b745..2b86b4d56c 100644
--- a/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts
+++ b/src/Umbraco.Web.UI.Client/libs/entity-action/actions/trash/trash.action.ts
@@ -1,6 +1,6 @@
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 
 export class UmbTrashEntityAction<
@@ -8,7 +8,7 @@ export class UmbTrashEntityAction<
 > extends UmbEntityActionBase<T> {
 	#modalContext?: UmbModalContext;
 
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 
 		new UmbContextConsumerController(this.host, UMB_MODAL_CONTEXT_TOKEN, (instance) => {
diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/entity-action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/entity-action.ts
index 2e050d0eaf..c0235ae958 100644
--- a/src/Umbraco.Web.UI.Client/libs/entity-action/entity-action.ts
+++ b/src/Umbraco.Web.UI.Client/libs/entity-action/entity-action.ts
@@ -1,5 +1,5 @@
 import { UmbAction, UmbActionBase } from './action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export interface UmbEntityAction<RepositoryType> extends UmbAction<RepositoryType> {
 	unique: string;
@@ -8,7 +8,7 @@ export interface UmbEntityAction<RepositoryType> extends UmbAction<RepositoryTyp
 export class UmbEntityActionBase<RepositoryType> extends UmbActionBase<RepositoryType> {
 	unique: string;
 
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias);
 		this.unique = unique;
 	}
diff --git a/src/Umbraco.Web.UI.Client/libs/entity-action/entity-bulk-action.ts b/src/Umbraco.Web.UI.Client/libs/entity-action/entity-bulk-action.ts
index 16e084927b..22f7d58dbe 100644
--- a/src/Umbraco.Web.UI.Client/libs/entity-action/entity-bulk-action.ts
+++ b/src/Umbraco.Web.UI.Client/libs/entity-action/entity-bulk-action.ts
@@ -1,5 +1,5 @@
 import { UmbAction, UmbActionBase } from './action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export interface UmbEntityBulkAction<RepositoryType = unknown> extends UmbAction<RepositoryType> {
 	selection: Array<string>;
@@ -9,7 +9,7 @@ export interface UmbEntityBulkAction<RepositoryType = unknown> extends UmbAction
 export class UmbEntityBulkActionBase<RepositoryType = unknown> extends UmbActionBase<RepositoryType> {
 	selection: Array<string>;
 
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, selection: Array<string>) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, selection: Array<string>) {
 		super(host, repositoryAlias);
 		this.selection = selection;
 	}
diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-api/umb-lifecycle.interface.ts b/src/Umbraco.Web.UI.Client/libs/extensions-api/umb-lifecycle.interface.ts
index a676b15c1b..e2ec64bcc5 100644
--- a/src/Umbraco.Web.UI.Client/libs/extensions-api/umb-lifecycle.interface.ts
+++ b/src/Umbraco.Web.UI.Client/libs/extensions-api/umb-lifecycle.interface.ts
@@ -1,7 +1,7 @@
 import type { UmbExtensionRegistry } from './registry/extension.registry';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
-export type UmbEntrypointOnInit = (host: UmbControllerHostInterface, extensionRegistry: UmbExtensionRegistry) => void;
+export type UmbEntrypointOnInit = (host: UmbControllerHostElement, extensionRegistry: UmbExtensionRegistry) => void;
 
 /**
  * Interface containing supported life-cycle functions for ESModule entrypoints
diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-registry/entry-point-extension-initializer.ts b/src/Umbraco.Web.UI.Client/libs/extensions-registry/entry-point-extension-initializer.ts
index e1e051f5f8..1ab0d19abe 100644
--- a/src/Umbraco.Web.UI.Client/libs/extensions-registry/entry-point-extension-initializer.ts
+++ b/src/Umbraco.Web.UI.Client/libs/extensions-registry/entry-point-extension-initializer.ts
@@ -1,12 +1,12 @@
 import type { ManifestEntrypoint } from './models';
 import { hasInitExport, loadExtension, UmbExtensionRegistry } from '@umbraco-cms/backoffice/extensions-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbEntryPointExtensionInitializer {
 	#rootHost;
 	#extensionRegistry;
 
-	constructor(rootHost: UmbControllerHostInterface, extensionRegistry: UmbExtensionRegistry) {
+	constructor(rootHost: UmbControllerHostElement, extensionRegistry: UmbExtensionRegistry) {
 		this.#rootHost = rootHost;
 		this.#extensionRegistry = extensionRegistry;
 		// TODO: change entrypoint extension to be entryPoint:
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
index 627b039642..43f10f9e14 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts
@@ -10,7 +10,7 @@ import { UmbModalConfig, UmbModalType } from './modal.context';
 import { UmbModalToken } from './token/modal-token';
 import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import type { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry';
 
 /**
@@ -42,7 +42,7 @@ export class UmbModalHandlerClass<ModalData extends object = object, ModalResult
 	private _submitPromise: Promise<ModalResult>;
 	private _submitResolver?: (value: ModalResult) => void;
 	private _submitRejecter?: () => void;
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	public modalElement: UUIModalDialogElement | UUIModalSidebarElement;
 
@@ -56,7 +56,7 @@ export class UmbModalHandlerClass<ModalData extends object = object, ModalResult
 	public size: UUIModalSidebarSize = 'small';
 
 	constructor(
-		host: UmbControllerHostInterface,
+		host: UmbControllerHostElement,
 		modalAlias: string | UmbModalToken<ModalData, ModalResult>,
 		data?: ModalData,
 		config?: UmbModalConfig
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
index 8d3ffae513..213debd539 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.controller.ts
@@ -1,7 +1,7 @@
 // TODO: Be aware here we import a class from src!
 import { UMB_ROUTE_CONTEXT_TOKEN } from '../router/route.context';
-import type { UmbControllerHostInterface, UmbControllerInterface } from '../controller';
 import { UmbModalRouteRegistration } from './modal-route-registration';
+import type { UmbControllerHostElement, UmbControllerInterface } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbModalConfig, UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
@@ -22,7 +22,7 @@ export class UmbModalRouteRegistrationController<D extends object = object, R =
 	}
 
 	constructor(
-		host: UmbControllerHostInterface,
+		host: UmbControllerHostElement,
 		alias: UmbModalToken<D, R> | string,
 		path: string,
 		uniqueParts?: Map<string, string | undefined> | null,
diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
index 7cfabb1968..1d58c827df 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
@@ -6,7 +6,7 @@ import { BehaviorSubject } from 'rxjs';
 import { UmbModalHandler, UmbModalHandlerClass } from './modal-handler';
 import type { UmbModalToken } from './token/modal-token';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export type UmbModalType = 'dialog' | 'sidebar';
 
@@ -19,12 +19,12 @@ export interface UmbModalConfig {
 // TODO: we should find a way to easily open a modal without adding custom methods to this context. It would result in a better separation of concerns.
 // TODO: move all layouts into their correct "silo" folders. User picker should live with users etc.
 export class UmbModalContext {
-	host: UmbControllerHostInterface;
+	host: UmbControllerHostElement;
 	// TODO: Investigate if we can get rid of HTML elements in our store, so we can use one of our states.
 	#modals = new BehaviorSubject(<Array<UmbModalHandler>>[]);
 	public readonly modals = this.#modals.asObservable();
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/libs/observable-api/observer.controller.ts b/src/Umbraco.Web.UI.Client/libs/observable-api/observer.controller.ts
index 2975d41555..f4d1f9bf49 100644
--- a/src/Umbraco.Web.UI.Client/libs/observable-api/observer.controller.ts
+++ b/src/Umbraco.Web.UI.Client/libs/observable-api/observer.controller.ts
@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 import { UmbObserver } from './observer';
-import { UmbControllerInterface, UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerInterface, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbObserverController<T = unknown> extends UmbObserver<T> implements UmbControllerInterface {
 	_alias?: string;
@@ -8,7 +8,7 @@ export class UmbObserverController<T = unknown> extends UmbObserver<T> implement
 		return this._alias;
 	}
 
-	constructor(host: UmbControllerHostInterface, source: Observable<T>, callback: (_value: T) => void, alias?: string) {
+	constructor(host: UmbControllerHostElement, source: Observable<T>, callback: (_value: T) => void, alias?: string) {
 		super(source, callback);
 		this._alias = alias;
 
diff --git a/src/Umbraco.Web.UI.Client/libs/resources/resource.controller.ts b/src/Umbraco.Web.UI.Client/libs/resources/resource.controller.ts
index aa12fa3adc..c323c76d2a 100644
--- a/src/Umbraco.Web.UI.Client/libs/resources/resource.controller.ts
+++ b/src/Umbraco.Web.UI.Client/libs/resources/resource.controller.ts
@@ -5,7 +5,7 @@ import {
 	UMB_NOTIFICATION_CONTEXT_TOKEN,
 } from '@umbraco-cms/backoffice/notification';
 import { ApiError, CancelablePromise, ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbController, UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbController, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import type { DataSourceResponse } from '@umbraco-cms/backoffice/repository';
 
@@ -14,7 +14,7 @@ export class UmbResourceController extends UmbController {
 
 	#notificationContext?: UmbNotificationContext;
 
-	constructor(host: UmbControllerHostInterface, promise: Promise<any>, alias?: string) {
+	constructor(host: UmbControllerHostElement, promise: Promise<any>, alias?: string) {
 		super(host, alias);
 
 		this.#promise = promise;
diff --git a/src/Umbraco.Web.UI.Client/libs/resources/tryExecuteAndNotify.function.ts b/src/Umbraco.Web.UI.Client/libs/resources/tryExecuteAndNotify.function.ts
index b9b4222d59..d34b90fb02 100644
--- a/src/Umbraco.Web.UI.Client/libs/resources/tryExecuteAndNotify.function.ts
+++ b/src/Umbraco.Web.UI.Client/libs/resources/tryExecuteAndNotify.function.ts
@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { UmbResourceController } from './resource.controller';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import type { UmbNotificationOptions } from '@umbraco-cms/backoffice/notification';
 
 export function tryExecuteAndNotify<T>(
-	host: UmbControllerHostInterface,
+	host: UmbControllerHostElement,
 	resource: Promise<T>,
 	options?: UmbNotificationOptions<any>
 ) {
diff --git a/src/Umbraco.Web.UI.Client/libs/router/route.context.ts b/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
index 021495954d..da5364d1df 100644
--- a/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
+++ b/src/Umbraco.Web.UI.Client/libs/router/route.context.ts
@@ -5,7 +5,7 @@ import {
 	UmbContextProviderController,
 	UmbContextToken,
 } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UMB_MODAL_CONTEXT_TOKEN, UmbModalRouteRegistration } from '@umbraco-cms/backoffice/modal';
 
 const EmptyDiv = document.createElement('div');
@@ -28,7 +28,7 @@ export class UmbRouteContext {
 	#routerBasePath?: string;
 	#activeModalPath?: string;
 
-	constructor(host: UmbControllerHostInterface, private _onGotModals: (contextRoutes: any) => void) {
+	constructor(host: UmbControllerHostElement, private _onGotModals: (contextRoutes: any) => void) {
 		new UmbContextProviderController(host, UMB_ROUTE_CONTEXT_TOKEN, this);
 		new UmbContextConsumerController(host, UMB_MODAL_CONTEXT_TOKEN, (context) => {
 			this.#modalContext = context;
diff --git a/src/Umbraco.Web.UI.Client/libs/store/store-base.ts b/src/Umbraco.Web.UI.Client/libs/store/store-base.ts
index b377a59391..a934ab6871 100644
--- a/src/Umbraco.Web.UI.Client/libs/store/store-base.ts
+++ b/src/Umbraco.Web.UI.Client/libs/store/store-base.ts
@@ -1,8 +1,8 @@
 import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbStoreBase {
-	constructor(protected _host: UmbControllerHostInterface, public readonly storeAlias: string) {
+	constructor(protected _host: UmbControllerHostElement, public readonly storeAlias: string) {
 		new UmbContextProviderController(_host, storeAlias, this);
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/libs/workspace/actions/save/save.action.ts b/src/Umbraco.Web.UI.Client/libs/workspace/actions/save/save.action.ts
index dde528e171..b2f986912f 100644
--- a/src/Umbraco.Web.UI.Client/libs/workspace/actions/save/save.action.ts
+++ b/src/Umbraco.Web.UI.Client/libs/workspace/actions/save/save.action.ts
@@ -1,10 +1,10 @@
 import { UmbWorkspaceContextInterface } from '../../context/workspace-context.interface';
 import { UmbWorkspaceActionBase } from '../workspace-action-base';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 // TODO: add interface for repo/partial repo/save-repo
 export class UmbSaveWorkspaceAction extends UmbWorkspaceActionBase<UmbWorkspaceContextInterface> {
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/libs/workspace/actions/workspace-action-base.ts b/src/Umbraco.Web.UI.Client/libs/workspace/actions/workspace-action-base.ts
index cf7e2f97b0..0037d8ca5b 100644
--- a/src/Umbraco.Web.UI.Client/libs/workspace/actions/workspace-action-base.ts
+++ b/src/Umbraco.Web.UI.Client/libs/workspace/actions/workspace-action-base.ts
@@ -1,16 +1,16 @@
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 
 export interface UmbWorkspaceAction<T = unknown> {
-	host: UmbControllerHostInterface;
+	host: UmbControllerHostElement;
 	workspaceContext?: T;
 	execute(): Promise<void>;
 }
 
 export class UmbWorkspaceActionBase<WorkspaceType> {
-	host: UmbControllerHostInterface;
+	host: UmbControllerHostElement;
 	workspaceContext?: WorkspaceType;
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.host = host;
 
 		new UmbContextConsumerController(this.host, 'umbWorkspaceContext', (instance: WorkspaceType) => {
diff --git a/src/Umbraco.Web.UI.Client/libs/workspace/context/workspace-context.interface.ts b/src/Umbraco.Web.UI.Client/libs/workspace/context/workspace-context.interface.ts
index d5ef7d313b..b90df89de2 100644
--- a/src/Umbraco.Web.UI.Client/libs/workspace/context/workspace-context.interface.ts
+++ b/src/Umbraco.Web.UI.Client/libs/workspace/context/workspace-context.interface.ts
@@ -1,8 +1,8 @@
 import { Observable } from 'rxjs';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export interface UmbWorkspaceContextInterface<T = unknown> {
-	host: UmbControllerHostInterface;
+	host: UmbControllerHostElement;
 	repository: any; // TODO: add type
 	isNew: Observable<boolean>;
 	getIsNew(): boolean;
diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts
index 0ea2418090..3f6a096e15 100644
--- a/src/Umbraco.Web.UI.Client/src/app.ts
+++ b/src/Umbraco.Web.UI.Client/src/app.ts
@@ -20,7 +20,7 @@ import { OpenAPI, RuntimeLevelModel, ServerResource } from '@umbraco-cms/backoff
 import { umbDebugContextEventType } from '@umbraco-cms/backoffice/context-api';
 
 @customElement('umb-app')
-export class UmbApp extends UmbLitElement {
+export class UmbAppElement extends UmbLitElement {
 	static styles = css`
 		:host {
 			overflow: hidden;
@@ -156,6 +156,6 @@ export class UmbApp extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-app': UmbApp;
+		'umb-app': UmbAppElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/document-blueprint.detail.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/document-blueprint.detail.store.ts
index febb564943..f0efc47b4b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/document-blueprint.detail.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/document-blueprint.detail.store.ts
@@ -2,7 +2,7 @@ import type { DocumentBlueprintDetails } from '@umbraco-cms/backoffice/models';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
@@ -14,7 +14,7 @@ export class UmbDocumentBlueprintStore extends UmbStoreBase {
 	// TODO: use the right type:
 	#data = new ArrayState<DocumentBlueprintDetails>([], (x) => x.key);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_DOCUMENT_BLUEPRINT_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/document-blueprint.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/document-blueprint.tree.store.ts
index cbb0c01bbb..5b56f8bea8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/document-blueprint.tree.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/document-blueprint.tree.store.ts
@@ -1,6 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export const UMB_DOCUMENT_BLUEPRINT_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbDocumentBlueprintTreeStore>(
 	'UmbDocumentBlueprintTreeStore'
@@ -13,7 +13,7 @@ export const UMB_DOCUMENT_BLUEPRINT_TREE_STORE_CONTEXT_TOKEN = new UmbContextTok
  * @description - Tree Data Store for Document Blueprints
  */
 export class UmbDocumentBlueprintTreeStore extends UmbEntityTreeStore {
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_DOCUMENT_BLUEPRINT_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.repository.ts
index aae1b52131..24eeb55d75 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.repository.ts
@@ -3,7 +3,7 @@ import { UmbDocumentTypeServerDataSource } from './sources/document-type.server.
 import { UmbDocumentTypeTreeStore, UMB_DOCUMENT_TYPE_TREE_STORE_CONTEXT_TOKEN } from './document-type.tree.store';
 import { UmbDocumentTypeStore, UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN } from './document-type.store';
 import type { UmbTreeDataSource, UmbTreeRepository, UmbDetailRepository } from '@umbraco-cms/backoffice/repository';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ProblemDetailsModel, DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
@@ -13,7 +13,7 @@ type ItemType = DocumentTypeResponseModel;
 export class UmbDocumentTypeRepository implements UmbTreeRepository<ItemType>, UmbDetailRepository<ItemType> {
 	#init!: Promise<unknown>;
 
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#treeSource: UmbTreeDataSource;
 	#treeStore?: UmbDocumentTypeTreeStore;
@@ -23,7 +23,7 @@ export class UmbDocumentTypeRepository implements UmbTreeRepository<ItemType>, U
 
 	#notificationContext?: UmbNotificationContext;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.store.ts
index 80d83734c4..f8b258866d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.store.ts
@@ -2,7 +2,7 @@ import { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
@@ -15,10 +15,10 @@ export class UmbDocumentTypeStore extends UmbStoreBase {
 
 	/**
 	 * Creates an instance of UmbDocumentTypeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbDocumentTypeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN.toString());
 	}
 
@@ -50,6 +50,4 @@ export class UmbDocumentTypeStore extends UmbStoreBase {
 	}
 }
 
-export const UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbDocumentTypeStore>(
-	'UmbDocumentTypeStore'
-);
+export const UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbDocumentTypeStore>('UmbDocumentTypeStore');
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.tree.store.ts
index 4052a3ff76..83bcc484e2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.tree.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.tree.store.ts
@@ -1,6 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
@@ -12,10 +12,10 @@ import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 export class UmbDocumentTypeTreeStore extends UmbEntityTreeStore {
 	/**
 	 * Creates an instance of UmbDocumentTypeTreeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbDocumentTypeTreeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_DOCUMENT_TYPE_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/sources/document-type.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/sources/document-type.server.data.ts
index f5819640ff..5f96641f64 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/sources/document-type.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/sources/document-type.server.data.ts
@@ -4,7 +4,7 @@ import {
 	ProblemDetailsModel,
 	DocumentTypeResponseModel,
 } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -14,14 +14,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {RepositoryDetailDataSource}
  */
 export class UmbDocumentTypeServerDataSource implements UmbDataSource<DocumentTypeResponseModel> {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of UmbDocumentServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbDocumentServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/sources/document-type.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/sources/document-type.tree.server.data.ts
index 6d5f8877f4..67830a5e43 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/sources/document-type.tree.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/sources/document-type.tree.server.data.ts
@@ -1,6 +1,6 @@
 import type { UmbTreeDataSource } from '@umbraco-cms/backoffice/repository';
 import { ProblemDetailsModel, DocumentTypeResource } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -10,7 +10,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {DocumentTreeDataSource}
  */
 export class DocumentTypeTreeServerDataSource implements UmbTreeDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	// TODO: how do we handle trashed items?
 	async trashItems(keys: Array<string>) {
@@ -43,10 +43,10 @@ export class DocumentTypeTreeServerDataSource implements UmbTreeDataSource {
 
 	/**
 	 * Creates an instance of DocumentTreeServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof DocumentTreeServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.context.ts
index 30c185de69..ef3f97574b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.context.ts
@@ -2,7 +2,7 @@ import { UmbWorkspaceContext } from '../../../shared/components/workspace/worksp
 import { UmbEntityWorkspaceContextInterface } from '../../../shared/components/workspace/workspace-context/workspace-entity-context.interface';
 import { UmbDocumentTypeRepository } from '../repository/document-type.repository';
 import type { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
 
 type EntityType = DocumentTypeResponseModel;
@@ -14,7 +14,7 @@ export class UmbWorkspaceDocumentTypeContext
 	data = this.#data.asObservable();
 	name = this.#data.getObservablePart((data) => data?.name);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbDocumentTypeRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create-blueprint.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create-blueprint.action.ts
index f81918a27c..d0d1ebd48c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create-blueprint.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create-blueprint.action.ts
@@ -1,9 +1,9 @@
 import { UmbDocumentRepository } from '../repository/document.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbCreateDocumentBlueprintEntityAction extends UmbEntityActionBase<UmbDocumentRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts
index de691cf39c..6994ebcabe 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/create/create.action.ts
@@ -1,6 +1,6 @@
 import type { UmbDocumentRepository } from '../../repository/document.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import {
 	UmbModalContext,
 	UMB_MODAL_CONTEXT_TOKEN,
@@ -11,7 +11,7 @@ import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-ap
 export class UmbCreateDocumentEntityAction extends UmbEntityActionBase<UmbDocumentRepository> {
 	#modalContext?: UmbModalContext;
 
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 
 		new UmbContextConsumerController(this.host, UMB_MODAL_CONTEXT_TOKEN, (instance) => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/culture-and-hostnames.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/culture-and-hostnames.action.ts
index f487877ac3..d5f6d582bc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/culture-and-hostnames.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/culture-and-hostnames.action.ts
@@ -1,9 +1,9 @@
 import { UmbDocumentRepository } from '../repository/document.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbDocumentCultureAndHostnamesEntityAction extends UmbEntityActionBase<UmbDocumentRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/permissions.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/permissions.action.ts
index e1e9b98d10..48493532b9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/permissions.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/permissions.action.ts
@@ -1,9 +1,9 @@
 import { UmbDocumentRepository } from '../repository/document.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbDocumentPermissionsEntityAction extends UmbEntityActionBase<UmbDocumentRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/public-access.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/public-access.action.ts
index 18498d3aa9..ca8863faff 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/public-access.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/public-access.action.ts
@@ -1,9 +1,9 @@
 import { UmbDocumentRepository } from '../repository/document.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbDocumentPublicAccessEntityAction extends UmbEntityActionBase<UmbDocumentRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/publish.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/publish.action.ts
index 53ca56ea8c..dcb17adc6b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/publish.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/publish.action.ts
@@ -1,9 +1,9 @@
 import { UmbDocumentRepository } from '../repository/document.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbPublishDocumentEntityAction extends UmbEntityActionBase<UmbDocumentRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/rollback.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/rollback.action.ts
index ae0f80225b..86200e5ed4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/rollback.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/rollback.action.ts
@@ -1,9 +1,9 @@
 import { UmbDocumentRepository } from '../repository/document.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbRollbackDocumentEntityAction extends UmbEntityActionBase<UmbDocumentRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/unpublish.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/unpublish.action.ts
index e7025457a8..69c27352f4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/unpublish.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-actions/unpublish.action.ts
@@ -1,9 +1,9 @@
 import { UmbDocumentRepository } from '../repository/document.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbUnpublishDocumentEntityAction extends UmbEntityActionBase<UmbDocumentRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-bulk-actions/copy/copy.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-bulk-actions/copy/copy.action.ts
index 42b95a1253..521845aceb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-bulk-actions/copy/copy.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-bulk-actions/copy/copy.action.ts
@@ -1,9 +1,9 @@
 import { UmbDocumentRepository } from '../../repository/document.repository';
 import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbDocumentCopyEntityBulkAction extends UmbEntityBulkActionBase<UmbDocumentRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, selection: Array<string>) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, selection: Array<string>) {
 		super(host, repositoryAlias, selection);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-bulk-actions/move/move.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-bulk-actions/move/move.action.ts
index bbc16b3a4f..436994c193 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-bulk-actions/move/move.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/entity-bulk-actions/move/move.action.ts
@@ -1,9 +1,9 @@
 import { UmbDocumentRepository } from '../../repository/document.repository';
 import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbDocumentMoveEntityBulkAction extends UmbEntityBulkActionBase<UmbDocumentRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, selection: Array<string>) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, selection: Array<string>) {
 		super(host, repositoryAlias, selection);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.repository.ts
index 5e80ce51f9..f1b76e815c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.repository.ts
@@ -3,7 +3,7 @@ import { UmbDocumentStore, UMB_DOCUMENT_STORE_CONTEXT_TOKEN } from './document.s
 import { UmbDocumentTreeStore, UMB_DOCUMENT_TREE_STORE_CONTEXT_TOKEN } from './document.tree.store';
 import { DocumentTreeServerDataSource } from './sources/document.tree.server.data';
 import type { UmbTreeDataSource, UmbTreeRepository, UmbDetailRepository } from '@umbraco-cms/backoffice/repository';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ProblemDetailsModel, DocumentResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
@@ -13,7 +13,7 @@ type ItemType = DocumentResponseModel;
 export class UmbDocumentRepository implements UmbTreeRepository<ItemType>, UmbDetailRepository<ItemType> {
 	#init!: Promise<unknown>;
 
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#treeSource: UmbTreeDataSource;
 	#treeStore?: UmbDocumentTreeStore;
@@ -23,7 +23,7 @@ export class UmbDocumentRepository implements UmbTreeRepository<ItemType>, UmbDe
 
 	#notificationContext?: UmbNotificationContext;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.store.ts
index 8454ce8ef3..f1f3ce7aaf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.store.ts
@@ -2,7 +2,7 @@ import { DocumentResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
@@ -15,10 +15,10 @@ export class UmbDocumentStore extends UmbStoreBase {
 
 	/**
 	 * Creates an instance of UmbDocumentDetailStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbDocumentDetailStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_DOCUMENT_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.tree.store.ts
index 4cab5a9ac3..a53d41e17a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.tree.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.tree.store.ts
@@ -1,6 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
@@ -11,10 +11,10 @@ import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 export class UmbDocumentTreeStore extends UmbEntityTreeStore {
 	/**
 	 * Creates an instance of UmbDocumentTreeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbDocumentTreeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_DOCUMENT_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/sources/document.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/sources/document.server.data.ts
index c68b6a8eb1..20de768ab9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/sources/document.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/sources/document.server.data.ts
@@ -6,7 +6,7 @@ import {
 	DocumentResponseModel,
 	ContentStateModel,
 } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -16,14 +16,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {RepositoryDetailDataSource}
  */
 export class UmbDocumentServerDataSource implements UmbDataSource<DocumentResponseModel> {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of UmbDocumentServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbDocumentServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/sources/document.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/sources/document.tree.server.data.ts
index 3dd6b3d6ff..4bb080ab00 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/sources/document.tree.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/sources/document.tree.server.data.ts
@@ -1,6 +1,6 @@
 import type { UmbTreeDataSource } from '@umbraco-cms/backoffice/repository';
 import { ProblemDetailsModel, DocumentResource } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -10,7 +10,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {DocumentTreeDataSource}
  */
 export class DocumentTreeServerDataSource implements UmbTreeDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	// TODO: how do we handle trashed items?
 	async trashItems(keys: Array<string>) {
@@ -43,10 +43,10 @@ export class DocumentTreeServerDataSource implements UmbTreeDataSource {
 
 	/**
 	 * Creates an instance of DocumentTreeServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof DocumentTreeServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.context.ts
index 19cfaf1ccd..a9812355db 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.context.ts
@@ -1,10 +1,10 @@
 import { UmbTreeItemContextBase } from '../../../../shared/components/tree/tree-item-base/tree-item-base.context';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { DocumentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 // TODO get unique method from an document repository static method
 export class UmbDocumentTreeItemContext extends UmbTreeItemContextBase<DocumentTreeItemResponseModel> {
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, (x: DocumentTreeItemResponseModel) => x.key);
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/actions/save-and-preview.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/actions/save-and-preview.action.ts
index 6a54050580..8879e08aa5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/actions/save-and-preview.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/actions/save-and-preview.action.ts
@@ -1,9 +1,9 @@
 import { UmbDocumentWorkspaceContext } from '../document-workspace.context';
 import { UmbWorkspaceActionBase } from '@umbraco-cms/backoffice/workspace';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbDocumentSaveAndPreviewWorkspaceAction extends UmbWorkspaceActionBase<UmbDocumentWorkspaceContext> {
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/actions/save-and-publish.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/actions/save-and-publish.action.ts
index eb0fc8c24c..2ca1793f3c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/actions/save-and-publish.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/actions/save-and-publish.action.ts
@@ -1,9 +1,9 @@
 import { UmbDocumentWorkspaceContext } from '../document-workspace.context';
 import { UmbWorkspaceActionBase } from '@umbraco-cms/backoffice/workspace';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbDocumentSaveAndPublishWorkspaceAction extends UmbWorkspaceActionBase<UmbDocumentWorkspaceContext> {
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/actions/save-and-schedule.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/actions/save-and-schedule.action.ts
index 8b25669b5a..8097100a33 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/actions/save-and-schedule.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/actions/save-and-schedule.action.ts
@@ -1,9 +1,9 @@
 import { UmbDocumentWorkspaceContext } from '../document-workspace.context';
 import { UmbWorkspaceActionBase } from '@umbraco-cms/backoffice/workspace';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbSaveAndScheduleDocumentWorkspaceAction extends UmbWorkspaceActionBase<UmbDocumentWorkspaceContext> {
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts
index e3a66fde74..eb74412d29 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts
@@ -7,7 +7,7 @@ import { UmbWorkspacePropertyStructureManager } from '../../../shared/components
 import { UmbWorkspaceSplitViewManager } from '../../../shared/components/workspace/workspace-context/workspace-split-view-manager.class';
 import type { DocumentResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { partialUpdateFrozenArray, ObjectState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 // TODO: should this context be called DocumentDraft instead of workspace? or should the draft be part of this?
 // TODO: Should we have a DocumentStructureContext and maybe even a DocumentDraftContext?
@@ -38,7 +38,7 @@ export class UmbDocumentWorkspaceContext
 	readonly structure;
 	readonly splitView;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbDocumentRepository(host));
 
 		this.structure = new UmbWorkspacePropertyStructureManager(this.host, new UmbDocumentTypeRepository(this.host));
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/entity-actions/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/entity-actions/create.action.ts
index b00705305e..5f77849dea 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/entity-actions/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/entity-actions/create.action.ts
@@ -1,9 +1,9 @@
 import { UmbMediaTypeRepository } from '../repository/media-type.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbCreateMediaTypeEntityAction extends UmbEntityActionBase<UmbMediaTypeRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/entity-actions/reload.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/entity-actions/reload.action.ts
index 01d31ebd07..17e28e6d4c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/entity-actions/reload.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/entity-actions/reload.action.ts
@@ -1,12 +1,12 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { UmbMediaTypeRepository } from '../repository/media-type.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export default class UmbReloadMediaTypeEntityAction extends UmbEntityActionBase<UmbMediaTypeRepository> {
 	static styles = [UUITextStyles];
 
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.detail.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.detail.store.ts
index 601807dfd6..884fabf62f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.detail.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.detail.store.ts
@@ -1,6 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import type { MediaTypeDetails } from '@umbraco-cms/backoffice/models';
 
@@ -13,7 +13,7 @@ import type { MediaTypeDetails } from '@umbraco-cms/backoffice/models';
 export class UmbMediaTypeStore extends UmbStoreBase {
 	#data = new ArrayState<MediaTypeDetails>([], (x) => x.key);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_MEDIA_TYPE_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.repository.ts
index 011e67a7e1..769559b402 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.repository.ts
@@ -4,7 +4,7 @@ import { UmbMediaTypeStore, UMB_MEDIA_TYPE_STORE_CONTEXT_TOKEN } from './media-t
 import { MediaTypeTreeServerDataSource } from './sources/media-type.tree.server.data';
 import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import type { MediaTypeDetails } from '@umbraco-cms/backoffice/models';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 import { UmbTreeRepository, UmbTreeDataSource } from '@umbraco-cms/backoffice/repository';
@@ -12,7 +12,7 @@ import { UmbTreeRepository, UmbTreeDataSource } from '@umbraco-cms/backoffice/re
 export class UmbMediaTypeRepository implements UmbTreeRepository {
 	#init!: Promise<unknown>;
 
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#treeSource: UmbTreeDataSource;
 	#treeStore?: UmbMediaTypeTreeStore;
@@ -22,7 +22,7 @@ export class UmbMediaTypeRepository implements UmbTreeRepository {
 
 	#notificationContext?: UmbNotificationContext;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.tree.store.ts
index 3392acb8d1..14d86a3344 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.tree.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.tree.store.ts
@@ -1,6 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
@@ -11,10 +11,10 @@ import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/control
 export class UmbMediaTypeTreeStore extends UmbEntityTreeStore {
 	/**
 	 * Creates an instance of UmbMediaTypeTreeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbMediaTypeTreeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_MEDIA_TYPE_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/sources/media-type.detail.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/sources/media-type.detail.server.data.ts
index 9a96c2c7e2..fa2481dd0f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/sources/media-type.detail.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/sources/media-type.detail.server.data.ts
@@ -1,6 +1,6 @@
 import { MediaTypeDetailDataSource } from './media-type.details.server.data.interface';
 import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import type { MediaTypeDetails } from '@umbraco-cms/backoffice/models';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
@@ -11,9 +11,9 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {MediaTypeDetailDataSource}
  */
 export class UmbMediaTypeDetailServerDataSource implements MediaTypeDetailDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/sources/media-type.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/sources/media-type.tree.server.data.ts
index 3c2f57bf07..4fa209600d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/sources/media-type.tree.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/sources/media-type.tree.server.data.ts
@@ -1,5 +1,5 @@
 import { MediaTypeResource, ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbTreeDataSource } from '@umbraco-cms/backoffice/repository';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
@@ -10,14 +10,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {MediaTypeTreeDataSource}
  */
 export class MediaTypeTreeServerDataSource implements UmbTreeDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of MediaTypeTreeDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof MediaTypeTreeDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.context.ts
index 5bbbb01e3b..25bd603aa1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.context.ts
@@ -1,7 +1,7 @@
 import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context';
 import { UmbEntityWorkspaceContextInterface } from '../../../shared/components/workspace/workspace-context/workspace-entity-context.interface';
 import { UmbMediaTypeRepository } from '../repository/media-type.repository';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
 import type { MediaTypeDetails } from '@umbraco-cms/backoffice/models';
 
@@ -14,7 +14,7 @@ export class UmbWorkspaceMediaTypeContext
 	data = this.#data.asObservable();
 	name = this.#data.getObservablePart((data) => data?.name);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbMediaTypeRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/copy/copy.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/copy/copy.action.ts
index 7a6a36cd51..72b49b7426 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/copy/copy.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/copy/copy.action.ts
@@ -1,9 +1,9 @@
 import type { UmbMediaRepository } from '../../repository/media.repository';
 import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbMediaCopyEntityBulkAction extends UmbEntityBulkActionBase<UmbMediaRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, selection: Array<string>) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, selection: Array<string>) {
 		super(host, repositoryAlias, selection);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts
index 9903168c0d..6f34b483ca 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts
@@ -1,13 +1,13 @@
 import type { UmbMediaRepository } from '../../repository/media.repository';
 import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_MEDIA_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 
 export class UmbMediaMoveEntityBulkAction extends UmbEntityBulkActionBase<UmbMediaRepository> {
 	#modalContext?: UmbModalContext;
 
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, selection: Array<string>) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, selection: Array<string>) {
 		super(host, repositoryAlias, selection);
 
 		new UmbContextConsumerController(host, UMB_MODAL_CONTEXT_TOKEN, (instance) => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts
index 86ee61ce1d..4a40576216 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/trash/trash.action.ts
@@ -1,14 +1,14 @@
 import { html } from 'lit';
 import type { UmbMediaRepository } from '../../repository/media.repository';
 import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 
 export class UmbMediaTrashEntityBulkAction extends UmbEntityBulkActionBase<UmbMediaRepository> {
 	#modalContext?: UmbModalContext;
 
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, selection: Array<string>) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, selection: Array<string>) {
 		super(host, repositoryAlias, selection);
 
 		new UmbContextConsumerController(host, UMB_MODAL_CONTEXT_TOKEN, (instance) => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
index 0c17a6e36a..b37e043b12 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts
@@ -1,11 +1,10 @@
-import type { UmbTreeRepository } from '@umbraco-cms/backoffice/repository/tree-repository.interface';
 import type { MediaDetails } from '../';
 import { MediaTreeServerDataSource } from './sources/media.tree.server.data';
 import { UmbMediaTreeStore, UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN } from './media.tree.store';
 import { UmbMediaStore, UMB_MEDIA_STORE_CONTEXT_TOKEN } from './media.store';
 import { UmbMediaDetailServerDataSource } from './sources/media.detail.server.data';
-import type { UmbTreeDataSource } from '@umbraco-cms/backoffice/repository';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbTreeDataSource, UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbDetailRepository } from '@umbraco-cms/backoffice/repository';
@@ -14,7 +13,7 @@ import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco
 type ItemDetailType = MediaDetails;
 
 export class UmbMediaRepository implements UmbTreeRepository, UmbDetailRepository<ItemDetailType> {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#treeSource: UmbTreeDataSource;
 	#treeStore?: UmbMediaTreeStore;
@@ -27,7 +26,7 @@ export class UmbMediaRepository implements UmbTreeRepository, UmbDetailRepositor
 	#initResolver?: () => void;
 	#initialized = false;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.store.ts
index 2d5dfc4c4c..647992a1af 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.store.ts
@@ -2,7 +2,7 @@ import type { MediaDetails } from '../';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
@@ -15,10 +15,10 @@ export class UmbMediaStore extends UmbStoreBase {
 
 	/**
 	 * Creates an instance of UmbMediaStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbMediaStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_MEDIA_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.tree.store.ts
index 4214a9d7f2..adc6a920e0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.tree.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.tree.store.ts
@@ -2,7 +2,7 @@ import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export const UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbMediaTreeStore>('UmbMediaTreeStore');
 
@@ -17,10 +17,10 @@ export class UmbMediaTreeStore extends UmbEntityTreeStore {
 
 	/**
 	 * Creates an instance of UmbMediaTreeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbMediaTreeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/sources/media.detail.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/sources/media.detail.server.data.ts
index 120cb495e8..416090e87e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/sources/media.detail.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/sources/media.detail.server.data.ts
@@ -1,7 +1,7 @@
 import type { MediaDetails } from '../../';
 import { UmbDataSource } from '@umbraco-cms/backoffice/repository';
 import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -11,14 +11,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {TemplateDetailDataSource}
  */
 export class UmbMediaDetailServerDataSource implements UmbDataSource<MediaDetails> {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of UmbMediaDetailServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbMediaDetailServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/sources/media.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/sources/media.tree.server.data.ts
index 75c88bf7b4..c29c2b2a9a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/sources/media.tree.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/sources/media.tree.server.data.ts
@@ -1,6 +1,6 @@
 import type { UmbTreeDataSource } from '@umbraco-cms/backoffice/repository';
 import { ProblemDetailsModel, MediaResource } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -10,7 +10,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {MediaTreeDataSource}
  */
 export class MediaTreeServerDataSource implements UmbTreeDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	// TODO: how do we handle trashed items?
 	async trashItems(keys: Array<string>) {
@@ -43,10 +43,10 @@ export class MediaTreeServerDataSource implements UmbTreeDataSource {
 
 	/**
 	 * Creates an instance of MediaTreeServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof MediaTreeServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.context.ts
index 399b057a61..fb147d0fc3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.context.ts
@@ -3,7 +3,7 @@ import { UmbMediaRepository } from '../repository/media.repository';
 import type { UmbEntityWorkspaceContextInterface } from '../../../shared/components/workspace/workspace-context/workspace-entity-context.interface';
 import type { MediaDetails } from '../';
 import { appendToFrozenArray, ObjectState } from '@umbraco-cms/backoffice/observable-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 type EntityType = MediaDetails;
 export class UmbMediaWorkspaceContext
@@ -14,7 +14,7 @@ export class UmbMediaWorkspaceContext
 	data = this.#data.asObservable();
 	name = this.#data.getObservablePart((data) => data?.name);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbMediaRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.repository.ts
index 5ca8bcbac1..04d282470d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.repository.ts
@@ -2,7 +2,7 @@ import { UmbMemberGroupTreeStore, UMB_MEMBER_GROUP_TREE_STORE_CONTEXT_TOKEN } fr
 import { UmbMemberGroupDetailServerDataSource } from './sources/member-group.detail.server.data';
 import { UmbMemberGroupStore, UMB_MEMBER_GROUP_STORE_CONTEXT_TOKEN } from './member-group.store';
 import { MemberGroupTreeServerDataSource } from './sources/member-group.tree.server.data';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import type { MemberGroupDetails } from '@umbraco-cms/backoffice/models';
@@ -13,7 +13,7 @@ import type { UmbTreeDataSource, UmbDetailRepository, UmbTreeRepository } from '
 export class UmbMemberGroupRepository implements UmbTreeRepository, UmbDetailRepository<any> {
 	#init!: Promise<unknown>;
 
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#treeSource: UmbTreeDataSource;
 	#treeStore?: UmbMemberGroupTreeStore;
@@ -23,7 +23,7 @@ export class UmbMemberGroupRepository implements UmbTreeRepository, UmbDetailRep
 
 	#notificationContext?: UmbNotificationContext;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 		// TODO: figure out how spin up get the correct data source
 		this.#treeSource = new MemberGroupTreeServerDataSource(this.#host);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.store.ts
index b58cd314c0..5e24666945 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.store.ts
@@ -1,7 +1,7 @@
 import type { MemberGroupDetails } from '@umbraco-cms/backoffice/models';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 
 /**
@@ -13,7 +13,7 @@ import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 export class UmbMemberGroupStore extends UmbStoreBase {
 	#data = new ArrayState<MemberGroupDetails>([], (x) => x.key);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_MEMBER_GROUP_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.tree.store.ts
index 6e20bb0447..5247506b6c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.tree.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.tree.store.ts
@@ -1,6 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
@@ -11,10 +11,10 @@ import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/control
 export class UmbMemberGroupTreeStore extends UmbEntityTreeStore {
 	/**
 	 * Creates an instance of UmbMemberGroupTreeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbMemberGroupTreeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_MEMBER_GROUP_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/sources/member-group.detail.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/sources/member-group.detail.server.data.ts
index 544de51bc6..2ac2a49d2d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/sources/member-group.detail.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/sources/member-group.detail.server.data.ts
@@ -1,4 +1,4 @@
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
 import type { MemberGroupDetails } from '@umbraco-cms/backoffice/models';
@@ -12,9 +12,9 @@ import { UmbDataSource } from '@umbraco-cms/backoffice/repository';
  */
 // TODO => Provide type when it is available
 export class UmbMemberGroupDetailServerDataSource implements UmbDataSource<any> {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/sources/member-group.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/sources/member-group.tree.server.data.ts
index 5388958abd..ee9a1aa0bc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/sources/member-group.tree.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/sources/member-group.tree.server.data.ts
@@ -1,5 +1,5 @@
 import { MemberGroupResource, ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbTreeDataSource } from '@umbraco-cms/backoffice/repository';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
@@ -10,14 +10,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {MemberGroupTreeDataSource}
  */
 export class MemberGroupTreeServerDataSource implements UmbTreeDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of MemberGroupTreeServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof MemberGroupTreeServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.context.ts
index ea030f00fb..c7565323ab 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.context.ts
@@ -2,7 +2,7 @@ import { UmbEntityWorkspaceContextInterface } from '../../../../backoffice/share
 import { UmbWorkspaceContext } from '../../../../backoffice/shared/components/workspace/workspace-context/workspace-context';
 import { UmbMemberGroupRepository } from '../repository/member-group.repository';
 import type { MemberGroupDetails } from '@umbraco-cms/backoffice/models';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
 
 type EntityType = MemberGroupDetails;
@@ -14,7 +14,7 @@ export class UmbWorkspaceMemberGroupContext
 	data = this.#data.asObservable();
 	name = this.#data.getObservablePart((data) => data?.name);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbMemberGroupRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.repository.ts
index ffa47cbd04..81eaa12de2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.repository.ts
@@ -2,7 +2,7 @@ import { MemberTypeTreeServerDataSource } from './sources/member-type.tree.serve
 import { UmbMemberTypeTreeStore, UMB_MEMBER_TYPE_TREE_STORE_CONTEXT_TOKEN } from './member-type.tree.store';
 import { UmbMemberTypeStore, UMB_MEMBER_TYPE_STORE_CONTEXT_TOKEN } from './member-type.store';
 import { UmbMemberTypeDetailServerDataSource } from './sources/member-type.detail.server.data';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbTreeDataSource, UmbDetailRepository, UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
 import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
@@ -16,7 +16,7 @@ type TreeItemType = any;
 export class UmbMemberTypeRepository implements UmbTreeRepository<TreeItemType>, UmbDetailRepository<ItemType> {
 	#init!: Promise<unknown>;
 
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#treeSource: UmbTreeDataSource;
 	#treeStore?: UmbMemberTypeTreeStore;
@@ -26,7 +26,7 @@ export class UmbMemberTypeRepository implements UmbTreeRepository<TreeItemType>,
 
 	#notificationContext?: UmbNotificationContext;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.store.ts
index 9920319c4c..7624273435 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.store.ts
@@ -1,6 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import type { MemberTypeDetails } from '@umbraco-cms/backoffice/models';
 
@@ -13,7 +13,7 @@ import type { MemberTypeDetails } from '@umbraco-cms/backoffice/models';
 export class UmbMemberTypeStore extends UmbStoreBase {
 	#data = new ArrayState<MemberTypeDetails>([], (x) => x.key);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_MEMBER_TYPE_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.tree.store.ts
index 8fb32d6bea..be451afb24 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.tree.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.tree.store.ts
@@ -1,6 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
@@ -9,7 +9,7 @@ import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/control
  * @description - Tree Data Store for Member Types
  */
 export class UmbMemberTypeTreeStore extends UmbEntityTreeStore {
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_MEMBER_TYPE_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/sources/member-type.detail.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/sources/member-type.detail.server.data.ts
index 91ed934ef9..b0e33984ed 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/sources/member-type.detail.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/sources/member-type.detail.server.data.ts
@@ -1,4 +1,4 @@
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
 import type { MemberTypeDetails } from '@umbraco-cms/backoffice/models';
@@ -11,9 +11,9 @@ import { UmbDetailRepository } from '@umbraco-cms/backoffice/repository';
  * @implements {MemberTypeDetailDataSource}
  */
 export class UmbMemberTypeDetailServerDataSource implements UmbDetailRepository<MemberTypeDetails> {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/sources/member-type.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/sources/member-type.tree.server.data.ts
index 4f450b5bde..6202393162 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/sources/member-type.tree.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/sources/member-type.tree.server.data.ts
@@ -1,5 +1,5 @@
 import { MemberTypeResource, ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbTreeDataSource } from '@umbraco-cms/backoffice/repository';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
@@ -10,14 +10,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {MemberTypeTreeDataSource}
  */
 export class MemberTypeTreeServerDataSource implements UmbTreeDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of MemberTypeTreeDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof MemberTypeTreeDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace.context.ts
index 9c8fb39b76..e2df9052de 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace.context.ts
@@ -2,7 +2,7 @@ import { UmbWorkspaceContext } from '../../../shared/components/workspace/worksp
 import { UmbEntityWorkspaceContextInterface as UmbEntityWorkspaceContextInterface } from '../../../shared/components/workspace/workspace-context/workspace-entity-context.interface';
 import { UmbMemberTypeRepository } from '../repository/member-type.repository';
 import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 // TODO => use correct tpye
 type EntityType = any;
@@ -14,7 +14,7 @@ export class UmbMemberTypeWorkspaceContext
 	#data = new ObjectState<EntityType | undefined>(undefined);
 	name = this.#data.getObservablePart((data) => data?.name);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbMemberTypeRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/member.detail.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/member.detail.store.ts
index a57a23e317..b110fcfbe8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/member.detail.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/member.detail.store.ts
@@ -3,7 +3,7 @@ import { umbMemberData } from '../../../core/mocks/data/member.data';
 import type { MemberDetails, MemberGroupDetails } from '@umbraco-cms/backoffice/models';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { ArrayState, createObservablePart } from '@umbraco-cms/backoffice/observable-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbEntityDetailStore, UmbStoreBase } from '@umbraco-cms/backoffice/store';
 
 /**
@@ -16,7 +16,7 @@ export class UmbMemberStore extends UmbStoreBase implements UmbEntityDetailStore
 	#data = new ArrayState<MemberDetails>([], (x) => x.key);
 	public groups = this.#data.asObservable();
 
-	constructor(private host: UmbControllerHostInterface) {
+	constructor(private host: UmbControllerHostElement) {
 		super(host, UMB_MEMBER_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.repository.ts
index 06d8dd2c48..b0e6c529c6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.repository.ts
@@ -1,20 +1,20 @@
 import { UmbMemberTreeStore, UMB_MEMBER_TREE_STORE_CONTEXT_TOKEN } from './member.tree.store';
 import { MemberTreeServerDataSource } from './sources/member.tree.server.data';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
 import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
 
 export class UmbMemberRepository implements UmbTreeRepository {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 	#dataSource: MemberTreeServerDataSource;
 	#treeStore?: UmbMemberTreeStore;
 	#notificationContext?: UmbNotificationContext;
 	#initResolver?: () => void;
 	#initialized = false;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 		// TODO: figure out how spin up get the correct data source
 		this.#dataSource = new MemberTreeServerDataSource(this.#host);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.store.ts
index 4db3ae37b9..518d0b5c47 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.store.ts
@@ -1,6 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import type { MemberDetails } from '@umbraco-cms/backoffice/models';
 
@@ -13,7 +13,7 @@ import type { MemberDetails } from '@umbraco-cms/backoffice/models';
 export class UmbMemberStore extends UmbStoreBase {
 	#data = new ArrayState<MemberDetails>([], (x) => x.key);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_MEMBER_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.tree.store.ts
index a5c832358e..49568a0fff 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.tree.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.tree.store.ts
@@ -1,6 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export const UMB_MEMBER_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbMemberTreeStore>('UmbMemberTreeStore');
 
@@ -13,10 +13,10 @@ export const UMB_MEMBER_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbMember
 export class UmbMemberTreeStore extends UmbEntityTreeStore {
 	/**
 	 * Creates an instance of UmbTemplateTreeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbMemberGroupTreeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_MEMBER_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/sources/member.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/sources/member.tree.server.data.ts
index ba110ff410..b22acf103c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/sources/member.tree.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/sources/member.tree.server.data.ts
@@ -1,5 +1,5 @@
 import { MemberTreeDataSource } from '.';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * A data source for the Member tree that fetches data from the server
@@ -8,14 +8,14 @@ import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
  * @implements {MemberTreeDataSource}
  */
 export class MemberTreeServerDataSource implements MemberTreeDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of MemberTreeServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof MemberTreeServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.context.ts
index 99086c9254..fd62663356 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.context.ts
@@ -2,13 +2,13 @@ import { UmbWorkspaceContext } from '../../../shared/components/workspace/worksp
 import { UmbEntityWorkspaceContextInterface as UmbEntityWorkspaceContextInterface } from '../../../shared/components/workspace/workspace-context/workspace-entity-context.interface';
 import { UmbMemberRepository } from '../repository/member.repository';
 import type { MemberDetails } from '@umbraco-cms/backoffice/models';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbMemberWorkspaceContext
 	extends UmbWorkspaceContext<UmbMemberRepository>
 	implements UmbEntityWorkspaceContextInterface<MemberDetails | undefined>
 {
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbMemberRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
index e4f9cd4b4c..d3f537e95e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
@@ -13,7 +13,7 @@ import { PackageResource } from '@umbraco-cms/backoffice/backend-api';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 
 @customElement('umb-installed-packages-section-view-item')
-export class UmbInstalledPackagesSectionViewItem extends UmbLitElement {
+export class UmbInstalledPackagesSectionViewItemElement extends UmbLitElement {
 	static styles = css`
 		:host {
 			display: flex;
@@ -151,6 +151,6 @@ export class UmbInstalledPackagesSectionViewItem extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-installed-packages-section-view-item': UmbInstalledPackagesSectionViewItem;
+		'umb-installed-packages-section-view-item': UmbInstalledPackagesSectionViewItemElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts
index de77a3a9a2..578403d9dd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts
@@ -10,7 +10,7 @@ import type { UmbPackageWithMigrationStatus } from '@umbraco-cms/backoffice/mode
 import './installed-packages-section-view-item.element';
 
 @customElement('umb-installed-packages-section-view')
-export class UmbInstalledPackagesSectionView extends UmbLitElement {
+export class UmbInstalledPackagesSectionViewElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -138,10 +138,10 @@ export class UmbInstalledPackagesSectionView extends UmbLitElement {
 	}
 }
 
-export default UmbInstalledPackagesSectionView;
+export default UmbInstalledPackagesSectionViewElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-installed-packages-section-view': UmbInstalledPackagesSectionView;
+		'umb-installed-packages-section-view': UmbInstalledPackagesSectionViewElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/package.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/package.repository.ts
index d22e510625..abe8c7deda 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/package.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/package.repository.ts
@@ -1,6 +1,6 @@
 import { UmbPackageStore, UMB_PACKAGE_STORE_TOKEN } from './package.store';
 import { UmbPackageServerDataSource } from './sources/package.server.data';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import type { ManifestBase } from '@umbraco-cms/backoffice/extensions-registry';
 import { isManifestJSType } from '@umbraco-cms/backoffice/extensions-api';
@@ -18,7 +18,7 @@ export class UmbPackageRepository {
 	#packageSource: UmbPackageServerDataSource;
 	#apiBaseUrl = OpenAPI.BASE;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#packageSource = new UmbPackageServerDataSource(host);
 		this.#init = new Promise((res) => {
 			new UmbContextConsumerController(host, UMB_PACKAGE_STORE_TOKEN, (instance) => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/package.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/package.store.ts
index 560e9eed24..8ed4792471 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/package.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/package.store.ts
@@ -1,6 +1,6 @@
 import { ReplaySubject } from 'rxjs';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import type { UmbPackage } from '@umbraco-cms/backoffice/models';
 import type { PackageMigrationStatusResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -38,10 +38,10 @@ export class UmbPackageStore extends UmbStoreBase {
 
 	/**
 	 * Creates an instance of PackageStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof PackageStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_PACKAGE_STORE_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/server-extension.controller.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/server-extension.controller.ts
index 2f07556f6a..c3f33ced28 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/server-extension.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/server-extension.controller.ts
@@ -1,14 +1,14 @@
 import { Subject, takeUntil } from 'rxjs';
 import { UmbPackageRepository } from './package.repository';
-import { UmbController, UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbController, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbExtensionRegistry } from '@umbraco-cms/backoffice/extensions-api';
 
 export class UmbServerExtensionController extends UmbController {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 	#unobserve = new Subject<void>();
 	#repository: UmbPackageRepository;
 
-	constructor(host: UmbControllerHostInterface, private readonly extensionRegistry: UmbExtensionRegistry) {
+	constructor(host: UmbControllerHostElement, private readonly extensionRegistry: UmbExtensionRegistry) {
 		super(host, UmbServerExtensionController.name);
 		this.#host = host;
 		this.#repository = new UmbPackageRepository(host);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/sources/package.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/sources/package.server.data.ts
index fdac0c0809..5e25807032 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/sources/package.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/sources/package.server.data.ts
@@ -1,5 +1,5 @@
 import { PackageResource } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -7,17 +7,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @export
  */
 export class UmbPackageServerDataSource {
-	constructor(private readonly host: UmbControllerHostInterface) {}
+	constructor(private readonly host: UmbControllerHostElement) {}
 
 	/**
 	 * Get the root items from the server
 	 * @memberof UmbPackageServerDataSource
 	 */
 	getRootItems() {
-		return tryExecuteAndNotify(
-			this.host,
-			PackageResource.getPackageManifest()
-		);
+		return tryExecuteAndNotify(this.host, PackageResource.getPackageManifest());
 	}
 
 	/**
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts
index 90227bbd00..9335c24119 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts
@@ -5,7 +5,7 @@ import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffic
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-search-header-app')
-export class UmbSearchHeaderApp extends UmbLitElement {
+export class UmbSearchHeaderAppElement extends UmbLitElement {
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
@@ -39,10 +39,10 @@ export class UmbSearchHeaderApp extends UmbLitElement {
 	}
 }
 
-export default UmbSearchHeaderApp;
+export default UmbSearchHeaderAppElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-search-header-app': UmbSearchHeaderApp;
+		'umb-search-header-app': UmbSearchHeaderAppElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/cultures/repository/culture.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/cultures/repository/culture.repository.ts
index d75993f9b1..38caacad96 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/cultures/repository/culture.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/cultures/repository/culture.repository.ts
@@ -1,17 +1,17 @@
 import { UmbCultureServerDataSource } from './sources/culture.server.data';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 
 export class UmbCultureRepository {
 	#init!: Promise<unknown>;
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#dataSource: UmbCultureServerDataSource;
 
 	#notificationContext?: UmbNotificationContext;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 
 		this.#dataSource = new UmbCultureServerDataSource(this.#host);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/cultures/repository/sources/culture.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/cultures/repository/sources/culture.server.data.ts
index 2728d5c78b..b9525c1906 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/cultures/repository/sources/culture.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/cultures/repository/sources/culture.server.data.ts
@@ -1,6 +1,6 @@
 import { UmbCultureDataSource } from '.';
 import { CultureResource } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -10,14 +10,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {RepositoryDetailDataSource}
  */
 export class UmbCultureServerDataSource implements UmbCultureDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of UmbLanguageServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbLanguageServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/health-check.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/health-check.context.ts
index 96ea04fb9d..5aead9d1aa 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/health-check.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/health-check.context.ts
@@ -5,7 +5,7 @@ import {
 	HealthCheckResource,
 } from '@umbraco-cms/backoffice/backend-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 export class UmbHealthCheckContext {
@@ -15,9 +15,9 @@ export class UmbHealthCheckContext {
 	private _results = new BehaviorSubject<HealthCheckGroupWithResultResponseModel | undefined>(undefined);
 	public readonly results = this._results.asObservable();
 
-	public host: UmbControllerHostInterface;
+	public host: UmbControllerHostElement;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.repository.ts
index 3922a1a665..c49f8e180c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.repository.ts
@@ -3,7 +3,7 @@ import { UmbDataTypeServerDataSource } from './sources/data-type.server.data';
 import { UmbDataTypeStore, UMB_DATA_TYPE_STORE_CONTEXT_TOKEN } from './data-type.store';
 import { DataTypeTreeServerDataSource } from './sources/data-type.tree.server.data';
 import type { UmbTreeDataSource, UmbTreeRepository, UmbDetailRepository } from '@umbraco-cms/backoffice/repository';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ProblemDetailsModel, DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
@@ -18,7 +18,7 @@ type TreeItemType = any;
 export class UmbDataTypeRepository implements UmbTreeRepository<TreeItemType>, UmbDetailRepository<ItemType> {
 	#init!: Promise<unknown>;
 
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#treeSource: UmbTreeDataSource;
 	#treeStore?: UmbDataTypeTreeStore;
@@ -28,7 +28,7 @@ export class UmbDataTypeRepository implements UmbTreeRepository<TreeItemType>, U
 
 	#notificationContext?: UmbNotificationContext;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.store.ts
index 14b0a96478..c50fc3644c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.store.ts
@@ -2,7 +2,7 @@ import type { DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api'
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export const UMB_DATA_TYPE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbDataTypeStore>('UmbDataTypeStore');
 
@@ -17,10 +17,10 @@ export class UmbDataTypeStore extends UmbStoreBase {
 
 	/**
 	 * Creates an instance of UmbDataTypeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbDataTypeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_DATA_TYPE_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.tree.store.ts
index 455bf769f5..560c70160d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.tree.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.tree.store.ts
@@ -1,5 +1,5 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
 
 /**
@@ -12,10 +12,10 @@ import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
 export class UmbDataTypeTreeStore extends UmbEntityTreeStore {
 	/**
 	 * Creates an instance of UmbDataTypeTreeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbDataTypeTreeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_DATA_TYPE_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/sources/data-type.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/sources/data-type.server.data.ts
index 86585ea6f1..126a1bd5ec 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/sources/data-type.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/sources/data-type.server.data.ts
@@ -6,7 +6,7 @@ import {
 	DataTypeResponseModel,
 	DataTypeModelBaseModel,
 } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -16,14 +16,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {RepositoryDetailDataSource}
  */
 export class UmbDataTypeServerDataSource implements UmbDataSource<DataTypeResponseModel> {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of UmbDataTypeServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbDataTypeServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/sources/data-type.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/sources/data-type.tree.server.data.ts
index 933a057a7b..8613494a9d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/sources/data-type.tree.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/sources/data-type.tree.server.data.ts
@@ -1,6 +1,6 @@
 import type { UmbTreeDataSource } from '@umbraco-cms/backoffice/repository';
 import { ProblemDetailsModel, DataTypeResource } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -10,7 +10,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {DocumentTreeDataSource}
  */
 export class DataTypeTreeServerDataSource implements UmbTreeDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	// TODO: how do we handle trashed items?
 	async trashItems(keys: Array<string>) {
@@ -47,10 +47,10 @@ export class DataTypeTreeServerDataSource implements UmbTreeDataSource {
 
 	/**
 	 * Creates an instance of DocumentTreeServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof DocumentTreeServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.context.ts
index 2db15a8016..e8eb661629 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.context.ts
@@ -3,7 +3,7 @@ import { UmbEntityWorkspaceContextInterface } from '../../../shared/components/w
 import { UmbDataTypeRepository } from '../repository/data-type.repository';
 import type { DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { appendToFrozenArray, ObjectState } from '@umbraco-cms/backoffice/observable-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbDataTypeWorkspaceContext
 	extends UmbWorkspaceContext<UmbDataTypeRepository>
@@ -14,7 +14,7 @@ export class UmbDataTypeWorkspaceContext
 	name = this.#data.getObservablePart((data) => data?.name);
 	key = this.#data.getObservablePart((data) => data?.key);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbDataTypeRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language.context.ts
index 93fe69b4cd..6f85f5c271 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language.context.ts
@@ -1,11 +1,11 @@
 import { UmbLanguageRepository } from '../repository/language.repository';
 import { ObjectState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 export class UmbAppLanguageContext {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 	#languageRepository: UmbLanguageRepository;
 
 	#languages: Array<LanguageResponseModel> = [];
@@ -13,7 +13,7 @@ export class UmbAppLanguageContext {
 	#appLanguage = new ObjectState<LanguageResponseModel | undefined>(undefined);
 	appLanguage = this.#appLanguage.asObservable();
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 		this.#languageRepository = new UmbLanguageRepository(this.#host);
 		this.#observeLanguages();
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.repository.ts
index b25b113edd..768c114d96 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.repository.ts
@@ -1,6 +1,6 @@
 import { UmbLanguageServerDataSource } from './sources/language.server.data';
 import { UmbLanguageStore, UMB_LANGUAGE_STORE_CONTEXT_TOKEN } from './language.store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 import { LanguageResponseModel, ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
@@ -8,14 +8,14 @@ import { LanguageResponseModel, ProblemDetailsModel } from '@umbraco-cms/backoff
 export class UmbLanguageRepository {
 	#init!: Promise<unknown>;
 
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#dataSource: UmbLanguageServerDataSource;
 	#languageStore?: UmbLanguageStore;
 
 	#notificationContext?: UmbNotificationContext;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 
 		this.#dataSource = new UmbLanguageServerDataSource(this.#host);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.store.ts
index d4dc740843..820b66fc50 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.store.ts
@@ -1,6 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
@@ -16,7 +16,7 @@ export class UmbLanguageStore extends UmbStoreBase {
 	#data = new ArrayState<LanguageResponseModel>([], (x) => x.isoCode);
 	data = this.#data.asObservable();
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_LANGUAGE_STORE_CONTEXT_TOKEN.toString());
 	}
 
@@ -33,4 +33,3 @@ export class UmbLanguageStore extends UmbStoreBase {
 		return this.#data.getObservablePart((items) => items.filter((item) => isoCodes.includes(item.isoCode ?? '')));
 	}
 }
-
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/sources/language.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/sources/language.server.data.ts
index 35b7dc8bfb..a7b8096dc5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/sources/language.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/sources/language.server.data.ts
@@ -1,5 +1,5 @@
 import { ProblemDetailsModel, LanguageResource, LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -9,14 +9,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {RepositoryDetailDataSource}
  */
 export class UmbLanguageServerDataSource implements UmbLanguageServerDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of UmbLanguageServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbLanguageServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts
index 0619b4a4d8..02b121607e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts
@@ -2,7 +2,7 @@ import { UmbLanguageRepository } from '../../repository/language.repository';
 import { UmbWorkspaceContext } from '../../../../shared/components/workspace/workspace-context/workspace-context';
 import type { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbLanguageWorkspaceContext extends UmbWorkspaceContext<UmbLanguageRepository> {
 	#data = new ObjectState<LanguageResponseModel | undefined>(undefined);
@@ -12,7 +12,7 @@ export class UmbLanguageWorkspaceContext extends UmbWorkspaceContext<UmbLanguage
 	#validationErrors = new ObjectState<any | undefined>(undefined);
 	validationErrors = this.#validationErrors.asObservable();
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbLanguageRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/log-viewer.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/log-viewer.repository.ts
index f7e3f1ab57..15ad25e1b0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/log-viewer.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/log-viewer.repository.ts
@@ -1,6 +1,6 @@
 import { UmbLogMessagesServerDataSource, UmbLogSearchesServerDataSource } from './sources/log-viewer.server.data';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 import { DirectionModel, LogLevelModel } from '@umbraco-cms/backoffice/backend-api';
 
@@ -9,14 +9,14 @@ import { DirectionModel, LogLevelModel } from '@umbraco-cms/backoffice/backend-a
 // element -> context -> repository -> (store) -> data source
 // All methods should be async and return a promise. Some methods might return an observable as part of the promise response.
 export class UmbLogViewerRepository {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 	#searchDataSource: UmbLogSearchesServerDataSource;
 	#messagesDataSource: UmbLogMessagesServerDataSource;
 	#notificationService?: UmbNotificationContext;
 	#initResolver?: () => void;
 	#initialized = false;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 		this.#searchDataSource = new UmbLogSearchesServerDataSource(this.#host);
 		this.#messagesDataSource = new UmbLogMessagesServerDataSource(this.#host);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/sources/log-viewer.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/sources/log-viewer.server.data.ts
index 459585e07b..660ab50056 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/sources/log-viewer.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/sources/log-viewer.server.data.ts
@@ -1,6 +1,11 @@
 import { LogMessagesDataSource, LogSearchDataSource } from '.';
-import { DirectionModel, LogLevelModel, LogViewerResource, SavedLogSearchResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import {
+	DirectionModel,
+	LogLevelModel,
+	LogViewerResource,
+	SavedLogSearchResponseModel,
+} from '@umbraco-cms/backoffice/backend-api';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -10,14 +15,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {TemplateDetailDataSource}
  */
 export class UmbLogSearchesServerDataSource implements LogSearchDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of UmbLogSearchesServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbLogSearchesServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
@@ -63,151 +68,151 @@ export class UmbLogSearchesServerDataSource implements LogSearchDataSource {
 		return await tryExecuteAndNotify(this.#host, LogViewerResource.deleteLogViewerSavedSearchByName({ name }));
 	}
 }
+/**
+ * A data source for the log messages and levels
+ *
+ * @export
+ * @class UmbLogMessagesServerDataSource
+ * @implements {LogMessagesDataSource}
+ */
+export class UmbLogMessagesServerDataSource implements LogMessagesDataSource {
+	#host: UmbControllerHostElement;
+
 	/**
-	 * A data source for the log messages and levels
-	 *
-	 * @export
-	 * @class UmbLogMessagesServerDataSource
-	 * @implements {LogMessagesDataSource}
+	 * Creates an instance of UmbLogMessagesServerDataSource.
+	 * @param {UmbControllerHostElement} host
+	 * @memberof UmbLogMessagesServerDataSource
 	 */
-	export class UmbLogMessagesServerDataSource implements LogMessagesDataSource {
-		#host: UmbControllerHostInterface;
-
-		/**
-		 * Creates an instance of UmbLogMessagesServerDataSource.
-		 * @param {UmbControllerHostInterface} host
-		 * @memberof UmbLogMessagesServerDataSource
-		 */
-		constructor(host: UmbControllerHostInterface) {
-			this.#host = host;
-		}
-
-		/**
-		 * Grabs all the loggers from the server
-		 *
-		 * @param {{ skip?: number; take?: number }} { skip = 0, take = 100 }
-		 * @return {*}
-		 * @memberof UmbLogMessagesServerDataSource
-		 */
-		async getLogViewerLevel({ skip = 0, take = 100 }: { skip?: number; take?: number }) {
-			return await tryExecuteAndNotify(this.#host, LogViewerResource.getLogViewerLevel({ skip, take }));
-		}
-
-		/**
-		 * Grabs all the number of different log messages from the server
-		 *
-		 * @param {{ skip?: number; take?: number }} { skip = 0, take = 100 }
-		 * @return {*}
-		 * @memberof UmbLogMessagesServerDataSource
-		 */
-		async getLogViewerLevelCount({ startDate, endDate }: { startDate?: string; endDate?: string }) {
-			return await tryExecuteAndNotify(
-				this.#host,
-				LogViewerResource.getLogViewerLevelCount({
-					startDate,
-					endDate,
-				})
-			);
-		}
-		/**
-		 *	Grabs all the log messages from the server
-		 *
-		 * @param {{
-		 * 		skip?: number;
-		 * 		take?: number;
-		 * 		orderDirection?: DirectionModel;
-		 * 		filterExpression?: string;
-		 * 		logLevel?: Array<LogLevelModel>;
-		 * 		startDate?: string;
-		 * 		endDate?: string;
-		 * 	}} {
-		 * 		skip = 0,
-		 * 		take = 100,
-		 * 		orderDirection,
-		 * 		filterExpression,
-		 * 		logLevel,
-		 * 		startDate,
-		 * 		endDate,
-		 * 	}
-		 * @return {*}
-		 * @memberof UmbLogMessagesServerDataSource
-		 */
-		async getLogViewerLogs({
-			skip = 0,
-			take = 100,
-			orderDirection,
-			filterExpression,
-			logLevel,
-			startDate,
-			endDate,
-		}: {
-			skip?: number;
-			take?: number;
-			orderDirection?: DirectionModel;
-			filterExpression?: string;
-			logLevel?: Array<LogLevelModel>;
-			startDate?: string;
-			endDate?: string;
-		}) {
-			return await tryExecuteAndNotify(
-				this.#host,
-				LogViewerResource.getLogViewerLog({
-					skip,
-					take,
-					orderDirection,
-					filterExpression,
-					logLevel,
-					startDate,
-					endDate,
-				})
-			);
-		}
-		/**
-		 * Grabs all the log message templates from the server
-		 *
-		 * @param {{
-		 * 		skip?: number;
-		 * 		take?: number;
-		 * 		startDate?: string;
-		 * 		endDate?: string;
-		 * 	}} {
-		 * 		skip,
-		 * 		take = 100,
-		 * 		startDate,
-		 * 		endDate,
-		 * 	}
-		 * @return {*}
-		 * @memberof UmbLogMessagesServerDataSource
-		 */
-		async getLogViewerMessageTemplate({
-			skip,
-			take = 100,
-			startDate,
-			endDate,
-		}: {
-			skip?: number;
-			take?: number;
-			startDate?: string;
-			endDate?: string;
-		}) {
-			return await tryExecuteAndNotify(
-				this.#host,
-				LogViewerResource.getLogViewerMessageTemplate({
-					skip,
-					take,
-					startDate,
-					endDate,
-				})
-			);
-		}
-
-		async getLogViewerValidateLogsSize({ startDate, endDate }: { startDate?: string; endDate?: string }) {
-			return await tryExecuteAndNotify(
-				this.#host,
-				LogViewerResource.getLogViewerValidateLogsSize({
-					startDate,
-					endDate,
-				})
-			);
-		}
+	constructor(host: UmbControllerHostElement) {
+		this.#host = host;
 	}
+
+	/**
+	 * Grabs all the loggers from the server
+	 *
+	 * @param {{ skip?: number; take?: number }} { skip = 0, take = 100 }
+	 * @return {*}
+	 * @memberof UmbLogMessagesServerDataSource
+	 */
+	async getLogViewerLevel({ skip = 0, take = 100 }: { skip?: number; take?: number }) {
+		return await tryExecuteAndNotify(this.#host, LogViewerResource.getLogViewerLevel({ skip, take }));
+	}
+
+	/**
+	 * Grabs all the number of different log messages from the server
+	 *
+	 * @param {{ skip?: number; take?: number }} { skip = 0, take = 100 }
+	 * @return {*}
+	 * @memberof UmbLogMessagesServerDataSource
+	 */
+	async getLogViewerLevelCount({ startDate, endDate }: { startDate?: string; endDate?: string }) {
+		return await tryExecuteAndNotify(
+			this.#host,
+			LogViewerResource.getLogViewerLevelCount({
+				startDate,
+				endDate,
+			})
+		);
+	}
+	/**
+	 *	Grabs all the log messages from the server
+	 *
+	 * @param {{
+	 * 		skip?: number;
+	 * 		take?: number;
+	 * 		orderDirection?: DirectionModel;
+	 * 		filterExpression?: string;
+	 * 		logLevel?: Array<LogLevelModel>;
+	 * 		startDate?: string;
+	 * 		endDate?: string;
+	 * 	}} {
+	 * 		skip = 0,
+	 * 		take = 100,
+	 * 		orderDirection,
+	 * 		filterExpression,
+	 * 		logLevel,
+	 * 		startDate,
+	 * 		endDate,
+	 * 	}
+	 * @return {*}
+	 * @memberof UmbLogMessagesServerDataSource
+	 */
+	async getLogViewerLogs({
+		skip = 0,
+		take = 100,
+		orderDirection,
+		filterExpression,
+		logLevel,
+		startDate,
+		endDate,
+	}: {
+		skip?: number;
+		take?: number;
+		orderDirection?: DirectionModel;
+		filterExpression?: string;
+		logLevel?: Array<LogLevelModel>;
+		startDate?: string;
+		endDate?: string;
+	}) {
+		return await tryExecuteAndNotify(
+			this.#host,
+			LogViewerResource.getLogViewerLog({
+				skip,
+				take,
+				orderDirection,
+				filterExpression,
+				logLevel,
+				startDate,
+				endDate,
+			})
+		);
+	}
+	/**
+	 * Grabs all the log message templates from the server
+	 *
+	 * @param {{
+	 * 		skip?: number;
+	 * 		take?: number;
+	 * 		startDate?: string;
+	 * 		endDate?: string;
+	 * 	}} {
+	 * 		skip,
+	 * 		take = 100,
+	 * 		startDate,
+	 * 		endDate,
+	 * 	}
+	 * @return {*}
+	 * @memberof UmbLogMessagesServerDataSource
+	 */
+	async getLogViewerMessageTemplate({
+		skip,
+		take = 100,
+		startDate,
+		endDate,
+	}: {
+		skip?: number;
+		take?: number;
+		startDate?: string;
+		endDate?: string;
+	}) {
+		return await tryExecuteAndNotify(
+			this.#host,
+			LogViewerResource.getLogViewerMessageTemplate({
+				skip,
+				take,
+				startDate,
+				endDate,
+			})
+		);
+	}
+
+	async getLogViewerValidateLogsSize({ startDate, endDate }: { startDate?: string; endDate?: string }) {
+		return await tryExecuteAndNotify(
+			this.#host,
+			LogViewerResource.getLogViewerValidateLogsSize({
+				startDate,
+				endDate,
+			})
+		);
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts
index 272cccd715..22a4eeaeeb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts
@@ -16,7 +16,7 @@ import {
 	PagedLogTemplateResponseModel,
 	PagedSavedLogSearchResponseModel,
 } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
 export type PoolingInterval = 0 | 2000 | 5000 | 10000 | 20000 | 30000;
@@ -30,7 +30,7 @@ export interface LogViewerDateRange {
 }
 
 export class UmbLogViewerWorkspaceContext {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 	#repository: UmbLogViewerRepository;
 
 	get today() {
@@ -94,7 +94,7 @@ export class UmbLogViewerWorkspaceContext {
 
 	currentPage = 1;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 		this.#repository = new UmbLogViewerRepository(this.#host);
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.repository.ts
index 201aa04df7..f56abe82ee 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.repository.ts
@@ -3,7 +3,7 @@ import { UmbRelationTypeServerDataSource } from './sources/relation-type.server.
 import { UmbRelationTypeStore, UMB_RELATION_TYPE_STORE_CONTEXT_TOKEN } from './relation-type.store';
 import { RelationTypeTreeServerDataSource } from './sources/relation-type.tree.server.data';
 import { RelationTypeTreeDataSource } from './sources';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ProblemDetailsModel, RelationTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbDetailRepository, UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
@@ -19,7 +19,7 @@ type TreeItemType = any;
 export class UmbRelationTypeRepository implements UmbTreeRepository<TreeItemType>, UmbDetailRepository<ItemType> {
 	#init!: Promise<unknown>;
 
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#treeSource: RelationTypeTreeDataSource;
 	#treeStore?: UmbRelationTypeTreeStore;
@@ -29,7 +29,7 @@ export class UmbRelationTypeRepository implements UmbTreeRepository<TreeItemType
 
 	#notificationContext?: UmbNotificationContext;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.store.ts
index 50c33961f4..9703dd3a41 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.store.ts
@@ -2,7 +2,7 @@ import type { RelationTypeResponseModel } from '@umbraco-cms/backoffice/backend-
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export const UMB_RELATION_TYPE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbRelationTypeStore>('UmbRelationTypeStore');
 
@@ -17,10 +17,10 @@ export class UmbRelationTypeStore extends UmbStoreBase {
 
 	/**
 	 * Creates an instance of UmbRelationTypeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbRelationTypeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_RELATION_TYPE_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.tree.store.ts
index b66af29604..a8d057765a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.tree.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.tree.store.ts
@@ -1,5 +1,5 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
 
 /**
@@ -12,10 +12,10 @@ import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
 export class UmbRelationTypeTreeStore extends UmbEntityTreeStore {
 	/**
 	 * Creates an instance of UmbRelationTypeTreeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbRelationTypeTreeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_RELATION_TYPE_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/sources/relation-type.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/sources/relation-type.server.data.ts
index b16a93ebc8..0316506c4c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/sources/relation-type.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/sources/relation-type.server.data.ts
@@ -6,7 +6,7 @@ import {
 	CreateRelationTypeRequestModel,
 	UpdateRelationTypeRequestModel,
 } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -16,14 +16,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {RepositoryDetailDataSource}
  */
 export class UmbRelationTypeServerDataSource implements UmbDataSource<RelationTypeResponseModel> {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of UmbRelationTypeServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbRelationTypeServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/sources/relation-type.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/sources/relation-type.tree.server.data.ts
index beb081494b..75a1243816 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/sources/relation-type.tree.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/sources/relation-type.tree.server.data.ts
@@ -1,6 +1,6 @@
 import { RelationTypeTreeDataSource } from '.';
 import { ProblemDetailsModel, RelationTypeResource } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
@@ -11,7 +11,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {RelationTypeTreeDataSource}
  */
 export class RelationTypeTreeServerDataSource implements RelationTypeTreeDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	// TODO: how do we handle trashed items?
 	async trashItems(keys: Array<string>) {
@@ -48,10 +48,10 @@ export class RelationTypeTreeServerDataSource implements RelationTypeTreeDataSou
 
 	/**
 	 * Creates an instance of RelationTypeTreeServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof RelationTypeTreeServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.context.ts
index 2ec2e3383c..f4bbb86c8f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.context.ts
@@ -4,7 +4,7 @@ import { UmbEntityWorkspaceContextInterface } from '../../../shared/components/w
 import type { RelationTypeBaseModel, RelationTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbRelationTypeWorkspaceContext
 	extends UmbWorkspaceContext<UmbRelationTypeRepository>
@@ -15,7 +15,7 @@ export class UmbRelationTypeWorkspaceContext
 	name = this.#data.getObservablePart((data) => data?.name);
 	key = this.#data.getObservablePart((data) => data?.key);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbRelationTypeRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.context.ts
index 61fef23527..c5f0c4baf5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.context.ts
@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 import type { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextToken, UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ArrayState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { umbExtensionsRegistry, createExtensionClass } from '@umbraco-cms/backoffice/extensions-api';
@@ -8,7 +8,7 @@ import { UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
 
 // TODO: Clean up the need for store as Media has switched to use Repositories(repository).
 export class UmbCollectionContext<DataType extends EntityTreeItemResponseModel = EntityTreeItemResponseModel> {
-	private _host: UmbControllerHostInterface;
+	private _host: UmbControllerHostElement;
 	private _entityType: string | null;
 	private _entityKey: string | null;
 
@@ -30,7 +30,7 @@ export class UmbCollectionContext<DataType extends EntityTreeItemResponseModel =
 	*/
 
 	constructor(
-		host: UmbControllerHostInterface,
+		host: UmbControllerHostElement,
 		entityType: string | null,
 		entityKey: string | null,
 		storeAlias?: string,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-apps.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-apps.element.ts
index 0a0375f6d0..8ca23425fd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-apps.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-apps.element.ts
@@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-backoffice-header-apps')
-export class UmbBackofficeHeaderApps extends LitElement {
+export class UmbBackofficeHeaderAppsElement extends LitElement {
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
@@ -22,6 +22,6 @@ export class UmbBackofficeHeaderApps extends LitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-backoffice-header-apps': UmbBackofficeHeaderApps;
+		'umb-backoffice-header-apps': UmbBackofficeHeaderAppsElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-sections.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-sections.element.ts
index b219de183c..d4cce136c1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-sections.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-sections.element.ts
@@ -8,7 +8,7 @@ import type { ManifestSection } from '@umbraco-cms/backoffice/extensions-registr
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-backoffice-header-sections')
-export class UmbBackofficeHeaderSections extends UmbLitElement {
+export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
@@ -145,6 +145,6 @@ export class UmbBackofficeHeaderSections extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-backoffice-header-sections': UmbBackofficeHeaderSections;
+		'umb-backoffice-header-sections': UmbBackofficeHeaderSectionsElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header.element.ts
index eeb2541ecd..37437f0fd9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header.element.ts
@@ -1,5 +1,5 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import {css, CSSResultGroup, html, LitElement, unsafeCSS} from 'lit';
+import { css, CSSResultGroup, html, LitElement, unsafeCSS } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import logoImg from '/umbraco_logomark_white.svg';
 
@@ -7,7 +7,7 @@ import './backoffice-header-sections.element';
 import './backoffice-header-apps.element';
 
 @customElement('umb-backoffice-header')
-export class UmbBackofficeHeader extends LitElement {
+export class UmbBackofficeHeaderElement extends LitElement {
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
@@ -57,6 +57,6 @@ export class UmbBackofficeHeader extends LitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-backoffice-header': UmbBackofficeHeader;
+		'umb-backoffice-header': UmbBackofficeHeaderElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
index 405d17304d..2654b4ed12 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
@@ -11,7 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { createExtensionElementOrFallback } from '@umbraco-cms/backoffice/extensions-api';
 
 @defineElement('umb-backoffice-main')
-export class UmbBackofficeMain extends UmbLitElement {
+export class UmbBackofficeMainElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -101,6 +101,6 @@ export class UmbBackofficeMain extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-backoffice-main': UmbBackofficeMain;
+		'umb-backoffice-main': UmbBackofficeMainElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts
index f6c4590009..41d378c181 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts
@@ -6,7 +6,7 @@ import { UmbModalHandler, UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbr
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-backoffice-modal-container')
-export class UmbBackofficeModalContainer extends UmbLitElement {
+export class UmbBackofficeModalContainerElement extends UmbLitElement {
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
@@ -49,6 +49,6 @@ export class UmbBackofficeModalContainer extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-backoffice-modal-container': UmbBackofficeModalContainer;
+		'umb-backoffice-modal-container': UmbBackofficeModalContainerElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-notification-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-notification-container.element.ts
index 7b4e5ac181..c4e8891ea5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-notification-container.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-notification-container.element.ts
@@ -10,7 +10,7 @@ import {
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-backoffice-notification-container')
-export class UmbBackofficeNotificationContainer extends UmbLitElement {
+export class UmbBackofficeNotificationContainerElement extends UmbLitElement {
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
@@ -65,6 +65,6 @@ export class UmbBackofficeNotificationContainer extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-backoffice-notification-container': UmbBackofficeNotificationContainer;
+		'umb-backoffice-notification-container': UmbBackofficeNotificationContainerElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.element.ts
index aeb3de4c75..b8a2cdc685 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.element.ts
@@ -15,7 +15,7 @@ import { customElement, property, state } from 'lit/decorators.js';
  * @extends {UmbLitElement}
  */
 @customElement('umb-body-layout')
-export class UmbBodyLayout extends LitElement {
+export class UmbBodyLayoutElement extends LitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -136,6 +136,6 @@ export class UmbBodyLayout extends LitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-body-layout': UmbBodyLayout;
+		'umb-body-layout': UmbBodyLayoutElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.stories.ts
index 01c959db84..c64a31e715 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.stories.ts
@@ -2,15 +2,15 @@ import { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import './body-layout.element';
-import type { UmbBodyLayout } from './body-layout.element';
+import type { UmbBodyLayoutElement } from './body-layout.element';
 
-const meta: Meta<UmbBodyLayout> = {
+const meta: Meta<UmbBodyLayoutElement> = {
 	title: 'Components/Workspace Layout',
 	component: 'umb-body-layout',
 };
 
 export default meta;
-type Story = StoryObj<UmbBodyLayout>;
+type Story = StoryObj<UmbBodyLayoutElement>;
 
 export const Overview: Story = {
 	render: () => html` <umb-body-layout>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.element.ts
index 074fa1a193..99833cbcce 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.element.ts
@@ -8,7 +8,7 @@ import { customElement } from 'lit/decorators.js';
  *
  */
 @customElement('uui-code-block')
-export class UUICodeBlock extends LitElement {
+export class UUICodeBlockElement extends LitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -54,6 +54,6 @@ export class UUICodeBlock extends LitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'uui-code-block': UUICodeBlock;
+		'uui-code-block': UUICodeBlockElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.stories.ts
index 4955d7cc10..f3f2d6ca24 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.stories.ts
@@ -1,15 +1,15 @@
 import { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import './code-block.element';
-import type { UUICodeBlock } from './code-block.element';
+import type { UUICodeBlockElement } from './code-block.element';
 
-const meta: Meta<UUICodeBlock> = {
+const meta: Meta<UUICodeBlockElement> = {
 	title: 'Components/Code Block',
 	component: 'uui-code-block',
 };
 
 export default meta;
-type Story = StoryObj<UUICodeBlock>;
+type Story = StoryObj<UUICodeBlockElement>;
 
 export const Overview: Story = {
 	args: {},
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.stories.ts
index bfa042e01b..7a5acdfa3f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.stories.ts
@@ -113,7 +113,7 @@ const codeSnippets: Record<CodeEditorLanguage, string> = {
 	import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context';
 	import { createObservablePart, DeepState } from '@umbraco-cms/observable-api';
 	import { TemplateModel } from '@umbraco-cms/backend-api';
-	import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+	import { UmbControllerHostElement } from '@umbraco-cms/controller';
 	
 	export class UmbTemplateWorkspaceContext extends UmbWorkspaceContext<UmbTemplateRepository> {
 		#data = new DeepState<TemplateModel | undefined>(undefined);
@@ -121,7 +121,7 @@ const codeSnippets: Record<CodeEditorLanguage, string> = {
 		name = createObservablePart(this.#data, (data) => data?.name);
 		content = createObservablePart(this.#data, (data) => data?.content);
 	
-		constructor(host: UmbControllerHostInterface) {
+		constructor(host: UmbControllerHostElement) {
 			super(host, new UmbTemplateRepository(host));
 		}
 	
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
index 64d73d8412..ecf3493b52 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
@@ -7,7 +7,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbModalContext, UMB_CONTEXT_DEBUGGER_MODAL, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
 
 @customElement('umb-debug')
-export class UmbDebug extends UmbLitElement {
+export class UmbDebugElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -226,6 +226,6 @@ export class UmbDebug extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-debug': UmbDebug;
+		'umb-debug': UmbDebugElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.element.ts
index 565142fdeb..fc7cadf0f8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.element.ts
@@ -12,7 +12,7 @@ import { customElement, state } from 'lit/decorators.js';
  * @extends {UmbLitElement}
  */
 @customElement('umb-footer-layout')
-export class UmbFooterLayout extends LitElement {
+export class UmbFooterLayoutElement extends LitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -46,6 +46,6 @@ export class UmbFooterLayout extends LitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-footer-layout': UmbFooterLayout;
+		'umb-footer-layout': UmbFooterLayoutElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.stories.ts
index bf10d72e8b..c09a6d7fca 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.stories.ts
@@ -3,7 +3,7 @@ import './footer-layout.element';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
-import type { UmbFooterLayout } from './footer-layout.element';
+import type { UmbFooterLayoutElement } from './footer-layout.element';
 
 export default {
 	title: 'Workspaces/Shared/Footer Layout',
@@ -11,7 +11,7 @@ export default {
 	id: 'umb-footer-layout',
 } as Meta;
 
-export const AAAOverview: Story<UmbFooterLayout> = () => html` <umb-body-layout>
+export const AAAOverview: Story<UmbFooterLayoutElement> = () => html` <umb-body-layout>
 	<div slot="footer">
 		<uui-button color="" look="placeholder">Footer slot</uui-button
 		><uui-button color="" look="placeholder">Actions slot</uui-button>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app-button.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app-button.element.ts
index 36dc14343d..536bbb0424 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app-button.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app-button.element.ts
@@ -19,7 +19,7 @@ const manifest: ManifestKind = {
 umbExtensionsRegistry.register(manifest);
 
 @customElement('umb-header-app-button')
-export class UmbHeaderAppButton extends LitElement {
+export class UmbHeaderAppButtonElement extends LitElement {
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
@@ -45,10 +45,10 @@ export class UmbHeaderAppButton extends LitElement {
 	}
 }
 
-export default UmbHeaderAppButton;
+export default UmbHeaderAppButtonElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-header-app-button': UmbHeaderAppButton;
+		'umb-header-app-button': UmbHeaderAppButtonElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app.stories.ts
index 105cdddf02..d9a4cab61c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app.stories.ts
@@ -1,14 +1,14 @@
 import { Meta, StoryObj } from '@storybook/web-components';
 import './header-app-button.element';
-import type { UmbHeaderAppButton } from './header-app-button.element';
+import type { UmbHeaderAppButtonElement } from './header-app-button.element';
 
-const meta: Meta<UmbHeaderAppButton> = {
+const meta: Meta<UmbHeaderAppButtonElement> = {
 	title: 'Components/Header App Button',
 	component: 'umb-header-app-button',
 };
 
 export default meta;
-type Story = StoryObj<UmbHeaderAppButton>;
+type Story = StoryObj<UmbHeaderAppButtonElement>;
 
 export const Overview: Story = {
 	args: {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts
index b30071bad0..413a9f9e49 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts
@@ -7,11 +7,10 @@ import {
 	UmbDocumentTypeTreeStore,
 	UMB_DOCUMENT_TYPE_TREE_STORE_CONTEXT_TOKEN,
 } from '../../../documents/document-types/repository/document-type.tree.store';
-import { UMB_CONFIRM_MODAL_TOKEN } from '../../modals/confirm';
 import { UMB_DOCUMENT_TYPE_PICKER_MODAL_TOKEN } from '../../../documents/documents/modals/document-type-picker';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { DocumentTypeResponseModel, EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
+import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
 @customElement('umb-input-document-type-picker')
@@ -100,7 +99,7 @@ export class UmbInputDocumentTypePickerElement extends FormControlMixin(UmbLitEl
 	}
 
 	private async _removeItem(item: DocumentTypeResponseModel) {
-		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL_TOKEN, {
+		const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, {
 			color: 'danger',
 			headline: `Remove ${item.name}?`,
 			content: 'Are you sure you want to remove this item',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-list-base/input-list-base.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-list-base/input-list-base.ts
index f6a2e05cb1..37e134229b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-list-base/input-list-base.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-list-base/input-list-base.ts
@@ -11,7 +11,7 @@ import {
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 /** TODO: Make use of UUI FORM Mixin, to make it easily take part of a form. */
-export class UmbInputListBase extends UmbLitElement {
+export class UmbInputListBaseElement extends UmbLitElement {
 	@property({ type: Array })
 	public value: Array<string> = [];
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts
index 3f560bd6f7..0a81f98e77 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts
@@ -1,13 +1,13 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbInputListBase } from '../input-list-base/input-list-base';
+import { UmbInputListBaseElement } from '../input-list-base/input-list-base';
 import { UMB_SECTION_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import type { ManifestSection } from '@umbraco-cms/backoffice/extensions-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 
 @customElement('umb-input-section')
-export class UmbInputPickerSectionElement extends UmbInputListBase {
+export class UmbInputPickerSectionElement extends UmbInputListBaseElement {
 	static styles = [
 		UUITextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
index 7315cd5a81..ad3a644846 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbInputListBase } from '../input-list-base/input-list-base';
+import { UmbInputListBaseElement } from '../input-list-base/input-list-base';
 import {
 	UmbUserGroupStore,
 	UMB_USER_GROUP_STORE_CONTEXT_TOKEN,
@@ -11,7 +11,7 @@ import { UMB_USER_GROUP_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import type { UserGroupEntity } from '@umbraco-cms/backoffice/models';
 
 @customElement('umb-input-user-group')
-export class UmbInputPickerUserGroupElement extends UmbInputListBase {
+export class UmbInputPickerUserGroupElement extends UmbInputListBaseElement {
 	static styles = [
 		UUITextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
index bd72e5713b..636696bfed 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
@@ -1,13 +1,13 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing, PropertyValueMap } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbInputListBase } from '../input-list-base/input-list-base';
+import { UmbInputListBaseElement } from '../input-list-base/input-list-base';
 import { UmbUserStore, UMB_USER_STORE_CONTEXT_TOKEN } from '../../../users/users/repository/user.store';
 import { UMB_USER_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import type { UserEntity } from '@umbraco-cms/backoffice/models';
 
 @customElement('umb-input-user')
-export class UmbPickerUserElement extends UmbInputListBase {
+export class UmbPickerUserElement extends UmbInputListBaseElement {
 	static styles = [
 		UUITextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu-item/menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu-item/menu-item.element.ts
index 73203fe3f8..caf7c4d39b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu-item/menu-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu-item/menu-item.element.ts
@@ -7,7 +7,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { ManifestMenuItem } from '@umbraco-cms/backoffice/extensions-registry';
 
 @customElement('umb-menu-item')
-export class UmbMenuItem extends UmbLitElement {
+export class UmbMenuItemElement extends UmbLitElement {
 	static styles = [UUITextStyles, css``];
 
 	@property({ type: Object, attribute: false })
@@ -50,6 +50,6 @@ export class UmbMenuItem extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-menu-item': UmbMenuItem;
+		'umb-menu-item': UmbMenuItemElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
index bae231e7cc..0da6e7825a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
@@ -9,7 +9,7 @@ import {
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-section-sidebar-context-menu')
-export class UmbSectionSidebarContextMenu extends UmbLitElement {
+export class UmbSectionSidebarContextMenuElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -120,6 +120,6 @@ export class UmbSectionSidebarContextMenu extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-section-sidebar-context-menu': UmbSectionSidebarContextMenu;
+		'umb-section-sidebar-context-menu': UmbSectionSidebarContextMenuElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.context.ts
index ef32bc34fb..ccede9a33e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.context.ts
@@ -1,9 +1,9 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { StringState, BooleanState } from '@umbraco-cms/backoffice/observable-api';
 
 export class UmbSectionSidebarContext {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 	#contextMenuIsOpen = new BooleanState(false);
 	contextMenuIsOpen = this.#contextMenuIsOpen.asObservable();
 
@@ -16,7 +16,7 @@ export class UmbSectionSidebarContext {
 	#headline = new StringState<undefined>(undefined);
 	headline = this.#headline.asObservable();
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page.service.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page.service.ts
index 2be951ebe5..d82eb782bf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page.service.ts
@@ -7,7 +7,7 @@ import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
 // TODO: Refactor this, its not a service and the data should be handled by a context api.
 @customElement('umb-tree-context-menu-page-service')
-export class UmbTreeContextMenuPageService extends UmbLitElement {
+export class UmbTreeContextMenuPageServiceElement extends UmbLitElement {
 	static styles = [UUITextStyles, css``];
 
 	@property({ type: Object })
@@ -64,12 +64,11 @@ export class UmbTreeContextMenuPageService extends UmbLitElement {
 	}
 }
 
-export const UMB_TREE_CONTEXT_MENU_PAGE_SERVICE_CONTEXT_TOKEN = new UmbContextToken<UmbTreeContextMenuPageService>(
-	'UmbTreeContextMenuService'
-);
+export const UMB_TREE_CONTEXT_MENU_PAGE_SERVICE_CONTEXT_TOKEN =
+	new UmbContextToken<UmbTreeContextMenuPageServiceElement>('UmbTreeContextMenuService');
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-tree-context-menu-page-service': UmbTreeContextMenuPageService;
+		'umb-tree-context-menu-page-service': UmbTreeContextMenuPageServiceElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu.service.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu.service.ts
index 2be00be4f1..557c848b9e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu.service.ts
@@ -5,7 +5,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
 @customElement('umb-tree-context-menu-service')
-export class UmbTreeContextMenuService extends UmbLitElement {
+export class UmbTreeContextMenuServiceElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -92,12 +92,12 @@ export class UmbTreeContextMenuService extends UmbLitElement {
 	}
 }
 
-export const UMB_TREE_CONTEXT_MENU_SERVICE_CONTEXT_TOKEN = new UmbContextToken<UmbTreeContextMenuService>(
+export const UMB_TREE_CONTEXT_MENU_SERVICE_CONTEXT_TOKEN = new UmbContextToken<UmbTreeContextMenuServiceElement>(
 	'UmbTreeContextMenuService'
 );
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-tree-context-menu-service': UmbTreeContextMenuService;
+		'umb-tree-context-menu-service': UmbTreeContextMenuServiceElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/entity-tree-item/entity-tree-item.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/entity-tree-item/entity-tree-item.context.ts
index 2b014d81c1..6472a47207 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/entity-tree-item/entity-tree-item.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/entity-tree-item/entity-tree-item.context.ts
@@ -1,10 +1,10 @@
 import { UmbTreeItemContextBase } from '../tree-item-base/tree-item-base.context';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 // TODO get unique method from an entity repository static method
 export class UmbEntityTreeItemContext extends UmbTreeItemContextBase<EntityTreeItemResponseModel> {
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, (x: EntityTreeItemResponseModel) => x.key);
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts
index 8afb5da7cb..0465630182 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts
@@ -1,5 +1,4 @@
 import { map } from 'rxjs';
-import { ManifestEntityAction } from '@umbraco-cms/backoffice/extensions-registry/entity-action.models';
 import {
 	UmbSectionSidebarContext,
 	UMB_SECTION_SIDEBAR_CONTEXT_TOKEN,
@@ -7,8 +6,9 @@ import {
 import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../../section/section.context';
 import { UmbTreeContextBase } from '../tree.context';
 import { UmbTreeItemContext } from '../tree-item.context.interface';
+import { ManifestEntityAction } from '@umbraco-cms/backoffice/extensions-registry';
 import { BooleanState, DeepState, StringState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import {
 	UmbContextConsumerController,
 	UmbContextProviderController,
@@ -23,7 +23,7 @@ export type UmbTreeItemUniqueFunction<T extends TreeItemPresentationModel> = (x:
 export class UmbTreeItemContextBase<T extends TreeItemPresentationModel = TreeItemPresentationModel>
 	implements UmbTreeItemContext<T>
 {
-	public host: UmbControllerHostInterface;
+	public host: UmbControllerHostElement;
 	public unique?: string;
 	public type?: string;
 
@@ -57,7 +57,7 @@ export class UmbTreeItemContextBase<T extends TreeItemPresentationModel = TreeIt
 	#getUniqueFunction: UmbTreeItemUniqueFunction<T>;
 	#actionObserver?: UmbObserverController<ManifestEntityAction[]>;
 
-	constructor(host: UmbControllerHostInterface, getUniqueFunction: UmbTreeItemUniqueFunction<T>) {
+	constructor(host: UmbControllerHostElement, getUniqueFunction: UmbTreeItemUniqueFunction<T>) {
 		this.host = host;
 		this.#getUniqueFunction = getUniqueFunction;
 		this.#consumeContexts();
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.context.interface.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.context.interface.ts
index 7f78041319..31d877f22e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.context.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.context.interface.ts
@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller/controller-host.mixin';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ProblemDetailsModel, TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 
 // TODO: temp type. Add paged response type to the repository interface
@@ -9,7 +9,7 @@ interface PagedResponse<T> {
 }
 
 export interface UmbTreeItemContext<T extends TreeItemPresentationModel = TreeItemPresentationModel> {
-	host: UmbControllerHostInterface;
+	host: UmbControllerHostElement;
 	unique?: string;
 	type?: string;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts
index da60d3d1f0..8e7efdbcd5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts
@@ -1,8 +1,8 @@
 import { css, html, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
-import { TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api/src';
-import { ManifestTreeItem } from '@umbraco-cms/backoffice/extensions-registry/tree-item.models';
+import { TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import { ManifestTreeItem } from '@umbraco-cms/backoffice/extensions-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-tree-item')
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.context.ts
index 954cdb58ab..8f22454e4e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.context.ts
@@ -2,7 +2,7 @@ import type { Observable } from 'rxjs';
 import { UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
 import type { ManifestTree } from '@umbraco-cms/backoffice/extensions-registry';
 import { DeepState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { createExtensionClass, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 
@@ -16,7 +16,7 @@ export interface UmbTreeContext {
 }
 
 export class UmbTreeContextBase implements UmbTreeContext {
-	host: UmbControllerHostInterface;
+	host: UmbControllerHostElement;
 	public tree: ManifestTree;
 
 	#selectable = new DeepState(false);
@@ -34,7 +34,7 @@ export class UmbTreeContextBase implements UmbTreeContext {
 		this.#initialized ? resolve() : (this.#initResolver = resolve);
 	});
 
-	constructor(host: UmbControllerHostInterface, tree: ManifestTree) {
+	constructor(host: UmbControllerHostElement, tree: ManifestTree) {
 		this.host = host;
 		this.tree = tree;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
index 655d0f11d3..8ea9571f0e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
@@ -2,7 +2,7 @@ import { UmbVariantId } from '../../variants/variant-id.class';
 import { UmbWorkspaceVariableEntityContextInterface } from '../workspace/workspace-context/workspace-variable-entity-context.interface';
 import { UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN } from '../workspace/workspace-variant/workspace-variant.context';
 import type { DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ClassState, ObjectState, StringState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import {
 	UmbContextConsumerController,
@@ -20,7 +20,7 @@ export type WorkspacePropertyData<ValueType> = {
 };
 
 export class UmbWorkspacePropertyContext<ValueType = any> {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	private _providerController: UmbContextProviderController;
 
@@ -43,7 +43,7 @@ export class UmbWorkspacePropertyContext<ValueType = any> {
 	private _workspaceContext?: UmbWorkspaceVariableEntityContextInterface;
 	private _workspaceVariantConsumer?: UmbContextConsumerController<typeof UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN.TYPE>;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 		// TODO: Figure out how to get the magic string in a better way.
 		new UmbContextConsumerController<UmbWorkspaceVariableEntityContextInterface>(
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/entity-manager-controller.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/entity-manager-controller.ts
index b7137b1e1c..c1ee25b071 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/entity-manager-controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/entity-manager-controller.ts
@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 import { UmbContextConsumerController, UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import {
 	UmbNotificationDefaultData,
 	UmbNotificationContext,
@@ -31,7 +31,7 @@ export class UmbEntityWorkspaceManager<
 
 	private _createAtParentKey?: string | null;
 
-	constructor(host: UmbControllerHostInterface, entityType: string, storeToken: UmbContextToken<StoreType>) {
+	constructor(host: UmbControllerHostElement, entityType: string, storeToken: UmbContextToken<StoreType>) {
 		this._host = host;
 		this._entityType = entityType;
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-context.ts
index dd2a7e0618..abf5f6e856 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-context.ts
@@ -1,5 +1,5 @@
 import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { DeepState } from '@umbraco-cms/backoffice/observable-api';
 
 /*
@@ -8,13 +8,13 @@ TODO: We need to figure out if we like to keep using same alias for all workspac
 If so we need to align on a interface that all of these implements. otherwise consumers cant trust the workspace-context.
 */
 export abstract class UmbWorkspaceContext<T> {
-	public host: UmbControllerHostInterface;
+	public host: UmbControllerHostElement;
 	public repository: T;
 
 	#isNew = new DeepState<boolean>(false);
 	isNew = this.#isNew.asObservable();
 
-	constructor(host: UmbControllerHostInterface, repository: T) {
+	constructor(host: UmbControllerHostElement, repository: T) {
 		this.host = host;
 		this.repository = repository;
 		new UmbContextProviderController(host, 'umbWorkspaceContext', this);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-property-structure-manager.class.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-property-structure-manager.class.ts
index bf46f4dc6b..5e759b967d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-property-structure-manager.class.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-property-structure-manager.class.ts
@@ -4,7 +4,7 @@ import {
 	DocumentTypePropertyTypeResponseModel,
 	PropertyTypeContainerResponseModelBaseModel,
 } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ArrayState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
 export type PropertyContainerTypes = 'Group' | 'Tab';
@@ -14,7 +14,7 @@ type T = DocumentTypeResponseModel;
 
 // TODO: make general interface for NodeTypeRepository, to replace UmbDocumentTypeRepository:
 export class UmbWorkspacePropertyStructureManager<R extends UmbDocumentTypeRepository = UmbDocumentTypeRepository> {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#documentTypeRepository: R;
 
@@ -22,7 +22,7 @@ export class UmbWorkspacePropertyStructureManager<R extends UmbDocumentTypeRepos
 
 	#containers = new ArrayState<PropertyTypeContainerResponseModelBaseModel>([], (x) => x.key);
 
-	constructor(host: UmbControllerHostInterface, typeRepository: R) {
+	constructor(host: UmbControllerHostElement, typeRepository: R) {
 		this.#host = host;
 		this.#documentTypeRepository = typeRepository;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-split-view-manager.class.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-split-view-manager.class.ts
index f507add3f2..3c238c96b0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-split-view-manager.class.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-split-view-manager.class.ts
@@ -1,5 +1,5 @@
 import { UmbVariantId } from '../../../variants/variant-id.class';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 
 export type ActiveVariant = {
@@ -14,12 +14,12 @@ export type ActiveVariant = {
  * @description - Class managing the split view state for a workspace context.
  */
 export class UmbWorkspaceSplitViewManager {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#activeVariantsInfo = new ArrayState<ActiveVariant>([], (x) => x.index);
 	public readonly activeVariantsInfo = this.#activeVariantsInfo.asObservable();
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.element.ts
index 66dcef9011..525a5ede25 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.element.ts
@@ -16,7 +16,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 // TODO: stop naming this something with layout. as its not just an layout. it hooks up with extensions.
 @customElement('umb-workspace-footer-layout')
-export class UmbWorkspaceFooterLayout extends UmbLitElement {
+export class UmbWorkspaceFooterLayoutElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -71,6 +71,6 @@ export class UmbWorkspaceFooterLayout extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-workspace-footer-layout': UmbWorkspaceFooterLayout;
+		'umb-workspace-footer-layout': UmbWorkspaceFooterLayoutElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.stories.ts
index ac7c825d27..a37b61a21b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.stories.ts
@@ -4,7 +4,7 @@ import './workspace-footer-layout.element';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
-import type { UmbWorkspaceFooterLayout } from './workspace-footer-layout.element';
+import type { UmbWorkspaceFooterLayoutElement } from './workspace-footer-layout.element';
 
 export default {
 	title: 'Workspaces/Shared/Footer Layout',
@@ -12,7 +12,7 @@ export default {
 	id: 'umb-workspace-footer-layout',
 } as Meta;
 
-export const AAAOverview: Story<UmbWorkspaceFooterLayout> = () => html` <umb-workspace-footer-layout>
+export const AAAOverview: Story<UmbWorkspaceFooterLayoutElement> = () => html` <umb-workspace-footer-layout>
 	<div><uui-button color="" look="placeholder">Footer slot</uui-button></div>
 	<div slot="actions"><uui-button color="" look="placeholder">Actions slot</uui-button></div>
 </umb-workspace-footer-layout>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
index f1fe4b7ff2..b41fd563ea 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
@@ -29,7 +29,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 // TODO: stop naming this something with layout. as its not just an layout. it hooks up with extensions.
 @customElement('umb-workspace-layout')
-export class UmbWorkspaceLayout extends UmbLitElement {
+export class UmbWorkspaceLayoutElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -220,6 +220,6 @@ export class UmbWorkspaceLayout extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-workspace-layout': UmbWorkspaceLayout;
+		'umb-workspace-layout': UmbWorkspaceLayoutElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.stories.ts
index aa83696013..ba84a2855e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.stories.ts
@@ -3,7 +3,7 @@ import './workspace-layout.element';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
-import type { UmbWorkspaceLayout } from './workspace-layout.element';
+import type { UmbWorkspaceLayoutElement } from './workspace-layout.element';
 
 export default {
 	title: 'Workspaces/Shared/Editor Entity Layout',
@@ -11,7 +11,7 @@ export default {
 	id: 'umb-workspace-layout',
 } as Meta;
 
-export const AAAOverview: Story<UmbWorkspaceLayout> = () => html` <umb-workspace-layout>
+export const AAAOverview: Story<UmbWorkspaceLayoutElement> = () => html` <umb-workspace-layout>
 	<div slot="icon"><uui-button color="" look="placeholder">Icon slot</uui-button></div>
 	<div slot="name"><uui-button color="" look="placeholder">Name slot</uui-button></div>
 	<div slot="footer"><uui-button color="" look="placeholder">Footer slot</uui-button></div>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-variant/workspace-variant.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-variant/workspace-variant.context.ts
index 7b828461d9..598a6d40b9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-variant/workspace-variant.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-variant/workspace-variant.context.ts
@@ -2,15 +2,19 @@ import { UmbDocumentWorkspaceContext } from '../../../../documents/documents/wor
 import { UmbVariantId } from '../../../variants/variant-id.class';
 import { UmbWorkspaceVariableEntityContextInterface } from '../workspace-context/workspace-variable-entity-context.interface';
 import { ActiveVariant } from '../workspace-context/workspace-split-view-manager.class';
-import { UmbContextConsumerController, UmbContextProviderController, UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import {
+	UmbContextConsumerController,
+	UmbContextProviderController,
+	UmbContextToken,
+} from '@umbraco-cms/backoffice/context-api';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ClassState, NumberState, ObjectState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { DocumentVariantResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 //type EntityType = DocumentModel;
 
 export class UmbWorkspaceVariantContext {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#workspaceContext?: UmbWorkspaceVariableEntityContextInterface;
 	public getWorkspaceContext() {
@@ -32,7 +36,7 @@ export class UmbWorkspaceVariantContext {
 
 	private _currentVariantObserver?: UmbObserverController<ActiveVariant>;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 
 		new UmbContextProviderController(host, UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN.toString(), this);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/template/template-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/template/template-modal.element.ts
index 8e3c73dcb9..d7711f4287 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/template/template-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/template/template-modal.element.ts
@@ -3,10 +3,10 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUIInputEvent } from '@umbraco-ui/uui';
-import { UmbInputEvent } from '@umbraco-cms/backoffice/umb-events/input.event';
-import { TemplateResource, TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api/src';
 import { UmbCodeEditor } from '../../components/code-editor';
 import { UmbTemplateModalData, UmbTemplateModalResult } from '.';
+import { UmbInputEvent } from '@umbraco-cms/backoffice/events';
+import { TemplateResource, TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action-menu/property-action-menu.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action-menu/property-action-menu.context.ts
index ad2218b381..3a8205847f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action-menu/property-action-menu.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action-menu/property-action-menu.context.ts
@@ -1,12 +1,12 @@
 import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { DeepState } from '@umbraco-cms/backoffice/observable-api';
 
 export class UmbPropertyActionMenuContext {
 	#isOpen = new DeepState(false);
 	public readonly isOpen = this.#isOpen.asObservable();
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		new UmbContextProviderController(host, 'umbPropertyActionMenu', this);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/file-system-tree-item/file-system-tree-item.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/file-system-tree-item/file-system-tree-item.context.ts
index 92d1f20549..670d5d6be4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/file-system-tree-item/file-system-tree-item.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/file-system-tree-item/file-system-tree-item.context.ts
@@ -1,11 +1,11 @@
 import { UmbTreeItemContextBase } from '../../../shared/components/tree/tree-item-base/tree-item-base.context';
 import { urlFriendlyPathFromServerFilePath } from '../../utils';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { FileSystemTreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 
 // TODO get unique method from an entity repository static method
 export class UmbFileSystemTreeItemContext extends UmbTreeItemContextBase<FileSystemTreeItemPresentationModel> {
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, (x: FileSystemTreeItemPresentationModel) => x.path);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/manifests.ts
index 31a346ebde..7d999bb788 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/manifests.ts
@@ -1,7 +1,6 @@
-import { ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry/repository.models';
 import { UmbStylesheetRepository } from './stylesheet.repository';
 import { UmbStylesheetTreeStore } from './stylesheet.tree.store';
-import { ManifestTreeStore } from '@umbraco-cms/backoffice/extensions-registry';
+import { ManifestTreeStore, ManifestRepository } from '@umbraco-cms/backoffice/extensions-registry';
 
 export const STYLESHEET_REPOSITORY_ALIAS = 'Umb.Repository.Stylesheet';
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/sources/stylesheet.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/sources/stylesheet.server.data.ts
index bc82863011..65fcd64e91 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/sources/stylesheet.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/sources/stylesheet.server.data.ts
@@ -1,6 +1,6 @@
 import { StylesheetDetails } from '../..';
 import { DataSourceResponse, UmbDataSource } from '@umbraco-cms/backoffice/repository';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * A data source for the Stylesheet that fetches data from the server
@@ -9,14 +9,14 @@ import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
  * @implements {UmbStylesheetServerDataSource}
  */
 export class UmbStylesheetServerDataSource implements UmbDataSource<StylesheetDetails> {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of UmbStylesheetServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbStylesheetServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 	createScaffold(parentKey: string | null): Promise<DataSourceResponse<StylesheetDetails>> {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/sources/stylesheet.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/sources/stylesheet.tree.server.data.ts
index 7165e29c2e..1618d1ee59 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/sources/stylesheet.tree.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/sources/stylesheet.tree.server.data.ts
@@ -3,7 +3,7 @@ import {
 	PagedFileSystemTreeItemPresentationModel,
 	StylesheetResource,
 } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 import { UmbTreeDataSource } from '@umbraco-cms/backoffice/repository';
 
@@ -16,14 +16,14 @@ import { UmbTreeDataSource } from '@umbraco-cms/backoffice/repository';
 export class UmbStylesheetTreeServerDataSource
 	implements UmbTreeDataSource<PagedFileSystemTreeItemPresentationModel, FileSystemTreeItemPresentationModel>
 {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of UmbStylesheetTreeServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbStylesheetTreeServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/stylesheet.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/stylesheet.repository.ts
index a045817b57..fd73a0cda1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/stylesheet.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/stylesheet.repository.ts
@@ -1,7 +1,7 @@
 import { UmbStylesheetTreeStore, UMB_STYLESHEET_TREE_STORE_CONTEXT_TOKEN } from './stylesheet.tree.store';
 import { UmbStylesheetTreeServerDataSource } from './sources/stylesheet.tree.server.data';
 import { UmbStylesheetServerDataSource } from './sources/stylesheet.server.data';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
@@ -21,7 +21,7 @@ export class UmbStylesheetRepository
 	#initResolver?: () => void;
 	#initialized = false;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/stylesheet.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/stylesheet.tree.store.ts
index bf7a427c5c..317f94c2b4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/stylesheet.tree.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/repository/stylesheet.tree.store.ts
@@ -1,6 +1,6 @@
 import { UmbFileSystemTreeStore } from '@umbraco-cms/backoffice/store';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
@@ -11,10 +11,10 @@ import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/control
 export class UmbStylesheetTreeStore extends UmbFileSystemTreeStore {
 	/**
 	 * Creates an instance of UmbStylesheetTreeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbStylesheetTreeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_STYLESHEET_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/workspace/stylesheet-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/workspace/stylesheet-workspace.context.ts
index e3be06cf52..3ad3bb16b7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/workspace/stylesheet-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/workspace/stylesheet-workspace.context.ts
@@ -1,7 +1,7 @@
 import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context';
 import { UmbStylesheetRepository } from '../repository/stylesheet.repository';
 import { StylesheetDetails } from '..';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
 import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
 
@@ -12,7 +12,7 @@ export class UmbStylesheetWorkspaceContext
 	#data = new ObjectState<StylesheetDetails | undefined>(undefined);
 	data = this.#data.asObservable();
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbStylesheetRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/create/create.action.ts
index 11ba8f3d3b..97067b0fc3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/entity-actions/create/create.action.ts
@@ -1,8 +1,8 @@
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbCreateEntityAction<T extends { copy(): Promise<void> }> extends UmbEntityActionBase<T> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/sources/template.detail.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/sources/template.detail.server.data.ts
index c2b90a69a1..7705f1ac6d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/sources/template.detail.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/sources/template.detail.server.data.ts
@@ -1,6 +1,6 @@
 import { v4 as uuid } from 'uuid';
 import { ProblemDetailsModel, TemplateResponseModel, TemplateResource } from '@umbraco-cms/backoffice/backend-api';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 import type { DataSourceResponse } from '@umbraco-cms/backoffice/repository';
 
@@ -19,14 +19,14 @@ export interface TemplateDetailDataSource {
  * @implements {TemplateDetailDataSource}
  */
 export class UmbTemplateDetailServerDataSource implements TemplateDetailDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of UmbTemplateDetailServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbTemplateDetailServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/sources/template.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/sources/template.tree.server.data.ts
index c7393da101..219e8cc807 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/sources/template.tree.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/sources/template.tree.server.data.ts
@@ -1,6 +1,6 @@
 import { TemplateTreeDataSource } from '.';
 import { ProblemDetailsModel, TemplateResource } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
@@ -10,14 +10,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {TemplateTreeDataSource}
  */
 export class TemplateTreeServerDataSource implements TemplateTreeDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of TemplateTreeServerDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof TemplateTreeServerDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.repository.ts
index ec47ab953d..5567f76759 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.repository.ts
@@ -3,14 +3,14 @@ import { TemplateTreeServerDataSource } from './sources/template.tree.server.dat
 import { UmbTemplateStore, UMB_TEMPLATE_STORE_CONTEXT_TOKEN } from './template.store';
 import { UmbTemplateTreeStore, UMB_TEMPLATE_TREE_STORE_CONTEXT_TOKEN } from './template.tree.store';
 import type { UmbDetailRepository, UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ProblemDetailsModel, TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 export class UmbTemplateRepository implements UmbTreeRepository<any>, UmbDetailRepository<TemplateResponseModel> {
 	#init;
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#treeDataSource: TemplateTreeServerDataSource;
 	#detailDataSource: UmbTemplateDetailServerDataSource;
@@ -20,7 +20,7 @@ export class UmbTemplateRepository implements UmbTreeRepository<any>, UmbDetailR
 
 	#notificationContext?: UmbNotificationContext;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.store.ts
index 87cc54b329..bda7548eb7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.store.ts
@@ -2,7 +2,7 @@ import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import type { TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
@@ -15,10 +15,10 @@ export class UmbTemplateStore extends UmbStoreBase {
 
 	/**
 	 * Creates an instance of UmbTemplateStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbTemplateStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_TEMPLATE_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.tree.store.ts
index b606566c98..d243c300f9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.tree.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.tree.store.ts
@@ -1,6 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export const UMB_TEMPLATE_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbTemplateTreeStore>('UmbTemplateTreeStore');
 
@@ -13,10 +13,10 @@ export const UMB_TEMPLATE_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbTemp
 export class UmbTemplateTreeStore extends UmbEntityTreeStore {
 	/**
 	 * Creates an instance of UmbTemplateTreeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbTemplateTreeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_TEMPLATE_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.context.ts
index eed77e8840..ed978b798a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.context.ts
@@ -2,7 +2,7 @@ import { UmbTemplateRepository } from '../repository/template.repository';
 import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context';
 import { createObservablePart, DeepState } from '@umbraco-cms/backoffice/observable-api';
 import { TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbTemplateWorkspaceContext extends UmbWorkspaceContext<UmbTemplateRepository> {
 	#data = new DeepState<TemplateResponseModel | undefined>(undefined);
@@ -10,7 +10,7 @@ export class UmbTemplateWorkspaceContext extends UmbWorkspaceContext<UmbTemplate
 	name = createObservablePart(this.#data, (data) => data?.name);
 	content = createObservablePart(this.#data, (data) => data?.content);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbTemplateRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.context.ts
index 4e18d51859..959c8f19ef 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.context.ts
@@ -3,13 +3,13 @@ import { manifests } from './manifests';
 import { UmbContextProviderController, UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { StringState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ManifestTheme } from '@umbraco-cms/backoffice/extensions-registry';
 
 const LOCAL_STORAGE_KEY = 'umb-theme-alias';
 
 export class UmbThemeContext {
-	private _host: UmbControllerHostInterface;
+	private _host: UmbControllerHostElement;
 
 	#theme = new StringState('umb-light-theme');
 	public readonly theme = this.#theme.asObservable();
@@ -18,7 +18,7 @@ export class UmbThemeContext {
 
 	#styleElement: HTMLLinkElement | HTMLStyleElement | null = null;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this._host = host;
 
 		new UmbContextProviderController(host, UMB_THEME_CONTEXT_TOKEN, this);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts
index 7e0686e77a..8f7f3eae7e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create.action.ts
@@ -5,7 +5,7 @@ import {
 	UMB_SECTION_SIDEBAR_CONTEXT_TOKEN,
 } from '../../../../../backoffice/shared/components/section/section-sidebar/section-sidebar.context';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CREATE_DICTIONARY_MODAL } from '@umbraco-cms/backoffice/modal';
 
@@ -19,7 +19,7 @@ export default class UmbCreateDictionaryEntityAction extends UmbEntityActionBase
 
 	#sectionSidebarContext!: UmbSectionSidebarContext;
 
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 
 		new UmbContextConsumerController(this.host, UMB_MODAL_CONTEXT_TOKEN, (instance) => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts
index d3351707bc..5505ad4ced 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export.action.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { UmbDictionaryRepository } from '../../repository/dictionary.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_EXPORT_DICTIONARY_MODAL } from '@umbraco-cms/backoffice/modal';
 
@@ -12,7 +12,7 @@ export default class UmbExportDictionaryEntityAction extends UmbEntityActionBase
 
 	#modalContext?: UmbModalContext;
 
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 
 		new UmbContextConsumerController(this.host, UMB_MODAL_CONTEXT_TOKEN, (instance) => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts
index 83c4f68cee..0ba63c6352 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/import/import.action.ts
@@ -1,7 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { UmbDictionaryRepository } from '../../repository/dictionary.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_IMPORT_DICTIONARY_MODAL } from '@umbraco-cms/backoffice/modal';
 
@@ -12,7 +12,7 @@ export default class UmbImportDictionaryEntityAction extends UmbEntityActionBase
 
 	#modalContext?: UmbModalContext;
 
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 
 		new UmbContextConsumerController(this.host, UMB_MODAL_CONTEXT_TOKEN, (instance) => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/reload.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/reload.action.ts
index 0cb3ca20c0..ac91ad2bfe 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/reload.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/reload.action.ts
@@ -1,12 +1,12 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { UmbDictionaryRepository } from '../repository/dictionary.repository';
 import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export default class UmbReloadDictionaryEntityAction extends UmbEntityActionBase<UmbDictionaryRepository> {
 	static styles = [UUITextStyles];
 
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.repository.ts
index ac680847b3..925f993f48 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.repository.ts
@@ -3,7 +3,7 @@ import { UmbDictionaryStore, UMB_DICTIONARY_STORE_CONTEXT_TOKEN } from './dictio
 import { UmbDictionaryDetailServerDataSource } from './sources/dictionary.detail.server.data';
 import { UmbDictionaryTreeStore, UMB_DICTIONARY_TREE_STORE_CONTEXT_TOKEN } from './dictionary.tree.store';
 import { DictionaryTreeServerDataSource } from './sources/dictionary.tree.server.data';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbTreeDataSource, UmbDetailRepository, UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
 import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
@@ -12,7 +12,7 @@ import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco
 export class UmbDictionaryRepository implements UmbTreeRepository, UmbDetailRepository<DictionaryDetails> {
 	#init!: Promise<unknown>;
 
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	#treeSource: UmbTreeDataSource;
 	#treeStore?: UmbDictionaryTreeStore;
@@ -22,7 +22,7 @@ export class UmbDictionaryRepository implements UmbTreeRepository, UmbDetailRepo
 
 	#notificationContext?: UmbNotificationContext;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.store.ts
index 210f98c8dc..45ec7a5f5f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.store.ts
@@ -1,7 +1,7 @@
 import type { DictionaryDetails } from '../';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 
 /**
@@ -13,7 +13,7 @@ import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 export class UmbDictionaryStore extends UmbStoreBase {
 	#data = new ArrayState<DictionaryDetails>([], (x) => x.key);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_DICTIONARY_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.tree.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.tree.store.ts
index cfcbb6ea48..3c60cabe70 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.tree.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/dictionary.tree.store.ts
@@ -1,6 +1,6 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
@@ -11,10 +11,10 @@ import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
 export class UmbDictionaryTreeStore extends UmbEntityTreeStore {
 	/**
 	 * Creates an instance of UmbDictionaryTreeStore.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof UmbDictionaryTreeStore
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_DICTIONARY_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/sources/dictionary.detail.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/sources/dictionary.detail.server.data.ts
index 8a972cc326..109d5a3924 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/sources/dictionary.detail.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/sources/dictionary.detail.server.data.ts
@@ -1,6 +1,6 @@
 import type { DictionaryDetails } from '../../';
 import { DictionaryDetailDataSource } from './dictionary.details.server.data.interface';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 import {
 	CreateDictionaryItemRequestModel,
@@ -16,9 +16,9 @@ import {
  * @implements {DictionaryDetailDataSource}
  */
 export class UmbDictionaryDetailServerDataSource implements DictionaryDetailDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/sources/dictionary.tree.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/sources/dictionary.tree.server.data.ts
index a96b16666d..fa073716ed 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/sources/dictionary.tree.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/repository/sources/dictionary.tree.server.data.ts
@@ -1,5 +1,5 @@
 import { DictionaryResource, ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbTreeDataSource } from '@umbraco-cms/backoffice/repository';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
@@ -10,14 +10,14 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @implements {DictionaryTreeDataSource}
  */
 export class DictionaryTreeServerDataSource implements UmbTreeDataSource {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
 	/**
 	 * Creates an instance of DictionaryTreeDataSource.
-	 * @param {UmbControllerHostInterface} host
+	 * @param {UmbControllerHostElement} host
 	 * @memberof DictionaryTreeDataSource
 	 */
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.context.ts
index 0692a4ffe9..bab38b2abd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.context.ts
@@ -2,7 +2,7 @@ import { UmbDictionaryRepository } from '../repository/dictionary.repository';
 import { UmbWorkspaceContext } from '../../../../backoffice/shared/components/workspace/workspace-context/workspace-context';
 import { UmbEntityWorkspaceContextInterface } from '../../../../backoffice/shared/components/workspace/workspace-context/workspace-entity-context.interface';
 import type { DictionaryDetails } from '../';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
 
 type EntityType = DictionaryDetails;
@@ -16,7 +16,7 @@ export class UmbDictionaryWorkspaceContext
 	name = this.#data.getObservablePart((data) => data?.name);
 	dictionary = this.#data.getObservablePart((data) => data);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbDictionaryRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
index baca5d0566..7cf07e767f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
@@ -7,7 +7,7 @@ import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CURRENT_USER_MODAL } from
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-current-user-header-app')
-export class UmbCurrentUserHeaderApp extends UmbLitElement {
+export class UmbCurrentUserHeaderAppElement extends UmbLitElement {
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
@@ -58,10 +58,10 @@ export class UmbCurrentUserHeaderApp extends UmbLitElement {
 	}
 }
 
-export default UmbCurrentUserHeaderApp;
+export default UmbCurrentUserHeaderAppElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-current-user-header-app': UmbCurrentUserHeaderApp;
+		'umb-current-user-header-app': UmbCurrentUserHeaderAppElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/user-group.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/user-group.repository.ts
index 7c5b190ec4..7e4eac48ec 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/user-group.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/user-group.repository.ts
@@ -1,10 +1,10 @@
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 // TODO: implement
 export class UmbUserGroupRepository {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 		console.log(this.#host);
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/user-group.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/user-group.store.ts
index 1eeaf6e970..2b4fd90559 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/user-group.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/repository/user-group.store.ts
@@ -1,6 +1,6 @@
 import type { UserGroupDetails } from '@umbraco-cms/backoffice/models';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbEntityDetailStore, UmbStoreBase } from '@umbraco-cms/backoffice/store';
 
@@ -19,7 +19,7 @@ export class UmbUserGroupStore extends UmbStoreBase implements UmbEntityDetailSt
 	#groups = new ArrayState<UserGroupDetails>([], (x) => x.key);
 	public groups = this.#groups.asObservable();
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_USER_GROUP_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.context.ts
index fe0c7f5075..5de56a4725 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.context.ts
@@ -4,7 +4,7 @@ import { UmbEntityWorkspaceContextInterface } from '../../../shared/components/w
 import { UMB_USER_GROUP_STORE_CONTEXT_TOKEN } from '../repository/user-group.store';
 import { UmbUserGroupRepository } from '../repository/user-group.repository';
 import type { UserGroupDetails } from '@umbraco-cms/backoffice/models';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbUserGroupWorkspaceContext
 	extends UmbWorkspaceContext<UmbUserGroupRepository>
@@ -19,7 +19,7 @@ export class UmbUserGroupWorkspaceContext
 	public readonly data = this.#manager.state.asObservable();
 	public readonly name = this.#manager.state.getObservablePart((state) => state?.name);
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbUserGroupRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/repository/user.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/repository/user.repository.ts
index 8aa9fca2b5..a9f65bc59d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/repository/user.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/repository/user.repository.ts
@@ -1,10 +1,10 @@
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 // TODO: implement
 export class UmbUserRepository {
-	#host: UmbControllerHostInterface;
+	#host: UmbControllerHostElement;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 		console.log(this.#host);
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/repository/user.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/repository/user.store.ts
index c089151eef..4c6791de91 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/repository/user.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/repository/user.store.ts
@@ -2,7 +2,7 @@ import type { UserDetails } from '@umbraco-cms/backoffice/models';
 import { ArrayState, NumberState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbEntityDetailStore, UmbStoreBase } from '@umbraco-cms/backoffice/store';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export type UmbUserStoreItemType = UserDetails;
 
@@ -21,7 +21,7 @@ export class UmbUserStore extends UmbStoreBase implements UmbEntityDetailStore<U
 	#totalUsers = new NumberState(0);
 	public readonly totalUsers = this.#totalUsers.asObservable();
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_USER_STORE_CONTEXT_TOKEN.toString());
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace.context.ts
index e611cefdad..4f486094bc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace.context.ts
@@ -4,7 +4,7 @@ import { UmbEntityWorkspaceContextInterface } from '../../../shared/components/w
 import { UmbEntityWorkspaceManager } from '../../../shared/components/workspace/workspace-context/entity-manager-controller';
 import { UmbUserRepository } from '../repository/user.repository';
 import type { UserDetails } from '@umbraco-cms/backoffice/models';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbUserWorkspaceContext
 	extends UmbWorkspaceContext<UmbUserRepository>
@@ -22,7 +22,7 @@ export class UmbUserWorkspaceContext
 	// TODO: remove this magic connection, instead create the necessary methods to update parts.
 	update = this.#manager.state.update;
 
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, new UmbUserRepository(host));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.element.ts b/src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.element.ts
index 6cb0a7de8e..d5e28380e9 100644
--- a/src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/context-provider/context-provider.element.ts
@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 @customElement('umb-context-provider')
 export class UmbContextProviderElement extends UmbLitElement {
@@ -10,7 +10,7 @@ export class UmbContextProviderElement extends UmbLitElement {
 	 * @required
 	 */
 	@property({ type: Object, attribute: false })
-	create?: (host: UmbControllerHostInterface) => unknown;
+	create?: (host: UmbControllerHostElement) => unknown;
 
 	/**
 	 * The value to provide to the context.
diff --git a/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
index 5ab064e243..14d703ffe7 100644
--- a/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.element.ts
@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-controller-host-test')
@@ -10,7 +10,7 @@ export class UmbControllerHostTestElement extends UmbLitElement {
 	 * @required
 	 */
 	@property({ type: Object, attribute: false })
-	create?: (host: UmbControllerHostInterface) => void;
+	create?: (host: UmbControllerHostElement) => void;
 
 	connectedCallback() {
 		super.connectedCallback();
diff --git a/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts
index 4f3c781625..df0e1f3c42 100644
--- a/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/controller-host/controller-host-test.test.ts
@@ -3,7 +3,7 @@ import { customElement } from 'lit/decorators.js';
 import { UmbControllerHostTestElement } from './controller-host-test.element';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
-import type { UmbControllerHostInterface } from '@umbraco-cms/backoffice/controller';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 @customElement('umb-controller-host-test-consumer')
 export class ControllerHostTestConsumerElement extends UmbLitElement {
@@ -24,7 +24,7 @@ describe('UmbControllerHostTestElement', () => {
 	beforeEach(async () => {
 		element = await fixture(
 			html` <umb-controller-host-test
-				.create=${(host: UmbControllerHostInterface) =>
+				.create=${(host: UmbControllerHostElement) =>
 					new UmbContextProviderController(host, 'my-test-context-alias', contextValue)}>
 				<umb-controller-host-test-consumer></umb-controller-host-test-consumer>
 			</umb-controller-host-test>`
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts
index f08e233ed5..dd811943f0 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/rte-embed.handlers.ts
@@ -1,5 +1,5 @@
 import { rest } from 'msw';
-import { OEmbedResult, OEmbedStatus } from '../../../backoffice/shared/modals/embedded-media';
+import { OEmbedResult, OEmbedStatus } from '@umbraco-cms/backoffice/modal';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 
 export const handlers = [
diff --git a/src/Umbraco.Web.UI.Client/src/stories/extending/entity-actions.mdx b/src/Umbraco.Web.UI.Client/src/stories/extending/entity-actions.mdx
index 3298aabe03..eb9fe3121d 100644
--- a/src/Umbraco.Web.UI.Client/src/stories/extending/entity-actions.mdx
+++ b/src/Umbraco.Web.UI.Client/src/stories/extending/entity-actions.mdx
@@ -90,11 +90,11 @@ As part of the Extension Manifest you can attach a class that will be instanciat
 
 ```ts
 import { UmbEntityActionBase } from '@umbraco-cms/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/controller';
 import type { MyRepository } from './my-repository';
 
 export class MyEntityAction extends UmbEntityActionBase<MyRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 	}
 
@@ -113,7 +113,7 @@ import { UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal';
 import { MyRepository } from './my-repository';
 
 export class MyEntityAction extends UmbEntityActionBase<MyRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, unique: string) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
 		super(host, repositoryAlias, unique);
 
 		new UmbContextConsumerController(this.host, UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => {
@@ -176,11 +176,11 @@ As part of the Extension Manifest you can attach a class that will be instanciat
 
 ```ts
 import { UmbEntityBulkActionBase } from '@umbraco-cms/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/controller';
 import { MyRepository } from './my-repository';
 
 export class MyEntityBulkAction extends UmbEntityBulkActionBase<MyRepository> {
-	constructor(host: UmbControllerHostInterface, repositoryAlias: string, selection: Array<string>) {
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, selection: Array<string>) {
 		super(host, repositoryAlias, selection);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/stories/extending/tree.mdx b/src/Umbraco.Web.UI.Client/src/stories/extending/tree.mdx
index 98b44058f9..2f750ce0fe 100644
--- a/src/Umbraco.Web.UI.Client/src/stories/extending/tree.mdx
+++ b/src/Umbraco.Web.UI.Client/src/stories/extending/tree.mdx
@@ -94,7 +94,7 @@ export default MyTreeItemElement;
 ```typescript
 // TODO: auto generate this from the interface
 export interface UmbTreeItemContext<T> {
-	host: UmbControllerHostInterface;
+	host: UmbControllerHostElement;
 	unique?: string;
 	type?: string;
 
@@ -127,7 +127,7 @@ We provide a base class for the tree item context. This class provides some defa
 
 ```typescript
 export class UmbMyTreeItemContext extends UmbTreeItemContextBase<MyTreeItemDataModel> {
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host, (x: MyTreeItemDataModel) => x.unique);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/stories/extending/workspaces/actions.mdx b/src/Umbraco.Web.UI.Client/src/stories/extending/workspaces/actions.mdx
index ffb2564407..d9ff5db436 100644
--- a/src/Umbraco.Web.UI.Client/src/stories/extending/workspaces/actions.mdx
+++ b/src/Umbraco.Web.UI.Client/src/stories/extending/workspaces/actions.mdx
@@ -43,11 +43,11 @@ As part of the Extension Manifest you can attach a class that will be instanciat
 
 ```ts
 import { UmbEntityBulkActionBase } from '@umbraco-cms/entity-action';
-import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { UmbControllerHostElement } from '@umbraco-cms/controller';
 import { MyRepository } from './my-repository';
 
 export class MyWorkspaceAction extends UmbWorkspaceActionBase {
-	constructor(host: UmbControllerHostInterface) {
+	constructor(host: UmbControllerHostElement) {
 		super(host);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/stories/store.mdx b/src/Umbraco.Web.UI.Client/src/stories/store.mdx
index 3a95ffbc11..667afd9124 100644
--- a/src/Umbraco.Web.UI.Client/src/stories/store.mdx
+++ b/src/Umbraco.Web.UI.Client/src/stories/store.mdx
@@ -15,8 +15,8 @@ class MyProductStore {
 
 	public readonly products = this.#products.asObservable();
 
-	protected host: UmbControllerHostInterface;
-	constructor(host: UmbControllerHostInterface) {
+	protected host: UmbControllerHostElement;
+	constructor(host: UmbControllerHostElement) {
 		this.host = host;
 
 		// The Store provides it self as a Context-API.
diff --git a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts
index af13aa4b59..d66130096b 100644
--- a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts
@@ -8,7 +8,7 @@ import { UpgradeSettingsResponseModel } from '@umbraco-cms/backoffice/backend-ap
  * @fires {CustomEvent<SubmitEvent>} onAuthorizeUpgrade - fires when the user clicks the continue button
  */
 @customElement('umb-upgrader-view')
-export class UmbUpgraderView extends LitElement {
+export class UmbUpgraderViewElement extends LitElement {
 	static styles: CSSResultGroup = [
 		css`
 			.center {
@@ -100,10 +100,10 @@ export class UmbUpgraderView extends LitElement {
 	};
 }
 
-export default UmbUpgraderView;
+export default UmbUpgraderViewElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-upgrader-view': UmbUpgraderView;
+		'umb-upgrader-view': UmbUpgraderViewElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.test.ts b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.test.ts
index a8fbd46756..6d5f6dec83 100644
--- a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.test.ts
@@ -1,17 +1,17 @@
 import { expect, fixture, html } from '@open-wc/testing';
 
-import { UmbUpgraderView } from './upgrader-view.element';
+import { UmbUpgraderViewElement } from './upgrader-view.element';
 import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
 
 describe('UmbUpgraderView', () => {
-	let element: UmbUpgraderView;
+	let element: UmbUpgraderViewElement;
 
 	beforeEach(async () => {
 		element = await fixture(html`<umb-upgrader-view></umb-upgrader-view>`);
 	});
 
 	it('is defined with its own instance', () => {
-		expect(element).to.be.instanceOf(UmbUpgraderView);
+		expect(element).to.be.instanceOf(UmbUpgraderViewElement);
 	});
 
 	it('passes the a11y audit', async () => {
diff --git a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts
index 665104ebdd..2ff39b81f7 100644
--- a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts
@@ -11,7 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  * @element umb-upgrader
  */
 @customElement('umb-upgrader')
-export class UmbUpgrader extends UmbLitElement {
+export class UmbUpgraderElement extends UmbLitElement {
 	@state()
 	private upgradeSettings?: UpgradeSettingsResponseModel;
 
@@ -71,10 +71,10 @@ export class UmbUpgrader extends UmbLitElement {
 	};
 }
 
-export default UmbUpgrader;
+export default UmbUpgraderElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-upgrader': UmbUpgrader;
+		'umb-upgrader': UmbUpgraderElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.stories.ts b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.stories.ts
index 77d63cefb8..5363224718 100644
--- a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.stories.ts
@@ -3,7 +3,7 @@ import './upgrader-view.element';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
-import type { UmbUpgraderView } from './upgrader-view.element';
+import type { UmbUpgraderViewElement } from './upgrader-view.element';
 
 export default {
 	title: 'Apps/Upgrader/States',
@@ -32,9 +32,9 @@ export default {
 				${story()}
 			</div>`,
 	],
-} satisfies Meta<UmbUpgraderView>;
+} satisfies Meta<UmbUpgraderViewElement>;
 
-type Story = StoryObj<UmbUpgraderView>;
+type Story = StoryObj<UmbUpgraderViewElement>;
 
 export const Overview: Story = {};
 
diff --git a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.test.ts b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.test.ts
index 152dacda45..24561b45ac 100644
--- a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader.test.ts
@@ -1,15 +1,15 @@
 import { expect, fixture, html } from '@open-wc/testing';
 
-import { UmbUpgrader } from './upgrader.element';
+import { UmbUpgraderElement } from './upgrader.element';
 
 describe('UmbUpgrader', () => {
-	let element: UmbUpgrader;
+	let element: UmbUpgraderElement;
 
 	beforeEach(async () => {
 		element = await fixture(html`<umb-upgrader></umb-upgrader>`);
 	});
 
 	it('is defined with its own instance', () => {
-		expect(element).to.be.instanceOf(UmbUpgrader);
+		expect(element).to.be.instanceOf(UmbUpgraderElement);
 	});
 });