@umbraco-cms/backoffice 17.1.0 → 17.2.0-rc

package/dist-cms/packages/media/media/components/input-image-cropper/focalpoint-change.event.d.ts

@@ -4,3 +4,8 @@ export declare class UmbFocalPointChangeEvent extends Event {
     focalPoint: UmbFocalPointModel;
     constructor(focalPoint: UmbFocalPointModel, args?: EventInit);
 }
+declare global {
+    interface GlobalEventHandlersEventMap {
+        [UmbFocalPointChangeEvent.TYPE]: UmbFocalPointChangeEvent;
+    }
+}

package/dist-cms/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbFocalPointChangeEvent } from './focalpoint-change.event.js';
+import { isCentered } from './utils.js';
 import { drag } from '../../../../../external/uui/index.js';
 import { clamp } from '../../../../core/utils/index.js';
 import { css, customElement, classMap, ifDefined, html, nothing, state, property, query, } from '../../../../../external/lit/index.js';
@@ -83,7 +84,7 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
     #isCentered(focalPoint) {
         if (!this.focalPoint)
             return;
-        return focalPoint.left === 0.5 && focalPoint.top === 0.5;
+        return isCentered(focalPoint);
     }
     #resetCoords() {
         if (!this.imageElement)

package/dist-cms/packages/media/media/components/input-image-cropper/utils.d.ts

@@ -0,0 +1,6 @@
+import type { UmbFocalPointModel } from '../../types.js';
+/**
+ * @description Helper function to check if the focal point is centered.
+ * @param focalPoint UmbFocalPointModel
+ */
+export declare function isCentered(focalPoint: UmbFocalPointModel): boolean;

package/dist-cms/packages/media/media/components/input-image-cropper/utils.js

@@ -0,0 +1,7 @@
+/**
+ * @description Helper function to check if the focal point is centered.
+ * @param focalPoint UmbFocalPointModel
+ */
+export function isCentered(focalPoint) {
+    return focalPoint.left === 0.5 && focalPoint.top === 0.5;
+}

package/dist-cms/packages/media/media/components/input-media/input-media.context.js

@@ -1,6 +1,7 @@
 import { UMB_MEDIA_ITEM_REPOSITORY_ALIAS } from '../../constants.js';
 import { UMB_MEDIA_PICKER_MODAL } from '../../modals/index.js';
 import { UMB_MEDIA_SEARCH_PROVIDER_ALIAS } from '../../search/constants.js';
+import { isMediaTreeItem } from '../../tree/utils.js';
 import { UmbPickerInputContext } from '../../../../core/picker-input/index.js';
 import { UMB_VARIANT_CONTEXT } from '../../../../core/variant/index.js';
 export class UmbMediaPickerInputContext extends UmbPickerInputContext {
@@ -32,6 +33,10 @@ export class UmbMediaPickerInputContext extends UmbPickerInputContext {
         await super.openPicker(combinedPickerData);
     }
     #pickableFilter = (item, allowedContentTypes) => {
+        // Check if the user has no access to this item (tree items only)
+        if (isMediaTreeItem(item) && item.noAccess) {
+            return false;
+        }
         if (allowedContentTypes && allowedContentTypes.length > 0) {
             return allowedContentTypes
                 .map((contentTypeReference) => contentTypeReference.unique)

package/dist-cms/packages/media/media/components/input-rich-media/input-rich-media.element.js

@@ -275,6 +275,7 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         return html `<umb-dropzone-media
 			id="dropzone"
 			?multiple=${this.multiple}
+			.parentUnique=${this.startNode?.unique ?? null}
 			@change=${this.#onUploadCompleted}></umb-dropzone-media>`;
     }
     #renderItems() {

package/dist-cms/packages/media/media/dropzone/dropzone-media.element.js

@@ -25,17 +25,53 @@ let UmbDropzoneMediaElement = class UmbDropzoneMediaElement extends UmbInputDrop
         return this._progressItems;
     }
     #dragCounter;
