@umbraco-cms/backoffice 18.3.0-rc2 → 19.0.0-beta1

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UMB_IMAGE_CROPPER_EDITOR_MODAL } from '../../modals/index.js';
 import { UMB_MEDIA_ITEM_REPOSITORY_ALIAS } from '../../repository/constants.js';
+import { UMB_MEDIA_ENTITY_TYPE } from '../../entity.js';
 import { UmbMediaPickerInputContext } from '../input-media/input-media.context.js';
 import { UmbFileDropzoneItemStatus } from '../../../dropzone/index.js';
 import { css, customElement, html, nothing, property, repeat, state } from '../../../../../external/lit/index.js';
@@ -14,13 +15,27 @@ import { UmbId } from '../../../../core/id/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
 import { UmbSorterController, UmbSorterResolvePlacementAsGrid } from '../../../../core/sorter/index.js';
-import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../../core/validation/index.js';
+import { isAboveZeroAndBelowMinimum, UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin, } from '../../../../core/validation/index.js';
 import { UmbRepositoryItemsManager } from '../../../../core/repository/index.js';
 import { UMB_MEDIA_TYPE_ENTITY_TYPE } from '../../../media-types/index.js';
 import '../../../imaging/index.js';
 import { UmbEntityInputInteractionMemoryManager } from '../../../../core/entity/index.js';
 let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     #sorter;
+    /**
+     * This is a maximum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default Infinity
+     */
+    set max(value) {
+        this.#max = value;
+        this.#updateSorterEnabled();
+    }
+    get max() {
+        return this.#max;
+    }
+    #max;
     set value(value) {
         super.value = value;
         this.#sorter.setModel(value);
@@ -50,14 +65,17 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
     }
     set readonly(value) {
         this.#readonly = value;
-        if (this.#readonly) {
+        this.#updateSorterEnabled();
+    }
+    #readonly;
+    #updateSorterEnabled() {
+        if (this.readonly || this.max === 1) {
             this.#sorter.disable();
         }
         else {
             this.#sorter.enable();
         }
     }
-    #readonly;
     get interactionMemories() {
         return this.#interactionMemoryManager.getMemories();
     }
@@ -100,13 +118,7 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
          * @default
          */
         this.minMessage = 'This field needs more items';
