Merge branch 'main' into feature/move-data-type

src/Umbraco.Web.UI.Client/.eslintrc.json

@@ -44,6 +44,7 @@
 				"local-rules/enforce-element-suffix-on-element-class-name": "error",
 				"local-rules/prefer-umbraco-cms-imports": "error",
 				"local-rules/no-external-imports": "error",
+				"local-rules/umb-class-prefix": "error",
 				"@typescript-eslint/no-non-null-assertion": "off"
 			},
 			"settings": {

src/Umbraco.Web.UI.Client/eslint-local-rules.cjs

@@ -205,4 +205,31 @@ module.exports = {
 			};
 		},
 	},
+
+	/** @type {import('eslint').Rule.RuleModule} */
+	'umb-class-prefix': {
+		meta: {
+			type: 'problem',
+			docs: {
+				description: 'Ensure that all class declarations are prefixed with "Umb"',
+				category: 'Best Practices',
+				recommended: true,
+			},
+			schema: [],
+		},
+		create: function (context) {
+			function checkClassName(node) {
+				if (node.id && node.id.name && !node.id.name.startsWith('Umb')) {
+					context.report({
+						node: node.id,
+						message: 'Class declaration should be prefixed with "Umb"',
+					});
+				}
+			}
+
+			return {
+				ClassDeclaration: checkClassName,
+			};
+		},
+	},
 };

src/Umbraco.Web.UI.Client/libs/context-api/consume/context-consumer.test.ts

@@ -5,7 +5,7 @@ import { UmbContextRequestEventImplementation, umbContextRequestEventType } from
 
 const testContextAlias = 'my-test-context';
 