+    // Event handlers as arrow functions to maintain consistent references
+    #handleDragEnter;
+    #handleDragOver;
+    #handleDragLeave;
+    #handleDrop;
     constructor() {
         super();
         this.parentUnique = null;
         this.#dragCounter = 0;
+        // Event handlers as arrow functions to maintain consistent references
+        this.#handleDragEnter = (e) => {
+            if (this.disabled)
+                return;
+            // Normalize types for Safari
+            const types = Array.from(e.dataTransfer?.types || []).map((t) => t.toLowerCase());
+            if (!types.includes('files'))
+                return;
+            this.#dragCounter++;
+            this.toggleAttribute('dragging', true);
+            e.preventDefault();
+        };
+        this.#handleDragOver = (e) => {
+            e.preventDefault();
+        };
+        this.#handleDragLeave = () => {
+            if (this.disabled)
+                return;
+            this.#dragCounter--;
+            if (this.#dragCounter <= 0) {
+                this.toggleAttribute('dragging', false);
+                this.#dragCounter = 0;
+            }
+        };
+        this.#handleDrop = (event) => {
+            event.preventDefault();
+            if (this.disabled)
+                return;
+            this.#dragCounter = 0;
+            this.toggleAttribute('dragging', false);
+        };
         this._manager = new UmbMediaDropzoneManager(this);
         this.progressItems = () => this._manager.progressItems;
         this.progress = () => this._manager.progress;