-        /**
-         * This is a maximum amount of selected items in this input.
-         * @type {number}
-         * @attr
-         * @default Infinity
-         */
-        this.max = Infinity;
+        this.#max = Infinity;
         /**
          * Max validation message.
          * @type {string}
@@ -183,13 +195,7 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         this.addValidator('valueMissing', () => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => {
             return !this.readonly && !!this.required && (!this.value || this.value.length === 0);
         });
-        this.addValidator('rangeUnderflow', () => this.minMessage, () => !this.readonly &&
-            // Only if min is set:
-            !!this.min &&
-            // if the value is empty and not required, we should not validate the min:
-            !(this.value?.length === 0 && this.required == false) &&
-            // Validate the min:
-            (this.value?.length ?? 0) < this.min);
+        this.addValidator('rangeUnderflow', () => this.minMessage, () => !this.readonly && isAboveZeroAndBelowMinimum(this.value?.length ?? 0, this.min));
         this.addValidator('rangeOverflow', () => this.maxMessage, () => !this.readonly && !!this.value && !!this.max && this.value?.length > this.max);
     }
     getFormElement() {
@@ -202,6 +208,7 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
                 const media = mediaItems.find((x) => x.unique === item.mediaKey);
                 const isNotFound = this._statuses.find((x) => x.unique === item.mediaKey)?.state.type === 'error';
                 return {
+                    entityType: media?.entityType ?? UMB_MEDIA_ENTITY_TYPE,
                     unique: item.key,
                     media: item.mediaKey,
                     name: media?.name ?? '',
@@ -316,7 +323,13 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         }
         const href = this.readonly ? undefined : this._routeBuilder?.({ key: item.unique });
         return html `
-			<uui-card-media id=${item.unique} title=${item.name} name=${item.name} .href=${href} ?readonly=${this.readonly}>
+			<uui-card-media
+				id=${item.unique}
+				data-mark="${item.entityType}:${item.media}"
+				title=${item.name}
+				name=${item.name}
+				.href=${href}
+				?readonly=${this.readonly}>
 				<umb-media-thumbnail
 					.unique=${item.media}
 					.alt=${item.name}
@@ -410,7 +423,7 @@ __decorate([
 ], UmbInputRichMediaElement.prototype, "minMessage", void 0);
 __decorate([
     property({ type: Number })
-], UmbInputRichMediaElement.prototype, "max", void 0);
+], UmbInputRichMediaElement.prototype, "max", null);
 __decorate([
     property({ type: String, attribute: 'max-message' })
 ], UmbInputRichMediaElement.prototype, "maxMessage", void 0);

package/dist-cms/packages/media/media/components/input-upload-field/file-upload-preview.element.d.ts

@@ -7,7 +7,7 @@ export declare class UmbFileUploadPreviewElement extends UmbLitElement implement
     file?: File;
     set path(value: string | undefined);
     get path(): string | undefined;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];
 }
 export { UmbFileUploadPreviewElement as element };

package/dist-cms/packages/media/media/components/input-upload-field/input-upload-field.element.d.ts

@@ -18,7 +18,7 @@ export declare class UmbInputUploadFieldElement extends UmbInputUploadFieldEleme
     private _serverUrl;
     constructor();
     disconnectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];
 }
 export default UmbInputUploadFieldElement;

package/dist-cms/packages/media/media/configuration/configuration.cache.d.ts

@@ -0,0 +1,17 @@
+import type { UmbMediaConfigurationModel } from './types.js';
+import type { UmbRepositoryResponse } from '../../../core/repository/index.js';
+type UmbMediaConfigurationResponse = UmbRepositoryResponse<UmbMediaConfigurationModel>;
+/**
+ * Returns the cached media configuration, or requests it if it has not been fetched yet.
+ * Concurrent calls share one request and error responses are not cached.
+ * @param {() => Promise<UmbMediaConfigurationResponse>} request - Fetches the configuration when nothing is cached.
+ * @returns {Promise<UmbMediaConfigurationResponse>} - The media configuration.
+ * @internal
+ */
+export declare function _getCachedMediaConfiguration(request: () => Promise<UmbMediaConfigurationResponse>): Promise<UmbMediaConfigurationResponse>;
+/**
+ * Clears the cached media configuration.
+ * @internal
+ */
+export declare function _resetMediaConfigurationCacheForTesting(): void;
+export {};

package/dist-cms/packages/media/media/configuration/configuration.cache.js

@@ -0,0 +1,23 @@
+let configurationPromise;
+/**
+ * Returns the cached media configuration, or requests it if it has not been fetched yet.
+ * Concurrent calls share one request and error responses are not cached.
+ * @param {() => Promise<UmbMediaConfigurationResponse>} request - Fetches the configuration when nothing is cached.
+ * @returns {Promise<UmbMediaConfigurationResponse>} - The media configuration.
+ * @internal
+ */
+export async function _getCachedMediaConfiguration(request) {
+    configurationPromise ??= request();
+    const response = await configurationPromise;
+    if (response.error) {
+        configurationPromise = undefined;
+    }
+    return response;
+}
+/**
+ * Clears the cached media configuration.
+ * @internal
+ */
+export function _resetMediaConfigurationCacheForTesting() {
+    configurationPromise = undefined;
+}

package/dist-cms/packages/media/media/configuration/configuration.repository.d.ts

@@ -16,8 +16,3 @@ export declare class UmbMediaConfigurationRepository extends UmbRepositoryBase {
     requestConfiguration(): Promise<UmbRepositoryResponse<UmbMediaConfigurationModel>>;
 }
 export { UmbMediaConfigurationRepository as api };
-/**
- * Test-only.
- * @internal
- */
-export declare function resetUmbMediaConfigurationCache(): void;

package/dist-cms/packages/media/media/configuration/configuration.repository.js