-class MyClass {
+class UmbTestContextConsumerClass {
 	prop = 'value from provider';
 }
 
@@ -39,16 +39,20 @@ describe('UmbContextConsumer', () => {
 	});
 
 	it('works with UmbContextProvider', (done) => {
-		const provider = new UmbContextProvider(document.body, testContextAlias, new MyClass());
+		const provider = new UmbContextProvider(document.body, testContextAlias, new UmbTestContextConsumerClass());
 		provider.hostConnected();
 
 		const element = document.createElement('div');
 		document.body.appendChild(element);
 
-		const localConsumer = new UmbContextConsumer(element, testContextAlias, (_instance: MyClass) => {
-			expect(_instance.prop).to.eq('value from provider');
-			done();
-		});
+		const localConsumer = new UmbContextConsumer(
+			element,
+			testContextAlias,
+			(_instance: UmbTestContextConsumerClass) => {
+				expect(_instance.prop).to.eq('value from provider');
+				done();
+			}
+		);
 		localConsumer.hostConnected();
 
 		provider.hostDisconnected();

src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.controller.test.ts

@@ -3,21 +3,21 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbContextConsumer } from '../consume/context-consumer';
 import { UmbContextProviderController } from './context-provider.controller';
 
-class MyClass {
+class UmbTestContextProviderControllerClass {
 	prop = 'value from provider';
 }
 
-class ControllerHostElement extends UmbLitElement {}
-const controllerHostElement = defineCE(ControllerHostElement);
+class UmbTestControllerHostElement extends UmbLitElement {}
+const controllerHostElement = defineCE(UmbTestControllerHostElement);
 
 describe('UmbContextProviderController', () => {
-	let instance: MyClass;
+	let instance: UmbTestContextProviderControllerClass;
 	let provider: UmbContextProviderController;
 	let element: UmbLitElement;
 
 	beforeEach(async () => {
 		element = await fixture(`<${controllerHostElement}></${controllerHostElement}>`);
-		instance = new MyClass();
+		instance = new UmbTestContextProviderControllerClass();
 		provider = new UmbContextProviderController(element, 'my-test-context', instance);
 	});
 
@@ -39,11 +39,15 @@ describe('UmbContextProviderController', () => {
 	});
 
 	it('works with UmbContextConsumer', (done) => {
-		const localConsumer = new UmbContextConsumer(element, 'my-test-context', (_instance: MyClass) => {
-			expect(_instance.prop).to.eq('value from provider');
-			done();
-			localConsumer.hostDisconnected();
-		});
+		const localConsumer = new UmbContextConsumer(
+			element,
+			'my-test-context',
+			(_instance: UmbTestContextProviderControllerClass) => {
+				expect(_instance.prop).to.eq('value from provider');
+				done();
+				localConsumer.hostDisconnected();
+			}
+		);
 		localConsumer.hostConnected();
 	});
 

src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.test.ts

@@ -3,16 +3,16 @@ import { UmbContextConsumer } from '../consume/context-consumer';
 import { UmbContextRequestEventImplementation } from '../consume/context-request.event';
 import { UmbContextProvider } from './context-provider';
 
-class MyClass {
+class UmbTestContextProviderClass {
 	prop = 'value from provider';
 }
 
 describe('UmbContextProvider', () => {
-	let instance: MyClass;
+	let instance: UmbTestContextProviderClass;
 	let provider: UmbContextProvider;
 
 	beforeEach(() => {
-		instance = new MyClass();
+		instance = new UmbTestContextProviderClass();
 		provider = new UmbContextProvider(document.body, 'my-test-context', instance);
 		provider.hostConnected();
 	});
@@ -40,10 +40,13 @@ describe('UmbContextProvider', () => {
 	});
 
 	it('handles context request events', (done) => {
-		const event = new UmbContextRequestEventImplementation('my-test-context', (_instance: MyClass) => {
-			expect(_instance.prop).to.eq('value from provider');
-			done();
-		});
+		const event = new UmbContextRequestEventImplementation(
+			'my-test-context',
+			(_instance: UmbTestContextProviderClass) => {
+				expect(_instance.prop).to.eq('value from provider');
+				done();
+			}
+		);
 
 		document.body.dispatchEvent(event);
 	});
@@ -52,11 +55,15 @@ describe('UmbContextProvider', () => {
 		const element = document.createElement('div');
 		document.body.appendChild(element);
 
-		const localConsumer = new UmbContextConsumer(element, 'my-test-context', (_instance: MyClass) => {
-			expect(_instance.prop).to.eq('value from provider');
-			done();
-			localConsumer.hostDisconnected();
-		});
+		const localConsumer = new UmbContextConsumer(
+			element,
+			'my-test-context',
+			(_instance: UmbTestContextProviderClass) => {
+				expect(_instance.prop).to.eq('value from provider');
+				done();
+				localConsumer.hostDisconnected();
+			}
+		);
 		localConsumer.hostConnected();
 	});
 });

src/Umbraco.Web.UI.Client/libs/context-api/token/context-token.test.ts

@@ -5,13 +5,13 @@ import { UmbContextToken } from './context-token';
 
 const testContextAlias = 'my-test-context';
 
-class MyClass {
+class UmbTestContextTokenClass {
 	prop = 'value from provider';
 }
 
 describe('ContextAlias', () => {
-	const contextAlias = new UmbContextToken<MyClass>(testContextAlias);
-	const typedProvider = new UmbContextProvider(document.body, contextAlias, new MyClass());
+	const contextAlias = new UmbContextToken<UmbTestContextTokenClass>(testContextAlias);
+	const typedProvider = new UmbContextProvider(document.body, contextAlias, new UmbTestContextTokenClass());
 	typedProvider.hostConnected();
 
 	after(() => {
@@ -27,7 +27,7 @@ describe('ContextAlias', () => {
 		document.body.appendChild(element);
 
 		const localConsumer = new UmbContextConsumer(element, contextAlias, (_instance) => {
-			expect(_instance).to.be.instanceOf(MyClass);
+			expect(_instance).to.be.instanceOf(UmbTestContextTokenClass);
 			expect(_instance.prop).to.eq('value from provider');
 			done();
 		});
@@ -39,8 +39,8 @@ describe('ContextAlias', () => {
 		const element = document.createElement('div');
 		document.body.appendChild(element);
 
-		const localConsumer = new UmbContextConsumer(element, testContextAlias, (_instance: MyClass) => {
-			expect(_instance).to.be.instanceOf(MyClass);
+		const localConsumer = new UmbContextConsumer(element, testContextAlias, (_instance: UmbTestContextTokenClass) => {
+			expect(_instance).to.be.instanceOf(UmbTestContextTokenClass);
 			expect(_instance.prop).to.eq('value from provider');
 			done();
 		});

src/Umbraco.Web.UI.Client/libs/controller/controller.test.ts

@@ -3,18 +3,18 @@ import { customElement } from 'lit/decorators.js';
 import { UmbControllerHostElement, UmbControllerHostMixin } from './controller-host.mixin';
 import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
 
-class MyClass {
+class UmbTestContext {
 	prop = 'value from provider';
 }
 
 @customElement('test-my-controller-host')
-export class MyHostElement extends UmbControllerHostMixin(HTMLElement) {}
+export class UmbTestControllerHostElement extends UmbControllerHostMixin(HTMLElement) {}
 
 describe('UmbContextProvider', () => {
 	type NewType = UmbControllerHostElement;
 
 	let hostElement: NewType;
-	const contextInstance = new MyClass();
+	const contextInstance = new UmbTestContext();
 
 	beforeEach(() => {
 		hostElement = document.createElement('test-my-controller-host') as UmbControllerHostElement;
@@ -35,7 +35,7 @@ describe('UmbContextProvider', () => {
 	describe('Unique controllers replace each other', () => {
 		it('has a host property', () => {
 			const firstCtrl = new UmbContextProviderController(hostElement, 'my-test-context', contextInstance);
-			const secondCtrl = new UmbContextProviderController(hostElement, 'my-test-context', new MyClass());
+			const secondCtrl = new UmbContextProviderController(hostElement, 'my-test-context', new UmbTestContext());
 
 			expect(hostElement.hasController(firstCtrl)).to.be.false;
 			expect(hostElement.hasController(secondCtrl)).to.be.true;

src/Umbraco.Web.UI.Client/libs/observable-api/append-to-frozen-array.function.ts

@@ -5,7 +5,7 @@
  * @param {(mappable: T) => R} mappingFunction - Method to return the part for this Observable to return.
  * @param {(previousResult: R, currentResult: R) => boolean} [memoizationFunction] - Method to Compare if the data has changed. Should return true when data is different.
  * @description - Creates a RxJS Observable from RxJS Subject.
- * @example <caption>Example append new entry for a ArrayState or a part of DeepState/ObjectState it which is an array. Where the key is unique and the item will be updated if matched with existing.</caption>
+ * @example <caption>Example append new entry for a ArrayState or a part of UmbDeepState/UmbObjectState it which is an array. Where the key is unique and the item will be updated if matched with existing.</caption>
  * const entry = {id: 'myKey', value: 'myValue'};
  * const newDataSet = appendToFrozenArray(mySubject.getValue(), entry, x => x.id === id);
  * mySubject.next(newDataSet);

src/Umbraco.Web.UI.Client/libs/observable-api/array-state.test.ts

@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
-import { ArrayState } from './array-state';
+import { UmbArrayState } from './array-state';
 
 describe('ArrayState', () => {
 	type ObjectType = { key: string; another: string };
 	type ArrayType = ObjectType[];
 
-	let subject: ArrayState<ObjectType>;
+	let subject: UmbArrayState<ObjectType>;
 	let initialData: ArrayType;
 
 	beforeEach(() => {
@@ -14,7 +14,7 @@ describe('ArrayState', () => {
 			{ key: '2', another: 'myValue2' },
 			{ key: '3', another: 'myValue3' },
 		];
-		subject = new ArrayState(initialData, (x) => x.key);
+		subject = new UmbArrayState(initialData, (x) => x.key);
 	});
 
 	it('replays latests, no matter the amount of subscriptions.', (done) => {

src/Umbraco.Web.UI.Client/libs/observable-api/array-state.ts

@@ -1,17 +1,17 @@
-import { DeepState } from './deep-state';
+import { UmbDeepState } from './deep-state';
 import { partialUpdateFrozenArray } from './partial-update-frozen-array.function';
 import { pushToUniqueArray } from './push-to-unique-array.function';
 
 /**
  * @export
- * @class ArrayState
- * @extends {DeepState<T>}
+ * @class UmbArrayState
+ * @extends {UmbDeepState<T>}
  * @description - A RxJS BehaviorSubject which deepFreezes the object-data to ensure its not manipulated from any implementations.
  * Additionally the Subject ensures the data is unique, not updating any Observes unless there is an actual change of the content.
  *
  * The ArrayState provides methods to append data when the data is an Object.
  */
-export class ArrayState<T> extends DeepState<T[]> {
+export class UmbArrayState<T> extends UmbDeepState<T[]> {
 	#getUnique?: (entry: T) => unknown;
 	#sortMethod?: (a: T, b: T) => number;
 
@@ -29,7 +29,7 @@ export class ArrayState<T> extends DeepState<T[]> {
 	 * 	{ key: 1, value: 'foo'},
 	 * 	{ key: 2, value: 'bar'}
 	 * ];
-	 * const myState = new ArrayState(data, (x) => x.key);
+	 * const myState = new UmbArrayState(data, (x) => x.key);
 	 * myState.sortBy((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
 	 */
 	sortBy(sortMethod?: (a: T, b: T) => number) {
@@ -48,14 +48,14 @@ export class ArrayState<T> extends DeepState<T[]> {
 	/**
 	 * @method remove
 	 * @param {unknown[]} uniques - The unique values to remove.
-	 * @return {ArrayState<T>} Reference to it self.
+	 * @return {UmbArrayState<T>} Reference to it self.
 	 * @description - Remove some new data of this Subject.
 	 * @example <caption>Example remove entry with id '1' and '2'</caption>
 	 * const data = [
 	 * 	{ id: 1, value: 'foo'},
 	 * 	{ id: 2, value: 'bar'}
 	 * ];
-	 * const myState = new ArrayState(data, (x) => x.id);
+	 * const myState = new UmbArrayState(data, (x) => x.id);
 	 * myState.remove([1, 2]);
 	 */
 	remove(uniques: unknown[]) {
@@ -77,14 +77,14 @@ export class ArrayState<T> extends DeepState<T[]> {
 	/**
 	 * @method removeOne
 	 * @param {unknown} unique - The unique value to remove.
-	 * @return {ArrayState<T>} Reference to it self.
+	 * @return {UmbArrayState<T>} Reference to it self.
 	 * @description - Remove some new data of this Subject.
 	 * @example <caption>Example remove entry with id '1'</caption>
 	 * const data = [
 	 * 	{ id: 1, value: 'foo'},
 	 * 	{ id: 2, value: 'bar'}
 	 * ];
-	 * const myState = new ArrayState(data, (x) => x.id);
+	 * const myState = new UmbArrayState(data, (x) => x.id);
 	 * myState.removeOne(1);
 	 */
 	removeOne(unique: unknown) {
@@ -104,7 +104,7 @@ export class ArrayState<T> extends DeepState<T[]> {
 	/**
 	 * @method filter
 	 * @param {unknown} filterMethod - The unique value to remove.
-	 * @return {ArrayState<T>} Reference to it self.
+	 * @return {UmbArrayState<T>} Reference to it self.
 	 * @description - Remove some new data of this Subject.
 	 * @example <caption>Example remove entry with key '1'</caption>
 	 * const data = [
@@ -112,7 +112,7 @@ export class ArrayState<T> extends DeepState<T[]> {
 	 * 	{ key: 2, value: 'bar'},
 	 * 	{ key: 3, value: 'poo'}
 	 * ];
-	 * const myState = new ArrayState(data, (x) => x.key);
+	 * const myState = new UmbArrayState(data, (x) => x.key);
 	 * myState.filter((entry) => entry.key !== 1);
 	 *
 	 * Result:
@@ -130,14 +130,14 @@ export class ArrayState<T> extends DeepState<T[]> {
 	/**
 	 * @method appendOne
 	 * @param {T} entry - new data to be added in this Subject.
-	 * @return {ArrayState<T>} Reference to it self.
+	 * @return {UmbArrayState<T>} Reference to it self.
 	 * @description - Append some new data to this Subject.
 	 * @example <caption>Example append some data.</caption>
 	 * const data = [
 	 * 	{ key: 1, value: 'foo'},
 	 * 	{ key: 2, value: 'bar'}
 	 * ];
-	 * const myState = new ArrayState(data);
+	 * const myState = new UmbArrayState(data);
 	 * myState.append({ key: 1, value: 'replaced-foo'});
 	 */
 	appendOne(entry: T) {
@@ -154,14 +154,14 @@ export class ArrayState<T> extends DeepState<T[]> {
 	/**
 	 * @method append
 	 * @param {T[]} entries - A array of new data to be added in this Subject.
-	 * @return {ArrayState<T>} Reference to it self.
+	 * @return {UmbArrayState<T>} Reference to it self.
 	 * @description - Append some new data to this Subject, if it compares to existing data it will replace it.
 	 * @example <caption>Example append some data.</caption>
 	 * const data = [
 	 * 	{ key: 1, value: 'foo'},
 	 * 	{ key: 2, value: 'bar'}
 	 * ];
-	 * const myState = new ArrayState(data);
+	 * const myState = new UmbArrayState(data);
 	 * myState.append([
 	 * 	{ key: 1, value: 'replaced-foo'},
 	 * 	{ key: 3, value: 'another-bla'}
@@ -184,14 +184,14 @@ export class ArrayState<T> extends DeepState<T[]> {
 	 * @method updateOne
 	 * @param {unknown} unique - Unique value to find entry to update.
 	 * @param {Partial<T>} entry - new data to be added in this Subject.
-	 * @return {ArrayState<T>} Reference to it self.
+	 * @return {UmbArrayState<T>} Reference to it self.
 	 * @description - Update a item with some new data, requires the ArrayState to be constructed with a getUnique method.
 	 * @example <caption>Example append some data.</caption>
 	 * const data = [
 	 * 	{ key: 1, value: 'foo'},
 	 * 	{ key: 2, value: 'bar'}
 	 * ];
-	 * const myState = new ArrayState(data, (x) => x.key);
+	 * const myState = new UmbArrayState(data, (x) => x.key);
 	 * myState.updateOne(2, {value: 'updated-bar'});
 	 */
 	updateOne(unique: unknown, entry: Partial<T>) {

src/Umbraco.Web.UI.Client/libs/observable-api/basic-state.ts

@@ -2,11 +2,11 @@ import { BehaviorSubject } from 'rxjs';
 
 /**
  * @export
- * @class BasicState
+ * @class UmbBasicState
  * @extends {BehaviorSubject<T>}
  * @description - A RxJS BehaviorSubject this Subject ensures the data is unique, not updating any Observes unless there is an actual change of the value.
  */
-export class BasicState<T> extends BehaviorSubject<T> {
+export class UmbBasicState<T> extends BehaviorSubject<T> {
 	constructor(initialData: T) {
 		super(initialData);
 	}

src/Umbraco.Web.UI.Client/libs/observable-api/boolean-state.ts

@@ -1,12 +1,12 @@
-import { BasicState } from './basic-state';
+import { UmbBasicState } from './basic-state';
 
 /**
  * @export
- * @class BooleanState
+ * @class UmbBooleanState
  * @extends {BehaviorSubject<T>}
  * @description - A RxJS BehaviorSubject this Subject ensures the data is unique, not updating any Observes unless there is an actual change of the value.
  */
-export class BooleanState<T> extends BasicState<T | boolean> {
+export class UmbBooleanState<T> extends UmbBasicState<T | boolean> {
 	constructor(initialData: T | boolean) {
 		super(initialData);
 	}

src/Umbraco.Web.UI.Client/libs/observable-api/class-state.ts

@@ -1,16 +1,16 @@
 import { BehaviorSubject } from 'rxjs';
 
-interface ClassStateData {
-	equal(otherClass: ClassStateData): boolean;
+interface UmbClassStateData {
+	equal(otherClass: UmbClassStateData): boolean;
 }
 
 /**
  * @export
- * @class ClassState
+ * @class UmbClassState
  * @extends {BehaviorSubject<T>}
  * @description - A RxJS BehaviorSubject which can hold class instance which has a equal method to compare in coming instances for changes.
  */
-export class ClassState<T extends ClassStateData | undefined | null> extends BehaviorSubject<T> {
+export class UmbClassState<T extends UmbClassStateData | undefined | null> extends BehaviorSubject<T> {
 	constructor(initialData: T) {
 		super(initialData);
 	}

src/Umbraco.Web.UI.Client/libs/observable-api/deep-state.test.ts

@@ -1,30 +1,27 @@
 import { expect } from '@open-wc/testing';
-import { DeepState } from './deep-state';
+import { UmbDeepState } from './deep-state';
 
-describe('DeepState', () => {
+describe('UmbDeepState', () => {
+	type ObjectType = { key: string; another: string };
 
-	type ObjectType = {key: string, another: string};
-
-	let subject: DeepState<ObjectType>;
+	let subject: UmbDeepState<ObjectType>;
 	let initialData: ObjectType;
 
 	beforeEach(() => {
-		initialData = {key: 'some', another: 'myValue'};
-		subject = new DeepState(initialData);
+		initialData = { key: 'some', another: 'myValue' };
+		subject = new UmbDeepState(initialData);
 	});
 
-
 	it('getValue gives the initial data', () => {
 		expect(subject.value.another).to.be.equal(initialData.another);
 	});
 
 	it('update via next', () => {
-		subject.next({key: 'some', another: 'myNewValue'});
+		subject.next({ key: 'some', another: 'myNewValue' });
 		expect(subject.value.another).to.be.equal('myNewValue');
 	});
 
 	it('replays latests, no matter the amount of subscriptions.', (done) => {
-
 		const observer = subject.asObservable();
 		observer.subscribe((value) => {
 			expect(value).to.be.equal(initialData);
@@ -33,28 +30,24 @@ describe('DeepState', () => {
 			expect(value).to.be.equal(initialData);
 			done();
 		});
-
 	});
 
 	it('use gObservablePart, updates on its specific change.', (done) => {
-
 		let amountOfCallbacks = 0;
 
-		const subObserver = subject.getObservablePart(data => data.another);
+		const subObserver = subject.getObservablePart((data) => data.another);
 		subObserver.subscribe((value) => {
 			amountOfCallbacks++;
-			if(amountOfCallbacks === 1) {
+			if (amountOfCallbacks === 1) {
 				expect(value).to.be.equal('myValue');
 			}
-			if(amountOfCallbacks === 2) {
+			if (amountOfCallbacks === 2) {
 				expect(value).to.be.equal('myNewValue');
 				done();
 			}
 		});
 
-		subject.next({key: 'change_this_first_should_not_trigger_update', another: 'myValue'});
-		subject.next({key: 'some', another: 'myNewValue'});
-
+		subject.next({ key: 'change_this_first_should_not_trigger_update', another: 'myValue' });
+		subject.next({ key: 'some', another: 'myNewValue' });
 	});
-
 });

src/Umbraco.Web.UI.Client/libs/observable-api/deep-state.ts

@@ -7,12 +7,12 @@ import { naiveObjectComparison } from './naive-object-comparison';
 
 /**
  * @export
- * @class DeepState
+ * @class UmbDeepState
  * @extends {BehaviorSubject<T>}
  * @description - A RxJS BehaviorSubject which deepFreezes the data to ensure its not manipulated from any implementations.
  * Additionally the Subject ensures the data is unique, not updating any Observes unless there is an actual change of the content.
  */
-export class DeepState<T> extends BehaviorSubject<T> {
+export class UmbDeepState<T> extends BehaviorSubject<T> {
 	constructor(initialData: T) {
 		super(deepFreeze(initialData));
 	}

src/Umbraco.Web.UI.Client/libs/observable-api/number-state.ts

@@ -1,12 +1,12 @@
-import { BasicState } from './basic-state';
+import { UmbBasicState } from './basic-state';
 
 /**
  * @export
- * @class NumberState
+ * @class UmbNumberState
  * @extends {BehaviorSubject<T>}
  * @description - A RxJS BehaviorSubject this Subject ensures the data is unique, not updating any Observes unless there is an actual change of the value.
  */
-export class NumberState<T> extends BasicState<T | number> {
+export class UmbNumberState<T> extends UmbBasicState<T | number> {
 	constructor(initialData: T | number) {
 		super(initialData);
 	}

src/Umbraco.Web.UI.Client/libs/observable-api/object-state.test.ts

@@ -1,21 +1,18 @@
 import { expect } from '@open-wc/testing';
-import { ObjectState } from './object-state';
+import { UmbObjectState } from './object-state';
 
-describe('ObjectState', () => {
+describe('UmbObjectState', () => {
+	type ObjectType = { key: string; another: string };
 
-	type ObjectType = {key: string, another: string};
-
-	let subject: ObjectState<ObjectType>;
+	let subject: UmbObjectState<ObjectType>;
 	let initialData: ObjectType;
 
 	beforeEach(() => {
-		initialData = {key: 'some', another: 'myValue'};
-		subject = new ObjectState(initialData);
+		initialData = { key: 'some', another: 'myValue' };
+		subject = new UmbObjectState(initialData);
 	});
 
-
 	it('replays latests, no matter the amount of subscriptions.', (done) => {
-
 		const observer = subject.asObservable();
 		observer.subscribe((value) => {
 			expect(value).to.be.equal(initialData);
@@ -24,28 +21,24 @@ describe('ObjectState', () => {
 			expect(value).to.be.equal(initialData);
 			done();
 		});
-
 	});
 
 	it('use getObservablePart, updates on its specific change.', (done) => {
-
 		let amountOfCallbacks = 0;
 
-		const subObserver = subject.getObservablePart(data => data.another);
+		const subObserver = subject.getObservablePart((data) => data.another);
 		subObserver.subscribe((value) => {
 			amountOfCallbacks++;
-			if(amountOfCallbacks === 1) {
+			if (amountOfCallbacks === 1) {
 				expect(value).to.be.equal('myValue');
 			}
-			if(amountOfCallbacks === 2) {
+			if (amountOfCallbacks === 2) {
 				expect(value).to.be.equal('myNewValue');
 				done();
 			}
 		});
 
-		subject.update({key: 'change_this_first_should_not_trigger_update'});
-		subject.update({another: 'myNewValue'});
-
+		subject.update({ key: 'change_this_first_should_not_trigger_update' });
+		subject.update({ another: 'myNewValue' });
 	});
-
 });

src/Umbraco.Web.UI.Client/libs/observable-api/object-state.ts

@@ -1,23 +1,23 @@
-import { DeepState } from './deep-state';
+import { UmbDeepState } from './deep-state';
 
 /**
  * @export
- * @class ObjectState
- * @extends {DeepState<T>}
+ * @class UmbObjectState
+ * @extends {UmbDeepState<T>}
  * @description - A RxJS BehaviorSubject which deepFreezes the object-data to ensure its not manipulated from any implementations.
  * Additionally the Subject ensures the data is unique, not updating any Observes unless there is an actual change of the content.
  *
- * The ObjectState provides methods to append data when the data is an Object.
+ * The UmbObjectState provides methods to append data when the data is an Object.
  */
-export class ObjectState<T> extends DeepState<T> {
+export class UmbObjectState<T> extends UmbDeepState<T> {
 	/**
 	 * @method update
 	 * @param {Partial<T>} partialData - A object containing some of the data to update in this Subject.
 	 * @description - Append some new data to this Object.
-	 * @return {ObjectState<T>} Reference to it self.
+	 * @return {UmbObjectState<T>} Reference to it self.
 	 * @example <caption>Example append some data.</caption>
 	 * const data = {key: 'myKey', value: 'myInitialValue'};
-	 * const myState = new ObjectState(data);
+	 * const myState = new UmbObjectState(data);
 	 * myState.update({value: 'myNewValue'});
 	 */
 	update(partialData: Partial<T>) {

src/Umbraco.Web.UI.Client/libs/observable-api/partial-update-frozen-array.function.ts

@@ -5,7 +5,7 @@
  * @param {(mappable: T) => R} mappingFunction - Method to return the part for this Observable to return.
  * @param {(previousResult: R, currentResult: R) => boolean} [memoizationFunction] - Method to Compare if the data has changed. Should return true when data is different.
  * @description - Creates a RxJS Observable from RxJS Subject.
- * @example <caption>Example append new entry for a ArrayState or a part of DeepState/ObjectState it which is an array. Where the key is unique and the item will be updated if matched with existing.</caption>
+ * @example <caption>Example append new entry for a ArrayState or a part of UmbDeepState/UmbObjectState it which is an array. Where the key is unique and the item will be updated if matched with existing.</caption>
  * const partialEntry = {value: 'myValue'};
  * const newDataSet = partialUpdateFrozenArray(mySubject.getValue(), partialEntry, x => x.key === 'myKey');
  * mySubject.next(newDataSet);

src/Umbraco.Web.UI.Client/libs/observable-api/string-state.ts

@@ -1,12 +1,12 @@
-import { BasicState } from './basic-state';
+import { UmbBasicState } from './basic-state';
 
 /**
  * @export
- * @class StringState
- * @extends {BasicState<T>}
+ * @class UmbStringState
+ * @extends {UmbBasicState<T>}
  * @description - A RxJS BehaviorSubject this Subject ensures the data is unique, not updating any Observes unless there is an actual change of the value.
  */
-export class StringState<T> extends BasicState<T | string> {
+export class UmbStringState<T> extends UmbBasicState<T | string> {
 	constructor(initialData: T | string) {
 		super(initialData);
 	}

src/Umbraco.Web.UI.Client/libs/picker-input/index.ts

@@ -0,0 +1 @@
+export * from './picker-input.context';

src/Umbraco.Web.UI.Client/libs/picker-input/picker-input.context.ts

@@ -1,6 +1,6 @@
 import { UmbItemRepository } from '@umbraco-cms/backoffice/repository';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { ArrayState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { createExtensionClass, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 import {
 	UMB_CONFIRM_MODAL,
@@ -12,7 +12,7 @@ import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-ap
 import { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
 
-export class UmbPickerContext<ItemType extends ItemResponseModelBaseModel> {
+export class UmbPickerInputContext<ItemType extends ItemResponseModelBaseModel> {
 	host: UmbControllerHostElement;
 	modalAlias: string | UmbModalToken;
 	repository?: UmbItemRepository<ItemType>;
@@ -20,10 +20,10 @@ export class UmbPickerContext<ItemType extends ItemResponseModelBaseModel> {
 
 	public modalContext?: UmbModalContext;
 
-	#selection = new ArrayState<string>([]);
+	#selection = new UmbArrayState<string>([]);
 	selection = this.#selection.asObservable();
 
-	#selectedItems = new ArrayState<ItemType>([]);
+	#selectedItems = new UmbArrayState<ItemType>([]);
 	selectedItems = this.#selectedItems.asObservable();
 
 	#selectedItemsObserver?: UmbObserverController<ItemType[]>;
@@ -75,6 +75,7 @@ export class UmbPickerContext<ItemType extends ItemResponseModelBaseModel> {
 	}
 
 	// TODO: revisit this method. How do we best pass picker data?
+	// If modalAlias is a ModalToken, then via TS, we should get the correct type for pickerData. Otherwise fallback to unknown.
 	openPicker(pickerData?: any) {
 		if (!this.modalContext) throw new Error('Modal context is not initialized');
 

src/Umbraco.Web.UI.Client/libs/picker/index.ts

@@ -1 +0,0 @@
-export * from './picker.context';

src/Umbraco.Web.UI.Client/libs/store/entity-tree-store.ts

@@ -1,5 +1,5 @@
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase, UmbTreeStore } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
@@ -14,7 +14,7 @@ export class UmbEntityTreeStore
 	implements UmbTreeStore<EntityTreeItemResponseModel>
 {
 	constructor(host: UmbControllerHostElement, storeAlias: string) {
-		super(host, storeAlias, new ArrayState<EntityTreeItemResponseModel>([], (x) => x.id));
+		super(host, storeAlias, new UmbArrayState<EntityTreeItemResponseModel>([], (x) => x.id));
 	}
 
 	/**

src/Umbraco.Web.UI.Client/libs/store/file-system-tree.store.ts

@@ -1,5 +1,5 @@
 import { FileSystemTreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
-import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase, UmbTreeStore } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
@@ -14,7 +14,7 @@ export class UmbFileSystemTreeStore
 	implements UmbTreeStore<FileSystemTreeItemPresentationModel>
 {
 	constructor(host: UmbControllerHostElement, storeAlias: string) {
-		super(host, storeAlias, new ArrayState<FileSystemTreeItemPresentationModel>([], (x) => x.path));
+		super(host, storeAlias, new UmbArrayState<FileSystemTreeItemPresentationModel>([], (x) => x.path));
 	}
 
 	/**

src/Umbraco.Web.UI.Client/libs/store/store-base.ts

@@ -1,16 +1,16 @@
 import { UmbStore } from './store.interface';
 import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 
 // TODO: Make a Store interface?
 export class UmbStoreBase<StoreItemType = any> implements UmbStore<StoreItemType> {
 	protected _host: UmbControllerHostElement;
-	protected _data: ArrayState<StoreItemType>;
+	protected _data: UmbArrayState<StoreItemType>;
 
 	public readonly storeAlias: string;
 
-	constructor(_host: UmbControllerHostElement, storeAlias: string, data: ArrayState<StoreItemType>) {
+	constructor(_host: UmbControllerHostElement, storeAlias: string, data: UmbArrayState<StoreItemType>) {
 		this._host = _host;
 		this.storeAlias = storeAlias;
 		this._data = data;

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/document-blueprint.detail.store.ts

@@ -1,6 +1,6 @@
 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 { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
@@ -15,7 +15,9 @@ export class UmbDocumentBlueprintStore extends UmbStoreBase {
 		super(
 			host,
 			UMB_DOCUMENT_BLUEPRINT_STORE_CONTEXT_TOKEN.toString(),
-			new ArrayState<DocumentBlueprintDetails>([], (x) => x.id)
+			// TODO: use the right type:
+
+			new UmbArrayState<DocumentBlueprintDetails>([], (x) => x.id)
 		);
 	}
 

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.repository.ts

@@ -1,4 +1,4 @@
-import { DocumentTypeTreeServerDataSource } from './sources/document-type.tree.server.data';
+import { UmbDocumentTypeTreeServerDataSource } 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';
@@ -27,7 +27,7 @@ export class UmbDocumentTypeRepository implements UmbTreeRepository<ItemType>, U
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
-		this.#treeSource = new DocumentTypeTreeServerDataSource(this.#host);
+		this.#treeSource = new UmbDocumentTypeTreeServerDataSource(this.#host);
 		this.#detailDataSource = new UmbDocumentTypeServerDataSource(this.#host);
 
 		this.#init = Promise.all([

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/document-type.store.ts

@@ -1,6 +1,6 @@
 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 { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
@@ -20,7 +20,7 @@ export class UmbDocumentTypeStore extends UmbStoreBase {
 		super(
 			host,
 			UMB_DOCUMENT_TYPE_STORE_CONTEXT_TOKEN.toString(),
-			new ArrayState<DocumentTypeResponseModel>([], (x) => x.id)
+			new UmbArrayState<DocumentTypeResponseModel>([], (x) => x.id)
 		);
 	}
 

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/repository/sources/document-type.tree.server.data.ts

@@ -6,10 +6,10 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 /**
  * A data source for the Document tree that fetches data from the server
  * @export
- * @class DocumentTreeServerDataSource
- * @implements {DocumentTreeDataSource}
+ * @class UmbDocumentTypeTreeServerDataSource
+ * @implements {UmbTreeDataSource}
  */
-export class DocumentTypeTreeServerDataSource implements UmbTreeDataSource {
+export class UmbDocumentTypeTreeServerDataSource implements UmbTreeDataSource {
 	#host: UmbControllerHostElement;
 
 	// TODO: how do we handle trashed items?
@@ -42,9 +42,9 @@ export class DocumentTypeTreeServerDataSource implements UmbTreeDataSource {
 	}
 
 	/**
-	 * Creates an instance of DocumentTreeServerDataSource.
+	 * Creates an instance of UmbDocumentTypeTreeServerDataSource.
 	 * @param {UmbControllerHostElement} host
-	 * @memberof DocumentTreeServerDataSource
+	 * @memberof UmbDocumentTypeTreeServerDataSource
 	 */
 	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
@@ -53,7 +53,7 @@ export class DocumentTypeTreeServerDataSource implements UmbTreeDataSource {
 	/**
 	 * Fetches the root items for the tree from the server
 	 * @return {*}
-	 * @memberof DocumentTreeServerDataSource
+	 * @memberof UmbDocumentTypeTreeServerDataSource
 	 */
 	async getRootItems() {
 		return tryExecuteAndNotify(this.#host, DocumentTypeResource.getTreeDocumentTypeRoot({}));
@@ -63,7 +63,7 @@ export class DocumentTypeTreeServerDataSource implements UmbTreeDataSource {
 	 * Fetches the children of a given parent id from the server
 	 * @param {(string | null)} parentId
 	 * @return {*}
-	 * @memberof DocumentTreeServerDataSource
+	 * @memberof UmbDocumentTypeTreeServerDataSource
 	 */
 	async getChildrenOf(parentId: string | null) {
 		if (!parentId) {
@@ -83,7 +83,7 @@ export class DocumentTypeTreeServerDataSource implements UmbTreeDataSource {
 	 * Fetches the items for the given ids from the server
 	 * @param {Array<string>} ids
 	 * @return {*}
-	 * @memberof DocumentTreeServerDataSource
+	 * @memberof UmbDocumentTypeTreeServerDataSource
 	 */
 	async getItems(ids: Array<string>) {
 		if (ids) {

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.repository.ts

@@ -1,7 +1,7 @@
 import { UmbDocumentServerDataSource } from './sources/document.server.data';
 import { UmbDocumentStore, UMB_DOCUMENT_STORE_CONTEXT_TOKEN } from './document.store';
 import { UmbDocumentTreeStore, UMB_DOCUMENT_TREE_STORE_CONTEXT_TOKEN } from './document.tree.store';
-import { DocumentTreeServerDataSource } from './sources/document.tree.server.data';
+import { UmbDocumentTreeServerDataSource } from './sources/document.tree.server.data';
 import type { UmbTreeDataSource, UmbTreeRepository, UmbDetailRepository } from '@umbraco-cms/backoffice/repository';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
@@ -32,7 +32,7 @@ export class UmbDocumentRepository implements UmbTreeRepository<ItemType>, UmbDe
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
-		this.#treeSource = new DocumentTreeServerDataSource(this.#host);
+		this.#treeSource = new UmbDocumentTreeServerDataSource(this.#host);
 		this.#detailDataSource = new UmbDocumentServerDataSource(this.#host);
 
 		this.#init = Promise.all([

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/document.store.ts

@@ -1,6 +1,6 @@
 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 { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
@@ -17,7 +17,7 @@ export class UmbDocumentStore extends UmbStoreBase {
 	 * @memberof UmbDocumentDetailStore
 	 */
 	constructor(host: UmbControllerHostElement) {
-		super(host, UMB_DOCUMENT_STORE_CONTEXT_TOKEN.toString(), new ArrayState<DocumentResponseModel>([], (x) => x.id));
+		super(host, UMB_DOCUMENT_STORE_CONTEXT_TOKEN.toString(), new UmbArrayState<DocumentResponseModel>([], (x) => x.id));
 	}
 
 	/**

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/repository/sources/document.tree.server.data.ts

@@ -6,10 +6,10 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 /**
  * A data source for the Document tree that fetches data from the server
  * @export
- * @class DocumentTreeServerDataSource
- * @implements {DocumentTreeDataSource}
+ * @class UmbDocumentTreeServerDataSource
+ * @implements {UmbTreeDataSource}
  */
-export class DocumentTreeServerDataSource implements UmbTreeDataSource {
+export class UmbDocumentTreeServerDataSource implements UmbTreeDataSource {
 	#host: UmbControllerHostElement;
 
 	// TODO: how do we handle trashed items?
@@ -42,9 +42,9 @@ export class DocumentTreeServerDataSource implements UmbTreeDataSource {
 	}
 
 	/**
-	 * Creates an instance of DocumentTreeServerDataSource.
+	 * Creates an instance of UmbDocumentTreeServerDataSource.
 	 * @param {UmbControllerHostElement} host
-	 * @memberof DocumentTreeServerDataSource
+	 * @memberof UmbDocumentTreeServerDataSource
 	 */
 	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
@@ -53,7 +53,7 @@ export class DocumentTreeServerDataSource implements UmbTreeDataSource {
 	/**
 	 * Fetches the root items for the tree from the server
 	 * @return {*}
-	 * @memberof DocumentTreeServerDataSource
+	 * @memberof UmbDocumentTreeServerDataSource
 	 */
 	async getRootItems() {
 		return tryExecuteAndNotify(this.#host, DocumentResource.getTreeDocumentRoot({}));
@@ -63,7 +63,7 @@ export class DocumentTreeServerDataSource implements UmbTreeDataSource {
 	 * Fetches the children of a given parent id from the server
 	 * @param {(string | null)} parentId
 	 * @return {*}
-	 * @memberof DocumentTreeServerDataSource
+	 * @memberof UmbDocumentTreeServerDataSource
 	 */
 	async getChildrenOf(parentId: string | null) {
 		if (!parentId) {
@@ -83,7 +83,7 @@ export class DocumentTreeServerDataSource implements UmbTreeDataSource {
 	 * Fetches the items for the given ids from the server
 	 * @param {Array<string>} ids
 	 * @return {*}
-	 * @memberof DocumentTreeServerDataSource
+	 * @memberof UmbDocumentTreeServerDataSource
 	 */
 	async getItems(ids: Array<string>) {
 		if (!ids) {

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/document-workspace.context.ts

@@ -6,7 +6,11 @@ import { UmbVariantId } from '../../../shared/variants/variant-id.class';
 import { UmbWorkspacePropertyStructureManager } from '../../../shared/components/workspace/workspace-context/workspace-structure-manager.class';
 import { UmbWorkspaceSplitViewManager } from '../../../shared/components/workspace/workspace-context/workspace-split-view-manager.class';
 import type { CreateDocumentRequestModel, DocumentResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { partialUpdateFrozenArray, ObjectState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import {
+	partialUpdateFrozenArray,
+	UmbObjectState,
+	UmbObserverController,
+} from '@umbraco-cms/backoffice/observable-api';
 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?
@@ -22,12 +26,12 @@ export class UmbDocumentWorkspaceContext
 	 * For now lets not share this publicly as it can become confusing.
 	 * TODO: Use this to compare, for variants with changes.
 	 */
-	#document = new ObjectState<EntityType | undefined>(undefined);
+	#document = new UmbObjectState<EntityType | undefined>(undefined);
 
 	/**
 	 * The document is the current state/draft version of the document.
 	 */
-	#draft = new ObjectState<EntityType | undefined>(undefined);
+	#draft = new UmbObjectState<EntityType | undefined>(undefined);
 	readonly unique = this.#draft.getObservablePart((data) => data?.id);
 	readonly documentTypeKey = this.#draft.getObservablePart((data) => data?.contentTypeId);
 

src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.detail.store.ts

@@ -1,7 +1,7 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import type { MediaTypeDetails } from '@umbraco-cms/backoffice/models';
 
 /**
@@ -12,7 +12,7 @@ import type { MediaTypeDetails } from '@umbraco-cms/backoffice/models';
  */
 export class UmbMediaTypeStore extends UmbStoreBase {
 	constructor(host: UmbControllerHostElement) {
-		super(host, UMB_MEDIA_TYPE_STORE_CONTEXT_TOKEN.toString(), new ArrayState<MediaTypeDetails>([], (x) => x.id));
+		super(host, UMB_MEDIA_TYPE_STORE_CONTEXT_TOKEN.toString(), new UmbArrayState<MediaTypeDetails>([], (x) => x.id));
 	}
 
 	append(mediaType: MediaTypeDetails) {

src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/media-type.repository.ts

@@ -1,7 +1,7 @@
 import { UmbMediaTypeTreeStore, UMB_MEDIA_TYPE_TREE_STORE_CONTEXT_TOKEN } from './media-type.tree.store';
 import { UmbMediaTypeDetailServerDataSource } from './sources/media-type.detail.server.data';
 import { UmbMediaTypeStore, UMB_MEDIA_TYPE_STORE_CONTEXT_TOKEN } from './media-type.detail.store';
-import { MediaTypeTreeServerDataSource } from './sources/media-type.tree.server.data';
+import { UmbMediaTypeTreeServerDataSource } from './sources/media-type.tree.server.data';
 import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
@@ -26,7 +26,7 @@ export class UmbMediaTypeRepository implements UmbTreeRepository {
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
-		this.#treeSource = new MediaTypeTreeServerDataSource(this.#host);
+		this.#treeSource = new UmbMediaTypeTreeServerDataSource(this.#host);
 		this.#detailSource = new UmbMediaTypeDetailServerDataSource(this.#host);
 
 		this.#init = Promise.all([

src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/repository/sources/media-type.tree.server.data.ts

@@ -6,10 +6,10 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 /**
  * A data source for the MediaType tree that fetches data from the server
  * @export
- * @class MediaTypeTreeServerDataSource
- * @implements {MediaTypeTreeDataSource}
+ * @class UmbMediaTypeTreeServerDataSource
+ * @implements {UmbTreeDataSource}
  */
-export class MediaTypeTreeServerDataSource implements UmbTreeDataSource {
+export class UmbMediaTypeTreeServerDataSource implements UmbTreeDataSource {
 	#host: UmbControllerHostElement;
 
 	/**
@@ -24,7 +24,7 @@ export class MediaTypeTreeServerDataSource implements UmbTreeDataSource {
 	/**
 	 * Fetches the root items for the tree from the server
 	 * @return {*}
-	 * @memberof MediaTypeTreeServerDataSource
+	 * @memberof UmbMediaTypeTreeServerDataSource
 	 */
 	async getRootItems() {
 		return tryExecuteAndNotify(this.#host, MediaTypeResource.getTreeMediaTypeRoot({}));
@@ -34,7 +34,7 @@ export class MediaTypeTreeServerDataSource implements UmbTreeDataSource {
 	 * Fetches the children of a given parent id from the server
 	 * @param {(string | null)} parentId
 	 * @return {*}
-	 * @memberof MediaTypeTreeServerDataSource
+	 * @memberof UmbMediaTypeTreeServerDataSource
 	 */
 	async getChildrenOf(parentId: string | null) {
 		if (!parentId) {
@@ -54,7 +54,7 @@ export class MediaTypeTreeServerDataSource implements UmbTreeDataSource {
 	 * Fetches the items for the given ids from the server
 	 * @param {Array<string>} ids
 	 * @return {*}
-	 * @memberof MediaTypeTreeServerDataSource
+	 * @memberof UmbMediaTypeTreeServerDataSource
 	 */
 	async getItems(ids: Array<string>) {
 		if (!ids || ids.length === 0) {

src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.context.ts

@@ -2,7 +2,7 @@ import { UmbWorkspaceContext } from '../../../shared/components/workspace/worksp
 import { UmbMediaTypeRepository } from '../repository/media-type.repository';
 import { UmbEntityWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import type { MediaTypeDetails } from '@umbraco-cms/backoffice/models';
 
 type EntityType = MediaTypeDetails;
@@ -10,7 +10,7 @@ export class UmbWorkspaceMediaTypeContext
 	extends UmbWorkspaceContext<UmbMediaTypeRepository, EntityType>
 	implements UmbEntityWorkspaceContextInterface<EntityType | undefined>
 {
-	#data = new ObjectState<MediaTypeDetails | undefined>(undefined);
+	#data = new UmbObjectState<MediaTypeDetails | undefined>(undefined);
 	data = this.#data.asObservable();
 	name = this.#data.getObservablePart((data) => data?.name);
 

src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts

@@ -1,5 +1,5 @@
 import type { MediaDetails } from '../';
-import { MediaTreeServerDataSource } from './sources/media.tree.server.data';
+import { UmbMediaTreeServerDataSource } 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';
@@ -36,7 +36,7 @@ export class UmbMediaRepository
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
-		this.#treeSource = new MediaTreeServerDataSource(this.#host);
+		this.#treeSource = new UmbMediaTreeServerDataSource(this.#host);
 		this.#detailDataSource = new UmbMediaDetailServerDataSource(this.#host);
 
 		new UmbContextConsumerController(this.#host, UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN, (instance) => {

src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.store.ts

@@ -1,6 +1,6 @@
 import type { MediaDetails } from '../';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
@@ -17,7 +17,7 @@ export class UmbMediaStore extends UmbStoreBase {
 	 * @memberof UmbMediaStore
 	 */
 	constructor(host: UmbControllerHostElement) {
-		super(host, UMB_MEDIA_STORE_CONTEXT_TOKEN.toString(), new ArrayState<MediaDetails>([], (x) => x.id));
+		super(host, UMB_MEDIA_STORE_CONTEXT_TOKEN.toString(), new UmbArrayState<MediaDetails>([], (x) => x.id));
 	}
 
 	/**

src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.tree.store.ts

@@ -1,6 +1,6 @@
 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 { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
@@ -13,7 +13,7 @@ export const UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbMediaTr
  * @description - Tree Data Store for Media
  */
 export class UmbMediaTreeStore extends UmbEntityTreeStore {
-	#data = new ArrayState<EntityTreeItemResponseModel>([], (x) => x.id);
+	#data = new UmbArrayState<EntityTreeItemResponseModel>([], (x) => x.id);
 
 	/**
 	 * Creates an instance of UmbMediaTreeStore.

src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/sources/media.tree.server.data.ts

@@ -6,10 +6,10 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 /**
  * A data source for the Media tree that fetches data from the server
  * @export
- * @class MediaTreeServerDataSource
- * @implements {MediaTreeDataSource}
+ * @class UmbMediaTreeServerDataSource
+ * @implements {UmbTreeDataSource}
  */
-export class MediaTreeServerDataSource implements UmbTreeDataSource {
+export class UmbMediaTreeServerDataSource implements UmbTreeDataSource {
 	#host: UmbControllerHostElement;
 
 	// TODO: how do we handle trashed items?
@@ -42,9 +42,9 @@ export class MediaTreeServerDataSource implements UmbTreeDataSource {
 	}
 
 	/**
-	 * Creates an instance of MediaTreeServerDataSource.
+	 * Creates an instance of UmbMediaTreeServerDataSource.
 	 * @param {UmbControllerHostElement} host
-	 * @memberof MediaTreeServerDataSource
+	 * @memberof UmbMediaTreeServerDataSource
 	 */
 	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
@@ -53,7 +53,7 @@ export class MediaTreeServerDataSource implements UmbTreeDataSource {
 	/**
 	 * Fetches the root items for the tree from the server
 	 * @return {*}
-	 * @memberof MediaTreeServerDataSource
+	 * @memberof UmbMediaTreeServerDataSource
 	 */
 	async getRootItems() {
 		return tryExecuteAndNotify(this.#host, MediaResource.getTreeMediaRoot({}));
@@ -63,7 +63,7 @@ export class MediaTreeServerDataSource implements UmbTreeDataSource {
 	 * Fetches the children of a given parent id from the server
 	 * @param {(string | null)} parentId
 	 * @return {*}
-	 * @memberof MediaTreeServerDataSource
+	 * @memberof UmbMediaTreeServerDataSource
 	 */
 	async getChildrenOf(parentId: string | null) {
 		if (!parentId) {
@@ -83,7 +83,7 @@ export class MediaTreeServerDataSource implements UmbTreeDataSource {
 	 * Fetches the items for the given ids from the server
 	 * @param {Array<string>} ids
 	 * @return {*}
-	 * @memberof MediaTreeServerDataSource
+	 * @memberof UmbMediaTreeServerDataSource
 	 */
 	async getItems(ids: Array<string>) {
 		if (!ids) {

src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.context.ts

@@ -2,7 +2,7 @@ import { UmbWorkspaceContext } from '../../../shared/components/workspace/worksp
 import { UmbMediaRepository } from '../repository/media.repository';
 import type { MediaDetails } from '../';
 import type { UmbEntityWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
-import { appendToFrozenArray, ObjectState } from '@umbraco-cms/backoffice/observable-api';
+import { appendToFrozenArray, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 type EntityType = MediaDetails;
@@ -10,7 +10,7 @@ export class UmbMediaWorkspaceContext
 	extends UmbWorkspaceContext<UmbMediaRepository, EntityType>
 	implements UmbEntityWorkspaceContextInterface<EntityType | undefined>
 {
-	#data = new ObjectState<EntityType | undefined>(undefined);
+	#data = new UmbObjectState<EntityType | undefined>(undefined);
 	data = this.#data.asObservable();
 	name = this.#data.getObservablePart((data) => data?.name);
 

src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.repository.ts

@@ -1,7 +1,7 @@
 import { UmbMemberGroupTreeStore, UMB_MEMBER_GROUP_TREE_STORE_CONTEXT_TOKEN } from './member-group.tree.store';
 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 { UmbMemberGroupTreeServerDataSource } from './sources/member-group.tree.server.data';
 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';
@@ -26,7 +26,7 @@ export class UmbMemberGroupRepository implements UmbTreeRepository, UmbDetailRep
 	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 		// TODO: figure out how spin up get the correct data source
-		this.#treeSource = new MemberGroupTreeServerDataSource(this.#host);
+		this.#treeSource = new UmbMemberGroupTreeServerDataSource(this.#host);
 		this.#detailSource = new UmbMemberGroupDetailServerDataSource(this.#host);
 
 		new UmbContextConsumerController(this.#host, UMB_MEMBER_GROUP_TREE_STORE_CONTEXT_TOKEN, (instance) => {

src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/member-group.store.ts

@@ -1,6 +1,6 @@
 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 { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 
@@ -11,8 +11,14 @@ import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
  * @description - Data Store for Member Groups
  */
 export class UmbMemberGroupStore extends UmbStoreBase {
+	#data = new UmbArrayState<MemberGroupDetails>([], (x) => x.id);
+
 	constructor(host: UmbControllerHostElement) {
-		super(host, UMB_MEMBER_GROUP_STORE_CONTEXT_TOKEN.toString(), new ArrayState<MemberGroupDetails>([], (x) => x.id));
+		super(
+			host,
+			UMB_MEMBER_GROUP_STORE_CONTEXT_TOKEN.toString(),
+			new UmbArrayState<MemberGroupDetails>([], (x) => x.id)
+		);
 	}
 
 	append(memberGroup: MemberGroupDetails) {

src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/repository/sources/member-group.tree.server.data.ts

@@ -6,16 +6,16 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 /**
  * A data source for the Member Group tree that fetches data from the server
  * @export
- * @class MemberGroupTreeServerDataSource
- * @implements {MemberGroupTreeDataSource}
+ * @class UmbMemberGroupTreeServerDataSource
+ * @implements {UmbTreeDataSource}
  */
-export class MemberGroupTreeServerDataSource implements UmbTreeDataSource {
+export class UmbMemberGroupTreeServerDataSource implements UmbTreeDataSource {
 	#host: UmbControllerHostElement;
 
 	/**
-	 * Creates an instance of MemberGroupTreeServerDataSource.
+	 * Creates an instance of UmbMemberGroupTreeServerDataSource.
 	 * @param {UmbControllerHostElement} host
-	 * @memberof MemberGroupTreeServerDataSource
+	 * @memberof UmbMemberGroupTreeServerDataSource
 	 */
 	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
@@ -24,7 +24,7 @@ export class MemberGroupTreeServerDataSource implements UmbTreeDataSource {
 	/**
 	 * Fetches the root items for the tree from the server
 	 * @return {*}
-	 * @memberof MemberGroupTreeServerDataSource
+	 * @memberof UmbMemberGroupTreeServerDataSource
 	 */
 	async getRootItems() {
 		return tryExecuteAndNotify(this.#host, MemberGroupResource.getTreeMemberGroupRoot({}));
@@ -34,7 +34,7 @@ export class MemberGroupTreeServerDataSource implements UmbTreeDataSource {
 	 * Fetches the children of a given parent id from the server
 	 * @param {(string | null)} parentId
 	 * @return {*}
-	 * @memberof MemberGroupTreeServerDataSource
+	 * @memberof UmbMemberGroupTreeServerDataSource
 	 */
 	async getChildrenOf(parentId: string | null) {
 		// Not implemented for this tree
@@ -45,7 +45,7 @@ export class MemberGroupTreeServerDataSource implements UmbTreeDataSource {
 	 * Fetches the items for the given ids from the server
 	 * @param {Array<string>} ids
 	 * @return {*}
-	 * @memberof MemberGroupTreeServerDataSource
+	 * @memberof UmbMemberGroupTreeServerDataSource
 	 */
 	async getItems(ids: Array<string>) {
 		if (!ids || ids.length === 0) {

src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.context.ts

@@ -3,14 +3,14 @@ import { UmbMemberGroupRepository } from '../repository/member-group.repository'
 import { UmbEntityWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
 import type { MemberGroupDetails } from '@umbraco-cms/backoffice/models';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 
 type EntityType = MemberGroupDetails;
 export class UmbWorkspaceMemberGroupContext
 	extends UmbWorkspaceContext<UmbMemberGroupRepository, EntityType>
 	implements UmbEntityWorkspaceContextInterface<EntityType | undefined>
 {
-	#data = new ObjectState<EntityType | undefined>(undefined);
+	#data = new UmbObjectState<EntityType | undefined>(undefined);
 	data = this.#data.asObservable();
 	name = this.#data.getObservablePart((data) => data?.name);
 

src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.repository.ts

@@ -1,4 +1,4 @@
-import { MemberTypeTreeServerDataSource } from './sources/member-type.tree.server.data';
+import { UmbMemberTypeTreeServerDataSource } from './sources/member-type.tree.server.data';
 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';
@@ -30,7 +30,7 @@ export class UmbMemberTypeRepository implements UmbTreeRepository<TreeItemType>,
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
-		this.#treeSource = new MemberTypeTreeServerDataSource(this.#host);
+		this.#treeSource = new UmbMemberTypeTreeServerDataSource(this.#host);
 		this.#detailSource = new UmbMemberTypeDetailServerDataSource(this.#host);
 
 		this.#init = Promise.all([

src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/member-type.store.ts

@@ -1,7 +1,7 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import type { MemberTypeDetails } from '@umbraco-cms/backoffice/models';
 
 /**
@@ -12,7 +12,7 @@ import type { MemberTypeDetails } from '@umbraco-cms/backoffice/models';
  */
 export class UmbMemberTypeStore extends UmbStoreBase {
 	constructor(host: UmbControllerHostElement) {
-		super(host, UMB_MEMBER_TYPE_STORE_CONTEXT_TOKEN.toString(), new ArrayState<MemberTypeDetails>([], (x) => x.id));
+		super(host, UMB_MEMBER_TYPE_STORE_CONTEXT_TOKEN.toString(), new UmbArrayState<MemberTypeDetails>([], (x) => x.id));
 	}
 
 	append(MemberType: MemberTypeDetails) {

src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/repository/sources/member-type.tree.server.data.ts

@@ -6,10 +6,10 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 /**
  * A data source for the MemberType tree that fetches data from the server
  * @export
- * @class MemberTypeTreeServerDataSource
- * @implements {MemberTypeTreeDataSource}
+ * @class UmbMemberTypeTreeServerDataSource
+ * @implements {UmbTreeDataSource}
  */
-export class MemberTypeTreeServerDataSource implements UmbTreeDataSource {
+export class UmbMemberTypeTreeServerDataSource implements UmbTreeDataSource {
 	#host: UmbControllerHostElement;
 
 	/**
@@ -24,7 +24,7 @@ export class MemberTypeTreeServerDataSource implements UmbTreeDataSource {
 	/**
 	 * Fetches the root items for the tree from the server
 	 * @return {*}
-	 * @memberof MemberTypeTreeServerDataSource
+	 * @memberof UmbMemberTypeTreeServerDataSource
 	 */
 	async getRootItems() {
 		return tryExecuteAndNotify(this.#host, MemberTypeResource.getTreeMemberTypeRoot({}));
@@ -34,7 +34,7 @@ export class MemberTypeTreeServerDataSource implements UmbTreeDataSource {
 	 * Fetches the children of a given parent id from the server
 	 * @param {(string | null)} parentId
 	 * @return {*}
-	 * @memberof MemberTypeTreeServerDataSource
+	 * @memberof UmbMemberTypeTreeServerDataSource
 	 */
 	async getChildrenOf(parentId: string | null) {
 		const error: ProblemDetailsModel = { title: 'Not implemented for Member Type' };
@@ -45,7 +45,7 @@ export class MemberTypeTreeServerDataSource implements UmbTreeDataSource {
 	 * Fetches the items for the given ids from the server
 	 * @param {Array<string>} ids
 	 * @return {*}
-	 * @memberof MemberTypeTreeServerDataSource
+	 * @memberof UmbMemberTypeTreeServerDataSource
 	 */
 	async getItems(ids: Array<string>) {
 		if (!ids || ids.length === 0) {

src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace.context.ts

@@ -1,7 +1,7 @@
 import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context';
 import { UmbMemberTypeRepository } from '../repository/member-type.repository';
 import { UmbEntityWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
-import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 // TODO => use correct tpye
@@ -11,7 +11,7 @@ export class UmbMemberTypeWorkspaceContext
 	extends UmbWorkspaceContext<UmbMemberTypeRepository, EntityType>
 	implements UmbEntityWorkspaceContextInterface<EntityType | undefined>
 {
-	#data = new ObjectState<EntityType | undefined>(undefined);
+	#data = new UmbObjectState<EntityType | undefined>(undefined);
 	name = this.#data.getObservablePart((data) => data?.name);
 
 	constructor(host: UmbControllerHostElement) {

src/Umbraco.Web.UI.Client/src/backoffice/members/members/member.detail.store.ts

@@ -2,7 +2,7 @@ import { Observable } from 'rxjs';
 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 { UmbArrayState, createObservablePart } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbEntityDetailStore, UmbStoreBase } from '@umbraco-cms/backoffice/store';
 
@@ -13,10 +13,8 @@ import { UmbEntityDetailStore, UmbStoreBase } from '@umbraco-cms/backoffice/stor
  * @description - Data Store for Members
  */
 export class UmbMemberStore extends UmbStoreBase implements UmbEntityDetailStore<MemberDetails> {
-	public groups = this._data.asObservable();
-
 	constructor(private host: UmbControllerHostElement) {
-		super(host, UMB_MEMBER_STORE_CONTEXT_TOKEN.toString(), new ArrayState<MemberDetails>([], (x) => x.id));
+		super(host, UMB_MEMBER_STORE_CONTEXT_TOKEN.toString(), new UmbArrayState<MemberDetails>([], (x) => x.id));
 	}
 
 	getScaffold(entityType: string, parentId: string | null) {

src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.repository.ts

@@ -1,5 +1,5 @@
 import { UmbMemberTreeStore, UMB_MEMBER_TREE_STORE_CONTEXT_TOKEN } from './member.tree.store';
-import { MemberTreeServerDataSource } from './sources/member.tree.server.data';
+import { UmbMemberTreeServerDataSource } from './sources/member.tree.server.data';
 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';
@@ -8,7 +8,7 @@ import { ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
 
 export class UmbMemberRepository implements UmbTreeRepository {
 	#host: UmbControllerHostElement;
-	#dataSource: MemberTreeServerDataSource;
+	#dataSource: UmbMemberTreeServerDataSource;
 	#treeStore?: UmbMemberTreeStore;
 	#notificationContext?: UmbNotificationContext;
 	#initResolver?: () => void;
@@ -17,7 +17,7 @@ export class UmbMemberRepository implements UmbTreeRepository {
 	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
 		// TODO: figure out how spin up get the correct data source
-		this.#dataSource = new MemberTreeServerDataSource(this.#host);
+		this.#dataSource = new UmbMemberTreeServerDataSource(this.#host);
 
 		new UmbContextConsumerController(this.#host, UMB_MEMBER_TREE_STORE_CONTEXT_TOKEN, (instance) => {
 			this.#treeStore = instance;

src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/member.store.ts

@@ -1,7 +1,7 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import type { MemberDetails } from '@umbraco-cms/backoffice/models';
 
 /**
@@ -12,7 +12,7 @@ import type { MemberDetails } from '@umbraco-cms/backoffice/models';
  */
 export class UmbMemberStore extends UmbStoreBase {
 	constructor(host: UmbControllerHostElement) {
-		super(host, UMB_MEMBER_STORE_CONTEXT_TOKEN.toString(), new ArrayState<MemberDetails>([], (x) => x.id));
+		super(host, UMB_MEMBER_STORE_CONTEXT_TOKEN.toString(), new UmbArrayState<MemberDetails>([], (x) => x.id));
 	}
 
 	append(member: MemberDetails) {

src/Umbraco.Web.UI.Client/src/backoffice/members/members/repository/sources/member.tree.server.data.ts

@@ -4,16 +4,16 @@ import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 /**
  * A data source for the Member tree that fetches data from the server
  * @export
- * @class MemberTreeServerDataSource
+ * @class UmbMemberTreeServerDataSource
  * @implements {MemberTreeDataSource}
  */
-export class MemberTreeServerDataSource implements MemberTreeDataSource {
+export class UmbMemberTreeServerDataSource implements MemberTreeDataSource {
 	#host: UmbControllerHostElement;
 
 	/**
-	 * Creates an instance of MemberTreeServerDataSource.
+	 * Creates an instance of UmbMemberTreeServerDataSource.
 	 * @param {UmbControllerHostElement} host
-	 * @memberof MemberTreeServerDataSource
+	 * @memberof UmbMemberTreeServerDataSource
 	 */
 	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
@@ -22,7 +22,7 @@ export class MemberTreeServerDataSource implements MemberTreeDataSource {
 	/**
 	 * Fetches the root items for the tree from the server
 	 * @return {*}
-	 * @memberof MemberTreeServerDataSource
+	 * @memberof UmbMemberTreeServerDataSource
 	 */
 	async getRootItems() {
 		const response = await fetch('/umbraco/management/api/v1/tree/member/root');
@@ -36,7 +36,7 @@ export class MemberTreeServerDataSource implements MemberTreeDataSource {
 	 * Fetches the items for the given ids from the server
 	 * @param {Array<string>} ids
 	 * @return {*}
-	 * @memberof MemberTreeServerDataSource
+	 * @memberof UmbMemberTreeServerDataSource
 	 */
 	async getItems(ids: Array<string>) {
 		const response = await fetch('/umbraco/management/api/v1/tree/member/item');

src/Umbraco.Web.UI.Client/src/backoffice/packages/repository/package.store.ts

@@ -5,7 +5,7 @@ import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import type { UmbPackage } from '@umbraco-cms/backoffice/models';
 import type { PackageMigrationStatusResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { ManifestBase } from '@umbraco-cms/backoffice/extensions-registry';
-import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 
 export const UMB_PACKAGE_STORE_TOKEN = new UmbContextToken<UmbPackageStore>('UmbPackageStore');
 
@@ -21,9 +21,9 @@ export class UmbPackageStore extends UmbStoreBase {
 	 */
 	#packages = new ReplaySubject<Array<UmbPackage>>(1);
 
-	#extensions = new ArrayState<ManifestBase>([], (e) => e.alias);
+	#extensions = new UmbArrayState<ManifestBase>([], (e) => e.alias);
 
-	#migrations = new ArrayState<PackageMigrationStatusResponseModel>([], (e) => e.packageName);
+	#migrations = new UmbArrayState<PackageMigrationStatusResponseModel>([], (e) => e.packageName);
 
 	/**
 	 * Observable of packages with extensions
@@ -44,7 +44,7 @@ export class UmbPackageStore extends UmbStoreBase {
 	constructor(host: UmbControllerHostElement) {
 		// TODO: revisit this store. Is it ok to have multiple data sets?
 		// temp hack to satisfy the base class
-		super(host, UMB_PACKAGE_STORE_TOKEN.toString(), new ArrayState<UmbPackage>([], (x) => x.name));
+		super(host, UMB_PACKAGE_STORE_TOKEN.toString(), new UmbArrayState<UmbPackage>([], (x) => x.name));
 	}
 
 	/**

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.element.ts

@@ -135,7 +135,7 @@ export class UmbDashboardModelsBuilderElement extends UmbLitElement {
 				</p>
 				${this._modelsBuilder?.lastError
 					? html`<p class="error">Last generation failed with the following error:</p>
-							<uui-code-block>${this._modelsBuilder.lastError}</uui-code-block>`
+							<umb-code-block>${this._modelsBuilder.lastError}</umb-code-block>`
 					: nothing}
 			</uui-box>
 		`;

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/components/data-type-input/data-type-input.context.ts

@@ -1,9 +1,9 @@
-import { UmbPickerContext } from '@umbraco-cms/backoffice/picker';
+import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UMB_DATA_TYPE_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import { DataTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
-export class UmbDataTypePickerContext extends UmbPickerContext<DataTypeItemResponseModel> {
+export class UmbDataTypePickerContext extends UmbPickerInputContext<DataTypeItemResponseModel> {
 	constructor(host: UmbControllerHostElement) {
 		super(host, 'Umb.Repository.DataType', UMB_DATA_TYPE_PICKER_MODAL);
 	}

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/components/data-type-input/data-type-input.element.ts

@@ -8,14 +8,6 @@ import type { DataTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-
 
 @customElement('umb-data-type-input')
 export class UmbDataTypeInputElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			#add-button {
-				width: 100%;
-			}
-		`,
-	];
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -62,20 +54,17 @@ export class UmbDataTypeInputElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	private _selectedIds: Array<string> = [];
 	public get selectedIds(): Array<string> {
-		return this._selectedIds;
+		return this.#pickerContext.getSelection();
 	}
 	public set selectedIds(ids: Array<string>) {
-		this._selectedIds = ids;
-		super.value = ids.join(',');
+		this.#pickerContext.setSelection(ids);
 	}
 
 	@property()
 	public set value(idsString: string) {
-		if (idsString !== this._value) {
-			this.selectedIds = idsString.split(/[ ,]+/);
-		}
+		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
+		this.selectedIds = idsString.split(/[ ,]+/);
 	}
 
 	@state()
@@ -89,16 +78,16 @@ export class UmbDataTypeInputElement extends FormControlMixin(UmbLitElement) {
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,
-			() => !!this.min && this._selectedIds.length < this.min
+			() => !!this.min && this.#pickerContext.getSelection().length < this.min
 		);
 
 		this.addValidator(
 			'rangeOverflow',
 			() => this.maxMessage,
-			() => !!this.max && this._selectedIds.length > this.max
+			() => !!this.max && this.#pickerContext.getSelection().length > this.max
 		);
 
-		this.observe(this.#pickerContext.selection, (selection) => (this._selectedIds = selection));
+		this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
 		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
 	}
 
@@ -129,6 +118,15 @@ export class UmbDataTypeInputElement extends FormControlMixin(UmbLitElement) {
 			</uui-ref-node-data-type>
 		`;
 	}
+
+	static styles = [
+		UUITextStyles,
+		css`
+			#add-button {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbDataTypeInputElement;

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type-item.store.ts

@@ -2,7 +2,7 @@ import { DataTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbItemStore, UmbStoreBase } from '@umbraco-cms/backoffice/store';
-import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 
 /**
  * @export
@@ -24,7 +24,7 @@ export class UmbDataTypeItemStore
 		super(
 			host,
 			UMB_DATA_TYPE_ITEM_STORE_CONTEXT_TOKEN.toString(),
-			new ArrayState<DataTypeItemResponseModel>([], (x) => x.id)
+			new UmbArrayState<DataTypeItemResponseModel>([], (x) => x.id)
 		);
 	}
 

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/repository/data-type.store.ts

@@ -1,6 +1,6 @@
 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 { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
@@ -19,7 +19,11 @@ export class UmbDataTypeStore extends UmbStoreBase {
 	 * @memberof UmbDataTypeStore
 	 */
 	constructor(host: UmbControllerHostElement) {
-		super(host, UMB_DATA_TYPE_STORE_CONTEXT_TOKEN.toString(), new ArrayState<DataTypeResponseModel>([], (x) => x.id));
+		super(
+			host,
+			UMB_DATA_TYPE_STORE_CONTEXT_TOKEN.toString(),
+			new UmbArrayState<DataTypeResponseModel>([], (x) => x.id)
+		);
 	}
 
 	/**

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.context.ts

@@ -2,7 +2,7 @@ import { UmbWorkspaceContext } from '../../../shared/components/workspace/worksp
 import { UmbDataTypeRepository } from '../repository/data-type.repository';
 import { UmbEntityWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
 import type { CreateDataTypeRequestModel, DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { appendToFrozenArray, ObjectState } from '@umbraco-cms/backoffice/observable-api';
+import { appendToFrozenArray, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbDataTypeWorkspaceContext
@@ -10,7 +10,7 @@ export class UmbDataTypeWorkspaceContext
 	implements UmbEntityWorkspaceContextInterface<DataTypeResponseModel | undefined>
 {
 	// TODO: revisit. temp solution because the create and response models are different.
-	#data = new ObjectState<DataTypeResponseModel | undefined>(undefined);
+	#data = new UmbObjectState<DataTypeResponseModel | undefined>(undefined);
 	data = this.#data.asObservable();
 
 	name = this.#data.getObservablePart((data) => data?.name);

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language.context.ts

@@ -1,5 +1,5 @@
 import { UmbLanguageRepository } from '../repository/language.repository';
-import { ObjectState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import { UmbObjectState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -10,7 +10,7 @@ export class UmbAppLanguageContext {
 
 	#languages: Array<LanguageResponseModel> = [];
 
-	#appLanguage = new ObjectState<LanguageResponseModel | undefined>(undefined);
+	#appLanguage = new UmbObjectState<LanguageResponseModel | undefined>(undefined);
 	appLanguage = this.#appLanguage.asObservable();
 
 	constructor(host: UmbControllerHostElement) {

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language-item.store.ts

@@ -1,7 +1,7 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { ArrayState, partialUpdateFrozenArray } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbItemStore } from '@umbraco-cms/backoffice/store';
 
@@ -21,7 +21,7 @@ export class UmbLanguageItemStore
 		super(
 			host,
 			UMB_LANGUAGE_ITEM_STORE_CONTEXT_TOKEN.toString(),
-			new ArrayState<LanguageResponseModel>([], (x) => x.isoCode)
+			new UmbArrayState<LanguageResponseModel>([], (x) => x.isoCode)
 		);
 	}
 

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.store.ts

@@ -1,7 +1,7 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 export const UMB_LANGUAGE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbLanguageStore>('UmbLanguageStore');
@@ -13,13 +13,13 @@ export const UMB_LANGUAGE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbLanguageS
  * @description - Details Data Store for Languages
  */
 export class UmbLanguageStore extends UmbStoreBase {
-	public data = this._data.asObservable();
+	public readonly data = this._data.asObservable();
 
 	constructor(host: UmbControllerHostElement) {
 		super(
 			host,
 			UMB_LANGUAGE_STORE_CONTEXT_TOKEN.toString(),
-			new ArrayState<LanguageResponseModel>([], (x) => x.isoCode)
+			new UmbArrayState<LanguageResponseModel>([], (x) => x.isoCode)
 		);
 	}
 

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts

@@ -2,18 +2,18 @@ import { UmbLanguageRepository } from '../../repository/language.repository';
 import { UmbWorkspaceContext } from '../../../../shared/components/workspace/workspace-context/workspace-context';
 import { UmbEntityWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
 import type { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbLanguageWorkspaceContext
 	extends UmbWorkspaceContext<UmbLanguageRepository, LanguageResponseModel>
 	implements UmbEntityWorkspaceContextInterface
 {
-	#data = new ObjectState<LanguageResponseModel | undefined>(undefined);
+	#data = new UmbObjectState<LanguageResponseModel | undefined>(undefined);
 	data = this.#data.asObservable();
 
 	// TODO: this is a temp solution to bubble validation errors to the UI
-	#validationErrors = new ObjectState<any | undefined>(undefined);
+	#validationErrors = new UmbObjectState<any | undefined>(undefined);
 	validationErrors = this.#validationErrors.asObservable();
 
 	constructor(host: UmbControllerHostElement) {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts

@@ -1,11 +1,11 @@
 import { UmbLogViewerRepository } from '../repository/log-viewer.repository';
 import {
-	BasicState,
-	ArrayState,
+	UmbBasicState,
+	UmbArrayState,
 	createObservablePart,
-	DeepState,
-	ObjectState,
-	StringState,
+	UmbDeepState,
+	UmbObjectState,
+	UmbStringState,
 } from '@umbraco-cms/backoffice/observable-api';
 import {
 	DirectionModel,
@@ -58,38 +58,38 @@ export class UmbLogViewerWorkspaceContext {
 		endDate: this.today,
 	};
 
-	#savedSearches = new ObjectState<PagedSavedLogSearchResponseModel | undefined>(undefined);
+	#savedSearches = new UmbObjectState<PagedSavedLogSearchResponseModel | undefined>(undefined);
 	savedSearches = createObservablePart(this.#savedSearches, (data) => data?.items);
 
-	#logCount = new DeepState<LogLevelCountsReponseModel | null>(null);
+	#logCount = new UmbDeepState<LogLevelCountsReponseModel | null>(null);
 	logCount = createObservablePart(this.#logCount, (data) => data);
 
-	#dateRange = new DeepState<LogViewerDateRange>(this.defaultDateRange);
+	#dateRange = new UmbDeepState<LogViewerDateRange>(this.defaultDateRange);
 	dateRange = createObservablePart(this.#dateRange, (data) => data);
 
-	#loggers = new DeepState<PagedLoggerResponseModel | null>(null);
+	#loggers = new UmbDeepState<PagedLoggerResponseModel | null>(null);
 	loggers = createObservablePart(this.#loggers, (data) => data?.items);
 
-	#canShowLogs = new BasicState<boolean | null>(null);
+	#canShowLogs = new UmbBasicState<boolean | null>(null);
 	canShowLogs = createObservablePart(this.#canShowLogs, (data) => data);
 
-	#filterExpression = new StringState<string>('');
+	#filterExpression = new UmbStringState<string>('');
 	filterExpression = createObservablePart(this.#filterExpression, (data) => data);
 
-	#messageTemplates = new DeepState<PagedLogTemplateResponseModel | null>(null);
+	#messageTemplates = new UmbDeepState<PagedLogTemplateResponseModel | null>(null);
 	messageTemplates = createObservablePart(this.#messageTemplates, (data) => data);
 
-	#logLevelsFilter = new ArrayState<LogLevelModel>([]);
+	#logLevelsFilter = new UmbArrayState<LogLevelModel>([]);
 	logLevelsFilter = createObservablePart(this.#logLevelsFilter, (data) => data);
 
-	#logs = new DeepState<PagedLogMessageResponseModel | null>(null);
+	#logs = new UmbDeepState<PagedLogMessageResponseModel | null>(null);
 	logs = createObservablePart(this.#logs, (data) => data?.items);
 	logsTotal = createObservablePart(this.#logs, (data) => data?.total);
 
-	#polling = new ObjectState<PoolingCOnfig>({ enabled: false, interval: 2000 });
+	#polling = new UmbObjectState<PoolingCOnfig>({ enabled: false, interval: 2000 });
 	polling = createObservablePart(this.#polling, (data) => data);
 
-	#sortingDirection = new BasicState<DirectionModel>(DirectionModel.ASCENDING);
+	#sortingDirection = new UmbBasicState<DirectionModel>(DirectionModel.ASCENDING);
 	sortingDirection = createObservablePart(this.#sortingDirection, (data) => data);
 
 	#intervalID: number | null = null;

src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.repository.ts

@@ -1,8 +1,8 @@
 import { UmbRelationTypeTreeStore, UMB_RELATION_TYPE_TREE_STORE_CONTEXT_TOKEN } from './relation-type.tree.store';
 import { UmbRelationTypeServerDataSource } from './sources/relation-type.server.data';
 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 { UmbRelationTypeTreeServerDataSource } from './sources/relation-type.tree.server.data';
+import { UmbRelationTypeTreeDataSource } from './sources';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import {
@@ -23,7 +23,7 @@ export class UmbRelationTypeRepository
 
 	#host: UmbControllerHostElement;
 
-	#treeSource: RelationTypeTreeDataSource;
+	#treeSource: UmbRelationTypeTreeDataSource;
 	#treeStore?: UmbRelationTypeTreeStore;
 
 	#detailDataSource: UmbRelationTypeServerDataSource;
@@ -35,7 +35,7 @@ export class UmbRelationTypeRepository
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
-		this.#treeSource = new RelationTypeTreeServerDataSource(this.#host);
+		this.#treeSource = new UmbRelationTypeTreeServerDataSource(this.#host);
 		this.#detailDataSource = new UmbRelationTypeServerDataSource(this.#host);
 
 		this.#init = Promise.all([

src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/relation-type.store.ts

@@ -1,6 +1,6 @@
 import type { RelationTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
@@ -22,7 +22,7 @@ export class UmbRelationTypeStore extends UmbStoreBase {
 		super(
 			host,
 			UMB_RELATION_TYPE_STORE_CONTEXT_TOKEN.toString(),
-			new ArrayState<RelationTypeResponseModel>([], (x) => x.id)
+			new UmbArrayState<RelationTypeResponseModel>([], (x) => x.id)
 		);
 	}
 

src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/sources/index.ts

@@ -1,7 +1,7 @@
 import type { DataSourceResponse } from '@umbraco-cms/backoffice/repository';
 import { ItemResponseModelBaseModel, PagedEntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
-export interface RelationTypeTreeDataSource {
+export interface UmbRelationTypeTreeDataSource {
 	getRootItems(): Promise<DataSourceResponse<PagedEntityTreeItemResponseModel>>;
 	getItems(ids: Array<string>): Promise<DataSourceResponse<ItemResponseModelBaseModel[]>>;
 }

src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/sources/relation-type.tree.server.data.ts

@@ -1,4 +1,4 @@
-import { RelationTypeTreeDataSource } from '.';
+import { UmbRelationTypeTreeDataSource } from '.';
 import { ProblemDetailsModel, RelationTypeResource } from '@umbraco-cms/backoffice/backend-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
@@ -7,10 +7,10 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 /**
  * A data source for the RelationType tree that fetches data from the server
  * @export
- * @class RelationTypeTreeServerDataSource
- * @implements {RelationTypeTreeDataSource}
+ * @class UmbRelationTypeTreeServerDataSource
+ * @implements {UmbRelationTypeTreeDataSource}
  */
-export class RelationTypeTreeServerDataSource implements RelationTypeTreeDataSource {
+export class UmbRelationTypeTreeServerDataSource implements UmbRelationTypeTreeDataSource {
 	#host: UmbControllerHostElement;
 
 	// TODO: how do we handle trashed items?
@@ -47,9 +47,9 @@ export class RelationTypeTreeServerDataSource implements RelationTypeTreeDataSou
 	}
 
 	/**
-	 * Creates an instance of RelationTypeTreeServerDataSource.
+	 * Creates an instance of UmbRelationTypeTreeServerDataSource.
 	 * @param {UmbControllerHostElement} host
-	 * @memberof RelationTypeTreeServerDataSource
+	 * @memberof UmbRelationTypeTreeServerDataSource
 	 */
 	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
@@ -58,7 +58,7 @@ export class RelationTypeTreeServerDataSource implements RelationTypeTreeDataSou
 	/**
 	 * Fetches the root items for the tree from the server
 	 * @return {*}
-	 * @memberof RelationTypeTreeServerDataSource
+	 * @memberof UmbRelationTypeTreeServerDataSource
 	 */
 	async getRootItems() {
 		return tryExecuteAndNotify(this.#host, RelationTypeResource.getTreeRelationTypeRoot({}));
@@ -68,7 +68,7 @@ export class RelationTypeTreeServerDataSource implements RelationTypeTreeDataSou
 	 * Fetches the items for the given ids from the server
 	 * @param {Array<string>} ids
 	 * @return {*}
-	 * @memberof RelationTypeTreeServerDataSource
+	 * @memberof UmbRelationTypeTreeServerDataSource
 	 */
 	async getItems(ids: Array<string>) {
 		if (ids) {

src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.context.ts

@@ -3,14 +3,14 @@ import { UmbRelationTypeRepository } from '../repository/relation-type.repositor
 import { UmbEntityWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
 import type { RelationTypeBaseModel, RelationTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
-import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbRelationTypeWorkspaceContext
 	extends UmbWorkspaceContext<UmbRelationTypeRepository, RelationTypeResponseModel>
 	implements UmbEntityWorkspaceContextInterface<RelationTypeResponseModel | undefined>
 {
-	#data = new ObjectState<RelationTypeResponseModel | undefined>(undefined);
+	#data = new UmbObjectState<RelationTypeResponseModel | undefined>(undefined);
 	data = this.#data.asObservable();
 	name = this.#data.getObservablePart((data) => data?.name);
 	id = this.#data.getObservablePart((data) => data?.id);

src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.context.ts

@@ -2,7 +2,7 @@ import { Observable } from 'rxjs';
 import type { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 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 { UmbArrayState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { umbExtensionsRegistry, createExtensionClass } from '@umbraco-cms/backoffice/extensions-api';
 import { UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
 
@@ -17,15 +17,15 @@ export class UmbCollectionContext<DataType extends EntityTreeItemResponseModel =
 	private _store?: any;
 	protected _dataObserver?: UmbObserverController<DataType[]>;
 
-	#data = new ArrayState(<Array<DataType>>[]);
+	#data = new UmbArrayState(<Array<DataType>>[]);
 	public readonly data = this.#data.asObservable();
 
-	#selection = new ArrayState(<Array<string>>[]);
+	#selection = new UmbArrayState(<Array<string>>[]);
 	public readonly selection = this.#selection.asObservable();
 
 	/*
 	TODO:
-	private _search = new StringState('');
+	private _search = new UmbStringState('');
 	public readonly search = this._search.asObservable();
 	*/
 

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice.context.ts

@@ -1,9 +1,9 @@
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { StringState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbStringState } from '@umbraco-cms/backoffice/observable-api';
 
 export class UmbBackofficeContext {
-	#activeSectionAlias = new StringState(undefined);
+	#activeSectionAlias = new UmbStringState(undefined);
 	public readonly activeSectionAlias = this.#activeSectionAlias.asObservable();
 
 	public getAllowedSections() {

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.element.ts

@@ -7,8 +7,8 @@ import { customElement } from 'lit/decorators.js';
  *  @slot the full message
  *
  */
-@customElement('uui-code-block')
-export class UUICodeBlockElement extends LitElement {
+@customElement('umb-code-block')
+export class UmbCodeBlockElement extends LitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -54,6 +54,6 @@ export class UUICodeBlockElement extends LitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'uui-code-block': UUICodeBlockElement;
+		'umb-code-block': UmbCodeBlockElement;
 	}
 }

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 { UUICodeBlockElement } from './code-block.element';
+import type { UmbCodeBlockElement } from './code-block.element';
 
-const meta: Meta<UUICodeBlockElement> = {
+const meta: Meta<UmbCodeBlockElement> = {
 	title: 'Components/Code Block',
-	component: 'uui-code-block',
+	component: 'umb-code-block',
 };
 
 export default meta;
-type Story = StoryObj<UUICodeBlockElement>;
+type Story = StoryObj<UmbCodeBlockElement>;
 
 export const Overview: Story = {
 	args: {},
@@ -17,5 +17,5 @@ export const Overview: Story = {
 
 export const WithCode: Story = {
 	decorators: [],
-	render: () => html` <uui-code-block> // Lets write some javascript alert("Hello World"); </uui-code-block>`,
+	render: () => html` <umb-code-block> // Lets write some javascript alert("Hello World"); </umb-code-block>`,
 };

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.stories.ts

@@ -111,12 +111,12 @@ const codeSnippets: Record<CodeEditorLanguage, string> = {
 	"Smartypants, double quotes" and 'single quotes'`,
 	typescript: `import { UmbTemplateRepository } from '../repository/template.repository';
 	import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context';
-	import { createObservablePart, DeepState } from '@umbraco-cms/observable-api';
+	import { createObservablePart, UmbDeepState } from '@umbraco-cms/observable-api';
 	import { TemplateModel } from '@umbraco-cms/backend-api';
 	import { UmbControllerHostElement } from '@umbraco-cms/controller';
 
 	export class UmbTemplateWorkspaceContext extends UmbWorkspaceContext<UmbTemplateRepository, TemplateModel> {
-		#data = new DeepState<TemplateModel | undefined>(undefined);
+		#data = new UmbDeepState<TemplateModel | undefined>(undefined);
 		data = this.#data.asObservable();
 		name = createObservablePart(this.#data, (data) => data?.name);
 		content = createObservablePart(this.#data, (data) => data?.content);

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/extension-slot/extension-slot.test.ts

@@ -3,10 +3,9 @@ import { expect, fixture, html } from '@open-wc/testing';
 import { InitializedExtension, UmbExtensionSlotElement } from './extension-slot.element';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 import { ManifestDashboard } from '@umbraco-cms/backoffice/extensions-registry';
-import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
 
-@customElement('test-extension-slot-manifest-element')
-class MyExtensionSlotManifestElement extends HTMLElement {}
+@customElement('umb-test-extension-slot-manifest-element')
+class UmbTestExtensionSlotManifestElement extends HTMLElement {}
 
 function sleep(ms: number) {
 	return new Promise((resolve) => setTimeout(resolve, ms));
@@ -52,7 +51,7 @@ describe('UmbExtensionSlotElement', () => {
 				type: 'dashboard',
 				alias: 'unit-test-ext-slot-element-manifest',
 				name: 'unit-test-extension',
-				elementName: 'test-extension-slot-manifest-element',
+				elementName: 'umb-test-extension-slot-manifest-element',
 				meta: {
 					pathname: 'test/test',
 				},
@@ -75,7 +74,7 @@ describe('UmbExtensionSlotElement', () => {
 
 			await sleep(0);
 
-			expect(element.shadowRoot!.firstElementChild).to.be.instanceOf(MyExtensionSlotManifestElement);
+			expect(element.shadowRoot!.firstElementChild).to.be.instanceOf(UmbTestExtensionSlotManifestElement);
 		});
 
 		it('use the render method', async () => {
@@ -90,7 +89,9 @@ describe('UmbExtensionSlotElement', () => {
 			await sleep(0);
 
 			expect(element.shadowRoot!.firstElementChild?.nodeName).to.be.equal('BLA');
-			expect(element.shadowRoot!.firstElementChild?.firstElementChild).to.be.instanceOf(MyExtensionSlotManifestElement);
+			expect(element.shadowRoot!.firstElementChild?.firstElementChild).to.be.instanceOf(
+				UmbTestExtensionSlotManifestElement
+			);
 		});
 	});
 });

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.context.ts

@@ -1,9 +1,9 @@
-import { UmbPickerContext } from '@umbraco-cms/backoffice/picker';
+import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UMB_LANGUAGE_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import type { LanguageItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
-export class UmbLanguagePickerContext extends UmbPickerContext<LanguageItemResponseModel> {
+export class UmbLanguagePickerContext extends UmbPickerInputContext<LanguageItemResponseModel> {
 	constructor(host: UmbControllerHostElement) {
 		super(host, 'Umb.Repository.Language', UMB_LANGUAGE_PICKER_MODAL, (item) => item.isoCode);
 	}

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts

@@ -9,14 +9,6 @@ import type { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api'
 
 @customElement('umb-input-language-picker')
 export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			#add-button {
-				width: 100%;
-			}
-		`,
-	];
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -66,20 +58,17 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen
 	@property({ type: Object, attribute: false })
 	public filter: (language: LanguageResponseModel) => boolean = () => true;
 
-	private _selectedIsoCodes: Array<string> = [];
 	public get selectedIsoCodes(): Array<string> {
-		return this._selectedIsoCodes;
+		return this.#pickerContext.getSelection();
 	}
-	public set selectedIsoCodes(isoCodes: Array<string>) {
-		this._selectedIsoCodes = isoCodes;
-		super.value = isoCodes.join(',');
+	public set selectedIsoCodes(ids: Array<string>) {
+		this.#pickerContext.setSelection(ids);
 	}
 
 	@property()
 	public set value(isoCodesString: string) {
-		if (isoCodesString !== this._value) {
-			this.selectedIsoCodes = isoCodesString.split(/[ ,]+/);
-		}
+		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
+		this.selectedIsoCodes = isoCodesString.split(/[ ,]+/);
 	}
 
 	@state()
@@ -93,16 +82,16 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,
-			() => !!this.min && this._selectedIsoCodes.length < this.min
+			() => !!this.min && this.#pickerContext.getSelection().length < this.min
 		);
 
 		this.addValidator(
 			'rangeOverflow',
 			() => this.maxMessage,
-			() => !!this.max && this._selectedIsoCodes.length > this.max
+			() => !!this.max && this.#pickerContext.getSelection().length > this.max
 		);
 
-		this.observe(this.#pickerContext.selection, (selection) => (this._selectedIsoCodes = selection));
+		this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
 		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
 	}
 
@@ -113,7 +102,6 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen
 	private _openPicker() {
 		this.#pickerContext.openPicker({
 			filter: this.filter,
-			hello: 'world',
 		});
 	}
 
@@ -125,7 +113,7 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen
 				look="placeholder"
 				@click=${this._openPicker}
 				label="open"
-				?disabled="${this._selectedIsoCodes.length === this.max}"
+				?disabled="${this._items.length === this.max}"
 				>Add</uui-button
 			>
 		`;
@@ -144,6 +132,15 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen
 			</uui-ref-node>
 		`;
 	}
+
+	static styles = [
+		UUITextStyles,
+		css`
+			#add-button {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbInputLanguagePickerElement;

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.context.ts

@@ -1,19 +1,19 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { StringState, BooleanState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbStringState, UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
 
 export class UmbSectionSidebarContext {
 	#host: UmbControllerHostElement;
-	#contextMenuIsOpen = new BooleanState(false);
+	#contextMenuIsOpen = new UmbBooleanState(false);
 	contextMenuIsOpen = this.#contextMenuIsOpen.asObservable();
 
-	#entityType = new StringState<undefined>(undefined);
+	#entityType = new UmbStringState<undefined>(undefined);
 	entityType = this.#entityType.asObservable();
 
-	#unique = new StringState<undefined>(undefined);
+	#unique = new UmbStringState<undefined>(undefined);
 	unique = this.#unique.asObservable();
 
-	#headline = new StringState<undefined>(undefined);
+	#headline = new UmbStringState<undefined>(undefined);
 	headline = this.#headline.asObservable();
 
 	constructor(host: UmbControllerHostElement) {

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts

@@ -1,14 +1,14 @@
 import type { ManifestSection } from '@umbraco-cms/backoffice/extensions-registry';
 import type { Entity } from '@umbraco-cms/backoffice/models';
-import { ObjectState, StringState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
 export type ActiveTreeItemType = Entity | undefined;
 
 export class UmbSectionContext {
-	#manifestAlias = new StringState<string | undefined>(undefined);
-	#manifestPathname = new StringState<string | undefined>(undefined);
-	#manifestLabel = new StringState<string | undefined>(undefined);
+	#manifestAlias = new UmbStringState<string | undefined>(undefined);
+	#manifestPathname = new UmbStringState<string | undefined>(undefined);
+	#manifestLabel = new UmbStringState<string | undefined>(undefined);
 	public readonly alias = this.#manifestAlias.asObservable();
 	public readonly pathname = this.#manifestPathname.asObservable();
 	public readonly label = this.#manifestLabel.asObservable();

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page.service.ts

@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, nothing, PropertyValueMap } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { DeepState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbDeepState } from '@umbraco-cms/backoffice/observable-api';
 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.
@@ -13,7 +13,7 @@ export class UmbTreeContextMenuPageServiceElement extends UmbLitElement {
 	@property({ type: Object })
 	public actionEntity: any = { key: '', name: '' };
 
-	#entity = new DeepState({ key: '', name: '' } as any);
+	#entity = new UmbDeepState({ key: '', name: '' } as any);
 	public readonly entity = this.#entity.asObservable();
 
 	@state()

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts

@@ -7,7 +7,12 @@ import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../../section/sect
 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 {
+	UmbBooleanState,
+	UmbDeepState,
+	UmbStringState,
+	UmbObserverController,
+} from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import {
 	UmbContextConsumerController,
@@ -27,28 +32,28 @@ export class UmbTreeItemContextBase<T extends TreeItemPresentationModel = TreeIt
 	public unique?: string;
 	public type?: string;
 
-	#treeItem = new DeepState<T | undefined>(undefined);
+	#treeItem = new UmbDeepState<T | undefined>(undefined);
 	treeItem = this.#treeItem.asObservable();
 
-	#hasChildren = new BooleanState(false);
+	#hasChildren = new UmbBooleanState(false);
 	hasChildren = this.#hasChildren.asObservable();
 
-	#isLoading = new BooleanState(false);
+	#isLoading = new UmbBooleanState(false);
 	isLoading = this.#isLoading.asObservable();
 
-	#isSelectable = new BooleanState(false);
+	#isSelectable = new UmbBooleanState(false);
 	isSelectable = this.#isSelectable.asObservable();
 
-	#isSelected = new BooleanState(false);
+	#isSelected = new UmbBooleanState(false);
 	isSelected = this.#isSelected.asObservable();
 
-	#isActive = new BooleanState(false);
+	#isActive = new UmbBooleanState(false);
 	isActive = this.#isActive.asObservable();
 
-	#hasActions = new BooleanState(false);
+	#hasActions = new UmbBooleanState(false);
 	hasActions = this.#hasActions.asObservable();
 
-	#path = new StringState('');
+	#path = new UmbStringState('');
 	path = this.#path.asObservable();
 
 	treeContext?: UmbTreeContextBase;

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.context.ts

@@ -1,7 +1,7 @@
 import type { Observable } from 'rxjs';
 import { UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
 import type { ManifestTree } from '@umbraco-cms/backoffice/extensions-registry';
-import { BooleanState, DeepState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import { UmbBooleanState, UmbArrayState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { createExtensionClass, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 
@@ -19,13 +19,13 @@ export class UmbTreeContextBase implements UmbTreeContext {
 	host: UmbControllerHostElement;
 	public tree: ManifestTree;
 
-	#selectable = new BooleanState(false);
+	#selectable = new UmbBooleanState(false);
 	public readonly selectable = this.#selectable.asObservable();
 
-	#multiple = new BooleanState(false);
+	#multiple = new UmbBooleanState(false);
 	public readonly multiple = this.#multiple.asObservable();
 
-	#selection = new DeepState(<Array<string>>[]);
+	#selection = new UmbArrayState(<Array<string>>[]);
 	public readonly selection = this.#selection.asObservable();
 
 	repository?: UmbTreeRepository;

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts

@@ -3,7 +3,12 @@ import { UmbWorkspaceVariableEntityContextInterface } from '../workspace/workspa
 import { UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN } from '../workspace/workspace-variant/workspace-variant.context';
 import type { DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { ClassState, ObjectState, StringState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import {
+	UmbClassState,
+	UmbObjectState,
+	UmbStringState,
+	UmbObserverController,
+} from '@umbraco-cms/backoffice/observable-api';
 import {
 	UmbContextConsumerController,
 	UmbContextProviderController,
@@ -25,7 +30,7 @@ export class UmbWorkspacePropertyContext<ValueType = any> {
 
 	private _providerController: UmbContextProviderController;
 
-	private _data = new ObjectState<WorkspacePropertyData<ValueType>>({});
+	private _data = new UmbObjectState<WorkspacePropertyData<ValueType>>({});
 
 	public readonly alias = this._data.getObservablePart((data) => data.alias);
 	public readonly label = this._data.getObservablePart((data) => data.label);
@@ -35,10 +40,10 @@ export class UmbWorkspacePropertyContext<ValueType = any> {
 
 	#workspaceVariantId?: UmbVariantId;
 
-	#variantId = new ClassState<UmbVariantId | undefined>(undefined);
+	#variantId = new UmbClassState<UmbVariantId | undefined>(undefined);
 	public readonly variantId = this.#variantId.asObservable();
 
-	private _variantDifference = new StringState(undefined);
+	private _variantDifference = new UmbStringState(undefined);
 	public readonly variantDifference = this._variantDifference.asObservable();
 
 	private _workspaceContext?: UmbWorkspaceVariableEntityContextInterface;
@@ -88,7 +93,7 @@ export class UmbWorkspacePropertyContext<ValueType = any> {
 		this._data.update({ description });
 	}
 	public setValue(value: WorkspacePropertyData<ValueType>['value']) {
-		// Note: Do not try to compare new / old value, as it can of any type. We trust the ObjectState in doing such.
+		// Note: Do not try to compare new / old value, as it can of any type. We trust the UmbObjectState in doing such.
 		this._data.update({ value });
 	}
 	public changeValue(value: WorkspacePropertyData<ValueType>['value']) {

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/entity-manager-controller.ts

@@ -6,7 +6,7 @@ import {
 	UmbNotificationContext,
 	UMB_NOTIFICATION_CONTEXT_TOKEN,
 } from '@umbraco-cms/backoffice/notification';
-import { ObjectState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import { UmbObjectState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import type { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbEntityDetailStore } from '@umbraco-cms/backoffice/store';
 
@@ -18,7 +18,7 @@ export class UmbEntityWorkspaceManager<
 > {
 	private _host;
 
-	state = new ObjectState<EntityDetailsType | undefined>(undefined);
+	state = new UmbObjectState<EntityDetailsType | undefined>(undefined);
 
 	protected _storeSubscription?: UmbObserverController<EntityDetailsType | undefined>;
 

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-container-structure-helper.class.ts

@@ -3,7 +3,7 @@ import { PropertyContainerTypes } from './workspace-structure-manager.class';
 import { PropertyTypeContainerResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController, UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-api';
-import { ArrayState, BooleanState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState, UmbBooleanState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
 export class UmbWorkspaceContainerStructureHelper {
 	#host: UmbControllerHostElement;
@@ -20,10 +20,10 @@ export class UmbWorkspaceContainerStructureHelper {
 	private _ownerContainers: PropertyTypeContainerResponseModelBaseModel[] = [];
 
 	// State containing the merged containers (only one pr. name):
-	#containers = new ArrayState<PropertyTypeContainerResponseModelBaseModel>([], (x) => x.id);
+	#containers = new UmbArrayState<PropertyTypeContainerResponseModelBaseModel>([], (x) => x.id);
 	readonly containers = this.#containers.asObservable();
 
-	#hasProperties = new BooleanState(false);
+	#hasProperties = new UmbBooleanState(false);
 	readonly hasProperties = this.#hasProperties.asObservable();
 
 	constructor(host: UmbControllerHostElement) {

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-context.ts

@@ -1,7 +1,7 @@
 import { UmbEntityWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
 import { UmbContextProviderController, UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { BooleanState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
 import type { BaseEntity } from '@umbraco-cms/backoffice/models';
 
 /*
@@ -15,7 +15,7 @@ export abstract class UmbWorkspaceContext<T, EntityType extends BaseEntity>
 	public host: UmbControllerHostElement;
 	public repository: T;
 
-	#isNew = new BooleanState(undefined);
+	#isNew = new UmbBooleanState(undefined);
 	isNew = this.#isNew.asObservable();
 
 	constructor(host: UmbControllerHostElement, repository: T) {

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-property-structure-helper.class.ts

@@ -3,7 +3,7 @@ import { PropertyContainerTypes } from './workspace-structure-manager.class';
 import { DocumentTypePropertyTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { UmbContextConsumerController, UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-api';
-import { ArrayState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
 export class UmbWorkspacePropertyStructureHelper {
 	#host: UmbControllerHostElement;
@@ -14,7 +14,7 @@ export class UmbWorkspacePropertyStructureHelper {
 	private _isRoot?: boolean;
 	private _containerName?: string;
 
-	#propertyStructure = new ArrayState<DocumentTypePropertyTypeResponseModel>([], (x) => x.id);
+	#propertyStructure = new UmbArrayState<DocumentTypePropertyTypeResponseModel>([], (x) => x.id);
 	readonly propertyStructure = this.#propertyStructure.asObservable();
 
 	constructor(host: UmbControllerHostElement) {

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-split-view-manager.class.ts

@@ -1,6 +1,6 @@
 import { UmbVariantId } from '../../../variants/variant-id.class';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 
 export type ActiveVariant = {
 	index: number;
@@ -16,7 +16,7 @@ export type ActiveVariant = {
 export class UmbWorkspaceSplitViewManager {
 	#host: UmbControllerHostElement;
 
-	#activeVariantsInfo = new ArrayState<ActiveVariant>([], (x) => x.index);
+	#activeVariantsInfo = new UmbArrayState<ActiveVariant>([], (x) => x.index);
 	public readonly activeVariantsInfo = this.#activeVariantsInfo.asObservable();
 
 	constructor(host: UmbControllerHostElement) {

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-structure-manager.class.ts

@@ -9,7 +9,7 @@ import {
 } from '@umbraco-cms/backoffice/backend-api';
 import { UmbControllerHostElement, UmbControllerInterface } from '@umbraco-cms/backoffice/controller';
 import {
-	ArrayState,
+	UmbArrayState,
 	UmbObserverController,
 	MappingFunction,
 	partialUpdateFrozenArray,
@@ -29,13 +29,13 @@ export class UmbWorkspacePropertyStructureManager<R extends UmbDocumentTypeRepos
 
 	#rootDocumentTypeKey?: string;
 	#documentTypeObservers = new Array<UmbControllerInterface>();
-	#documentTypes = new ArrayState<T>([], (x) => x.id);
+	#documentTypes = new UmbArrayState<T>([], (x) => x.id);
 	readonly documentTypes = this.#documentTypes.asObservable();
 	private readonly _documentTypeContainers = this.#documentTypes.getObservablePart((x) =>
 		x.flatMap((x) => x.containers ?? [])
 	);
 
-	#containers = new ArrayState<PropertyTypeContainerResponseModelBaseModel>([], (x) => x.id);
+	#containers = new UmbArrayState<PropertyTypeContainerResponseModelBaseModel>([], (x) => x.id);
 
 	constructor(host: UmbControllerHostElement, typeRepository: R) {
 		this.#host = host;

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-variant/workspace-variant.context.ts

@@ -9,7 +9,12 @@ import {
 	UMB_ENTITY_WORKSPACE_CONTEXT,
 } 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 {
+	UmbClassState,
+	UmbNumberState,
+	UmbObjectState,
+	UmbObserverController,
+} from '@umbraco-cms/backoffice/observable-api';
 import { DocumentVariantResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 //type EntityType = DocumentModel;
@@ -22,17 +27,17 @@ export class UmbWorkspaceVariantContext {
 		return this.#workspaceContext;
 	}
 
-	#index = new NumberState(undefined);
+	#index = new UmbNumberState(undefined);
 	index = this.#index.asObservable();
 
-	#currentVariant = new ObjectState<DocumentVariantResponseModel | undefined>(undefined);
+	#currentVariant = new UmbObjectState<DocumentVariantResponseModel | undefined>(undefined);
 	currentVariant = this.#currentVariant.asObservable();
 
 	name = this.#currentVariant.getObservablePart((x) => x?.name);
 	culture = this.#currentVariant.getObservablePart((x) => x?.culture);
 	segment = this.#currentVariant.getObservablePart((x) => x?.segment);
 
-	#variantId = new ClassState<UmbVariantId | undefined>(undefined);
+	#variantId = new UmbClassState<UmbVariantId | undefined>(undefined);
 	variantId = this.#variantId.asObservable();
 
 	private _currentVariantObserver?: UmbObserverController<ActiveVariant>;

src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts

@@ -127,7 +127,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<object,
 		{
 			name: 'Validate as an email address',
 			value: 'email',
-			validation: '[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+',
+			validation: '[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+',
 		},
 		{
 			name: 'Validate as a number',
@@ -137,7 +137,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<object,
 		{
 			name: 'Validate as an URL',
 			value: 'url',
-			validation: 'https?://[a-zA-Z0-9-.]+.[a-zA-Z]{2,}',
+			validation: 'https?://[a-zA-Z0-9-.]+\\.[a-zA-Z]{2,}',
 		},
 		{
 			name: '...or enter a custom validation',

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action-menu/property-action-menu.context.ts

@@ -1,9 +1,9 @@
 import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { DeepState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbDeepState } from '@umbraco-cms/backoffice/observable-api';
 
 export class UmbPropertyActionMenuContext {
-	#isOpen = new DeepState(false);
+	#isOpen = new UmbDeepState(false);
 	public readonly isOpen = this.#isOpen.asObservable();
 
 	constructor(host: UmbControllerHostElement) {

src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/workspace/stylesheet-workspace.context.ts

@@ -2,10 +2,10 @@ import { UmbWorkspaceContext } from '../../../shared/components/workspace/worksp
 import { UmbStylesheetRepository } from '../repository/stylesheet.repository';
 import { StylesheetDetails } from '..';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
-import { ObjectState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 
 export class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext<UmbStylesheetRepository, StylesheetDetails> {
-	#data = new ObjectState<StylesheetDetails | undefined>(undefined);
+	#data = new UmbObjectState<StylesheetDetails | undefined>(undefined);
 	data = this.#data.asObservable();
 
 	constructor(host: UmbControllerHostElement) {

src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/sources/template.tree.server.data.ts

@@ -6,16 +6,16 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 /**
  * A data source for the Template tree that fetches data from the server
  * @export
- * @class TemplateTreeServerDataSource
+ * @class UmbTemplateTreeServerDataSource
  * @implements {TemplateTreeDataSource}
  */
-export class TemplateTreeServerDataSource implements TemplateTreeDataSource {
+export class UmbTemplateTreeServerDataSource implements TemplateTreeDataSource {
 	#host: UmbControllerHostElement;
 
 	/**
-	 * Creates an instance of TemplateTreeServerDataSource.
+	 * Creates an instance of UmbTemplateTreeServerDataSource.
 	 * @param {UmbControllerHostElement} host
-	 * @memberof TemplateTreeServerDataSource
+	 * @memberof UmbTemplateTreeServerDataSource
 	 */
 	constructor(host: UmbControllerHostElement) {
 		this.#host = host;
@@ -24,7 +24,7 @@ export class TemplateTreeServerDataSource implements TemplateTreeDataSource {
 	/**
 	 * Fetches the root items for the tree from the server
 	 * @return {*}
-	 * @memberof TemplateTreeServerDataSource
+	 * @memberof UmbTemplateTreeServerDataSource
 	 */
 	async getRootItems() {
 		return tryExecuteAndNotify(this.#host, TemplateResource.getTreeTemplateRoot({}));
@@ -34,7 +34,7 @@ export class TemplateTreeServerDataSource implements TemplateTreeDataSource {
 	 * Fetches the children of a given parent id from the server
 	 * @param {(string | null)} parentId
 	 * @return {*}
-	 * @memberof TemplateTreeServerDataSource
+	 * @memberof UmbTemplateTreeServerDataSource
 	 */
 	async getChildrenOf(parentId: string | null) {
 		if (!parentId) {
@@ -54,7 +54,7 @@ export class TemplateTreeServerDataSource implements TemplateTreeDataSource {
 	 * Fetches the items for the given ids from the server
 	 * @param {Array<string>} id
 	 * @return {*}
-	 * @memberof TemplateTreeServerDataSource
+	 * @memberof UmbTemplateTreeServerDataSource
 	 */
 	async getItems(ids: Array<string>) {
 		if (!ids) {

src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.repository.ts

@@ -1,5 +1,5 @@
 import { UmbTemplateDetailServerDataSource } from './sources/template.detail.server.data';
-import { TemplateTreeServerDataSource } from './sources/template.tree.server.data';
+import { UmbTemplateTreeServerDataSource } 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';
@@ -21,7 +21,7 @@ export class UmbTemplateRepository
 	#init;
 	#host: UmbControllerHostElement;
 
-	#treeDataSource: TemplateTreeServerDataSource;
+	#treeDataSource: UmbTemplateTreeServerDataSource;
 	#detailDataSource: UmbTemplateDetailServerDataSource;
 
 	#treeStore?: UmbTemplateTreeStore;
@@ -33,7 +33,7 @@ export class UmbTemplateRepository
 		this.#host = host;
 
 		// TODO: figure out how spin up get the correct data source
-		this.#treeDataSource = new TemplateTreeServerDataSource(this.#host);
+		this.#treeDataSource = new UmbTemplateTreeServerDataSource(this.#host);
 		this.#detailDataSource = new UmbTemplateDetailServerDataSource(this.#host);
 
 		this.#init = Promise.all([

src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/repository/template.store.ts

@@ -1,5 +1,5 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase } from '@umbraco-cms/backoffice/store';
 import type { TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
@@ -17,7 +17,7 @@ export class UmbTemplateStore extends UmbStoreBase {
 	 * @memberof UmbTemplateStore
 	 */
 	constructor(host: UmbControllerHostElement) {
-		super(host, UMB_TEMPLATE_STORE_CONTEXT_TOKEN.toString(), new ArrayState<TemplateResponseModel>([], (x) => x.id));
+		super(host, UMB_TEMPLATE_STORE_CONTEXT_TOKEN.toString(), new UmbArrayState<TemplateResponseModel>([], (x) => x.id));
 	}
 
 	/**

src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.context.ts

@@ -1,11 +1,11 @@
 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 { createObservablePart, UmbDeepState } from '@umbraco-cms/backoffice/observable-api';
 import { TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 export class UmbTemplateWorkspaceContext extends UmbWorkspaceContext<UmbTemplateRepository, TemplateResponseModel> {
-	#data = new DeepState<TemplateResponseModel | undefined>(undefined);
+	#data = new UmbDeepState<TemplateResponseModel | undefined>(undefined);
 	data = this.#data.asObservable();
 	name = createObservablePart(this.#data, (data) => data?.name);
 	content = createObservablePart(this.#data, (data) => data?.content);