-        document.addEventListener('dragenter', this.#handleDragEnter.bind(this));
-        document.addEventListener('dragleave', this.#handleDragLeave.bind(this));
-        document.addEventListener('dragover', this.#handleDragOver.bind(this));
-        document.addEventListener('drop', this.#handleDrop.bind(this));
+        document.addEventListener('dragenter', this.#handleDragEnter);
+        document.addEventListener('dragleave', this.#handleDragLeave);
+        document.addEventListener('dragover', this.#handleDragOver);
+        document.addEventListener('drop', this.#handleDrop);
         // TODO: Revisit this. I am not sure why it is needed to call these methods here when they are already called in the constructor of the parent class.
         // If we do not call them here, the observer will use the wrong instance of the dropzone manager (UmbDropZoneManager instead of UmbMediaDropzoneManager).
         this._observeProgress();
@@ -52,10 +88,10 @@ let UmbDropzoneMediaElement = class UmbDropzoneMediaElement extends UmbInputDrop
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        document.removeEventListener('dragenter', this.#handleDragEnter.bind(this));
-        document.removeEventListener('dragleave', this.#handleDragLeave.bind(this));
-        document.removeEventListener('dragover', this.#handleDragOver.bind(this));
-        document.removeEventListener('drop', this.#handleDrop.bind(this));
+        document.removeEventListener('dragenter', this.#handleDragEnter);
+        document.removeEventListener('dragleave', this.#handleDragLeave);
+        document.removeEventListener('dragover', this.#handleDragOver);
+        document.removeEventListener('drop', this.#handleDrop);
     }
     async onUpload(event) {
         if (this.disabled)
@@ -65,36 +101,6 @@ let UmbDropzoneMediaElement = class UmbDropzoneMediaElement extends UmbInputDrop
         const uploadable = this._manager.createMediaItems(event.detail, this.parentUnique);
         this.dispatchEvent(new UmbDropzoneSubmittedEvent(uploadable));
     }
-    #handleDragEnter(e) {
-        if (this.disabled)
-            return;
-        // Normalize types for Safari
-        const types = Array.from(e.dataTransfer?.types || []).map((t) => t.toLowerCase());
-        if (!types.includes('files'))
-            return;
-        this.#dragCounter++;
-        this.toggleAttribute('dragging', true);
-        e.preventDefault();
-    }
-    #handleDragOver(e) {
-        e.preventDefault();
-    }
-    #handleDragLeave() {
-        if (this.disabled)
-            return;
-        this.#dragCounter--;
-        if (this.#dragCounter <= 0) {
-            this.toggleAttribute('dragging', false);
-            this.#dragCounter = 0;
-        }
-    }
-    #handleDrop(event) {
-        event.preventDefault();
-        if (this.disabled)
-            return;
-        this.#dragCounter = 0;
-        this.toggleAttribute('dragging', false);
-    }
     static { this.styles = [
         ...UmbInputDropzoneElement.styles,
         css `

package/dist-cms/packages/media/media/index.d.ts

@@ -2,7 +2,7 @@ export * from './audit-log/index.js';
 export * from './components/index.js';
 export * from './constants.js';
 export * from './dropzone/index.js';
-export { UMB_IMAGE_CROPPER_EDITOR_MODAL, UMB_MEDIA_PICKER_MODAL } from './modals/index.js';
+export * from './modals/index.js';
 export * from './recycle-bin/index.js';
 export * from './reference/index.js';
 export * from './repository/index.js';

package/dist-cms/packages/media/media/index.js

@@ -2,7 +2,7 @@ export * from './audit-log/index.js';
 export * from './components/index.js';
 export * from './constants.js';
 export * from './dropzone/index.js';
-export { UMB_IMAGE_CROPPER_EDITOR_MODAL, UMB_MEDIA_PICKER_MODAL } from './modals/index.js';
+export * from './modals/index.js';
 export * from './recycle-bin/index.js';
 export * from './reference/index.js';
 export * from './repository/index.js';

package/dist-cms/packages/media/media/manifests.js

@@ -15,6 +15,7 @@ import { manifests as sectionViewManifests } from './dashboard/manifests.js';
 import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as urlManifests } from './url/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
+import * as entryPointModule from './entry-point.js';
 export const manifests = [
     ...auditLogManifests,
     ...collectionManifests,
@@ -37,6 +38,6 @@ export const manifests = [
         name: 'Media Backoffice Entry Point',
         alias: 'Umb.EntryPoint.Media',
         type: 'backofficeEntryPoint',
-        js: () => import('./entry-point.js'),
+        js: entryPointModule,
     },
 ];

package/dist-cms/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.d.ts

@@ -1,5 +1,6 @@
 import type { UmbImageCropperEditorModalData, UmbImageCropperEditorModalValue } from './image-cropper-editor-modal.token.js';
 import { UmbModalBaseElement } from '../../../../core/modal/index.js';
+import './components/index.js';
 import '../../components/input-upload-field/file-upload-preview.element.js';
 export declare class UmbImageCropperEditorModalElement extends UmbModalBaseElement<UmbImageCropperEditorModalData<any>, UmbImageCropperEditorModalValue> {
     #private;

package/dist-cms/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.js

@@ -12,6 +12,7 @@ import { UmbTemporaryFileConfigRepository } from '../../../../core/temporary-fil
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT, UmbModalBaseElement } from '../../../../core/modal/index.js';
 import { UMB_WORKSPACE_MODAL } from '../../../../core/workspace/index.js';
+import './components/index.js';
 import '../../components/input-upload-field/file-upload-preview.element.js';
 let UmbImageCropperEditorModalElement = class UmbImageCropperEditorModalElement extends UmbModalBaseElement {
     #urlRepository;

package/dist-cms/packages/media/media/modals/image-cropper-editor/index.d.ts

@@ -1,3 +1 @@
-export * from './components/index.js';
-export * from './image-cropper-editor-modal.element.js';
 export * from './image-cropper-editor-modal.token.js';

package/dist-cms/packages/media/media/modals/image-cropper-editor/index.js

@@ -1,3 +1 @@
-export * from './components/index.js';
-export * from './image-cropper-editor-modal.element.js';
 export * from './image-cropper-editor-modal.token.js';

package/dist-cms/packages/media/media/modals/media-caption-alt-text/index.d.ts

@@ -1 +1 @@
-export * from './media-caption-alt-text-modal.element.js';
+export * from './media-caption-alt-text-modal.token.js';

package/dist-cms/packages/media/media/modals/media-caption-alt-text/index.js

@@ -1 +1 @@
-export * from './media-caption-alt-text-modal.element.js';
+export * from './media-caption-alt-text-modal.token.js';

package/dist-cms/packages/media/media/modals/media-picker/index.d.ts

@@ -1,4 +1,2 @@
-export * from './components/index.js';
-export * from './media-picker-modal.element.js';
 export * from './media-picker-modal.token.js';
 export type * from './types.js';

package/dist-cms/packages/media/media/modals/media-picker/index.js

@@ -1,3 +1 @@
-export * from './components/index.js';
-export * from './media-picker-modal.element.js';
 export * from './media-picker-modal.token.js';

package/dist-cms/packages/media/media/modals/media-picker/media-picker-modal.element.d.ts

@@ -3,6 +3,7 @@ import type { UmbMediaPickerModalData, UmbMediaPickerModalValue } from './media-
 import { UmbPickerModalBaseElement } from '../../../../core/picker/index.js';
 import type { PropertyValues } from '../../../../../external/lit/index.js';
 import type { UmbPickerContext } from '../../../../core/picker/index.js';
+import './components/index.js';
 import '../../../imaging/index.js';
 export declare class UmbMediaPickerModalElement extends UmbPickerModalBaseElement<UmbMediaTreeItemModel, UmbMediaPickerModalData, UmbMediaPickerModalValue> {
     #private;

package/dist-cms/packages/media/media/modals/media-picker/media-picker-modal.element.js

@@ -15,6 +15,8 @@ import { isUmbracoFolder } from '../../../media-types/index.js';
 import { UmbPickerModalBaseElement } from '../../../../core/picker/index.js';
 import { UMB_PROPERTY_TYPE_BASED_PROPERTY_CONTEXT } from '../../../../content/content/index.js';
 import { UMB_VARIANT_CONTEXT } from '../../../../core/variant/index.js';
+import { UmbFileDropzoneItemStatus } from '../../../dropzone/index.js';
+import './components/index.js';
 import '../../../imaging/index.js';
 const root = { name: 'Media', unique: null, entityType: UMB_MEDIA_ROOT_ENTITY_TYPE };
 // TODO: investigate how we can reuse the picker-search-field element, picker context etc.
@@ -92,7 +94,7 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
         this.#loadChildrenOfCurrentMediaItem();
     }
     // TODO: move to location manager in context
-    async #loadChildrenOfCurrentMediaItem(selectedItems) {
+    async #loadChildrenOfCurrentMediaItem() {
         const key = this._currentMediaEntity.entityType + this._currentMediaEntity.unique;
         let paginationManager = this.#pagingMap.get(key);
         if (!paginationManager) {
@@ -115,16 +117,44 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
         paginationManager.setTotalItems(data?.total ?? 0);
         this._currentPage = paginationManager.getCurrentPageNumber();
         this._currentTotalPages = paginationManager.getTotalPages();
-        if (selectedItems?.length) {
-            const selectedItem = this._currentChildren.find((x) => x.unique == selectedItems[0].unique);
-            if (selectedItem) {
-                this.#onSelected(selectedItem);
-            }
-        }
     }
-    #onDropzoneChange(evt) {
+    async #onDropzoneChange(evt) {
         const target = evt.target;
-        this.#loadChildrenOfCurrentMediaItem(target.value);
+        const uploadedItems = target.value;
+        // Filter for successfully completed uploads only
+        const completedItems = uploadedItems?.filter((item) => item.status === UmbFileDropzoneItemStatus.COMPLETE) ?? [];
+        if (completedItems.length === 0) {
+            return;
+        }
+        // Navigate to the last page where new items appear (they get highest SortOrder)
+        await this.#navigateToLastPage();
+        // Auto-select uploaded items based on picker mode (single vs multiple)
+        const completedUniques = completedItems.map((item) => item.unique);
+        if (this.data?.multiple) {
+            // Multiple selection: add all uploaded items to selection, avoiding duplicates
+            const existingSelection = this.value?.selection ?? [];
+            const newSelection = [...new Set([...existingSelection, ...completedUniques])];
+            this._isSelectionMode = newSelection.length > 0;
+            this.modalContext?.setValue({ selection: newSelection });
+        }
+        else {
+            // Single selection: select the first uploaded item
+            this._isSelectionMode = true;
+            this.modalContext?.setValue({ selection: [completedUniques[0]] });
+        }
+    }
+    async #navigateToLastPage() {
+        // First reload to get fresh total from server (including newly uploaded items)
+        await this.#loadChildrenOfCurrentMediaItem();
+        // If we're not on the last page, navigate there
+        if (this._currentPage < this._currentTotalPages) {
+            const key = this._currentMediaEntity.entityType + this._currentMediaEntity.unique;
+            const paginationManager = this.#pagingMap.get(key);
+            if (paginationManager) {
+                paginationManager.setCurrentPageNumber(this._currentTotalPages);
+                await this.#loadChildrenOfCurrentMediaItem();
+            }
+        }
     }
     // TODO: move to location manager in context
     #onOpen(item) {
@@ -406,7 +436,6 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 
 			#searching-indicator {
 				margin-left: 7px;
-				margin-top: 4px;
 			}
 
 			#media-grid {

package/dist-cms/packages/media/media/recycle-bin/collection-action/manifests.d.ts

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

package/dist-cms/packages/media/media/recycle-bin/collection-action/manifests.js

@@ -0,0 +1,23 @@
+import { UMB_MEDIA_RECYCLE_BIN_REPOSITORY_ALIAS, UMB_MEDIA_RECYCLE_BIN_TREE_ITEM_CHILDREN_COLLECTION_ALIAS, } from '../constants.js';
+import { UMB_COLLECTION_ALIAS_CONDITION, UMB_COLLECTION_HAS_ITEMS_CONDITION_ALIAS, } from '../../../../core/collection/index.js';
+export const manifests = [
+    {
+        type: 'collectionAction',
+        kind: 'emptyRecycleBin',
+        name: 'Media Collection Empty Recycle Bin Action',
+        alias: 'Umb.CollectionAction.Media.EmptyRecycleBin',
+        meta: {
+            label: '#actions_emptyrecyclebin',
+            recycleBinRepositoryAlias: UMB_MEDIA_RECYCLE_BIN_REPOSITORY_ALIAS,
+        },
+        conditions: [
+            {
+                alias: UMB_COLLECTION_ALIAS_CONDITION,
+                match: UMB_MEDIA_RECYCLE_BIN_TREE_ITEM_CHILDREN_COLLECTION_ALIAS,
+            },
+            {
+                alias: UMB_COLLECTION_HAS_ITEMS_CONDITION_ALIAS,
+            },
+        ],
+    },
+];

package/dist-cms/packages/media/media/recycle-bin/manifests.js

@@ -1,3 +1,4 @@
+import { manifests as collectionManifests } from './collection-action/manifests.js';
 import { manifests as entityActionManifests } from './entity-action/manifests.js';
 import { manifests as menuManifests } from './menu/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
@@ -10,6 +11,7 @@ export const manifests = [
         alias: 'Umb.Condition.CurrentUser.AllowMediaRecycleBin',
         api: () => import('./allow-media-recycle-bin.condition.js'),
     },
+    ...collectionManifests,
     ...entityActionManifests,
     ...menuManifests,
     ...repositoryManifests,

package/dist-cms/packages/media/media/recycle-bin/tree/manifests.js

@@ -1,6 +1,7 @@
 import { UMB_MEDIA_ENTITY_TYPE } from '../../entity.js';
 import { UMB_MEDIA_RECYCLE_BIN_ROOT_ENTITY_TYPE } from '../root/entity.js';
 import { UMB_MEDIA_RECYCLE_BIN_TREE_ALIAS, UMB_MEDIA_RECYCLE_BIN_TREE_REPOSITORY_ALIAS, UMB_MEDIA_RECYCLE_BIN_TREE_STORE_ALIAS, } from './constants.js';
+import { UmbMediaRecycleBinTreeStore } from './media-recycle-bin-tree.store.js';
 import { manifests as reloadTreeItemChildrenManifests } from './reload-tree-item-children/manifests.js';
 import { manifests as treeItemChildrenManifests } from './tree-item-children/manifests.js';
 export const manifests = [
@@ -14,7 +15,7 @@ export const manifests = [
         type: 'treeStore',
         alias: UMB_MEDIA_RECYCLE_BIN_TREE_STORE_ALIAS,
         name: 'Media Recycle Bin Tree Store',
-        api: () => import('./media-recycle-bin-tree.store.js'),
+        api: UmbMediaRecycleBinTreeStore,
     },
     {
         type: 'tree',

package/dist-cms/packages/media/media/repository/detail/manifests.js

@@ -1,4 +1,5 @@
 import { UMB_MEDIA_DETAIL_REPOSITORY_ALIAS, UMB_MEDIA_DETAIL_STORE_ALIAS } from './constants.js';
+import { UmbMediaDetailStore } from './media-detail.store.js';
 export const manifests = [
     {
         type: 'repository',
@@ -10,6 +11,6 @@ export const manifests = [
         type: 'store',
         alias: UMB_MEDIA_DETAIL_STORE_ALIAS,
         name: 'Media Detail Store',
-        api: () => import('./media-detail.store.js'),
+        api: UmbMediaDetailStore,
     },
 ];

package/dist-cms/packages/media/media/repository/item/manifests.js

@@ -1,4 +1,5 @@
 import { UMB_MEDIA_ITEM_REPOSITORY_ALIAS, UMB_MEDIA_STORE_ALIAS } from './constants.js';
+import { UmbMediaItemStore } from './media-item.store.js';
 export const manifests = [
     {
         type: 'repository',
@@ -10,6 +11,6 @@ export const manifests = [
         type: 'itemStore',
         alias: UMB_MEDIA_STORE_ALIAS,
         name: 'Media Item Store',
-        api: () => import('./media-item.store.js'),
+        api: UmbMediaItemStore,
     },
 ];

package/dist-cms/packages/media/media/tree/manifests.js

@@ -1,5 +1,6 @@
 import { UMB_MEDIA_ENTITY_TYPE, UMB_MEDIA_ROOT_ENTITY_TYPE } from '../entity.js';
 import { UMB_MEDIA_TREE_ALIAS, UMB_MEDIA_TREE_REPOSITORY_ALIAS, UMB_MEDIA_TREE_STORE_ALIAS } from './constants.js';
+import { UmbMediaTreeStore } from './media-tree.store.js';
 import { manifests as reloadTreeItemChildrenManifests } from './reload-tree-item-children/manifests.js';
 export const manifests = [
     {
@@ -12,7 +13,7 @@ export const manifests = [
         type: 'treeStore',
         alias: UMB_MEDIA_TREE_STORE_ALIAS,
         name: 'Media Tree Store',
-        api: () => import('./media-tree.store.js'),
+        api: UmbMediaTreeStore,
     },
     {
         type: 'tree',

package/dist-cms/packages/media/media/tree/tree-item/media-tree-item.context.d.ts

@@ -3,6 +3,7 @@ import { UmbDefaultTreeItemContext } from '../../../../core/tree/index.js';
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
 export declare class UmbMediaTreeItemContext extends UmbDefaultTreeItemContext<UmbMediaTreeItemModel, UmbMediaTreeRootModel> {
     #private;
+    readonly noAccess: import("rxjs").Observable<boolean>;
     constructor(host: UmbControllerHost);
 }
 export { UmbMediaTreeItemContext as api };

package/dist-cms/packages/media/media/tree/tree-item/media-tree-item.context.js

@@ -1,9 +1,11 @@
 import { UmbDefaultTreeItemContext } from '../../../../core/tree/index.js';
 import { UmbIsTrashedEntityContext } from '../../../../core/recycle-bin/index.js';
 export class UmbMediaTreeItemContext extends UmbDefaultTreeItemContext {
-    #isTrashedContext = new UmbIsTrashedEntityContext(this);
+    #isTrashedContext;
     constructor(host) {
         super(host);
+        this.#isTrashedContext = new UmbIsTrashedEntityContext(this);
+        this.noAccess = this._treeItem.asObservablePart((item) => item?.noAccess ?? false);
         this.observe(this.treeItem, (item) => {
             this.#isTrashedContext.setIsTrashed(item?.isTrashed || false);
         });

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

@@ -1,8 +1,10 @@
 import type { UmbMediaTreeItemModel } from '../types.js';
+import type { UmbMediaTreeItemContext } from './media-tree-item.context.js';
 import { UmbTreeItemElementBase } from '../../../../core/tree/index.js';
 declare const elementName = "umb-media-tree-item";
-export declare class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTreeItemModel> {
+export declare class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTreeItemModel, UmbMediaTreeItemContext> {
     #private;
+    set api(value: UmbMediaTreeItemContext | undefined);
     renderIconContainer(): import("lit-html").TemplateResult<1>;
     renderLabel(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist-cms/packages/media/media/tree/tree-item/media-tree-item.element.js

@@ -4,11 +4,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html, customElement, nothing } from '../../../../../external/lit/index.js';
-import { UmbTextStyles } from '../../../../core/style/index.js';
+import { css, html, customElement, nothing, classMap } from '../../../../../external/lit/index.js';
 import { UmbTreeItemElementBase } from '../../../../core/tree/index.js';
 const elementName = 'umb-media-tree-item';
 let UmbMediaTreeItemElement = class UmbMediaTreeItemElement extends UmbTreeItemElementBase {
+    set api(value) {
+        // Observe noAccess from context and update base class property (_noAccess).
+        // This enables access restriction behavior (click prevention) and styling from the base class.
+        this.observe(value?.noAccess, (noAccess) => (this._noAccess = noAccess ?? false));
+        super.api = value;
+    }
     renderIconContainer() {
         const icon = this.item?.mediaType.icon;
         return html `
@@ -23,7 +28,9 @@ let UmbMediaTreeItemElement = class UmbMediaTreeItemElement extends UmbTreeItemE
 		`;
     }
     renderLabel() {
-        return html `<span id="label" slot="label">${this._item?.variants[0].name}</span> `;
+        return html `<span id="label" slot="label" class=${classMap({ noAccess: this._noAccess })}>
+			${this._item?.variants[0].name}
+		</span> `;
     }
     #renderStateIcon() {
         if (this.item?.mediaType.collection) {
@@ -35,7 +42,7 @@ let UmbMediaTreeItemElement = class UmbMediaTreeItemElement extends UmbTreeItemE
         return html `<umb-icon id="state-icon" slot="icon" name="icon-grid" title="Collection"></umb-icon>`;
     }
     static { this.styles = [
-        UmbTextStyles,
+        ...UmbTreeItemElementBase.styles,
         css `
 			#icon-container {
 				position: relative;

package/dist-cms/packages/media/media/tree/utils.d.ts

@@ -0,0 +1,7 @@
+import type { UmbMediaTreeItemModel } from './types.js';
+/**
+ * Type guard to check if an item is a media tree item with noAccess property
+ * @param {unknown} item - The item to check
+ * @returns {boolean} true if the item is a UmbMediaTreeItemModel
+ */
+export declare function isMediaTreeItem(item: unknown): item is UmbMediaTreeItemModel;

package/dist-cms/packages/media/media/tree/utils.js

@@ -0,0 +1,8 @@
+/**
+ * Type guard to check if an item is a media tree item with noAccess property
+ * @param {unknown} item - The item to check
+ * @returns {boolean} true if the item is a UmbMediaTreeItemModel
+ */
+export function isMediaTreeItem(item) {
+    return typeof item === 'object' && item !== null && 'noAccess' in item;
+}

package/dist-cms/packages/media/media/url/repository/manifests.js

@@ -1,4 +1,5 @@
 import { UMB_MEDIA_URL_REPOSITORY_ALIAS, UMB_MEDIA_URL_STORE_ALIAS } from './constants.js';
+import { UmbMediaUrlStore } from './media-url.store.js';
 const urlRepository = {
     type: 'repository',
     alias: UMB_MEDIA_URL_REPOSITORY_ALIAS,
@@ -9,6 +10,6 @@ const urlStore = {
     type: 'itemStore',
     alias: UMB_MEDIA_URL_STORE_ALIAS,
     name: 'Media Url Store',
-    api: () => import('./media-url.store.js'),
+    api: UmbMediaUrlStore,
 };
 export const manifests = [urlRepository, urlStore];

package/dist-cms/packages/media/media/workspace/media-workspace-editor.element.d.ts

@@ -3,10 +3,11 @@ export declare class UmbMediaWorkspaceEditorElement extends UmbLitElement {
     #private;
     private _splitViewElement;
     private _routes?;
+    private _loading?;
     constructor();
     private _generateRoutes;
     private _gotWorkspaceRoute;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 export default UmbMediaWorkspaceEditorElement;