@@ -1,9 +1,6 @@
+import { _getCachedMediaConfiguration } from './configuration.cache.js';
 import { UmbMediaConfigurationServerDataSource } from './configuration.server.data-source.js';
 import { UmbRepositoryBase } from '../../../core/repository/index.js';
-/**
- * The cached media configuration, shared across all repository instances.
- */
-let configurationPromise;
 /**
  * @description - Repository for Media configuration.
  * @exports
@@ -17,20 +14,8 @@ export class UmbMediaConfigurationRepository extends UmbRepositoryBase {
      * @returns {Promise<UmbRepositoryResponse<UmbMediaConfigurationModel>>} - The media configuration.
      * @memberof UmbMediaConfigurationRepository
      */
-    async requestConfiguration() {
-        configurationPromise ??= this.#serverDataSource.getConfiguration();
-        const response = await configurationPromise;
-        if (response.error) {
-            configurationPromise = undefined;
-        }
-        return response;
+    requestConfiguration() {
+        return _getCachedMediaConfiguration(() => this.#serverDataSource.getConfiguration());
     }
 }
 export { UmbMediaConfigurationRepository as api };
-/**
- * Test-only.
- * @internal
- */
-export function resetUmbMediaConfigurationCache() {
-    configurationPromise = undefined;
-}

package/dist-cms/packages/media/media/configuration/configuration.server.data-source.js

@@ -12,7 +12,6 @@ export class UmbMediaConfigurationServerDataSource extends UmbControllerBase {
         if (data) {
             const mappedData = {
                 disableDeleteWhenReferenced: data.disableDeleteWhenReferenced,
-                disableUnpublishWhenReferenced: data.disableUnpublishWhenReferenced,
             };
             return { data: mappedData };
         }

package/dist-cms/packages/media/media/configuration/types.d.ts

@@ -1,7 +1,3 @@
 export interface UmbMediaConfigurationModel {
     disableDeleteWhenReferenced: boolean;
-    /**
-     * @deprecated Media does not support unpublishing, so this field is not used. [NL]
-     */
-    disableUnpublishWhenReferenced: boolean;
 }

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

@@ -1,3 +1,2 @@
 export * from './dropzone-media.element.js';
-export * from './dropzone.element.js';
 export * from './modals/index.js';

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

@@ -1,3 +1,2 @@
 export * from './dropzone-media.element.js';
-export * from './dropzone.element.js';
 export * from './modals/index.js';

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

@@ -37,16 +37,17 @@ export class UmbMediaDropzoneManager extends UmbDropzoneManager {
         if (!uploadableItems.length)
             return [];
         if (uploadableItems.length === 1) {
-            // When there is only one item being uploaded, allow the user to pick the media type, if more than one is allowed.
             this.#createOneMediaItem(uploadableItems[0]);
         }
         else {
-            // When there are multiple items being uploaded, automatically pick the media types for each item. We probably want to allow the user to pick the media type in the future.
             this.#createMediaItems(uploadableItems);
         }
         return uploadableItems;
     }
     async #createMediaItems(uploadableItems) {
+        // Items in the same location offering the same media type choices share one pick, so the user is asked once per
+        // kind of item there.
+        const pickedMediaTypes = new Map();
         for (const item of uploadableItems) {
             const { options, availableMediaTypes } = await this.#getMediaTypeOptions(item);
             if (!options.length) {
@@ -54,12 +55,12 @@ export class UmbMediaDropzoneManager extends UmbDropzoneManager {
                 this._updateStatus(item, UmbFileDropzoneItemStatus.NOT_ALLOWED, message);
                 continue;
             }
-            // Prefer a specific extension match over a fallback
-            const specificMatch = options.find((x) => x.matchedFileExtension === true);
-            const { unique: mediaTypeUnique, name: mediaTypeName } = specificMatch ?? options[0];
+            const mediaTypeUnique = await this.#resolveMediaTypeUnique(item, options, uploadableItems, pickedMediaTypes);
             if (!mediaTypeUnique) {
-                throw new Error('Media type unique is not defined');
+                this._updateStatus(item, UmbFileDropzoneItemStatus.CANCELLED);
+                continue;
             }
+            const mediaTypeName = options.find((o) => o.unique === mediaTypeUnique)?.name ?? '';
             // Handle files and folders differently: a file is uploaded as temp then created as a media item, and a folder is created as a media item directly.
             // Awaiting ensures parent folders exist on the server before their children are processed.
             if (item.temporaryFile) {
@@ -207,18 +208,61 @@ export class UmbMediaDropzoneManager extends UmbDropzoneManager {
         const preset = {
             unique: item.unique,
             mediaType: { unique: mediaTypeUnique, collection: null },
-            variants: [{ culture: null, segment: null, createDate: null, updateDate: null, flags: [], name }],
+            variants: [{ culture: null, createDate: null, updateDate: null, flags: [], name }],
             values: item.temporaryFile ? [umbracoFile] : undefined,
         };
         const { data } = await this.#mediaDetailRepository.createScaffold(preset);
         return data;
     }
-    async #showDialogMediaTypePicker(options) {
-        const value = await umbOpenModal(this, UMB_DROPZONE_MEDIA_TYPE_PICKER_MODAL, { data: { options } }).catch(() => undefined);
+    async #resolveMediaTypeUnique(item, options, items = [item], pickedMediaTypes) {
+        if (options.length === 1)
+            return options[0].unique ?? undefined;
+        // Prefer specific extension matches over catch-all fallbacks, and only ask when several specific matches remain.
+        const specificMatches = options.filter((x) => x.matchedFileExtension === true);
+        if (specificMatches.length === 1)
+            return specificMatches[0].unique ?? undefined;
+        if (specificMatches.length === 0)
+            return options[0].unique ?? undefined;
+        const pickerKey = this.#getPickerKey(specificMatches);
+        const pickKey = `${item.parentUnique}|${pickerKey}`;
+        if (pickedMediaTypes?.has(pickKey))
+            return pickedMediaTypes.get(pickKey);
+        const files = await this.#getFilesSharingPick(item, pickerKey, items);
+        const mediaTypeUnique = await this.#showDialogMediaTypePicker(specificMatches, files);
+        pickedMediaTypes?.set(pickKey, mediaTypeUnique);
+        return mediaTypeUnique;
+    }
+    #getPickerKey(specificMatches) {
+        return specificMatches
+            .map((x) => x.unique)
+            .sort()
+            .join('|');
+    }
+    // The files in the same location as the item whose choices match, so the picker can name every file the pick
+    // applies to. Within one location the choices only depend on the file extension.
+    async #getFilesSharingPick(item, pickerKey, items) {
+        const keyByExtension = new Map();
+        const files = [];
+        for (const other of items) {
+            if (!other.temporaryFile || other.parentUnique !== item.parentUnique)
+                continue;
+            const extension = getFileExtension(other.temporaryFile.file.name);
+            if (!keyByExtension.has(extension)) {
+                const { options } = await this.#getMediaTypeOptions(other);
+                const specificMatches = options.filter((x) => x.matchedFileExtension === true);
+                keyByExtension.set(extension, options.length > 1 ? this.#getPickerKey(specificMatches) : undefined);
+            }
+            if (keyByExtension.get(extension) === pickerKey)
+                files.push(other.temporaryFile.file);
+        }
+        return files;
+    }
+    async #showDialogMediaTypePicker(options, files) {
+        const value = await umbOpenModal(this, UMB_DROPZONE_MEDIA_TYPE_PICKER_MODAL, { data: { options, files } }).catch(() => undefined);
         if (!value)
             return undefined; // cancelled
         // Auto-pick: mediaTypeUnique is undefined → use the server's preferred type (first in the list)
-        return value.mediaTypeUnique ?? options[0]?.unique;
+        return value.mediaTypeUnique ?? options[0]?.unique ?? undefined;
     }
     async #createOneMediaItem(item) {
         const { options, availableMediaTypes } = await this.#getMediaTypeOptions(item);
@@ -232,26 +276,7 @@ export class UmbMediaDropzoneManager extends UmbDropzoneManager {
             });
             return this._updateStatus(item, UmbFileDropzoneItemStatus.NOT_ALLOWED, message);
         }
