From 1ee81b29e23b9f627844568a32887e8f4a4c9164 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 13 Nov 2025 15:21:09 +0000
Subject: [PATCH 01/15] Added `icon-sort`

from Lucide's "arrow-down-up" icon.
---
 .../src/packages/core/icon-registry/icon-dictionary.json      | 4 ++++
 .../src/packages/core/icon-registry/icons.ts                  | 3 +++
 .../src/packages/core/icon-registry/icons/icon-sort.ts        | 1 +
 3 files changed, 8 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-sort.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
index a21e080e58ac..768932cbcf39 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
@@ -1972,6 +1972,10 @@
 			"name": "icon-snow",
 			"file": "cloud-snow.svg"
 		},
+		{
+			"name": "icon-sort",
+			"file": "arrow-down-up.svg"
+		},
 		{
 			"name": "icon-sound-low",
 			"file": "volume-1.svg"
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
index b62744227649..17f9956ed107 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
@@ -1500,6 +1500,9 @@ path: () => import("./icons/icon-smiley.js"),
 name: "icon-snow",
 path: () => import("./icons/icon-snow.js"),
 },{
+name: "icon-sort",
+path: () => import("./icons/icon-sort.js"),
+},{
 name: "icon-sound-low",
 path: () => import("./icons/icon-sound-low.js"),
 },{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-sort.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-sort.ts
new file mode 100644
index 000000000000..319415ea333b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-sort.ts
@@ -0,0 +1 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" class="lucide lucide-arrow-down-up" viewBox="0 0 24 24"><path d="m3 16 4 4 4-4M7 20V4M21 8l-4-4-4 4M17 4v16"/></svg>`;
\ No newline at end of file

From e9428cb08400fcee868730829bb4195fe65521d6 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 13 Nov 2025 16:49:10 +0000
Subject: [PATCH 02/15] Added "Sort" package

with property action and context.
---
 src/Umbraco.Web.UI.Client/package.json        |  1 +
 .../src/apps/backoffice/backoffice.element.ts |  1 +
 .../src/packages/sort/constants.ts            |  1 +
 .../src/packages/sort/index.ts                |  4 ++
 .../src/packages/sort/manifests.ts            |  4 ++
 .../src/packages/sort/package.json            |  8 +++
 .../sort/property/actions/constants.ts        |  1 +
 .../packages/sort/property/actions/index.ts   |  1 +
 .../sort/property/actions/manifests.ts        |  4 ++
 .../sort/property/actions/sort/constants.ts   |  1 +
 .../sort/property/actions/sort/index.ts       |  1 +
 .../sort/property/actions/sort/manifests.ts   | 24 ++++++++
 .../sort/sort-mode-property-action.element.ts | 58 +++++++++++++++++++
 .../actions/sort/sort-mode.property-action.ts | 11 ++++
 .../sort/property/actions/sort/types.ts       | 16 +++++
 .../packages/sort/property/actions/types.ts   |  1 +
 .../src/packages/sort/property/constants.ts   |  2 +
 .../sort/property/context/constants.ts        |  1 +
 .../sort/property/context/manifests.ts        | 16 +++++
 .../context/sort.property-context-token.ts    |  7 +++
 .../property/context/sort.property-context.ts | 32 ++++++++++
 .../packages/sort/property/context/types.ts   | 16 +++++
 .../src/packages/sort/property/index.ts       |  1 +
 .../src/packages/sort/property/manifests.ts   |  8 +++
 .../src/packages/sort/property/types.ts       |  1 +
 .../src/packages/sort/types.ts                |  1 +
 .../src/packages/sort/umbraco-package.ts      |  9 +++
 .../src/packages/sort/vite.config.ts          | 12 ++++
 src/Umbraco.Web.UI.Client/tsconfig.json       |  1 +
 29 files changed, 244 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/constants.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/package.json
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/constants.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/constants.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode-property-action.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode.property-action.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/types.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/types.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/constants.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/context/constants.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/context/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context-token.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/context/types.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/types.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/types.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/umbraco-package.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/vite.config.ts

diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 66b75fa2bc2f..88bc7dfe0196 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -105,6 +105,7 @@
 		"./server": "./dist-cms/packages/core/server/index.js",
 		"./settings": "./dist-cms/packages/settings/index.js",
 		"./shortcut": "./dist-cms/packages/core/shortcut/index.js",
+		"./sort": "./dist-cms/packages/sort/index.js",
 		"./sorter": "./dist-cms/packages/core/sorter/index.js",
 		"./static-file": "./dist-cms/packages/static-file/index.js",
 		"./store": "./dist-cms/packages/core/store/index.js",
diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
index 558792cabc19..4f633316a5ac 100644
--- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
@@ -38,6 +38,7 @@ const CORE_PACKAGES = [
 	import('../../packages/relations/umbraco-package.js'),
 	import('../../packages/rte/umbraco-package.js'),
 	import('../../packages/settings/umbraco-package.js'),
+	import('../../packages/sort/umbraco-package.js'),
 	import('../../packages/static-file/umbraco-package.js'),
 	import('../../packages/sysinfo/umbraco-package.js'),
 	import('../../packages/tags/umbraco-package.js'),
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/constants.ts
new file mode 100644
index 000000000000..2d1d5129a90c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/constants.ts
@@ -0,0 +1 @@
+export * from './property/constants.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/index.ts
new file mode 100644
index 000000000000..4220fa269557
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/index.ts
@@ -0,0 +1,4 @@
+export * from './constants.js';
+export * from './property/index.js';
+
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/manifests.ts
new file mode 100644
index 000000000000..774547b9d9c2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/manifests.ts
@@ -0,0 +1,4 @@
+import { manifests as propertyManifests } from './property/manifests.js';
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [...propertyManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/package.json b/src/Umbraco.Web.UI.Client/src/packages/sort/package.json
new file mode 100644
index 000000000000..5a33806691fb
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/package.json
@@ -0,0 +1,8 @@
+{
+	"name": "@umbraco-backoffice/sort",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build"
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/constants.ts
new file mode 100644
index 000000000000..a178a7c4d336
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/constants.ts
@@ -0,0 +1 @@
+export * from './sort/constants.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/index.ts
new file mode 100644
index 000000000000..d31f1c93deb9
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/index.ts
@@ -0,0 +1 @@
+export * from './sort/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/manifests.ts
new file mode 100644
index 000000000000..b2896ffacda3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/manifests.ts
@@ -0,0 +1,4 @@
+import { manifests as sortManifests } from './sort/manifests.js';
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [...sortManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/constants.ts
new file mode 100644
index 000000000000..0a048f1dee06
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/constants.ts
@@ -0,0 +1 @@
+export { UMB_PROPERTY_ACTION_SORT_KIND_MANIFEST } from './manifests.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/index.ts
new file mode 100644
index 000000000000..aef950c71a47
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/index.ts
@@ -0,0 +1 @@
+export { UmbSortModePropertyAction } from './sort-mode.property-action.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/manifests.ts
new file mode 100644
index 000000000000..e4e3afcb34f7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/manifests.ts
@@ -0,0 +1,24 @@
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_PROPERTY_ACTION_DEFAULT_KIND_MANIFEST } from '@umbraco-cms/backoffice/property-action';
+
+export const UMB_PROPERTY_ACTION_SORT_KIND_MANIFEST: UmbExtensionManifestKind = {
+	type: 'kind',
+	alias: 'Umb.Kind.PropertyAction.SortMode',
+	matchKind: 'sortMode',
+	matchType: 'propertyAction',
+	manifest: {
+		...UMB_PROPERTY_ACTION_DEFAULT_KIND_MANIFEST.manifest,
+		type: 'propertyAction',
+		kind: 'sortMode',
+		api: () => import('./sort-mode.property-action.js'),
+		element: () => import('./sort-mode-property-action.element.js'),
+		meta: {
+			icon: 'icon-sort',
+			label: 'Sort',
+		},
+	},
+};
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	UMB_PROPERTY_ACTION_SORT_KIND_MANIFEST,
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode-property-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode-property-action.element.ts
new file mode 100644
index 000000000000..8dbb99650a0d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode-property-action.element.ts
@@ -0,0 +1,58 @@
+import { UMB_SORT_PROPERTY_CONTEXT } from '../../context/sort.property-context-token.js';
+import type { ManifestPropertyActionSortModeKind } from './types.js';
+import { customElement, html, property, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UmbPropertyAction } from '@umbraco-cms/backoffice/property-action';
+import type { UUIMenuItemEvent } from '@umbraco-cms/backoffice/external/uui';
+
+@customElement('umb-sort-mode-property-action')
+export class UmbSortModePropertyActionElement extends UmbLitElement {
+	@state()
+	private _sortModeEnabled = false;
+
+	@property({ attribute: false })
+	public manifest?: ManifestPropertyActionSortModeKind;
+
+	@property({ attribute: false })
+	public api?: UmbPropertyAction<ManifestPropertyActionSortModeKind> | undefined;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_SORT_PROPERTY_CONTEXT, (context) => {
+			this.observe(context?.enabled, (enabled) => (this._sortModeEnabled = enabled ?? false));
+		});
+	}
+
+	async #onClickLabel(event: UUIMenuItemEvent) {
+		event.stopPropagation();
+		await this.api?.execute().catch(() => {});
+		this.dispatchEvent(new UmbActionExecutedEvent());
+	}
+
+	// TODO: we need to stop the regular click event from bubbling up to the table so it doesn't select the row.
+	// This should probably be handled in the UUI Menu item component. so we don't dispatch a label-click event and click event at the same time.
+	#onClick(event: PointerEvent) {
+		event.stopPropagation();
+	}
+
+	override render() {
+		const label = this._sortModeEnabled ? 'blockEditor_actionExitSortMode' : 'blockEditor_actionEnterSortMode';
+		return html`
+			<uui-menu-item label=${this.localize.term(label)} @click-label=${this.#onClickLabel} @click=${this.#onClick}>
+				${when(this.manifest?.meta.icon, (icon) => html`<umb-icon slot="icon" name=${icon}></umb-icon>`)}
+			</uui-menu-item>
+		`;
+	}
+}
+
+export { UmbSortModePropertyActionElement as element };
+
+export default UmbSortModePropertyActionElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-sort-mode-property-action': UmbSortModePropertyActionElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode.property-action.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode.property-action.ts
new file mode 100644
index 000000000000..379bee49f2d3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode.property-action.ts
@@ -0,0 +1,11 @@
+import { UMB_SORT_PROPERTY_CONTEXT } from '../../context/sort.property-context-token.js';
+import { UmbPropertyActionBase } from '@umbraco-cms/backoffice/property-action';
+
+export class UmbSortModePropertyAction extends UmbPropertyActionBase {
+	override async execute() {
+		const sortContext = await this.getContext(UMB_SORT_PROPERTY_CONTEXT);
+		sortContext?.toggle();
+	}
+}
+
+export { UmbSortModePropertyAction as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/types.ts
new file mode 100644
index 000000000000..7460e7ff32c5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/types.ts
@@ -0,0 +1,16 @@
+import type { ManifestPropertyAction, MetaPropertyActionDefaultKind } from '@umbraco-cms/backoffice/property-action';
+
+export interface ManifestPropertyActionSortModeKind<
+	MetaType extends MetaPropertyActionSortModeKind = MetaPropertyActionSortModeKind,
+> extends ManifestPropertyAction<MetaType> {
+	type: 'propertyAction';
+	kind: 'sortMode';
+}
+
+export type MetaPropertyActionSortModeKind = MetaPropertyActionDefaultKind;
+
+declare global {
+	interface UmbExtensionManifestMap {
+		umbManifestPropertyActionSortModeKind: ManifestPropertyActionSortModeKind;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/types.ts
new file mode 100644
index 000000000000..15eb65f42680
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/types.ts
@@ -0,0 +1 @@
+export type * from './sort/types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/constants.ts
new file mode 100644
index 000000000000..dcbcfa43f83d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/constants.ts
@@ -0,0 +1,2 @@
+export * from './actions/constants.js';
+export * from './context/constants.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/constants.ts
new file mode 100644
index 000000000000..056b9f31ec93
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/constants.ts
@@ -0,0 +1 @@
+export * from './sort.property-context-token.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/manifests.ts
new file mode 100644
index 000000000000..6e97b825cf8d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/manifests.ts
@@ -0,0 +1,16 @@
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	{
+		type: 'kind',
+		alias: 'Umb.Kind.PropertyContext.Sort',
+		matchKind: 'sort',
+		matchType: 'propertyContext',
+		manifest: {
+			type: 'propertyContext',
+			kind: 'sort',
+			api: () => import('./sort.property-context.js'),
+			weight: 1300,
+		},
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context-token.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context-token.ts
new file mode 100644
index 000000000000..b7e248afcb9c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context-token.ts
@@ -0,0 +1,7 @@
+import type { UmbSortPropertyContext } from './sort.property-context.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_SORT_PROPERTY_CONTEXT = new UmbContextToken<UmbSortPropertyContext>(
+	'UmbPropertyContext',
+	'UmbSortPropertyContext',
+);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context.ts
new file mode 100644
index 000000000000..903d24947ef1
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context.ts
@@ -0,0 +1,32 @@
+import { UMB_SORT_PROPERTY_CONTEXT } from './sort.property-context-token.js';
+import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbSortPropertyContext extends UmbContextBase {
+	#enabled = new UmbBooleanState(false);
+	readonly enabled = this.#enabled.asObservable();
+
+	constructor(host: UmbControllerHost) {
+		super(host, UMB_SORT_PROPERTY_CONTEXT);
+	}
+
+	enable() {
+		this.#enabled.setValue(true);
+	}
+
+	disable() {
+		this.#enabled.setValue(false);
+	}
+
+	toggle() {
+		const enabled = this.#enabled.getValue();
+		if (enabled) {
+			this.disable();
+		} else {
+			this.enable();
+		}
+	}
+}
+
+export { UmbSortPropertyContext as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/types.ts
new file mode 100644
index 000000000000..70bd908a0318
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/types.ts
@@ -0,0 +1,16 @@
+import type { ManifestPropertyContext, MetaPropertyContext } from '@umbraco-cms/backoffice/property';
+
+export interface ManifestPropertyContextClipboardKind
+	extends ManifestPropertyContext<MetaPropertyContextClipboardKind> {
+	type: 'propertyContext';
+	kind: 'clipboard';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface MetaPropertyContextClipboardKind extends MetaPropertyContext {}
+
+declare global {
+	interface UmbExtensionManifestMap {
+		umbManifestPropertyContextClipboardKind: ManifestPropertyContextClipboardKind;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/index.ts
new file mode 100644
index 000000000000..4d4b0517c8b7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/index.ts
@@ -0,0 +1 @@
+export * from './actions/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/manifests.ts
new file mode 100644
index 000000000000..eded6764dc0c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/manifests.ts
@@ -0,0 +1,8 @@
+import { manifests as actionManifests } from './actions/manifests.js';
+import { manifests as contextManifests } from './context/manifests.js';
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	...actionManifests,
+	...contextManifests,
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/types.ts
new file mode 100644
index 000000000000..6e27cb389250
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/types.ts
@@ -0,0 +1 @@
+export type * from './actions/types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/types.ts
new file mode 100644
index 000000000000..b85804d433dc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/types.ts
@@ -0,0 +1 @@
+export type * from './property/types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/umbraco-package.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/umbraco-package.ts
new file mode 100644
index 000000000000..ad7a058f1227
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/umbraco-package.ts
@@ -0,0 +1,9 @@
+export const name = 'Umbraco.Sort';
+export const extensions = [
+	{
+		name: 'Sort Bundle',
+		alias: 'Umb.Bundle.Sort',
+		type: 'bundle',
+		js: () => import('./manifests.js'),
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/vite.config.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/vite.config.ts
new file mode 100644
index 000000000000..cdf2d5afba00
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import { rmSync } from 'fs';
+import { getDefaultConfig } from '../../vite-config-base';
+
+const dist = '../../../dist-cms/packages/sort';
+
+// delete the unbundled dist folder
+rmSync(dist, { recursive: true, force: true });
+
+export default defineConfig({
+	...getDefaultConfig({ dist }),
+});
diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index 16c2d20becbd..05ec46c7a28e 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -136,6 +136,7 @@ DON'T EDIT THIS FILE DIRECTLY. It is generated by /devops/tsconfig/index.js
 			"@umbraco-cms/backoffice/server": ["./src/packages/core/server/index.ts"],
 			"@umbraco-cms/backoffice/settings": ["./src/packages/settings/index.ts"],
 			"@umbraco-cms/backoffice/shortcut": ["./src/packages/core/shortcut/index.ts"],
+			"@umbraco-cms/backoffice/sort": ["./src/packages/sort/index.ts"],
 			"@umbraco-cms/backoffice/sorter": ["./src/packages/core/sorter/index.ts"],
 			"@umbraco-cms/backoffice/static-file": ["./src/packages/static-file/index.ts"],
 			"@umbraco-cms/backoffice/store": ["./src/packages/core/store/index.ts"],

From fbed67475ac32cb23a30b700c5c3f09eae5f368c Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 13 Nov 2025 16:55:11 +0000
Subject: [PATCH 03/15] Adds the "sort" property action and context to the
 Block Grid property

---
 .../packages/block/block-grid/manifests.ts    |  2 ++
 .../block/block-grid/sort/manifests.ts        | 27 +++++++++++++++++++
 .../sort/property/actions/sort/manifests.ts   |  2 +-
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block-grid/sort/manifests.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/manifests.ts
index 7a69a2f0904d..f48a316031c3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/manifests.ts
@@ -2,6 +2,7 @@ import { manifests as clipboardManifests } from './clipboard/manifests.js';
 import { manifests as componentManifests } from './components/manifests.js';
 import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
 import { manifests as propertyValueClonerManifests } from './property-value-cloner/manifests.js';
+import { manifests as sortManifests } from './sort/manifests.js';
 import { manifests as validationManifests } from './validation/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
 import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
@@ -11,6 +12,7 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 	...componentManifests,
 	...propertyEditorManifests,
 	...propertyValueClonerManifests,
+	...sortManifests,
 	...validationManifests,
 	...workspaceManifests,
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/sort/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/sort/manifests.ts
new file mode 100644
index 000000000000..d69dd08047e7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/sort/manifests.ts
@@ -0,0 +1,27 @@
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from '../property-editors/constants.js';
+import { UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/property';
+
+const forPropertyEditorUis = [UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS];
+
+const propertyContext: UmbExtensionManifest = {
+	type: 'propertyContext',
+	kind: 'sort',
+	alias: 'Umb.PropertyContext.BlockGrid.Sort',
+	name: 'Block Grid Sort Property Context',
+	forPropertyEditorUis,
+};
+
+const propertyAction: UmbExtensionManifest = {
+	type: 'propertyAction',
+	kind: 'sortMode',
+	alias: 'Umb.PropertyAction.BlockGrid.SortMode',
+	name: 'Block Grid Sort Mode Property Action',
+	forPropertyEditorUis,
+	conditions: [
+		{
+			alias: UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS,
+		},
+	],
+};
+
+export const manifests: Array<UmbExtensionManifest> = [propertyContext, propertyAction];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/manifests.ts
index e4e3afcb34f7..4cc8f9e4558e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/manifests.ts
@@ -14,7 +14,7 @@ export const UMB_PROPERTY_ACTION_SORT_KIND_MANIFEST: UmbExtensionManifestKind =
 		element: () => import('./sort-mode-property-action.element.js'),
 		meta: {
 			icon: 'icon-sort',
-			label: 'Sort',
+			label: '#general_sort',
 		},
 	},
 };

From 417d0f8441c12610dd2a7a0d8ce1115ede053562 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 13 Nov 2025 17:25:15 +0000
Subject: [PATCH 04/15] [WIP] Observing sort mode toggle on Block Grid editor

---
 src/Umbraco.Web.UI.Client/package-lock.json   |  7 ++
 .../block-grid-entries.element.ts             | 92 ++++++++++---------
 .../property-actions/manifests.ts             |  6 +-
 .../property-editor-ui-block-grid.element.ts  | 67 ++++++--------
 4 files changed, 88 insertions(+), 84 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index 8dfb1cdc1dbb..8d6e9778fcdc 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -3674,6 +3674,10 @@
 			"resolved": "src/external/signalr",
 			"link": true
 		},
+		"node_modules/@umbraco-backoffice/sort": {
+			"resolved": "src/packages/sort",
+			"link": true
+		},
 		"node_modules/@umbraco-backoffice/static-file": {
 			"resolved": "src/packages/static-file",
 			"link": true
@@ -17113,6 +17117,9 @@
 		"src/packages/settings": {
 			"name": "@umbraco-backoffice/settings"
 		},
+		"src/packages/sort": {
+			"name": "@umbraco-backoffice/sort"
+		},
 		"src/packages/static-file": {
 			"name": "@umbraco-backoffice/static-file"
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
index da0777759959..e1a59417c4fc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
@@ -1,25 +1,20 @@
 import type { UmbBlockGridEntryElement } from '../block-grid-entry/block-grid-entry.element.js';
 import type { UmbBlockGridLayoutModel } from '../../types.js';
 import { UmbBlockGridEntriesContext } from './block-grid-entries.context.js';
+import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import {
 	getAccumulatedValueOfIndex,
 	getInterpolatedIndexOfPositionInWeightMap,
 	isWithinRect,
 } from '@umbraco-cms/backoffice/utils';
+import { UmbFormControlMixin, UmbFormControlValidator } from '@umbraco-cms/backoffice/validation';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { html, customElement, state, repeat, css, property, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import {
-	UmbSorterController,
-	type UmbSorterConfig,
-	type UmbSorterResolvePlacementArgs,
-} from '@umbraco-cms/backoffice/sorter';
-import {
-	UmbFormControlMixin,
-	UmbFormControlValidator,
-	type UmbFormControlValidatorConfig,
-} from '@umbraco-cms/backoffice/validation';
+import { UMB_SORT_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/sort';
+import type { UmbFormControlValidatorConfig } from '@umbraco-cms/backoffice/validation';
 import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
+import type { UmbSorterConfig, UmbSorterResolvePlacementArgs } from '@umbraco-cms/backoffice/sorter';
 
 /**
  * Notice this utility method is not really shareable with others as it also takes areas into account. [NL]
@@ -123,7 +118,6 @@ const SORTER_CONFIG: UmbSorterConfig<UmbBlockGridLayoutModel, UmbBlockGridEntryE
  */
 @customElement('umb-block-grid-entries')
 export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElement) {
-	//
 	#sorter = new UmbSorterController<UmbBlockGridLayoutModel, UmbBlockGridEntryElement>(this, {
 		...SORTER_CONFIG,
 		onStart: () => {
@@ -152,6 +146,33 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 	#rangeUnderflowValidator?: UmbFormControlValidatorConfig;
 	#rangeOverflowValidator?: UmbFormControlValidatorConfig;
 
+	@state()
+	private _areaKey?: string | null;
+
+	@state()
+	private _canCreate?: boolean;
+
+	@state()
+	private _configCreateLabel?: string;
+
+	@state()
+	private _createLabel?: string;
+
+	@state()
+	private _isReadOnly: boolean = false;
+
+	@state()
+	private _layoutEntries: Array<UmbBlockGridLayoutModel> = [];
+
+	@state()
+	private _limitMax?: number;
+
+	@state()
+	private _sortModeEnabled = false;
+
+	@state()
+	private _styleElement?: HTMLLinkElement;
+
 	@property({ type: String, attribute: 'area-key', reflect: true })
 	public set areaKey(value: string | null | undefined) {
 		this._areaKey = value;
@@ -177,30 +198,6 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 		return this.#context.getLayoutColumns();
 	}
 
-	@state()
-	private _areaKey?: string | null;
-
-	@state()
-	private _canCreate?: boolean;
-
-	@state()
-	private _createLabel?: string;
-
-	@state()
-	private _configCreateLabel?: string;
-
-	@state()
-	private _styleElement?: HTMLLinkElement;
-
-	@state()
-	private _layoutEntries: Array<UmbBlockGridLayoutModel> = [];
-
-	@state()
-	private _isReadOnly: boolean = false;
-
-	@state()
-	private _limitMax?: number;
-
 	constructor() {
 		super();
 
@@ -294,6 +291,10 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 		});
 
 		new UmbFormControlValidator(this, this /*, this.#dataPath*/);
+
+		this.consumeContext(UMB_SORT_PROPERTY_CONTEXT, (sortPropertyContext) => {
+			this.observe(sortPropertyContext?.enabled, (enabled) => (this._sortModeEnabled = enabled ?? false));
+		});
 	}
 
 	async #setupRangeValidation(rangeLimit: UmbNumberRangeValueType | undefined) {
@@ -393,6 +394,9 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 	override render() {
 		return html`
 			${this._styleElement}
+
+			<h3>Sort mode: ${this._sortModeEnabled ? '👍' : '👎'}</h3>
+
 			<div class="umb-block-grid__layout-container" data-area-length=${this._layoutEntries.length}>
 				${repeat(
 					this._layoutEntries,
@@ -414,13 +418,17 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 	#renderCreateButtonGroup() {
 		if (this._limitMax === 1 && this._layoutEntries.length > 0) return nothing;
 		if (this._areaKey === null || this._layoutEntries.length === 0) {
-			return html` <uui-button-group id="createButton">
-				${this.#renderCreateButton()} ${this.#renderPasteButton()}
-			</uui-button-group>`;
+			return html`
+				<uui-button-group id="createButton">
+					${this.#renderCreateButton()} ${this.#renderPasteButton()}
+				</uui-button-group>
+			`;
 		} else if (this._isReadOnly === false) {
-			return html`<uui-button-inline-create
-				href=${this.#context.getPathForCreateBlock(-1) ?? ''}
-				label=${this.localize.term('blockEditor_addBlock')}></uui-button-inline-create> `;
+			return html`
+				<uui-button-inline-create
+					href=${this.#context.getPathForCreateBlock(-1) ?? ''}
+					label=${this.localize.term('blockEditor_addBlock')}></uui-button-inline-create>
+			`;
 		} else {
 			return nothing;
 		}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-actions/manifests.ts
index 8b2befb3a1be..bd1bca044c7d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-actions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-actions/manifests.ts
@@ -11,10 +11,6 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 		name: 'Block Grid Paste From Clipboard Property Action',
 		api: () => import('./block-grid-paste-from-clipboard.js'),
 		forPropertyEditorUis: [UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS],
-		conditions: [
-			{
-				alias: UMB_WRITABLE_PROPERTY_CONDITION_ALIAS,
-			},
-		],
+		conditions: [{ alias: UMB_WRITABLE_PROPERTY_CONDITION_ALIAS }],
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
index 7b0ec0e6a590..a1fcb24d7203 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
@@ -1,35 +1,27 @@
-import { UmbBlockGridManagerContext } from '../../block-grid-manager/index.js';
 import type { UmbBlockGridTypeModel, UmbBlockGridValueModel } from '../../types.js';
+import { UmbBlockGridManagerContext } from '../../block-grid-manager/index.js';
 import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS } from './constants.js';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import {
-	html,
-	customElement,
-	property,
-	state,
-	css,
-	type PropertyValueMap,
-	ref,
-	nothing,
-} from '@umbraco-cms/backoffice/external/lit';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type {
-	UmbPropertyEditorUiElement,
-	UmbPropertyEditorConfigCollection,
-} from '@umbraco-cms/backoffice/property-editor';
+import { css, customElement, html, nothing, property, ref, state } from '@umbraco-cms/backoffice/external/lit';
+import { debounceTime } from '@umbraco-cms/backoffice/external/rxjs';
 import { jsonStringComparison, observeMultiple } from '@umbraco-cms/backoffice/observable-api';
-import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import {
-	UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
 	UmbFormControlMixin,
 	UmbValidationContext,
+	UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
 } from '@umbraco-cms/backoffice/validation';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UMB_CONTENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/content';
+import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
-import { debounceTime } from '@umbraco-cms/backoffice/external/rxjs';
+import type {
+	UmbPropertyEditorUiElement,
+	UmbPropertyEditorConfigCollection,
+} from '@umbraco-cms/backoffice/property-editor';
 
 // TODO: consider moving the components to the property editor folder as they are only used here
 import '../../local-components.js';
-import { UMB_CONTENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/content';
 
 /**
  * @element umb-property-editor-ui-block-grid
@@ -39,11 +31,15 @@ export class UmbPropertyEditorUIBlockGridElement
 	extends UmbFormControlMixin<UmbBlockGridValueModel, typeof UmbLitElement>(UmbLitElement)
 	implements UmbPropertyEditorUiElement
 {
-	#validationContext = new UmbValidationContext(this);
+	#lastValue: UmbBlockGridValueModel | undefined = undefined;
 	#managerContext = new UmbBlockGridManagerContext(this);
-	//
+	#validationContext = new UmbValidationContext(this);
 
-	#lastValue: UmbBlockGridValueModel | undefined = undefined;
+	@state()
+	private _layoutColumns?: number;
+
+	@state()
+	private _notSupportedVariantSetting?: boolean;
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
@@ -81,14 +77,13 @@ export class UmbPropertyEditorUIBlockGridElement
 		return this.#readonly;
 	}
 	#readonly = false;
+
 	@property({ type: Boolean })
 	mandatory?: boolean;
+
 	@property({ type: String })
 	mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
 
-	@state()
-	private _layoutColumns?: number;
-
 	@property({ attribute: false })
 	public override set value(value: UmbBlockGridValueModel | undefined) {
 		this.#lastValue = value;
@@ -114,9 +109,6 @@ export class UmbPropertyEditorUIBlockGridElement
 		return super.value;
 	}
 
-	@state()
-	private _notSupportedVariantSetting?: boolean;
-
 	constructor() {
 		super();
 
@@ -266,13 +258,14 @@ export class UmbPropertyEditorUIBlockGridElement
 	}
 
 	override render() {
-		if (this._notSupportedVariantSetting) {
-			return nothing;
-		}
-		return html` <umb-block-grid-entries
-			${ref(this.#gotRootEntriesElement)}
-			.areaKey=${null}
-			.layoutColumns=${this._layoutColumns}></umb-block-grid-entries>`;
+		if (this._notSupportedVariantSetting) return nothing;
+		return html`
+			<umb-block-grid-entries
+				${ref(this.#gotRootEntriesElement)}
+				.areaKey=${null}
+				.layoutColumns=${this._layoutColumns}>
+			</umb-block-grid-entries>
+		`;
 	}
 
 	static override styles = [

From ce7681d616f98e25313297aa111e28f5435b90d2 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 17 Nov 2025 17:36:09 +0000
Subject: [PATCH 05/15] [WIP] Further work on Block Grid editor sort-mode

---
 .../block-grid-manager.context.ts             |  23 +-
 .../block-grid-areas-container.element.ts     |  41 +--
 .../block-grid-block-inline.element.ts        |  47 ++-
 .../block-grid-block-unsupported.element.ts   |  10 +-
 .../block-grid-block.element.ts               |  29 +-
 .../block-grid-entries.context.ts             |   1 +
 .../block-grid-entries.element.ts             |  24 +-
 .../block-grid-entry.context.ts               |   6 +
 .../block-grid-entry.element.ts               | 319 ++++++++++--------
 .../property-editor-ui-block-grid.element.ts  |  23 +-
 .../block-overlay-expose-button.element.ts    |  13 +-
 11 files changed, 308 insertions(+), 228 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts
index 7f25db8bf587..e9499b6696c1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts
@@ -9,12 +9,13 @@ import {
 } from '@umbraco-cms/backoffice/observable-api';
 import { transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
 import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
+import { UMB_SORT_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/sort';
 import type { UmbBlockDataModel } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
-import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 
 /**
  * A implementation of the Block Manager specifically for the Block Grid Editor.
@@ -33,6 +34,18 @@ export class UmbBlockGridManagerContext<
 		return this.#inlineEditingMode.getValue();
 	}
 
+	#sortPropertyContext?: typeof UMB_SORT_PROPERTY_CONTEXT.TYPE;
+	#sortingMode = new UmbBooleanState(undefined);
+	readonly sortingMode = this.#sortingMode.asObservable();
+
+	setSortingMode(sortingMode: boolean) {
+		this.#sortPropertyContext?.setSortingMode(sortingMode);
+	}
+	getSortingMode(): boolean | undefined {
+		//return this.#sortingMode.getValue();
+		return this.#sortPropertyContext?.getSortingMode();
+	}
+
 	#initAppUrl: Promise<unknown>;
 
 	#serverUrl?: string;
@@ -90,7 +103,15 @@ export class UmbBlockGridManagerContext<
 		this.#initAppUrl = this.consumeContext(UMB_SERVER_CONTEXT, (instance) => {
 			this.#serverUrl = instance?.getServerUrl();
 		}).asPromise({ preventTimeout: true });
+
+		this.consumeContext(UMB_SORT_PROPERTY_CONTEXT, (sortPropertyContext) => {
+			this.#sortPropertyContext = sortPropertyContext;
+			this.observe(this.#sortPropertyContext?.sortingMode, (sortingMode) => {
+				this.#sortingMode.setValue(sortingMode);
+			});
+		});
 	}
+
 	/**
 	 * @param contentElementTypeKey
 	 * @param partialLayoutEntry
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts
index 09c5dac83a93..b4812a18d389 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts
@@ -1,8 +1,8 @@
 import type { UmbBlockGridTypeAreaType } from '../../types.js';
 import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../block-grid-entry/constants.js';
 import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from '../../block-grid-manager/constants.js';
+import { css, customElement, html, nothing, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 
 /**
  * @description
@@ -56,24 +56,27 @@ export class UmbBlockGridAreasContainerElement extends UmbLitElement {
 	}
 
 	override render() {
-		return this._areas && this._areas.length > 0
-			? html` ${this._styleElement}
-					<div
-						class="umb-block-grid__area-container"
-						part="area-container"
-						style="--umb-block-grid--area-grid-columns: ${this._areaGridColumns}">
-						${repeat(
-							this._areas,
-							(area) => area.key,
-							(area) =>
-								html`<umb-block-grid-entries
-									part="area"
-									class="umb-block-grid__area"
-									.areaKey=${area.key}
-									.layoutColumns=${area.columnSpan}></umb-block-grid-entries>`,
-						)}
-					</div>`
-			: '';
+		if (!this._areas?.length) return nothing;
+		return html`
+			${this._styleElement}
+			<div
+				class="umb-block-grid__area-container"
+				part="area-container"
+				style="--umb-block-grid--area-grid-columns: ${this._areaGridColumns}">
+				${repeat(
+					this._areas!,
+					(area) => area.key,
+					(area) => html`
+						<umb-block-grid-entries
+							part="area"
+							class="umb-block-grid__area"
+							.areaKey=${area.key}
+							.layoutColumns=${area.columnSpan}>
+						</umb-block-grid-entries>
+					`,
+				)}
+			</div>
+		`;
 	}
 
 	static override styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
index 6a515902f167..ebf3ae9de944 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
@@ -76,10 +76,12 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 				'observeContentKey',
 			);
 		});
+
 		this.consumeContext(UMB_BLOCK_GRID_ENTRIES_CONTEXT, (entriesContext) => {
 			this.#parentUnique = entriesContext?.getParentUnique();
 			this.#areaKey = entriesContext?.getAreaKey();
 		});
+
 		new UmbExtensionApiInitializer(
 			this,
 			umbExtensionsRegistry,
@@ -188,33 +190,44 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 			</span>
 			${when(
 				this.unpublished,
-				() =>
-					html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
-						><umb-localize key="blockEditor_notExposedLabel"></umb-localize
-					></uui-tag>`,
+				() => html`
+					<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}>
+						<umb-localize key="blockEditor_notExposedLabel"></umb-localize>
+					</uui-tag>
+				`,
 			)}
 		`;
 	}
 
 	#renderInside() {
 		if (this.unpublished === true) {
-			return html`<uui-button id="exposeButton" @click=${this.#expose}
-				><uui-icon name="icon-add"></uui-icon>
-				<umb-localize
-					key="blockEditor_createThisFor"
-					.args=${[this._ownerContentTypeName, this._variantName]}></umb-localize
-			></uui-button>`;
+			return html`
+				<uui-button id="exposeButton" @click=${this.#expose}>
+					<uui-icon name="icon-add"></uui-icon>
+					<umb-localize
+						key="blockEditor_createThisFor"
+						.args=${[this._ownerContentTypeName, this._variantName]}></umb-localize>
+				</uui-button>
+			`;
 		} else {
-			return html`<div id="inside" draggable="false">
-				<umb-property-type-based-property
-					.property=${this._inlineProperty}
-					.dataPath=${this._inlinePropertyDataPath ?? ''}
-					slot="areas"></umb-property-type-based-property>
-				<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
-			</div>`;
+			return html`
+				<div id="inside" draggable="false">
+					<umb-property-type-based-property
+						.property=${this._inlineProperty}
+						.dataPath=${this._inlinePropertyDataPath ?? ''}
+						slot="areas"></umb-property-type-based-property>
+					<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
+				</div>
+			`;
 		}
 	}
 
+	override destroy(): void {
+		super.destroy();
+		this.#blockContext?.destroy();
+		this.#workspaceContext?.destroy();
+	}
+
 	static override styles = [
 		UmbTextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-unsupported/block-grid-block-unsupported.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-unsupported/block-grid-block-unsupported.element.ts
index 7e37f1244d67..d7d0f978cccf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-unsupported/block-grid-block-unsupported.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-unsupported/block-grid-block-unsupported.element.ts
@@ -31,10 +31,12 @@ export class UmbBlockGridBlockUnsupportedElement extends UmbLitElement {
 	}
 
 	#renderInside() {
-		return html`<div id="inside" draggable="false">
-			${this.localize.term('blockEditor_unsupportedBlockDescription')}
-			<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
-		</div>`;
+		return html`
+			<div id="inside" draggable="false">
+				${this.localize.term('blockEditor_unsupportedBlockDescription')}
+				<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
+			</div>
+		`;
 	}
 
 	static override styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
index 92e27823e769..30b0b49410c7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
@@ -39,10 +39,11 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 				<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
 				${when(
 					this.unpublished,
-					() =>
-						html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
-							><umb-localize key="blockEditor_notExposedLabel"></umb-localize
-						></uui-tag>`,
+					() => html`
+						<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}>
+							<umb-localize key="blockEditor_notExposedLabel"></umb-localize>
+						</uui-tag>
+					`,
 				)}
 				<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
 			</umb-ref-grid-block>
@@ -51,9 +52,6 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 
 	static override styles = [
 		css`
-			umb-block-grid-areas-container {
-				margin-top: calc(var(--uui-size-2) + 1px);
-			}
 			umb-block-grid-areas-container::part(area) {
 				margin: var(--uui-size-2);
 			}
@@ -64,10 +62,27 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 				margin-top: -0.3em;
 				vertical-align: text-top;
 			}
+
 			:host([unpublished]) umb-icon,
 			:host([unpublished]) umb-ufm-render {
 				opacity: 0.6;
 			}
+
+			@keyframes umb-icon-jiggle {
+				0%,
+				100% {
+					transform: rotate(6deg);
+				}
+				50% {
+					transform: rotate(-6deg);
+				}
+			}
+
+			:host(.sortable) {
+				umb-icon {
+					animation: umb-icon-jiggle 500ms infinite ease-in-out;
+				}
+			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.ts
index 8721d1200b33..2ed85d798d76 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.ts
@@ -401,6 +401,7 @@ export class UmbBlockGridEntriesContext
 		this.#allowedBlockTypes.setValue(this.#retrieveAllowedElementTypes());
 		this.#setupAllowedBlockTypesLimits();
 	}
+
 	#setupRangeLimits() {
 		if (!this._manager) return;
 		//const range = this.#retrieveRangeLimits();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
index e1a59417c4fc..48e041515440 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
@@ -1,7 +1,7 @@
 import type { UmbBlockGridEntryElement } from '../block-grid-entry/block-grid-entry.element.js';
 import type { UmbBlockGridLayoutModel } from '../../types.js';
 import { UmbBlockGridEntriesContext } from './block-grid-entries.context.js';
-import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import {
 	getAccumulatedValueOfIndex,
 	getInterpolatedIndexOfPositionInWeightMap,
@@ -11,7 +11,6 @@ import { UmbFormControlMixin, UmbFormControlValidator } from '@umbraco-cms/backo
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UMB_SORT_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/sort';
 import type { UmbFormControlValidatorConfig } from '@umbraco-cms/backoffice/validation';
 import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
 import type { UmbSorterConfig, UmbSorterResolvePlacementArgs } from '@umbraco-cms/backoffice/sorter';
@@ -167,9 +166,6 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 	@state()
 	private _limitMax?: number;
 
-	@state()
-	private _sortModeEnabled = false;
-
 	@state()
 	private _styleElement?: HTMLLinkElement;
 
@@ -291,10 +287,6 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 		});
 
 		new UmbFormControlValidator(this, this /*, this.#dataPath*/);
-
-		this.consumeContext(UMB_SORT_PROPERTY_CONTEXT, (sortPropertyContext) => {
-			this.observe(sortPropertyContext?.enabled, (enabled) => (this._sortModeEnabled = enabled ?? false));
-		});
 	}
 
 	async #setupRangeValidation(rangeLimit: UmbNumberRangeValueType | undefined) {
@@ -394,24 +386,22 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 	override render() {
 		return html`
 			${this._styleElement}
-
-			<h3>Sort mode: ${this._sortModeEnabled ? '👍' : '👎'}</h3>
-
 			<div class="umb-block-grid__layout-container" data-area-length=${this._layoutEntries.length}>
 				${repeat(
 					this._layoutEntries,
 					(layout, index) => `${index}_${layout.contentKey}`,
-					(layout, index) =>
-						html`<umb-block-grid-entry
+					(layout, index) => html`
+						<umb-block-grid-entry
 							class="umb-block-grid__layout-item"
 							index=${index}
 							.contentKey=${layout.contentKey}
 							.layout=${layout}>
-						</umb-block-grid-entry>`,
+						</umb-block-grid-entry>
+					`,
 				)}
 			</div>
-			${this._canCreate ? this.#renderCreateButtonGroup() : nothing}
-			${this._areaKey ? html` <uui-form-validation-message .for=${this}></uui-form-validation-message>` : nothing}
+			${when(this._canCreate, () => this.#renderCreateButtonGroup())}
+			${when(this._areaKey, () => html`<uui-form-validation-message .for=${this}></uui-form-validation-message>`)}
 		`;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.context.ts
index 952892684266..8d1d21467b0a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.context.ts
@@ -51,6 +51,7 @@ export class UmbBlockGridEntryContext
 		if (!x) return undefined;
 		return [x.rowMinSpan ?? 1, x.rowMaxSpan ?? 1];
 	}
+
 	readonly inlineEditingMode = this._blockType.asObservablePart((x) => x?.inlineEditing === true);
 
 	#relevantColumnSpanOptions = new UmbArrayState<number>([], (x) => x);
@@ -73,6 +74,9 @@ export class UmbBlockGridEntryContext
 		([a, b]) => a === true && b === false,
 	);
 
+	#sortingMode = new UmbBooleanState(undefined);
+	readonly sortingMode = this.#sortingMode.asObservable();
+
 	readonly scaleManager = new UmbBlockGridScaleManager(this);
 
 	constructor(host: UmbControllerHost) {
@@ -268,6 +272,8 @@ export class UmbBlockGridEntryContext
 			},
 			'observeRowSpanValidation',
 		);
+
+		this.observe(this._manager.sortingMode, (sortingMode) => this.#sortingMode.setValue(sortingMode ?? false));
 	}
 
 	protected override _gotContentType() {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
index ac93c62bff2c..d5ada8f87929 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
@@ -1,26 +1,25 @@
 import type { UmbBlockGridLayoutModel } from '../../types.js';
 import { UMB_BLOCK_GRID } from '../../constants.js';
 import { UmbBlockGridEntryContext } from './block-grid-entry.context.js';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { html, css, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
-import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
+import { css, customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
-import { UmbObserveValidationStateController } from '@umbraco-cms/backoffice/validation';
 import { UmbDataPathBlockElementDataQuery } from '@umbraco-cms/backoffice/block';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbObserveValidationStateController } from '@umbraco-cms/backoffice/validation';
+import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '@umbraco-cms/backoffice/external/uui';
+import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
 import type {
 	ManifestBlockEditorCustomView,
 	UmbBlockEditorCustomViewProperties,
 } from '@umbraco-cms/backoffice/block-custom-view';
-import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '@umbraco-cms/backoffice/external/uui';
 import type { UmbExtensionElementInitializer } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
 
 /**
  * @element umb-block-grid-entry
  */
 @customElement('umb-block-grid-entry')
 export class UmbBlockGridEntryElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	//
 	@property({ type: Number, reflect: true })
 	public get index(): number | undefined {
 		return this.#context.getIndex();
@@ -51,7 +50,6 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		);
 	}
 	private _contentKey?: string | undefined;
-	//
 
 	#context = new UmbBlockGridEntryContext(this);
 	#renderTimeout: number | undefined;
@@ -106,6 +104,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 	@state()
 	private _inlineEditingMode?: boolean;
 
+	@state()
+	private _sortingMode?: boolean;
+
 	@state()
 	private _canScale?: boolean;
 
@@ -151,6 +152,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		super();
 		this.#init();
 	}
+
 	#init() {
 		// Misc:
 		this.observe(
@@ -169,20 +171,8 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			},
 			null,
 		);
-		this.observe(
-			this.#context.canScale,
-			(canScale) => {
-				this._canScale = canScale;
-			},
-			null,
-		);
-		this.observe(
-			this.#context.isAllowed,
-			(isAllowed) => {
-				this._invalidLocation = !isAllowed;
-			},
-			null,
-		);
+		this.observe(this.#context.canScale, (canScale) => (this._canScale = canScale), null);
+		this.observe(this.#context.isAllowed, (isAllowed) => (this._invalidLocation = !isAllowed), null);
 		this.observe(
 			this.#context.blockType,
 			(blockType) => {
@@ -225,21 +215,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			},
 			null,
 		);
-		this.observe(
-			this.#context.actionsVisibility,
-			(showActions) => {
-				this._showActions = showActions;
-			},
-			null,
-		);
-
-		this.observe(
-			this.#context.inlineEditingMode,
-			(mode) => {
-				this._inlineEditingMode = mode;
-			},
-			null,
-		);
+		this.observe(this.#context.actionsVisibility, (showActions) => (this._showActions = showActions), null);
+		this.observe(this.#context.inlineEditingMode, (mode) => (this._inlineEditingMode = mode), null);
+		this.observe(this.#context.sortingMode, (mode) => (this._sortingMode = mode), null);
 
 		// Data:
 		this.observe(
@@ -429,6 +407,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			// accept no extensions if we don't have a content type alias
 			return false;
 		}
+
 		// We do have _contentTypeAlias at this stage, cause we do use the filter method in the extension slot which first gets rendered when we have the _contentTypeAlias. [NL]
 		if (
 			manifest.forContentTypeAlias &&
@@ -436,9 +415,11 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		) {
 			return false;
 		}
+
 		if (manifest.forBlockEditor && !stringOrStringArrayContains(manifest.forBlockEditor, UMB_BLOCK_GRID)) {
 			return false;
 		}
+
 		return true;
 	};
 
@@ -450,92 +431,116 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		if (this._exposed) {
 			return ext.component;
 		} else {
-			return html`<div>
-				${ext.component}
-				<umb-block-overlay-expose-button
-					.contentTypeName=${this._contentTypeName}
-					@click=${this.#expose}></umb-block-overlay-expose-button>
-			</div>`;
+			return html`
+				<div>
+					${ext.component}
+					<umb-block-overlay-expose-button .contentTypeName=${this._contentTypeName} @click=${this.#expose}>
+					</umb-block-overlay-expose-button>
+				</div>
+			`;
 		}
 	};
 
 	override render() {
-		return this.contentKey && (this._contentTypeAlias || this._unsupported)
-			? html`
-					${this.#renderCreateBeforeInlineButton()}
-					<div class="umb-block-grid__block" part="umb-block-grid__block">
-						<umb-extension-slot
-							.filter=${this.#extensionSlotFilterMethod}
-							.renderMethod=${this.#extensionSlotRenderMethod}
-							.fallbackRenderMethod=${this.#renderBuiltinBlockView}
-							.props=${this._blockViewProps}
-							default-element=${this._inlineEditingMode ? 'umb-block-grid-block-inline' : 'umb-block-grid-block'}
-							type="blockEditorCustomView"
-							single></umb-extension-slot>
-						${this.#renderActionBar()}
-						${!this._showContentEdit && this._contentInvalid
-							? html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
-							: nothing}
-						${this._invalidLocation
-							? html`<uui-tag id="invalidLocation" color="danger"
-									><umb-localize key="blockEditor_invalidDropPosition" .args=${[this._label]}></umb-localize
-								></uui-tag>`
-							: nothing}
-						${this._canScale
-							? html` <umb-block-scale-handler
-									@mousedown=${(e: MouseEvent) => this.#context.scaleManager.onScaleMouseDown(e)}>
-									${this._columnSpan}x${this._rowSpan}
-								</umb-block-scale-handler>`
-							: nothing}
-					</div>
-					${this.#renderCreateAfterInlineButton()}
-				`
-			: nothing;
+		return when(
+			this.contentKey && (this._contentTypeAlias || this._unsupported),
+			() => html`
+				${this.#renderCreateBeforeInlineButton()}
+				<div class="umb-block-grid__block" part="umb-block-grid__block">
+					${when(
+						this._sortingMode,
+						() => this.#renderRefBlock(),
+						() => html`
+							<umb-extension-slot
+								single
+								type="blockEditorCustomView"
+								.filter=${this.#extensionSlotFilterMethod}
+								.renderMethod=${this.#extensionSlotRenderMethod}
+								.fallbackRenderMethod=${this.#renderBuiltinBlockView}
+								.props=${this._blockViewProps}></umb-extension-slot>
+						`,
+					)}
+					${this.#renderActionBar()}
+					${when(
+						!this._showContentEdit && this._contentInvalid,
+						() => html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`,
+					)}
+					${when(
+						this._invalidLocation,
+						() => html`
+							<uui-tag id="invalidLocation" color="danger">
+								<umb-localize key="blockEditor_invalidDropPosition" .args=${[this._label]}></umb-localize>
+							</uui-tag>
+						`,
+					)}
+					${when(
+						this._canScale,
+						() => html`
+							<umb-block-scale-handler @mousedown=${(e: MouseEvent) => this.#context.scaleManager.onScaleMouseDown(e)}>
+								${this._columnSpan}x${this._rowSpan}
+							</umb-block-scale-handler>
+						`,
+					)}
+				</div>
+				${this.#renderCreateAfterInlineButton()}
+			`,
+		);
 	}
 
 	#renderBuiltinBlockView = () => {
 		if (this._unsupported) {
 			return this.#renderUnsupportedBlock();
 		}
+
 		if (this._inlineEditingMode) {
-			return this.renderInlineBlock();
+			return this.#renderInlineBlock();
 		}
+
 		return this.#renderRefBlock();
 	};
 
 	#renderUnsupportedBlock() {
-		return html`<umb-block-grid-block-unsupported
-			class="umb-block-grid__block--view"
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}></umb-block-grid-block-unsupported>`;
-		//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root
+		return html`
+			<umb-block-grid-block-unsupported
+				class="umb-block-grid__block--view"
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}>
+			</umb-block-grid-block-unsupported>
+		`;
+		//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root. [NL]
 	}
 
-	renderInlineBlock() {
-		return html`<umb-block-grid-block-inline
-			class="umb-block-grid__block--view"
-			.label=${this._label}
-			.icon=${this._icon}
-			.index=${this._blockViewProps.index}
-			.unpublished=${!this._exposed}
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}></umb-block-grid-block-inline>`;
-		//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root
+	#renderInlineBlock() {
+		return html`
+			<umb-block-grid-block-inline
+				class="umb-block-grid__block--view"
+				.label=${this._label}
+				.icon=${this._icon}
+				.index=${this._blockViewProps.index}
+				.unpublished=${!this._exposed}
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}>
+			</umb-block-grid-block-inline>
+		`;
+		//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root. [NL]
 	}
 
 	#renderRefBlock() {
-		return html`<umb-block-grid-block
-			class="umb-block-grid__block--view"
-			.label=${this._label}
-			.icon=${this._icon}
-			.index=${this._blockViewProps.index}
-			.unpublished=${!this._exposed}
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}></umb-block-grid-block>`;
-		//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root
+		return html`
+			<umb-block-grid-block
+				class="umb-block-grid__block--view ${this._sortingMode ? 'sortable' : ''}"
+				.label=${this._label}
+				.icon=${this._icon}
+				.index=${this._blockViewProps.index}
+				.unpublished=${!this._exposed}
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}>
+			</umb-block-grid-block>
+		`;
+		//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root. [NL]
 	}
 
 	#renderCreateBeforeInlineButton() {
@@ -543,12 +548,13 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		if (!this._createBeforePath) return nothing;
 		if (!this._showInlineCreateBefore) return nothing;
 
-		return html`<uui-button-inline-create
-			href=${this._createBeforePath}
-			label=${this.localize.term('blockEditor_addBlock')}
-			style=${this._inlineCreateAboveWidth
-				? `width: ${this._inlineCreateAboveWidth}`
-				: ''}></uui-button-inline-create>`;
+		return html`
+			<uui-button-inline-create
+				href=${this._createBeforePath}
+				label=${this.localize.term('blockEditor_addBlock')}
+				style=${this._inlineCreateAboveWidth ? `width: ${this._inlineCreateAboveWidth}` : ''}>
+			</uui-button-inline-create>
+		`;
 	}
 
 	#renderCreateAfterInlineButton() {
@@ -565,59 +571,74 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 	}
 
 	#renderActionBar() {
-		return this._showActions
-			? html`
-					<uui-action-bar>
-						${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
-						${this.#renderDeleteAction()}</uui-action-bar
-					>
-				`
-			: nothing;
+		if (this._sortingMode) return nothing;
+		if (!this._showActions) return nothing;
+		return html`
+			<uui-action-bar>
+				${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
+				${this.#renderDeleteAction()}
+			</uui-action-bar>
+		`;
 	}
 
 	#renderEditAction() {
-		return this._showContentEdit && this._workspaceEditContentPath
-			? html`<uui-button
-					label="edit"
-					look="secondary"
-					color=${this._contentInvalid ? 'danger' : ''}
-					href=${this._workspaceEditContentPath}>
-					<uui-icon name=${this._exposed === false ? 'icon-add' : 'icon-edit'}></uui-icon>
-					${this._contentInvalid
-						? html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
-						: nothing}
-				</uui-button>`
-			: this._showContentEdit === false && this._exposed === false
-				? html`<uui-button
+		return html`
+			${when(
+				this._showContentEdit && this._workspaceEditContentPath,
+				() => html`
+					<uui-button
+						label="edit"
+						look="secondary"
+						color=${this._contentInvalid ? 'danger' : ''}
+						href=${this._workspaceEditContentPath!}>
+						<uui-icon name=${this._exposed === false ? 'icon-add' : 'icon-edit'}></uui-icon>
+						${when(
+							this._contentInvalid,
+							() => html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`,
+						)}
+					</uui-button>
+				`,
+			)}
+			${when(
+				this._showContentEdit === false && this._exposed === false,
+				() => html`
+					<uui-button
 						@click=${this.#expose}
 						label=${this.localize.term('blockEditor_createThisFor', this._contentTypeName)}
-						look="secondary"
-						><uui-icon name="icon-add"></uui-icon
-					></uui-button>`
-				: nothing;
+						look="secondary">
+						<uui-icon name="icon-add"></uui-icon>
+					</uui-button>
+				`,
+			)}
+		`;
 	}
 
 	#renderEditSettingsAction() {
 		return html`
 			${this._hasSettings && this._workspaceEditSettingsPath
-				? html`<uui-button
-						label="Edit settings"
-						look="secondary"
-						color=${this._settingsInvalid ? 'invalid' : ''}
-						href=${this._workspaceEditSettingsPath}>
-						<uui-icon name="icon-settings"></uui-icon>
-						${this._settingsInvalid
-							? html`<uui-badge attention color="invalid" label="Invalid settings">!</uui-badge>`
-							: nothing}
-					</uui-button>`
+				? html`
+						<uui-button
+							label="Edit settings"
+							look="secondary"
+							color=${this._settingsInvalid ? 'invalid' : ''}
+							href=${this._workspaceEditSettingsPath}>
+							<uui-icon name="icon-settings"></uui-icon>
+							${when(
+								this._settingsInvalid,
+								() => html`<uui-badge attention color="invalid" label="Invalid settings">!</uui-badge>`,
+							)}
+						</uui-button>
+					`
 				: nothing}
 		`;
 	}
 
 	#renderCopyToClipboardAction() {
-		return html`<uui-button label="Copy to clipboard" look="secondary" @click=${() => this.#context.copyToClipboard()}>
-			<uui-icon name="icon-clipboard-copy"></uui-icon>
-		</uui-button>`;
+		return html`
+			<uui-button label="Copy to clipboard" look="secondary" @click=${() => this.#context.copyToClipboard()}>
+				<uui-icon name="icon-clipboard-copy"></uui-icon>
+			</uui-button>
+		`;
 	}
 
 	#renderDeleteAction() {
@@ -682,6 +703,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				opacity: var(--umb-block-grid-entry-actions-opacity, 0);
 				transition: opacity 120ms;
 			}
+
 			uui-button-inline-create {
 				top: 0px;
 				position: absolute;
@@ -689,13 +711,16 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				--umb-block-grid__block--inline-create-button-display--condition: var(--umb-block-grid--dragging-mode) none;
 				display: var(--umb-block-grid__block--inline-create-button-display--condition);
 			}
+
 			uui-button-inline-create:not([vertical]) {
 				left: 0;
 				width: var(--umb-block-grid-editor--inline-create-width, 100%);
 			}
+
 			:host(:not([index='0'])) uui-button-inline-create:not([vertical]) {
 				top: calc(var(--umb-block-grid--row-gap, 0px) * -0.5);
 			}
+
 			uui-button-inline-create[vertical] {
 				right: calc(1px - (var(--umb-block-grid--column-gap, 0px) * 0.5));
 			}
@@ -718,6 +743,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				border-color: var(--uui-color-interactive-emphasis);
 				animation: ${UUIBlinkAnimationValue};
 			}
+
 			:host([drag-placeholder])::before {
 				content: '';
 				position: absolute;
@@ -727,6 +753,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 				background-color: var(--uui-color-interactive-emphasis);
 				opacity: 0.12;
 			}
+
 			:host([drag-placeholder]) .umb-block-grid__block {
 				transition: opacity 50ms 16ms;
 				opacity: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
index a1fcb24d7203..7d1b684c9779 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
@@ -41,6 +41,9 @@ export class UmbPropertyEditorUIBlockGridElement
 	@state()
 	private _notSupportedVariantSetting?: boolean;
 
+	@state()
+	private _sortingMode = false;
+
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 
@@ -232,6 +235,8 @@ export class UmbPropertyEditorUIBlockGridElement
 		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (context) => {
 			this.#managerContext.setVariantId(context?.getVariantId());
 		});
+
+		this.observe(this.#managerContext.sortingMode, (sortingMode) => (this._sortingMode = sortingMode ?? false));
 	}
 
 	protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
@@ -260,6 +265,7 @@ export class UmbPropertyEditorUIBlockGridElement
 	override render() {
 		if (this._notSupportedVariantSetting) return nothing;
 		return html`
+			${this.#renderSortingMode()}
 			<umb-block-grid-entries
 				${ref(this.#gotRootEntriesElement)}
 				.areaKey=${null}
@@ -268,23 +274,18 @@ export class UmbPropertyEditorUIBlockGridElement
 		`;
 	}
 
+	#renderSortingMode() {
+		if (!this._sortingMode) return nothing;
+		return html` <umb-sort-mode-toolbar></umb-sort-mode-toolbar> `;
+	}
+
 	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {
-				display: grid;
-				gap: 1px;
-			}
-			> div {
 				display: flex;
 				flex-direction: column;
-				align-items: stretch;
-			}
-
-			uui-button-group {
-				padding-top: 1px;
-				display: grid;
-				grid-template-columns: 1fr auto;
+				gap: var(--uui-size-1);
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/components/block-overlay-expose-button/block-overlay-expose-button.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/components/block-overlay-expose-button/block-overlay-expose-button.element.ts
index 0c255badf332..72a28ab8c0ad 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/components/block-overlay-expose-button/block-overlay-expose-button.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/components/block-overlay-expose-button/block-overlay-expose-button.element.ts
@@ -11,12 +11,13 @@ export class UmbBlockOverlayExposeButtonElement extends UmbLitElement {
 	contentTypeName?: string;
 
 	override render() {
-		return this.contentTypeName
-			? html`<uui-button look="secondary"
-					><uui-icon name="icon-add"></uui-icon>
-					<umb-localize key="blockEditor_createThisFor" .args=${[this.contentTypeName]}></umb-localize
-				></uui-button>`
-			: nothing;
+		if (!this.contentTypeName) return nothing;
+		return html`
+			<uui-button look="secondary">
+				<uui-icon name="icon-add"></uui-icon>
+				<umb-localize key="blockEditor_createThisFor" .args=${[this.contentTypeName]}></umb-localize>
+			</uui-button>
+		`;
 	}
 
 	static override styles = [

From 55552a72d4880e24ee0dac873f7f463052b6301c Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 17 Nov 2025 17:36:28 +0000
Subject: [PATCH 06/15] Added "umb-sort-mode-toolbar" component

---
 .../src/packages/sort/components/index.ts     |  1 +
 .../sort-mode-toolbar.element.ts              | 47 +++++++++++++++++++
 .../src/packages/sort/index.ts                |  1 +
 .../sort/sort-mode-property-action.element.ts |  2 +-
 .../actions/sort/sort-mode.property-action.ts |  2 +-
 .../property/context/sort.property-context.ts | 22 ++++-----
 6 files changed, 60 insertions(+), 15 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/components/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/components/sort-mode-toolbar/sort-mode-toolbar.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/components/index.ts
new file mode 100644
index 000000000000..3b2558c6eac7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/components/index.ts
@@ -0,0 +1 @@
+export * from './sort-mode-toolbar/sort-mode-toolbar.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/components/sort-mode-toolbar/sort-mode-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/components/sort-mode-toolbar/sort-mode-toolbar.element.ts
new file mode 100644
index 000000000000..6492c6ee25db
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/components/sort-mode-toolbar/sort-mode-toolbar.element.ts
@@ -0,0 +1,47 @@
+import { UMB_SORT_PROPERTY_CONTEXT } from '../../property/context/sort.property-context-token.js';
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+@customElement('umb-sort-mode-toolbar')
+export class UmbSortModeToolbarElement extends UmbLitElement {
+	#onSortModeExit = async () => {
+		const context = await this.getContext(UMB_SORT_PROPERTY_CONTEXT);
+		context?.setSortingMode(false);
+	};
+
+	override render() {
+		return html`
+			<div id="sort-mode">
+				<uui-button
+					look="secondary"
+					label=${this.localize.term('blockEditor_actionExitSortMode')}
+					@click=${this.#onSortModeExit}></uui-button>
+			</div>
+		`;
+	}
+
+	static override readonly styles = [
+		css`
+			#sort-mode {
+				background-color: var(--uui-color-selected);
+				color: var(--uui-color-selected-contrast);
+				box-sizing: border-box;
+				border-radius: var(--uui-border-radius);
+				display: flex;
+				gap: var(--uui-size-3);
+				padding: var(--uui-size-space-4) var(--uui-size-space-6);
+				width: 100%;
+				align-items: center;
+				justify-content: flex-end;
+			}
+		`,
+	];
+}
+
+export { UmbSortModeToolbarElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-sort-mode-toolbar': UmbSortModeToolbarElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/index.ts
index 4220fa269557..a259ba2991c5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/index.ts
@@ -1,4 +1,5 @@
 export * from './constants.js';
+export * from './components/index.js';
 export * from './property/index.js';
 
 export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode-property-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode-property-action.element.ts
index 8dbb99650a0d..f54b7089c91b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode-property-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode-property-action.element.ts
@@ -21,7 +21,7 @@ export class UmbSortModePropertyActionElement extends UmbLitElement {
 		super();
 
 		this.consumeContext(UMB_SORT_PROPERTY_CONTEXT, (context) => {
-			this.observe(context?.enabled, (enabled) => (this._sortModeEnabled = enabled ?? false));
+			this.observe(context?.sortingMode, (enabled) => (this._sortModeEnabled = enabled ?? false));
 		});
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode.property-action.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode.property-action.ts
index 379bee49f2d3..a453f5bffedc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode.property-action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode.property-action.ts
@@ -4,7 +4,7 @@ import { UmbPropertyActionBase } from '@umbraco-cms/backoffice/property-action';
 export class UmbSortModePropertyAction extends UmbPropertyActionBase {
 	override async execute() {
 		const sortContext = await this.getContext(UMB_SORT_PROPERTY_CONTEXT);
-		sortContext?.toggle();
+		sortContext?.toggleSortingMode();
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context.ts
index 903d24947ef1..fd3197c7b5f0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context.ts
@@ -4,28 +4,24 @@ import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export class UmbSortPropertyContext extends UmbContextBase {
-	#enabled = new UmbBooleanState(false);
-	readonly enabled = this.#enabled.asObservable();
+	#sortingMode = new UmbBooleanState(false);
+	readonly sortingMode = this.#sortingMode.asObservable();
 
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_SORT_PROPERTY_CONTEXT);
 	}
 
-	enable() {
-		this.#enabled.setValue(true);
+	getSortingMode(): boolean | undefined {
+		return this.#sortingMode.getValue();
 	}
 
-	disable() {
-		this.#enabled.setValue(false);
+	setSortingMode(sortingMode: boolean) {
+		this.#sortingMode.setValue(sortingMode);
 	}
 
-	toggle() {
-		const enabled = this.#enabled.getValue();
-		if (enabled) {
-			this.disable();
-		} else {
-			this.enable();
-		}
+	toggleSortingMode() {
+		const enabled = this.getSortingMode();
+		this.setSortingMode(!enabled);
 	}
 }
 

From 06f790a2a3fe48af569b329a4ed5fb5fdff3c7fd Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 17 Nov 2025 17:36:45 +0000
Subject: [PATCH 07/15] Fixed typo of private method "renderNoting"

---
 .../components/extension-slot/extension-slot.element.ts       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts
index 28cdbc9897d1..a30fad1e1cdf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts
@@ -160,11 +160,11 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 		return this._permitted
 			? this._permitted.length > 0
 				? repeat(this._permitted, (ext) => ext.alias, this.#renderExtension)
-				: this.#renderNoting()
+				: this.#renderNothing()
 			: nothing;
 	}
 
-	#renderNoting() {
+	#renderNothing() {
 		return this.fallbackRenderMethod ? this.fallbackRenderMethod() : html`<slot></slot>`;
 	}
 

From 674d7cc336f48cf0a64bc89a852bb9c8f71604ae Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 17 Nov 2025 17:40:57 +0000
Subject: [PATCH 08/15] Renamed "sort" property-action to "sort-mode"

---
 .../src/packages/sort/property/actions/constants.ts           | 2 +-
 .../src/packages/sort/property/actions/index.ts               | 2 +-
 .../src/packages/sort/property/actions/manifests.ts           | 2 +-
 .../src/packages/sort/property/actions/sort-mode/constants.ts | 1 +
 .../sort/property/actions/{sort => sort-mode}/index.ts        | 0
 .../sort/property/actions/{sort => sort-mode}/manifests.ts    | 4 ++--
 .../{sort => sort-mode}/sort-mode-property-action.element.ts  | 0
 .../actions/{sort => sort-mode}/sort-mode.property-action.ts  | 0
 .../sort/property/actions/{sort => sort-mode}/types.ts        | 0
 .../src/packages/sort/property/actions/sort/constants.ts      | 1 -
 .../src/packages/sort/property/actions/types.ts               | 2 +-
 11 files changed, 7 insertions(+), 7 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/constants.ts
 rename src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/{sort => sort-mode}/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/{sort => sort-mode}/manifests.ts (84%)
 rename src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/{sort => sort-mode}/sort-mode-property-action.element.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/{sort => sort-mode}/sort-mode.property-action.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/{sort => sort-mode}/types.ts (100%)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/constants.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/constants.ts
index a178a7c4d336..3d54ae6940f0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/constants.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/constants.ts
@@ -1 +1 @@
-export * from './sort/constants.js';
+export * from './sort-mode/constants.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/index.ts
index d31f1c93deb9..293460aa0c27 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/index.ts
@@ -1 +1 @@
-export * from './sort/index.js';
+export * from './sort-mode/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/manifests.ts
index b2896ffacda3..c234cdc66ce7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/manifests.ts
@@ -1,4 +1,4 @@
-import { manifests as sortManifests } from './sort/manifests.js';
+import { manifests as sortManifests } from './sort-mode/manifests.js';
 import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
 export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [...sortManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/constants.ts
new file mode 100644
index 000000000000..c350da92668b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/constants.ts
@@ -0,0 +1 @@
+export { UMB_PROPERTY_ACTION_SORT_MODE_KIND_MANIFEST } from './manifests.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/manifests.ts
similarity index 84%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/manifests.ts
index 4cc8f9e4558e..5d708fd59720 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/manifests.ts
@@ -1,7 +1,7 @@
 import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 import { UMB_PROPERTY_ACTION_DEFAULT_KIND_MANIFEST } from '@umbraco-cms/backoffice/property-action';
 
-export const UMB_PROPERTY_ACTION_SORT_KIND_MANIFEST: UmbExtensionManifestKind = {
+export const UMB_PROPERTY_ACTION_SORT_MODE_KIND_MANIFEST: UmbExtensionManifestKind = {
 	type: 'kind',
 	alias: 'Umb.Kind.PropertyAction.SortMode',
 	matchKind: 'sortMode',
@@ -20,5 +20,5 @@ export const UMB_PROPERTY_ACTION_SORT_KIND_MANIFEST: UmbExtensionManifestKind =
 };
 
 export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
-	UMB_PROPERTY_ACTION_SORT_KIND_MANIFEST,
+	UMB_PROPERTY_ACTION_SORT_MODE_KIND_MANIFEST,
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode-property-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/sort-mode-property-action.element.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode-property-action.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/sort-mode-property-action.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode.property-action.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/sort-mode.property-action.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/sort-mode.property-action.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/sort-mode.property-action.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/types.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/types.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/types.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/constants.ts
deleted file mode 100644
index 0a048f1dee06..000000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { UMB_PROPERTY_ACTION_SORT_KIND_MANIFEST } from './manifests.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/types.ts
index 15eb65f42680..81ef59159870 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/types.ts
@@ -1 +1 @@
-export type * from './sort/types.js';
+export type * from './sort-mode/types.js';

From 9cbe08ef70ed09d3cd1ce0d4af91d839c36dcc9c Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 17 Nov 2025 17:43:01 +0000
Subject: [PATCH 09/15] Corrected bad copypasta!

---
 .../src/packages/sort/property/context/types.ts          | 9 ++++-----
 .../src/packages/sort/property/types.ts                  | 1 +
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/types.ts
index 70bd908a0318..86686cdfc03c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/types.ts
@@ -1,16 +1,15 @@
 import type { ManifestPropertyContext, MetaPropertyContext } from '@umbraco-cms/backoffice/property';
 
-export interface ManifestPropertyContextClipboardKind
-	extends ManifestPropertyContext<MetaPropertyContextClipboardKind> {
+export interface ManifestPropertyContextSortKind extends ManifestPropertyContext<MetaPropertyContextSortKind> {
 	type: 'propertyContext';
-	kind: 'clipboard';
+	kind: 'sort';
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface MetaPropertyContextClipboardKind extends MetaPropertyContext {}
+export interface MetaPropertyContextSortKind extends MetaPropertyContext {}
 
 declare global {
 	interface UmbExtensionManifestMap {
-		umbManifestPropertyContextClipboardKind: ManifestPropertyContextClipboardKind;
+		umbManifestPropertyContextSortKind: ManifestPropertyContextSortKind;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sort/property/types.ts
index 6e27cb389250..f88fd5deea25 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sort/property/types.ts
@@ -1 +1,2 @@
 export type * from './actions/types.js';
+export type * from './context/types.js';

From 9e9ac3e0eec1e227f3297f4b65884672c9a08fb8 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 17 Nov 2025 18:10:47 +0000
Subject: [PATCH 10/15] Renamed "Sort" package to "Sorter"

to include the Sorter controller and maintain backwards-compatibility.
---
 src/Umbraco.Web.UI.Client/package-lock.json               | 8 ++++----
 src/Umbraco.Web.UI.Client/package.json                    | 3 +--
 .../src/apps/backoffice/backoffice.element.ts             | 2 +-
 .../block-grid-manager/block-grid-manager.context.ts      | 2 +-
 .../src/packages/{sort => sorter}/components/index.ts     | 0
 .../sort-mode-toolbar/sort-mode-toolbar.element.ts        | 2 +-
 .../src/packages/{sort => sorter}/constants.ts            | 0
 .../packages/{core/sorter => sorter/controllers}/index.ts | 0
 .../controllers}/replacement-resolver-as-grid.function.ts | 0
 .../sorter => sorter/controllers}/sorter.angular.txt      | 0
 .../controllers}/sorter.controller.test.ts                | 2 +-
 .../sorter => sorter/controllers}/sorter.controller.ts    | 0
 .../src/packages/{sort => sorter}/index.ts                | 1 +
 .../src/packages/{sort => sorter}/manifests.ts            | 0
 .../src/packages/{sort => sorter}/package.json            | 2 +-
 .../{sort => sorter}/property/actions/constants.ts        | 0
 .../packages/{sort => sorter}/property/actions/index.ts   | 0
 .../{sort => sorter}/property/actions/manifests.ts        | 0
 .../property/actions/sort-mode/constants.ts               | 0
 .../{sort => sorter}/property/actions/sort-mode/index.ts  | 0
 .../property/actions/sort-mode/manifests.ts               | 0
 .../sort-mode/sort-mode-property-action.element.ts        | 2 +-
 .../actions/sort-mode/sort-mode.property-action.ts        | 2 +-
 .../{sort => sorter}/property/actions/sort-mode/types.ts  | 0
 .../packages/{sort => sorter}/property/actions/types.ts   | 0
 .../src/packages/{sort => sorter}/property/constants.ts   | 0
 .../{sort => sorter}/property/context/constants.ts        | 0
 .../{sort => sorter}/property/context/manifests.ts        | 0
 .../property/context/sort.property-context-token.ts       | 0
 .../property/context/sort.property-context.ts             | 0
 .../packages/{sort => sorter}/property/context/types.ts   | 0
 .../src/packages/{sort => sorter}/property/index.ts       | 0
 .../src/packages/{sort => sorter}/property/manifests.ts   | 0
 .../src/packages/{sort => sorter}/property/types.ts       | 0
 .../src/packages/{sort => sorter}/types.ts                | 0
 .../src/packages/{sort => sorter}/umbraco-package.ts      | 6 +++---
 .../src/packages/{sort => sorter}/vite.config.ts          | 2 +-
 src/Umbraco.Web.UI.Client/tsconfig.json                   | 3 +--
 38 files changed, 18 insertions(+), 19 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/components/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/components/sort-mode-toolbar/sort-mode-toolbar.element.ts (92%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/constants.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{core/sorter => sorter/controllers}/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{core/sorter => sorter/controllers}/replacement-resolver-as-grid.function.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{core/sorter => sorter/controllers}/sorter.angular.txt (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{core/sorter => sorter/controllers}/sorter.controller.test.ts (98%)
 rename src/Umbraco.Web.UI.Client/src/packages/{core/sorter => sorter/controllers}/sorter.controller.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/index.ts (78%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/package.json (67%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/actions/constants.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/actions/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/actions/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/actions/sort-mode/constants.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/actions/sort-mode/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/actions/sort-mode/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/actions/sort-mode/sort-mode-property-action.element.ts (95%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/actions/sort-mode/sort-mode.property-action.ts (79%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/actions/sort-mode/types.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/actions/types.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/constants.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/context/constants.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/context/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/context/sort.property-context-token.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/context/sort.property-context.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/context/types.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/property/types.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/types.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/umbraco-package.ts (50%)
 rename src/Umbraco.Web.UI.Client/src/packages/{sort => sorter}/vite.config.ts (84%)

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index 8d6e9778fcdc..239280bc889f 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -3674,8 +3674,8 @@
 			"resolved": "src/external/signalr",
 			"link": true
 		},
-		"node_modules/@umbraco-backoffice/sort": {
-			"resolved": "src/packages/sort",
+		"node_modules/@umbraco-backoffice/sorter": {
+			"resolved": "src/packages/sorter",
 			"link": true
 		},
 		"node_modules/@umbraco-backoffice/static-file": {
@@ -17117,8 +17117,8 @@
 		"src/packages/settings": {
 			"name": "@umbraco-backoffice/settings"
 		},
-		"src/packages/sort": {
-			"name": "@umbraco-backoffice/sort"
+		"src/packages/sorter": {
+			"name": "@umbraco-backoffice/sorter"
 		},
 		"src/packages/static-file": {
 			"name": "@umbraco-backoffice/static-file"
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 88bc7dfe0196..78c30c050356 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -105,8 +105,7 @@
 		"./server": "./dist-cms/packages/core/server/index.js",
 		"./settings": "./dist-cms/packages/settings/index.js",
 		"./shortcut": "./dist-cms/packages/core/shortcut/index.js",
-		"./sort": "./dist-cms/packages/sort/index.js",
-		"./sorter": "./dist-cms/packages/core/sorter/index.js",
+		"./sorter": "./dist-cms/packages/sorter/index.js",
 		"./static-file": "./dist-cms/packages/static-file/index.js",
 		"./store": "./dist-cms/packages/core/store/index.js",
 		"./style": "./dist-cms/packages/core/style/index.js",
diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
index 4f633316a5ac..28ff7e859d05 100644
--- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
@@ -38,7 +38,7 @@ const CORE_PACKAGES = [
 	import('../../packages/relations/umbraco-package.js'),
 	import('../../packages/rte/umbraco-package.js'),
 	import('../../packages/settings/umbraco-package.js'),
-	import('../../packages/sort/umbraco-package.js'),
+	import('../../packages/sorter/umbraco-package.js'),
 	import('../../packages/static-file/umbraco-package.js'),
 	import('../../packages/sysinfo/umbraco-package.js'),
 	import('../../packages/tags/umbraco-package.js'),
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts
index e9499b6696c1..cb65bd1bda43 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts
@@ -10,7 +10,7 @@ import {
 import { transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
 import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
 import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
-import { UMB_SORT_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/sort';
+import { UMB_SORT_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/sorter';
 import type { UmbBlockDataModel } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/components/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/components/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/components/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/components/sort-mode-toolbar/sort-mode-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/components/sort-mode-toolbar/sort-mode-toolbar.element.ts
similarity index 92%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/components/sort-mode-toolbar/sort-mode-toolbar.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/components/sort-mode-toolbar/sort-mode-toolbar.element.ts
index 6492c6ee25db..32eddf5784b0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/components/sort-mode-toolbar/sort-mode-toolbar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sorter/components/sort-mode-toolbar/sort-mode-toolbar.element.ts
@@ -1,6 +1,6 @@
-import { UMB_SORT_PROPERTY_CONTEXT } from '../../property/context/sort.property-context-token.js';
 import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_SORT_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/sorter';
 
 @customElement('umb-sort-mode-toolbar')
 export class UmbSortModeToolbarElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/constants.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/constants.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/constants.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/core/sorter/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/replacement-resolver-as-grid.function.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/replacement-resolver-as-grid.function.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/core/sorter/replacement-resolver-as-grid.function.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/replacement-resolver-as-grid.function.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.angular.txt b/src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.angular.txt
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.angular.txt
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.angular.txt
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.test.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.controller.test.ts
similarity index 98%
rename from src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.test.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.controller.test.ts
index 2d797072c743..aea7a1100e79 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.controller.test.ts
@@ -1,7 +1,7 @@
 import { UmbSorterController } from './sorter.controller.js';
 import { aTimeout, expect, fixture, html } from '@open-wc/testing';
 import { customElement } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '../lit-element/lit-element.element.js';
+import { UmbLitElement } from '../../core/lit-element/lit-element.element.js';
 
 @customElement('test-my-sorter')
 class UmbSorterTestElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.controller.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.controller.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/index.ts
similarity index 78%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/index.ts
index a259ba2991c5..70955a23d101 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sorter/index.ts
@@ -1,5 +1,6 @@
 export * from './constants.js';
 export * from './components/index.js';
+export * from './controllers/index.js';
 export * from './property/index.js';
 
 export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/package.json b/src/Umbraco.Web.UI.Client/src/packages/sorter/package.json
similarity index 67%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/package.json
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/package.json
index 5a33806691fb..4f865feb02e0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/package.json
+++ b/src/Umbraco.Web.UI.Client/src/packages/sorter/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "@umbraco-backoffice/sort",
+	"name": "@umbraco-backoffice/sorter",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/constants.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/constants.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/constants.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/constants.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/constants.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/constants.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/sort-mode-property-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode-property-action.element.ts
similarity index 95%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/sort-mode-property-action.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode-property-action.element.ts
index f54b7089c91b..6ee4de3506ff 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/sort-mode-property-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode-property-action.element.ts
@@ -1,8 +1,8 @@
-import { UMB_SORT_PROPERTY_CONTEXT } from '../../context/sort.property-context-token.js';
 import type { ManifestPropertyActionSortModeKind } from './types.js';
 import { customElement, html, property, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_SORT_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/sorter';
 import type { UmbPropertyAction } from '@umbraco-cms/backoffice/property-action';
 import type { UUIMenuItemEvent } from '@umbraco-cms/backoffice/external/uui';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/sort-mode.property-action.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode.property-action.ts
similarity index 79%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/sort-mode.property-action.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode.property-action.ts
index a453f5bffedc..2fe38a664eaa 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/sort-mode.property-action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode.property-action.ts
@@ -1,5 +1,5 @@
-import { UMB_SORT_PROPERTY_CONTEXT } from '../../context/sort.property-context-token.js';
 import { UmbPropertyActionBase } from '@umbraco-cms/backoffice/property-action';
+import { UMB_SORT_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/sorter';
 
 export class UmbSortModePropertyAction extends UmbPropertyActionBase {
 	override async execute() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/types.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/sort-mode/types.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/types.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/types.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/actions/types.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/types.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/constants.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/constants.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/constants.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/constants.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/context/constants.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/constants.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/context/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context-token.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/sort.property-context-token.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context-token.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/sort.property-context-token.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/sort.property-context.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/context/sort.property-context.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/sort.property-context.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/context/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/types.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/context/types.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/types.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/index.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/property/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/types.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/property/types.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/property/types.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/types.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/types.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/types.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/types.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/umbraco-package.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/umbraco-package.ts
similarity index 50%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/umbraco-package.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/umbraco-package.ts
index ad7a058f1227..035551d509a7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/umbraco-package.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sorter/umbraco-package.ts
@@ -1,8 +1,8 @@
-export const name = 'Umbraco.Sort';
+export const name = 'Umbraco.Sorter';
 export const extensions = [
 	{
-		name: 'Sort Bundle',
-		alias: 'Umb.Bundle.Sort',
+		name: 'Sorter Bundle',
+		alias: 'Umb.Bundle.Sorter',
 		type: 'bundle',
 		js: () => import('./manifests.js'),
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sort/vite.config.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/vite.config.ts
similarity index 84%
rename from src/Umbraco.Web.UI.Client/src/packages/sort/vite.config.ts
rename to src/Umbraco.Web.UI.Client/src/packages/sorter/vite.config.ts
index cdf2d5afba00..11b8b7da495b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sort/vite.config.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sorter/vite.config.ts
@@ -2,7 +2,7 @@ import { defineConfig } from 'vite';
 import { rmSync } from 'fs';
 import { getDefaultConfig } from '../../vite-config-base';
 
-const dist = '../../../dist-cms/packages/sort';
+const dist = '../../../dist-cms/packages/sorter';
 
 // delete the unbundled dist folder
 rmSync(dist, { recursive: true, force: true });
diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index 05ec46c7a28e..257f34247634 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -136,8 +136,7 @@ DON'T EDIT THIS FILE DIRECTLY. It is generated by /devops/tsconfig/index.js
 			"@umbraco-cms/backoffice/server": ["./src/packages/core/server/index.ts"],
 			"@umbraco-cms/backoffice/settings": ["./src/packages/settings/index.ts"],
 			"@umbraco-cms/backoffice/shortcut": ["./src/packages/core/shortcut/index.ts"],
-			"@umbraco-cms/backoffice/sort": ["./src/packages/sort/index.ts"],
-			"@umbraco-cms/backoffice/sorter": ["./src/packages/core/sorter/index.ts"],
+			"@umbraco-cms/backoffice/sorter": ["./src/packages/sorter/index.ts"],
 			"@umbraco-cms/backoffice/static-file": ["./src/packages/static-file/index.ts"],
 			"@umbraco-cms/backoffice/store": ["./src/packages/core/store/index.ts"],
 			"@umbraco-cms/backoffice/style": ["./src/packages/core/style/index.ts"],

From 71adc12ee03aef1c4be56c05dc13f78242cd7ef2 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 17 Nov 2025 21:21:51 +0000
Subject: [PATCH 11/15] Code updates based on @copilot feedback

---
 .../block-grid-manager/block-grid-manager.context.ts        | 1 -
 .../block-grid-block-inline.element.ts                      | 6 ------
 2 files changed, 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts
index cb65bd1bda43..b42813bdf335 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts
@@ -42,7 +42,6 @@ export class UmbBlockGridManagerContext<
 		this.#sortPropertyContext?.setSortingMode(sortingMode);
 	}
 	getSortingMode(): boolean | undefined {
-		//return this.#sortingMode.getValue();
 		return this.#sortPropertyContext?.getSortingMode();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
index ebf3ae9de944..582188136c07 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
@@ -222,12 +222,6 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 		}
 	}
 
-	override destroy(): void {
-		super.destroy();
-		this.#blockContext?.destroy();
-		this.#workspaceContext?.destroy();
-	}
-
 	static override styles = [
 		UmbTextStyles,
 		css`

From 9218f948129eab95e729a7dbb3052c441ba5d98d Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 17 Nov 2025 21:25:42 +0000
Subject: [PATCH 12/15] Fixed circular references

---
 .../components/sort-mode-toolbar/sort-mode-toolbar.element.ts   | 2 +-
 .../property/actions/sort-mode/sort-mode.property-action.ts     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/components/sort-mode-toolbar/sort-mode-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/components/sort-mode-toolbar/sort-mode-toolbar.element.ts
index 32eddf5784b0..6492c6ee25db 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sorter/components/sort-mode-toolbar/sort-mode-toolbar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sorter/components/sort-mode-toolbar/sort-mode-toolbar.element.ts
@@ -1,6 +1,6 @@
+import { UMB_SORT_PROPERTY_CONTEXT } from '../../property/context/sort.property-context-token.js';
 import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UMB_SORT_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/sorter';
 
 @customElement('umb-sort-mode-toolbar')
 export class UmbSortModeToolbarElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode.property-action.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode.property-action.ts
index 2fe38a664eaa..a453f5bffedc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode.property-action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode.property-action.ts
@@ -1,5 +1,5 @@
+import { UMB_SORT_PROPERTY_CONTEXT } from '../../context/sort.property-context-token.js';
 import { UmbPropertyActionBase } from '@umbraco-cms/backoffice/property-action';
-import { UMB_SORT_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/sorter';
 
 export class UmbSortModePropertyAction extends UmbPropertyActionBase {
 	override async execute() {

From 8624bd73ac28579a3fd98cc7208f845ca5e38fca Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 17 Nov 2025 21:39:54 +0000
Subject: [PATCH 13/15] Removed reference to "sorter/index.ts"

that I'd missed when relocating the package.
---
 src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts b/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts
index 5ba008ff3481..48ad8009340c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts
@@ -61,7 +61,6 @@ export default defineConfig({
 			'server/index': './server/index.ts',
 			'search/index': './search/index.ts',
 			'shortcut/index': './shortcut/index.ts',
-			'sorter/index': './sorter/index.ts',
 			'store/index': './store/index.ts',
 			'style/index': './style/index.ts',
 			'temporary-file/index': './temporary-file/index.ts',

From 350baaf639115a32e810ea497acc968e53e6505b Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 18 Nov 2025 13:46:50 +0000
Subject: [PATCH 14/15] Moved "sorter" back into "core" package

---
 src/Umbraco.Web.UI.Client/package-lock.json          | 11 -----------
 src/Umbraco.Web.UI.Client/package.json               |  2 +-
 .../src/apps/backoffice/backoffice.element.ts        |  1 -
 .../src/packages/core/manifests.ts                   |  2 ++
 .../packages/{ => core}/sorter/components/index.ts   |  0
 .../sort-mode-toolbar/sort-mode-toolbar.element.ts   |  0
 .../src/packages/{ => core}/sorter/constants.ts      |  0
 .../packages/{ => core}/sorter/controllers/index.ts  |  0
 .../replacement-resolver-as-grid.function.ts         |  0
 .../{ => core}/sorter/controllers/sorter.angular.txt |  0
 .../sorter/controllers/sorter.controller.test.ts     |  2 +-
 .../sorter/controllers/sorter.controller.ts          |  0
 .../src/packages/{ => core}/sorter/index.ts          |  0
 .../src/packages/{ => core}/sorter/manifests.ts      |  0
 .../{ => core}/sorter/property/actions/constants.ts  |  0
 .../{ => core}/sorter/property/actions/index.ts      |  0
 .../{ => core}/sorter/property/actions/manifests.ts  |  0
 .../sorter/property/actions/sort-mode/constants.ts   |  0
 .../sorter/property/actions/sort-mode/index.ts       |  0
 .../sorter/property/actions/sort-mode/manifests.ts   |  0
 .../sort-mode/sort-mode-property-action.element.ts   |  2 +-
 .../actions/sort-mode/sort-mode.property-action.ts   |  0
 .../sorter/property/actions/sort-mode/types.ts       |  0
 .../{ => core}/sorter/property/actions/types.ts      |  0
 .../packages/{ => core}/sorter/property/constants.ts |  0
 .../{ => core}/sorter/property/context/constants.ts  |  0
 .../{ => core}/sorter/property/context/manifests.ts  |  0
 .../property/context/sort.property-context-token.ts  |  0
 .../sorter/property/context/sort.property-context.ts |  0
 .../{ => core}/sorter/property/context/types.ts      |  0
 .../src/packages/{ => core}/sorter/property/index.ts |  0
 .../packages/{ => core}/sorter/property/manifests.ts |  0
 .../src/packages/{ => core}/sorter/property/types.ts |  0
 .../src/packages/{ => core}/sorter/types.ts          |  0
 .../src/packages/core/vite.config.ts                 |  1 +
 .../src/packages/sorter/package.json                 |  8 --------
 .../src/packages/sorter/umbraco-package.ts           |  9 ---------
 .../src/packages/sorter/vite.config.ts               | 12 ------------
 src/Umbraco.Web.UI.Client/tsconfig.json              |  2 +-
 39 files changed, 7 insertions(+), 45 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/components/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/components/sort-mode-toolbar/sort-mode-toolbar.element.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/constants.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/controllers/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/controllers/replacement-resolver-as-grid.function.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/controllers/sorter.angular.txt (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/controllers/sorter.controller.test.ts (98%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/controllers/sorter.controller.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/actions/constants.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/actions/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/actions/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/actions/sort-mode/constants.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/actions/sort-mode/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/actions/sort-mode/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/actions/sort-mode/sort-mode-property-action.element.ts (95%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/actions/sort-mode/sort-mode.property-action.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/actions/sort-mode/types.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/actions/types.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/constants.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/context/constants.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/context/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/context/sort.property-context-token.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/context/sort.property-context.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/context/types.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/property/types.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{ => core}/sorter/types.ts (100%)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/sorter/package.json
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/sorter/umbraco-package.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/sorter/vite.config.ts

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index 239280bc889f..1f7c66cfe55b 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -3674,10 +3674,6 @@
 			"resolved": "src/external/signalr",
 			"link": true
 		},
-		"node_modules/@umbraco-backoffice/sorter": {
-			"resolved": "src/packages/sorter",
-			"link": true
-		},
 		"node_modules/@umbraco-backoffice/static-file": {
 			"resolved": "src/packages/static-file",
 			"link": true
@@ -17107,19 +17103,12 @@
 		"src/packages/rte": {
 			"name": "@umbraco-backoffice/rte"
 		},
-		"src/packages/search": {
-			"name": "@umbraco-backoffice/search",
-			"extraneous": true
-		},
 		"src/packages/segment": {
 			"name": "@umbraco-backoffice/segment"
 		},
 		"src/packages/settings": {
 			"name": "@umbraco-backoffice/settings"
 		},
-		"src/packages/sorter": {
-			"name": "@umbraco-backoffice/sorter"
-		},
 		"src/packages/static-file": {
 			"name": "@umbraco-backoffice/static-file"
 		},
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 78c30c050356..66b75fa2bc2f 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -105,7 +105,7 @@
 		"./server": "./dist-cms/packages/core/server/index.js",
 		"./settings": "./dist-cms/packages/settings/index.js",
 		"./shortcut": "./dist-cms/packages/core/shortcut/index.js",
-		"./sorter": "./dist-cms/packages/sorter/index.js",
+		"./sorter": "./dist-cms/packages/core/sorter/index.js",
 		"./static-file": "./dist-cms/packages/static-file/index.js",
 		"./store": "./dist-cms/packages/core/store/index.js",
 		"./style": "./dist-cms/packages/core/style/index.js",
diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
index 28ff7e859d05..558792cabc19 100644
--- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
@@ -38,7 +38,6 @@ const CORE_PACKAGES = [
 	import('../../packages/relations/umbraco-package.js'),
 	import('../../packages/rte/umbraco-package.js'),
 	import('../../packages/settings/umbraco-package.js'),
-	import('../../packages/sorter/umbraco-package.js'),
 	import('../../packages/static-file/umbraco-package.js'),
 	import('../../packages/sysinfo/umbraco-package.js'),
 	import('../../packages/tags/umbraco-package.js'),
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts
index bd889e2d9d86..ffe1e46c7a6f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts
@@ -20,6 +20,7 @@ import { manifests as recycleBinManifests } from './recycle-bin/manifests.js';
 import { manifests as searchManifests } from './search/manifests.js';
 import { manifests as sectionManifests } from './section/manifests.js';
 import { manifests as serverFileSystemManifests } from './server-file-system/manifests.js';
+import { manifests as sorterManifests } from './sorter/manifests.js';
 import { manifests as temporaryFileManifests } from './temporary-file/manifests.js';
 import { manifests as themeManifests } from './themes/manifests.js';
 import { manifests as treeManifests } from './tree/manifests.js';
@@ -50,6 +51,7 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 	...searchManifests,
 	...sectionManifests,
 	...serverFileSystemManifests,
+	...sorterManifests,
 	...temporaryFileManifests,
 	...themeManifests,
 	...treeManifests,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/components/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/components/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/components/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/components/sort-mode-toolbar/sort-mode-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/components/sort-mode-toolbar/sort-mode-toolbar.element.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/components/sort-mode-toolbar/sort-mode-toolbar.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/components/sort-mode-toolbar/sort-mode-toolbar.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/constants.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/constants.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/constants.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/controllers/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/controllers/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/replacement-resolver-as-grid.function.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/controllers/replacement-resolver-as-grid.function.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/replacement-resolver-as-grid.function.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/controllers/replacement-resolver-as-grid.function.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.angular.txt b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/controllers/sorter.angular.txt
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.angular.txt
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/controllers/sorter.angular.txt
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.controller.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/controllers/sorter.controller.test.ts
similarity index 98%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.controller.test.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/controllers/sorter.controller.test.ts
index aea7a1100e79..bb3505c97cfd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.controller.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/controllers/sorter.controller.test.ts
@@ -1,7 +1,7 @@
 import { UmbSorterController } from './sorter.controller.js';
 import { aTimeout, expect, fixture, html } from '@open-wc/testing';
 import { customElement } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '../../core/lit-element/lit-element.element.js';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('test-my-sorter')
 class UmbSorterTestElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/controllers/sorter.controller.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/controllers/sorter.controller.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/controllers/sorter.controller.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/constants.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/constants.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/constants.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/sort-mode/constants.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/constants.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/sort-mode/constants.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/sort-mode/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/sort-mode/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/sort-mode/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/sort-mode/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode-property-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/sort-mode/sort-mode-property-action.element.ts
similarity index 95%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode-property-action.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/sort-mode/sort-mode-property-action.element.ts
index 6ee4de3506ff..f54b7089c91b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode-property-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/sort-mode/sort-mode-property-action.element.ts
@@ -1,8 +1,8 @@
+import { UMB_SORT_PROPERTY_CONTEXT } from '../../context/sort.property-context-token.js';
 import type { ManifestPropertyActionSortModeKind } from './types.js';
 import { customElement, html, property, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UMB_SORT_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/sorter';
 import type { UmbPropertyAction } from '@umbraco-cms/backoffice/property-action';
 import type { UUIMenuItemEvent } from '@umbraco-cms/backoffice/external/uui';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode.property-action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/sort-mode/sort-mode.property-action.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/sort-mode.property-action.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/sort-mode/sort-mode.property-action.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/sort-mode/types.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/sort-mode/types.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/sort-mode/types.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/types.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/actions/types.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/actions/types.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/constants.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/constants.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/constants.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/context/constants.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/constants.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/context/constants.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/context/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/context/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/sort.property-context-token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/context/sort.property-context-token.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/sort.property-context-token.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/context/sort.property-context-token.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/sort.property-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/context/sort.property-context.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/sort.property-context.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/context/sort.property-context.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/context/types.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/context/types.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/context/types.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/property/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/types.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/property/types.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/property/types.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/types.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/sorter/types.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/sorter/types.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts b/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts
index 48ad8009340c..5ba008ff3481 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts
@@ -61,6 +61,7 @@ export default defineConfig({
 			'server/index': './server/index.ts',
 			'search/index': './search/index.ts',
 			'shortcut/index': './shortcut/index.ts',
+			'sorter/index': './sorter/index.ts',
 			'store/index': './store/index.ts',
 			'style/index': './style/index.ts',
 			'temporary-file/index': './temporary-file/index.ts',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/package.json b/src/Umbraco.Web.UI.Client/src/packages/sorter/package.json
deleted file mode 100644
index 4f865feb02e0..000000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/sorter/package.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-	"name": "@umbraco-backoffice/sorter",
-	"private": true,
-	"type": "module",
-	"scripts": {
-		"build": "vite build"
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/umbraco-package.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/umbraco-package.ts
deleted file mode 100644
index 035551d509a7..000000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/sorter/umbraco-package.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const name = 'Umbraco.Sorter';
-export const extensions = [
-	{
-		name: 'Sorter Bundle',
-		alias: 'Umb.Bundle.Sorter',
-		type: 'bundle',
-		js: () => import('./manifests.js'),
-	},
-];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/sorter/vite.config.ts b/src/Umbraco.Web.UI.Client/src/packages/sorter/vite.config.ts
deleted file mode 100644
index 11b8b7da495b..000000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/sorter/vite.config.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { defineConfig } from 'vite';
-import { rmSync } from 'fs';
-import { getDefaultConfig } from '../../vite-config-base';
-
-const dist = '../../../dist-cms/packages/sorter';
-
-// delete the unbundled dist folder
-rmSync(dist, { recursive: true, force: true });
-
-export default defineConfig({
-	...getDefaultConfig({ dist }),
-});
diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index 257f34247634..16c2d20becbd 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -136,7 +136,7 @@ DON'T EDIT THIS FILE DIRECTLY. It is generated by /devops/tsconfig/index.js
 			"@umbraco-cms/backoffice/server": ["./src/packages/core/server/index.ts"],
 			"@umbraco-cms/backoffice/settings": ["./src/packages/settings/index.ts"],
 			"@umbraco-cms/backoffice/shortcut": ["./src/packages/core/shortcut/index.ts"],
-			"@umbraco-cms/backoffice/sorter": ["./src/packages/sorter/index.ts"],
+			"@umbraco-cms/backoffice/sorter": ["./src/packages/core/sorter/index.ts"],
 			"@umbraco-cms/backoffice/static-file": ["./src/packages/static-file/index.ts"],
 			"@umbraco-cms/backoffice/store": ["./src/packages/core/store/index.ts"],
 			"@umbraco-cms/backoffice/style": ["./src/packages/core/style/index.ts"],

From c2acf0705534091e353ec97e432bd7f3ad0fcc9c Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 18 Nov 2025 14:37:29 +0000
Subject: [PATCH 15/15] Moved the "sort" property-action to a combined
 "property-actions" location

Fixed up other code, use of constants and manifest clarity.
---
 .../block-grid-entries.context.ts             |   2 +-
 .../block-grid-entry.context.ts               |   6 +-
 .../packages/block/block-grid/manifests.ts    |   4 +-
 .../block-grid-paste-from-clipboard.ts        |   8 +-
 .../block-grid/property-actions/manifests.ts  |  31 ++++
 .../block-grid-editor/Umbraco.BlockGrid.ts    |   5 +-
 .../block-grid-editor/manifests.ts            | 158 ++++++++++--------
 .../property-actions/manifests.ts             |  16 --
 .../property-editor-ui-block-grid.element.ts  |   2 +-
 .../block/block-grid/sort/manifests.ts        |  27 ---
 10 files changed, 132 insertions(+), 127 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/packages/block/block-grid/{property-editors/block-grid-editor => }/property-actions/block-grid-paste-from-clipboard.ts (81%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-actions/manifests.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-actions/manifests.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block-grid/sort/manifests.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.ts
index 2ed85d798d76..485ce8272fb9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.ts
@@ -284,7 +284,7 @@ export class UmbBlockGridEntriesContext
 	async #clipboardEntriesFilter(propertyValue: UmbBlockGridValueModel) {
 		const allowedElementTypeKeys = this.#retrieveAllowedElementTypes().map((x) => x.contentElementTypeKey);
 
-		const rootContentKeys = propertyValue.layout['Umbraco.BlockGrid']?.map((block) => block.contentKey) ?? [];
+		const rootContentKeys = propertyValue.layout[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]?.map((block) => block.contentKey) ?? [];
 		const rootContentTypeKeys = propertyValue.contentData
 			.filter((content) => rootContentKeys.includes(content.key))
 			.map((content) => content.contentTypeKey);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.context.ts
index 8d1d21467b0a..199afbb21028 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.context.ts
@@ -273,7 +273,11 @@ export class UmbBlockGridEntryContext
 			'observeRowSpanValidation',
 		);
 
-		this.observe(this._manager.sortingMode, (sortingMode) => this.#sortingMode.setValue(sortingMode ?? false));
+		this.observe(
+			this._manager.sortingMode,
+			(sortingMode) => this.#sortingMode.setValue(sortingMode ?? false),
+			'observeSortingMode',
+		);
 	}
 
 	protected override _gotContentType() {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/manifests.ts
index f48a316031c3..4b4b8241cd60 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/manifests.ts
@@ -1,8 +1,8 @@
 import { manifests as clipboardManifests } from './clipboard/manifests.js';
 import { manifests as componentManifests } from './components/manifests.js';
+import { manifests as propertyActionManifests } from './property-actions/manifests.js';
 import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
 import { manifests as propertyValueClonerManifests } from './property-value-cloner/manifests.js';
-import { manifests as sortManifests } from './sort/manifests.js';
 import { manifests as validationManifests } from './validation/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
 import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
@@ -10,9 +10,9 @@ import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension
 export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
 	...clipboardManifests,
 	...componentManifests,
+	...propertyActionManifests,
 	...propertyEditorManifests,
 	...propertyValueClonerManifests,
-	...sortManifests,
 	...validationManifests,
 	...workspaceManifests,
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-actions/block-grid-paste-from-clipboard.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-actions/block-grid-paste-from-clipboard.ts
similarity index 81%
rename from src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-actions/block-grid-paste-from-clipboard.ts
rename to src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-actions/block-grid-paste-from-clipboard.ts
index 1480e09dcf8d..9f14b1ba4664 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-actions/block-grid-paste-from-clipboard.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-actions/block-grid-paste-from-clipboard.ts
@@ -1,5 +1,6 @@
-import type { UmbBlockGridValueModel } from '../../../types.js';
-import type { UmbBlockGridPropertyEditorConfig } from '../types.js';
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS } from '../property-editors/block-grid-editor/constants.js';
+import type { UmbBlockGridValueModel } from '../types.js';
+import type { UmbBlockGridPropertyEditorConfig } from '../property-editors/block-grid-editor/types.js';
 import { UmbPasteFromClipboardPropertyAction } from '@umbraco-cms/backoffice/clipboard';
 
 /**
@@ -36,7 +37,8 @@ export class UmbBlockGridPasteFromClipboardPropertyAction extends UmbPasteFromCl
 				})
 				.filter((contentTypeKey) => contentTypeKey !== undefined) ?? [];
 
-		const rootContentKeys = propertyValue.layout['Umbraco.BlockGrid']?.map((block) => block.contentKey) ?? [];
+		const rootContentKeys =
+			propertyValue.layout[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]?.map((block) => block.contentKey) ?? [];
 		const rootContentTypeKeys = propertyValue.contentData
 			.filter((content) => rootContentKeys.includes(content.key))
 			.map((content) => content.contentTypeKey);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-actions/manifests.ts
new file mode 100644
index 000000000000..f1119f8867ec
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-actions/manifests.ts
@@ -0,0 +1,31 @@
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from '../constants.js';
+import {
+	UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS,
+	UMB_WRITABLE_PROPERTY_CONDITION_ALIAS,
+} from '@umbraco-cms/backoffice/property';
+import { UMB_PROPERTY_ACTION_PASTE_FROM_CLIPBOARD_KIND_MANIFEST } from '@umbraco-cms/backoffice/clipboard';
+
+const clipboardPaste: UmbExtensionManifest = {
+	...UMB_PROPERTY_ACTION_PASTE_FROM_CLIPBOARD_KIND_MANIFEST.manifest,
+	type: 'propertyAction',
+	alias: 'Umb.PropertyAction.BlockGrid.Clipboard.Paste',
+	name: 'Block Grid Paste From Clipboard Property Action',
+	api: () => import('./block-grid-paste-from-clipboard.js'),
+	forPropertyEditorUis: [UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS],
+	conditions: [{ alias: UMB_WRITABLE_PROPERTY_CONDITION_ALIAS }],
+};
+
+const sortMode: UmbExtensionManifest = {
+	type: 'propertyAction',
+	kind: 'sortMode',
+	alias: 'Umb.PropertyAction.BlockGrid.SortMode',
+	name: 'Block Grid Sort Mode Property Action',
+	forPropertyEditorUis: [UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS],
+	conditions: [
+		{
+			alias: UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS,
+		},
+	],
+};
+
+export const manifests: Array<UmbExtensionManifest> = [clipboardPaste, sortMode];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/Umbraco.BlockGrid.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/Umbraco.BlockGrid.ts
index d2e19246cc46..29c2f9c5711e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/Umbraco.BlockGrid.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/Umbraco.BlockGrid.ts
@@ -1,11 +1,12 @@
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS, UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from './constants.js';
 import type { ManifestPropertyEditorSchema } from '@umbraco-cms/backoffice/property-editor';
 
 export const manifest: ManifestPropertyEditorSchema = {
 	type: 'propertyEditorSchema',
 	name: 'Block Grid',
-	alias: 'Umbraco.BlockGrid',
+	alias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
 	meta: {
-		defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockGrid',
+		defaultPropertyEditorUiAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS,
 		settings: {
 			properties: [
 				{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts
index 544b8a6b4135..857f98f8f775 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts
@@ -1,80 +1,90 @@
-import { manifest as blockGridSchemaManifest } from './Umbraco.BlockGrid.js';
+import { manifest as propertyEditorSchema } from './Umbraco.BlockGrid.js';
 import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS, UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from './constants.js';
-import { manifests as propertyActionManifests } from './property-actions/manifests.js';
-import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbStandardBlockValueResolver } from '@umbraco-cms/backoffice/block';
 
-export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
-	{
-		type: 'propertyEditorUi',
-		alias: UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS,
-		name: 'Block Grid Property Editor UI',
-		element: () => import('./property-editor-ui-block-grid.element.js'),
-		meta: {
-			label: 'Block Grid',
-			propertyEditorSchemaAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
-			icon: 'icon-layout',
-			group: 'richContent',
-			supportsReadOnly: true,
-			settings: {
-				properties: [
-					{
-						alias: 'blockGroups',
-						label: '',
-						propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockTypeGroupConfiguration',
-						weight: 1,
-					},
-					{
-						alias: 'useLiveEditing',
-						label: 'Live editing mode',
-						description: 'Live update content when editing in overlay',
-						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
-					},
-					{
-						alias: 'maxPropertyWidth',
-						label: 'Editor width',
-						description: 'Optional css overwrite. (example: 1200px or 100%)',
-						propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
-					},
-					{
-						alias: 'createLabel',
-						label: 'Create Button Label',
-						description: 'Override the label text for adding a new block, Example Add Widget',
-						propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
-					},
-					{
-						alias: 'gridColumns',
-						label: 'Grid Columns',
-						description: 'Set the number of columns for the layout.',
-						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
-						config: [
-							{ alias: 'min', value: 0 },
-							{ alias: 'placeholder', value: '12' },
-						],
-					},
-					{
-						alias: 'layoutStylesheet',
-						label: 'Layout Stylesheet',
-						description: 'Override default stylesheet for backoffice layout.',
-						propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockGridLayoutStylesheet',
-						config: [
-							{
-								alias: 'singleItemMode',
-								value: true,
-							},
-						],
-					},
-				],
-			},
+const propertyEditorUi: UmbExtensionManifest = {
+	type: 'propertyEditorUi',
+	alias: UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS,
+	name: 'Block Grid Property Editor UI',
+	element: () => import('./property-editor-ui-block-grid.element.js'),
+	meta: {
+		label: 'Block Grid',
+		propertyEditorSchemaAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
+		icon: 'icon-layout',
+		group: 'richContent',
+		supportsReadOnly: true,
+		settings: {
+			properties: [
+				{
+					alias: 'blockGroups',
+					label: '',
+					propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockTypeGroupConfiguration',
+					weight: 1,
+				},
+				{
+					alias: 'useLiveEditing',
+					label: 'Live editing mode',
+					description: 'Live update content when editing in overlay',
+					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+				},
+				{
+					alias: 'maxPropertyWidth',
+					label: 'Editor width',
+					description: 'Optional css overwrite. (example: 1200px or 100%)',
+					propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
+				},
+				{
+					alias: 'createLabel',
+					label: 'Create Button Label',
+					description: 'Override the label text for adding a new block, Example Add Widget',
+					propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
+				},
+				{
+					alias: 'gridColumns',
+					label: 'Grid Columns',
+					description: 'Set the number of columns for the layout.',
+					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
+					config: [
+						{ alias: 'min', value: 0 },
+						{ alias: 'placeholder', value: '12' },
+					],
+				},
+				{
+					alias: 'layoutStylesheet',
+					label: 'Layout Stylesheet',
+					description: 'Override default stylesheet for backoffice layout.',
+					propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockGridLayoutStylesheet',
+					config: [
+						{
+							alias: 'singleItemMode',
+							value: true,
+						},
+					],
+				},
+			],
 		},
 	},
-	{
-		type: 'propertyValueResolver',
-		alias: 'Umb.PropertyValueResolver.BlockGrid',
-		name: 'Block Value Resolver',
-		api: UmbStandardBlockValueResolver,
-		forEditorAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
-	},
-	blockGridSchemaManifest,
-	...propertyActionManifests,
+};
+
+const propertyValueResolver: UmbExtensionManifest = {
+	type: 'propertyValueResolver',
+	alias: 'Umb.PropertyValueResolver.BlockGrid',
+	name: 'Block Grid Value Resolver',
+	api: UmbStandardBlockValueResolver,
+	forEditorAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
+};
+
+const sortPropertyContext: UmbExtensionManifest = {
+	type: 'propertyContext',
+	kind: 'sort',
+	alias: 'Umb.PropertyContext.BlockGrid.Sort',
+	name: 'Block Grid Sort Property Context',
+	forPropertyEditorUis: [UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS],
+};
+
+export const manifests: Array<UmbExtensionManifest> = [
+	propertyEditorSchema,
+	propertyEditorUi,
+	propertyValueResolver,
+	sortPropertyContext,
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-actions/manifests.ts
deleted file mode 100644
index bd1bca044c7d..000000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-actions/manifests.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from '../constants.js';
-import { UMB_WRITABLE_PROPERTY_CONDITION_ALIAS } from '@umbraco-cms/backoffice/property';
-import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
-import { UMB_PROPERTY_ACTION_PASTE_FROM_CLIPBOARD_KIND_MANIFEST } from '@umbraco-cms/backoffice/clipboard';
-
-export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
-	{
-		...UMB_PROPERTY_ACTION_PASTE_FROM_CLIPBOARD_KIND_MANIFEST.manifest,
-		type: 'propertyAction',
-		alias: 'Umb.PropertyAction.BlockGrid.Clipboard.Paste',
-		name: 'Block Grid Paste From Clipboard Property Action',
-		api: () => import('./block-grid-paste-from-clipboard.js'),
-		forPropertyEditorUis: [UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS],
-		conditions: [{ alias: UMB_WRITABLE_PROPERTY_CONDITION_ALIAS }],
-	},
-];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
index 7d1b684c9779..e15a5b179d72 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
@@ -276,7 +276,7 @@ export class UmbPropertyEditorUIBlockGridElement
 
 	#renderSortingMode() {
 		if (!this._sortingMode) return nothing;
-		return html` <umb-sort-mode-toolbar></umb-sort-mode-toolbar> `;
+		return html`<umb-sort-mode-toolbar></umb-sort-mode-toolbar>`;
 	}
 
 	static override styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/sort/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/sort/manifests.ts
deleted file mode 100644
index d69dd08047e7..000000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/sort/manifests.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from '../property-editors/constants.js';
-import { UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/property';
-
-const forPropertyEditorUis = [UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS];
-
-const propertyContext: UmbExtensionManifest = {
-	type: 'propertyContext',
-	kind: 'sort',
-	alias: 'Umb.PropertyContext.BlockGrid.Sort',
-	name: 'Block Grid Sort Property Context',
-	forPropertyEditorUis,
-};
-
-const propertyAction: UmbExtensionManifest = {
-	type: 'propertyAction',
-	kind: 'sortMode',
-	alias: 'Umb.PropertyAction.BlockGrid.SortMode',
-	name: 'Block Grid Sort Mode Property Action',
-	forPropertyEditorUis,
-	conditions: [
-		{
-			alias: UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS,
-		},
-	],
-};
-
-export const manifests: Array<UmbExtensionManifest> = [propertyContext, propertyAction];