-        let mediaTypeUnique;
-        if (options.length > 1) {
-            // When multiple options are available, prefer specific extension matches over fallbacks
-            const specificMatches = options.filter((x) => x.matchedFileExtension === true);
-            if (specificMatches.length === 1) {
-                // Exactly one specific match — auto-select it (e.g., Article for .pdf when both Article and File are allowed)
-                mediaTypeUnique = specificMatches[0].unique;
-            }
-            else if (specificMatches.length > 1) {
-                // Multiple specific matches — let the user pick from those
-                mediaTypeUnique = await this.#showDialogMediaTypePicker(specificMatches);
-            }
-            else {
-                // All fallbacks — auto-select the first one
-                mediaTypeUnique = options[0].unique;
-            }
-        }
-        else {
-            mediaTypeUnique = options[0].unique;
-        }
+        const mediaTypeUnique = await this.#resolveMediaTypeUnique(item, options);
         if (!mediaTypeUnique) {
             return this._updateStatus(item, UmbFileDropzoneItemStatus.CANCELLED);
         }

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

@@ -4,9 +4,10 @@ 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, customElement, html, query, repeat, state } from '../../../../../../external/lit/index.js';
+import { css, customElement, html, nothing, query, repeat, state } from '../../../../../../external/lit/index.js';
 import { UmbModalBaseElement } from '../../../../../core/modal/index.js';
 import { UmbTextStyles } from '../../../../../core/style/index.js';
+const VISIBLE_FILE_NAMES = 3;
 let UmbDropzoneMediaTypePickerModalElement = class UmbDropzoneMediaTypePickerModalElement extends UmbModalBaseElement {
     constructor() {
         super(...arguments);
@@ -29,28 +30,55 @@ let UmbDropzoneMediaTypePickerModalElement = class UmbDropzoneMediaTypePickerMod
         this._submitModal();
     }
     render() {
-        return html ` <div id="options">
-			<uui-button id="auto" look="secondary" @click=${() => this.#onAutoPick()} label="Automatically" compact>
-				<umb-icon name="icon-wand"></umb-icon> Auto pick
-			</uui-button>
-			${repeat(this._options, (option) => option.unique, (option) => html `<uui-button
-						look="secondary"
-						@click=${() => this.#onMediaTypePick(option.unique)}
-						label=${option.name}
-						compact>
-						<umb-icon .name=${option.icon ?? 'icon-circle-dotted'}></umb-icon>${option.name}
-					</uui-button>`)}
-		</div>`;
+        return html `<uui-dialog-layout headline=${this.localize.term('media_chooseMediaTypeHeadline')}>
+			${this.#renderFiles()}
+			<div id="options">
+				<uui-button
+					id="auto"
+					look="secondary"
+					@click=${() => this.#onAutoPick()}
+					label=${this.localize.term('mediaType_autoPickMediaType')}
+					compact>
+					<umb-icon name="icon-wand"></umb-icon>${this.localize.term('mediaType_autoPickMediaType')}
+				</uui-button>
+				${repeat(this._options, (option) => option.unique, (option) => html `<uui-button
+							look="secondary"
+							@click=${() => this.#onMediaTypePick(option.unique)}
+							label=${option.name}
+							compact>
+							<umb-icon .name=${option.icon ?? 'icon-circle-dotted'}></umb-icon>${option.name}
+						</uui-button>`)}
+			</div>
+			<uui-button
+				id="cancel"
+				slot="actions"
+				label=${this.localize.term('general_cancel')}
+				@click=${() => this._rejectModal()}></uui-button>
+		</uui-dialog-layout>`;
+    }
+    #renderFiles() {
+        const files = this.data?.files ?? [];
+        if (!files.length)
+            return nothing;
+        const names = files.slice(0, VISIBLE_FILE_NAMES).map((file) => file.name);
+        const remaining = files.length - names.length;
+        if (remaining > 0)
+            names.push(this.localize.term('media_chooseMediaTypeMoreFiles', remaining));
+        return html `<p id="files">${this.localize.list(names)}</p>`;
     }
     static { this.styles = [
         UmbTextStyles,
         css `
+			#files {
+				margin-top: 0;
+				word-break: break-word;
+			}
 			#options {
 				display: flex;
-				margin: var(--uui-size-layout-1);
+				flex-wrap: wrap;
 				gap: var(--uui-size-3);
 			}
-			uui-button {
+			#options uui-button {
 				width: 150px;
 				height: 150px;
 			}

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

@@ -1,7 +1,10 @@
 import type { UmbMediaItemModel } from '../repository/types.js';
 import { nothing } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
-export declare class UmbMediaItemRefElement extends UmbLitElement {
+declare const UmbMediaItemRefElement_base: import("../../../../libs/extension-api/index.js").ClassConstructor<import("../../../core/entity-item/index.js").UmbEntityItemRefFrameMixinElement> & {
+    styles: Array<import("lit").CSSResultGroup>;
+} & typeof UmbLitElement;
+export declare class UmbMediaItemRefElement extends UmbMediaItemRefElement_base {
     #private;
     get item(): UmbMediaItemModel | undefined;
     set item(value: UmbMediaItemModel | undefined);
@@ -10,7 +13,8 @@ export declare class UmbMediaItemRefElement extends UmbLitElement {
     private _editPath;
     private _userHasSectionAccess;
     constructor();
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected get isEntityFrameNavigable(): boolean;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 export { UmbMediaItemRefElement as element };
 declare global {

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

@@ -13,7 +13,8 @@ import { UmbLitElement } from '../../../core/lit-element/index.js';
 import { UmbModalRouteRegistrationController } from '../../../core/router/index.js';
 import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '../../../core/section/index.js';
 import { UMB_WORKSPACE_MODAL, umbGenerateWorkspaceLink } from '../../../core/workspace/index.js';
-let UmbMediaItemRefElement = class UmbMediaItemRefElement extends UmbLitElement {
+import { UmbEntityItemRefFrameMixin } from '../../../core/entity-item/index.js';
+let UmbMediaItemRefElement = class UmbMediaItemRefElement extends UmbEntityItemRefFrameMixin(UmbLitElement) {
     #item;
     get item() {
         return this.#item;
@@ -46,6 +47,9 @@ let UmbMediaItemRefElement = class UmbMediaItemRefElement extends UmbLitElement
             this._editPath = routeBuilder({});
         });
     }
+    get isEntityFrameNavigable() {
+        return !this.readonly && this._userHasSectionAccess && !!this.item?.unique;
+    }
     #getLink(item) {
         if (!item.unique)
             return;
@@ -69,6 +73,7 @@ let UmbMediaItemRefElement = class UmbMediaItemRefElement extends UmbLitElement
 				<slot name="actions" slot="actions"></slot>
 				${this.#renderIcon(this.item)}
 			</uui-ref-node>
+			${this.renderEntityFrame(this.item.name)}
 		`;
     }
     #renderIcon(item) {

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.js

@@ -145,7 +145,6 @@ let UmbMediaPickerFolderPathElement = class UmbMediaPickerFolderPathElement exte
             variants: [
                 {
                     culture: null,
-                    segment: null,
                     name: newName,
                     createDate: null,
                     updateDate: null,

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-table-column-name.element.d.ts

@@ -12,7 +12,7 @@ export declare class UmbMediaPickerTableColumnNameElement extends UmbLitElement
     column: UmbTableColumn;
     item: UmbTableItem;
     value: UmbMediaPickerTableColumnNameValue;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 export default UmbMediaPickerTableColumnNameElement;

package/dist-cms/packages/media/media/property-editors/image-cropper/manifests.js

@@ -7,7 +7,6 @@ export const manifests = [
         name: 'Image Cropper Property Editor UI',
         element: () => import('./property-editor-ui-image-cropper.element.js'),
         meta: {
-            supportsVariantChange: true,
             label: 'Image Cropper',
             icon: 'icon-crop',
             group: '#propertyEditorUIGroups_media',

package/dist-cms/packages/media/media/property-editors/image-cropper/value-summary/value-summary.element.d.ts

@@ -2,7 +2,7 @@ import type { UmbImageCropperPropertyEditorValue } from '../../../components/ind
 import { nothing } from '../../../../../../external/lit/index.js';
 import { UmbValueSummaryElementBase } from '../../../../../core/value-summary/index.js';
 export declare class UmbImageCropperPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase<UmbImageCropperPropertyEditorValue> {
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 export { UmbImageCropperPropertyEditorValueSummaryElement as element };
 declare global {

package/dist-cms/packages/media/media/property-editors/image-crops/manifests.js

@@ -4,7 +4,6 @@ export const manifest = {
     name: 'Image Crops Property Editor UI',
     element: () => import('./property-editor-ui-image-crops.element.js'),
     meta: {
-        supportsVariantChange: true,
         label: 'Image Crops Configuration',
         icon: 'icon-autofill',
         group: '#propertyEditorUIGroups_common',

package/dist-cms/packages/media/media/property-editors/media-entity-picker/manifests.js

@@ -4,7 +4,6 @@ export const manifest = {
     name: 'Media Entity Picker Property Editor UI',
     element: () => import('./property-editor-ui-media-entity-picker.element.js'),
     meta: {
-        supportsVariantChange: true,
         label: 'Media Entity Picker',
         icon: 'icon-picture',
         group: '#propertyEditorUIGroups_pickers',

package/dist-cms/packages/media/media/property-editors/media-picker/Umbraco.MediaPicker.Single.d.ts

@@ -0,0 +1,2 @@
+import type { ManifestPropertyEditorSchema } from '../../../../core/property-editor/index.js';
+export declare const manifest: ManifestPropertyEditorSchema;

package/dist-cms/packages/media/media/property-editors/media-picker/Umbraco.MediaPicker.Single.js

@@ -0,0 +1,41 @@
+export const manifest = {
+    type: 'propertyEditorSchema',
+    name: 'Single Media Picker',
+    alias: 'Umbraco.MediaPicker.Single',
+    meta: {
+        defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.MediaPicker.Single',
+        settings: {
+            properties: [
+                {
+                    alias: 'filter',
+                    label: 'Accepted types',
+                    description: 'Limit to specific types',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.MediaTypePicker',
+                },
+                {
+                    alias: 'startNodeId',
+                    label: 'Start node',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.MediaEntityPicker',
+                    config: [{ alias: 'validationLimit', value: { min: 0, max: 1 } }],
+                },
+                {
+                    alias: 'enableLocalFocalPoint',
+                    label: 'Enable Focal Point',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+                },
+                {
+                    alias: 'crops',
+                    label: 'Image Crops',
+                    description: 'Local crops, stored on document',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.ImageCropsConfiguration',
+                },
+                {
+                    alias: 'ignoreUserStartNodes',
+                    label: 'Ignore User Start Nodes',
+                    description: "Selecting this option allows a user to choose nodes that they normally don't have access to.",
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+                },
+            ],
+        },
+    },
+};

package/dist-cms/packages/media/media/property-editors/media-picker/Umbraco.MediaPicker.js

@@ -12,16 +12,10 @@ export const manifest = {
                     description: 'Limit to specific types',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.MediaTypePicker',
                 },
-                {
-                    alias: 'multiple',
-                    label: 'Pick multiple items',
-                    description: 'Outputs a IEnumerable',
-                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
-                },
                 {
                     alias: 'validationLimit',
                     label: 'Amount',
-                    description: 'Set a required range of medias',
+                    description: '{#validation_minimumOnlyWhenInUse}',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.NumberRange',
                     config: [{ alias: 'validationRange', value: { min: 0, max: Infinity } }],
                 },

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

@@ -1 +1,2 @@
-export * from './property-editor-ui-media-picker.element.js';
+export { UmbPropertyEditorUIMediaPickerElement } from './property-editor-ui-media-picker.element.js';
+export { UmbSingleMediaPickerPropertyEditorUIElement } from './property-editor-ui-single-media-picker.element.js';