@umbraco-cms/backoffice 17.0.2 → 17.1.0-rc

package/dist-cms/{apps/preview/apps → packages/preview/preview-apps}/preview-device.element.js

@@ -4,97 +4,109 @@ 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 { UMB_PREVIEW_CONTEXT } from '../preview.context.js';
-import { css, customElement, html, property, repeat } from '../../../external/lit/index.js';
-import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
+import { UMB_PREVIEW_CONTEXT } from '../context/preview.context-token.js';
+import { css, customElement, html, ifDefined, property, query, repeat, state, } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
 let UmbPreviewDeviceElement = class UmbPreviewDeviceElement extends UmbLitElement {
+    // TODO: [LK] Eventually, convert these devices to be an  extension point.
+    #devices;
     constructor() {
-        super(...arguments);
+        super();
+        // TODO: [LK] Eventually, convert these devices to be an  extension point.
         this.#devices = [
             {
                 alias: 'fullsize',
                 label: 'Fit browser',
-                css: 'fullsize',
                 icon: 'icon-application-window-alt',
                 dimensions: { height: '100%', width: '100%' },
             },
             {
                 alias: 'desktop',
                 label: 'Desktop',
-                css: 'desktop shadow',
                 icon: 'icon-display',
                 dimensions: { height: '1080px', width: '1920px' },
             },
             {
                 alias: 'laptop',
                 label: 'Laptop',
-                css: 'laptop shadow',
                 icon: 'icon-laptop',
                 dimensions: { height: '768px', width: '1366px' },
             },
             {
                 alias: 'ipad-portrait',
                 label: 'Tablet portrait',
-                css: 'ipad-portrait shadow',
                 icon: 'icon-ipad',
                 dimensions: { height: '929px', width: '769px' },
             },
             {
                 alias: 'ipad-landscape',
                 label: 'Tablet landscape',
-                css: 'ipad-landscape shadow flip',
                 icon: 'icon-ipad',
+                iconClass: 'flip',
                 dimensions: { height: '675px', width: '1024px' },
             },
             {
                 alias: 'smartphone-portrait',
                 label: 'Smartphone portrait',
-                css: 'smartphone-portrait shadow',
                 icon: 'icon-iphone',
                 dimensions: { height: '640px', width: '360px' },
             },
             {
                 alias: 'smartphone-landscape',
                 label: 'Smartphone landscape',
-                css: 'smartphone-landscape shadow flip',
                 icon: 'icon-iphone',
+                iconClass: 'flip',
                 dimensions: { height: '360px', width: '640px' },
             },
         ];
         this.device = this.#devices[0];
+        this._popoverOpen = false;
+        this.#onBlur = () => {
+            if (this._popoverOpen) {
+                this._popoverElement?.hidePopover();
+            }
+        };
+        this.addEventListener('blur', this.#onBlur, true); // Use capture phase to catch blur events
     }
-    #devices;
     connectedCallback() {
         super.connectedCallback();
-        this.#changeDevice(this.device);
+        this.hidden = true;
+        this.#loadDevices();
     }
-    async #changeDevice(device) {
+    async #loadDevices() {
+        // TODO: [LK] Eventually, load devices from extension points.
+        this.hidden = false;
+    }
+    async #onClick(device) {
         if (device === this.device)
             return;
         this.device = device;
         const previewContext = await this.getContext(UMB_PREVIEW_CONTEXT);
-        previewContext?.updateIFrame({
-            className: device.css,
+        await previewContext?.updateIFrame({
+            wrapperClass: device.alias,
             height: device.dimensions.height,
             width: device.dimensions.width,
         });
+        // Don't close popover for device selector - users often want to quickly test multiple devices
+    }
+    #onPopoverToggle(event) {
+        this._popoverOpen = event.newState === 'open';
     }
+    #onBlur;
     render() {
         return html `
 			<uui-button look="primary" popovertarget="devices-popover">
 				<div>
-					<uui-icon name=${this.device.icon} class=${this.device.css.includes('flip') ? 'flip' : ''}></uui-icon>
+					<uui-icon name=${this.device.icon} class=${ifDefined(this.device.iconClass)}></uui-icon>
 					<span>${this.device.label}</span>
 				</div>
+				<uui-symbol-expand slot="extra" id="expand-symbol" .open=${this._popoverOpen}></uui-symbol-expand>
 			</uui-button>
-			<uui-popover-container id="devices-popover" placement="top-end">
+			<uui-popover-container id="devices-popover" placement="top-end" @toggle=${this.#onPopoverToggle}>
 				<umb-popover-layout>
 					${repeat(this.#devices, (item) => item.alias, (item) => html `
-							<uui-menu-item
-								label=${item.label}
-								?active=${item === this.device}
-								@click=${() => this.#changeDevice(item)}>
-								<uui-icon slot="icon" name=${item.icon} class=${item.css.includes('flip') ? 'flip' : ''}></uui-icon>
+							<uui-menu-item label=${item.label} ?active=${item === this.device} @click=${() => this.#onClick(item)}>
+								<uui-icon slot="icon" name=${item.icon} class=${ifDefined(item.iconClass)}></uui-icon>
 							</uui-menu-item>
 						`)}
 				</umb-popover-layout>
@@ -109,12 +121,30 @@ let UmbPreviewDeviceElement = class UmbPreviewDeviceElement extends UmbLitElemen
 				--uui-button-font-weight: 400;
 				--uui-button-padding-left-factor: 3;
 				--uui-button-padding-right-factor: 3;
+				--uui-menu-item-flat-structure: 1;
+			}
+
+			:host([hidden]) {
+				display: none;
+			}
+
+			#expand-symbol {
+				transform: rotate(-90deg);
+				margin-left: var(--uui-size-space-3, 9px);
+
+				&[open] {
+					transform: rotate(0deg);
+				}
 			}
 
 			uui-button > div {
 				display: flex;
 				align-items: center;
-				gap: 5px;
+				gap: var(--uui-size-2, 6px);
+			}
+
+			uui-icon.flip {
+				transform: rotate(90deg);
 			}
 
 			umb-popover-layout {
@@ -125,9 +155,15 @@ let UmbPreviewDeviceElement = class UmbPreviewDeviceElement extends UmbLitElemen
 		`,
     ]; }
 };
+__decorate([
+    query('#devices-popover')
+], UmbPreviewDeviceElement.prototype, "_popoverElement", void 0);
 __decorate([
     property({ attribute: false, type: Object })
 ], UmbPreviewDeviceElement.prototype, "device", void 0);
+__decorate([
+    state()
+], UmbPreviewDeviceElement.prototype, "_popoverOpen", void 0);
 UmbPreviewDeviceElement = __decorate([
     customElement('umb-preview-device')
 ], UmbPreviewDeviceElement);

package/dist-cms/packages/preview/preview-apps/preview-environments.element.d.ts

@@ -0,0 +1,20 @@
+import { nothing } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
+export declare class UmbPreviewEnvironmentsElement extends UmbLitElement {
+    #private;
+    private _culture?;
+    private _items;
+    private _popoverOpen;
+    private _segment?;
+    private _unique?;
+    constructor();
+    connectedCallback(): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { UmbPreviewEnvironmentsElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-preview-environments': UmbPreviewEnvironmentsElement;
+    }
+}

package/dist-cms/packages/preview/preview-apps/preview-environments.element.js

@@ -0,0 +1,148 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { UmbPreviewRepository } from '../repository/preview.repository.js';
+import { UMB_PREVIEW_CONTEXT } from '../context/preview.context-token.js';
+import { css, customElement, html, nothing, repeat, state } from '../../../external/lit/index.js';
+import { umbExtensionsRegistry } from '../../core/extension-registry/index.js';
+import { umbPeekError } from '../../core/notification/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
+let UmbPreviewEnvironmentsElement = class UmbPreviewEnvironmentsElement extends UmbLitElement {
+    #fallbackIcon;
+    #previewRepository;
+    constructor() {
+        super();
+        this.#fallbackIcon = 'icon-multiple-windows';
+        this._items = [];
+        this._popoverOpen = false;
+        this.#previewRepository = new UmbPreviewRepository(this);
+        this.consumeContext(UMB_PREVIEW_CONTEXT, (context) => {
+            this.observe(context?.unique, (unique) => (this._unique = unique), '_observeUnique');
+            this.observe(context?.culture, (culture) => (this._culture = culture), '_observeCulture');
+            this.observe(context?.segment, (segment) => (this._segment = segment), '_observeSegment');
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.hidden = true;
+        this.#getPreviewOptions();
+    }
+    async #getPreviewOptions() {
+        this.observe(umbExtensionsRegistry.byTypeAndFilter('workspaceActionMenuItem', (ext) => ext.kind === 'previewOption'), (manifests) => {
+            this._items = manifests.map((manifest) => ({
+                alias: manifest.alias,
+                label: manifest.meta.label || manifest.name,
+                icon: manifest.meta.icon || this.#fallbackIcon,
+                urlProviderAlias: manifest.meta.urlProviderAlias,
+            }));
+            this.hidden = !this._items.length;
+        });
+    }
+    async #onClick(item) {
+        if (!this._unique)
+            return;
+        if (!item.urlProviderAlias)
+            return;
+        const previewUrlData = await this.#previewRepository.getPreviewUrl(this._unique, item.urlProviderAlias, this._culture, this._segment);
+        if (previewUrlData.url) {
+            // Add cache-busting parameter to ensure the preview tab reloads with the new preview session
+            const previewUrl = new URL(previewUrlData.url, window.document.baseURI);
+            previewUrl.searchParams.set('rnd', Date.now().toString());
+            const previewWindow = window.open(previewUrl.toString(), `umbpreview-${this._unique}`);
+            previewWindow?.focus();
+            return;
+        }
+        if (previewUrlData.message) {
+            umbPeekError(this, {
+                color: 'danger',
+                headline: this.localize.term('general_preview'),
+                message: previewUrlData.message,
+            });
+        }
+    }
+    #onPopoverToggle(event) {
+        this._popoverOpen = event.newState === 'open';
+    }
+    render() {
+        if (!this._items.length)
+            return nothing;
+        return html `
+			<uui-button look="primary" popovertarget="options-popover">
+				<div>
+					<uui-icon name=${this.#fallbackIcon}></uui-icon>
+					<span>Preview environments</span>
+				</div>
+				<uui-symbol-expand slot="extra" id="expand-symbol" .open=${this._popoverOpen}></uui-symbol-expand>
+			</uui-button>
+			<uui-popover-container id="options-popover" placement="top-end" @toggle=${this.#onPopoverToggle}>
+				<umb-popover-layout>
+					${repeat(this._items, (item) => item.alias, (item) => html `
+							<uui-menu-item label=${this.localize.string(item.label)} @click=${() => this.#onClick(item)}>
+								<uui-icon slot="icon" name=${item.icon}></uui-icon>
+							</uui-menu-item>
+						`)}
+				</umb-popover-layout>
+			</uui-popover-container>
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: flex;
+				border-left: 1px solid var(--uui-color-header-contrast);
+				--uui-button-font-weight: 400;
+				--uui-button-padding-left-factor: 3;
+				--uui-button-padding-right-factor: 3;
+				--uui-menu-item-flat-structure: 1;
+			}
+
+			:host([hidden]) {
+				display: none;
+			}
+
+			#expand-symbol {
+				transform: rotate(-90deg);
+				margin-left: var(--uui-size-space-3, 9px);
+
+				&[open] {
+					transform: rotate(0deg);
+				}
+			}
+
+			uui-button > div {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-2, 6px);
+			}
+
+			umb-popover-layout {
+				--uui-color-surface: var(--uui-color-header-surface);
+				--uui-color-border: var(--uui-color-header-surface);
+				color: var(--uui-color-header-contrast);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbPreviewEnvironmentsElement.prototype, "_culture", void 0);
+__decorate([
+    state()
+], UmbPreviewEnvironmentsElement.prototype, "_items", void 0);
+__decorate([
+    state()
+], UmbPreviewEnvironmentsElement.prototype, "_popoverOpen", void 0);
+__decorate([
+    state()
+], UmbPreviewEnvironmentsElement.prototype, "_segment", void 0);
+__decorate([
+    state()
+], UmbPreviewEnvironmentsElement.prototype, "_unique", void 0);
+UmbPreviewEnvironmentsElement = __decorate([
+    customElement('umb-preview-environments')
+], UmbPreviewEnvironmentsElement);
+export { UmbPreviewEnvironmentsElement };
+export { UmbPreviewEnvironmentsElement as element };

package/dist-cms/{apps/preview/apps → packages/preview/preview-apps}/preview-exit.element.d.ts

@@ -1,4 +1,4 @@
-import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
 export declare class UmbPreviewExitElement extends UmbLitElement {
     #private;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/{apps/preview/apps → packages/preview/preview-apps}/preview-exit.element.js

@@ -4,13 +4,13 @@ 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 { UMB_PREVIEW_CONTEXT } from '../preview.context.js';
+import { UMB_PREVIEW_CONTEXT } from '../context/preview.context-token.js';
 import { css, customElement, html } from '../../../external/lit/index.js';
-import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
 let UmbPreviewExitElement = class UmbPreviewExitElement extends UmbLitElement {
     async #onClick() {
         const previewContext = await this.getContext(UMB_PREVIEW_CONTEXT);
-        await previewContext?.exitPreview(0);
+        await previewContext?.exitPreview();
     }
     render() {
         return html `
@@ -35,7 +35,7 @@ let UmbPreviewExitElement = class UmbPreviewExitElement extends UmbLitElement {
 			uui-button > div {
 				display: flex;
 				align-items: center;
-				gap: 5px;
+				gap: var(--uui-size-2, 6px);
 			}
 		`,
     ]; }

package/dist-cms/{apps/preview/apps → packages/preview/preview-apps}/preview-open-website.element.d.ts

@@ -1,4 +1,4 @@
-import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
 export declare class UmbPreviewOpenWebsiteElement extends UmbLitElement {
     #private;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/{apps/preview/apps → packages/preview/preview-apps}/preview-open-website.element.js

@@ -4,9 +4,9 @@ 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 { UMB_PREVIEW_CONTEXT } from '../preview.context.js';
+import { UMB_PREVIEW_CONTEXT } from '../context/preview.context-token.js';
 import { css, customElement, html } from '../../../external/lit/index.js';
-import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
 let UmbPreviewOpenWebsiteElement = class UmbPreviewOpenWebsiteElement extends UmbLitElement {
     async #onClick() {
         const previewContext = await this.getContext(UMB_PREVIEW_CONTEXT);
@@ -35,7 +35,7 @@ let UmbPreviewOpenWebsiteElement = class UmbPreviewOpenWebsiteElement extends Um
 			uui-button > div {
 				display: flex;
 				align-items: center;
-				gap: 5px;
+				gap: var(--uui-size-2, 6px);
 			}
 		`,
     ]; }

package/dist-cms/{apps/preview/apps → packages/preview/preview-apps}/preview-segment.element.d.ts

@@ -1,10 +1,13 @@
-import { nothing, type PropertyValues } from '../../../external/lit/index.js';
-import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
+import { nothing } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
 export declare class UmbPreviewSegmentElement extends UmbLitElement {
     #private;
+    private _popoverElement?;
     private _segment?;
     private _segments;
-    protected firstUpdated(_changedProperties: PropertyValues): void;
+    private _popoverOpen;
+    constructor();
+    connectedCallback(): void;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/{apps/preview/apps → packages/preview/preview-apps}/preview-segment.element.js

@@ -4,19 +4,27 @@ 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 { UMB_PREVIEW_CONTEXT } from '../preview.context.js';
-import { css, customElement, html, nothing, repeat, state, } from '../../../external/lit/index.js';
-import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
-import { UmbSegmentCollectionRepository } from '../../../packages/segment/index.js';
+import { UMB_PREVIEW_CONTEXT } from '../context/preview.context-token.js';
+import { css, customElement, html, nothing, query, repeat, state } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
+import { UmbSegmentCollectionRepository } from '../../segment/index.js';
 let UmbPreviewSegmentElement = class UmbPreviewSegmentElement extends UmbLitElement {
+    #segmentRepository;
     constructor() {
-        super(...arguments);
+        super();
         this.#segmentRepository = new UmbSegmentCollectionRepository(this);
         this._segments = [];
+        this._popoverOpen = false;
+        this.#onBlur = () => {
+            if (this._popoverOpen) {
+                this._popoverElement?.hidePopover();
+            }
+        };
+        this.addEventListener('blur', this.#onBlur, true); // Use capture phase to catch blur events
     }
-    #segmentRepository;
-    firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
+    connectedCallback() {
+        super.connectedCallback();
+        this.hidden = true;
         this.#loadSegments();
     }
     async #loadSegments() {
@@ -27,6 +35,7 @@ let UmbPreviewSegmentElement = class UmbPreviewSegmentElement extends UmbLitElem
         if (segment && segment !== this._segment?.unique) {
             this._segment = this._segments.find((c) => c.unique === segment);
         }
+        this.hidden = !this._segments.length;
     }
     async #onClick(segment) {
         if (this._segment === segment)
@@ -34,7 +43,12 @@ let UmbPreviewSegmentElement = class UmbPreviewSegmentElement extends UmbLitElem
         this._segment = segment;
         const previewContext = await this.getContext(UMB_PREVIEW_CONTEXT);
         previewContext?.updateIFrame({ segment: segment?.unique });
+        this._popoverElement?.hidePopover();
+    }
+    #onPopoverToggle(event) {
+        this._popoverOpen = event.newState === 'open';
     }
+    #onBlur;
     render() {
         if (!this._segments.length)
             return nothing;
@@ -44,8 +58,9 @@ let UmbPreviewSegmentElement = class UmbPreviewSegmentElement extends UmbLitElem
 					<uui-icon name="icon-filter"></uui-icon>
 					<span>${this._segment?.name ?? 'Segments'}</span>
 				</div>
+				<uui-symbol-expand slot="extra" id="expand-symbol" .open=${this._popoverOpen}></uui-symbol-expand>
 			</uui-button>
-			<uui-popover-container id="segments-popover" placement="top-end">
+			<uui-popover-container id="segments-popover" placement="top-end" @toggle=${this.#onPopoverToggle}>
 				<umb-popover-layout>
 					<uui-menu-item label="Default" ?active=${!this._segment} @click=${() => this.#onClick()}></uui-menu-item>
 					${repeat(this._segments, (item) => item.unique, (item) => html `
@@ -67,12 +82,26 @@ let UmbPreviewSegmentElement = class UmbPreviewSegmentElement extends UmbLitElem
 				--uui-button-font-weight: 400;
 				--uui-button-padding-left-factor: 3;
 				--uui-button-padding-right-factor: 3;
+				--uui-menu-item-flat-structure: 1;
+			}
+
+			:host([hidden]) {
+				display: none;
+			}
+
+			#expand-symbol {
+				transform: rotate(-90deg);
+				margin-left: var(--uui-size-space-3, 9px);
+
+				&[open] {
+					transform: rotate(0deg);
+				}
 			}
 
 			uui-button > div {
 				display: flex;
 				align-items: center;
-				gap: 5px;
+				gap: var(--uui-size-2, 6px);
 			}
 
 			umb-popover-layout {
@@ -83,12 +112,18 @@ let UmbPreviewSegmentElement = class UmbPreviewSegmentElement extends UmbLitElem
 		`,
     ]; }
 };
+__decorate([
+    query('#segments-popover')
+], UmbPreviewSegmentElement.prototype, "_popoverElement", void 0);
 __decorate([
     state()
 ], UmbPreviewSegmentElement.prototype, "_segment", void 0);
 __decorate([
     state()
 ], UmbPreviewSegmentElement.prototype, "_segments", void 0);
+__decorate([
+    state()
+], UmbPreviewSegmentElement.prototype, "_popoverOpen", void 0);
 UmbPreviewSegmentElement = __decorate([
     customElement('umb-preview-segment')
 ], UmbPreviewSegmentElement);

package/dist-cms/packages/preview/preview-apps/types.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Custom event type for popover toggle events
+ */
+export interface UmbPopoverToggleEvent extends Event {
+    newState: string;
+}

package/dist-cms/packages/preview/preview-apps/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/preview/repository/index.d.ts

@@ -0,0 +1 @@
+export { UmbPreviewRepository } from './preview.repository.js';

package/dist-cms/packages/preview/repository/index.js

@@ -0,0 +1 @@
+export { UmbPreviewRepository } from './preview.repository.js';

package/dist-cms/packages/preview/repository/preview.repository.d.ts

@@ -0,0 +1,30 @@
+import { UmbRepositoryBase } from '../../core/repository/index.js';
+import type { DocumentUrlInfoModel } from '../../core/backend-api/index.js';
+import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
+export declare class UmbPreviewRepository extends UmbRepositoryBase {
+    constructor(host: UmbControllerHost);
+    /**
+     * Gets the preview URL for a document.
+     * @param {string} unique The unique identifier of the document.
+     * @param {string} providerAlias The alias of the URL provider registered on the server.
+     * @param {string | undefined} culture The culture to preview (undefined means invariant).
+     * @param {string | undefined} segment The segment to preview (undefined means no specific segment).
+     * @returns {DocumentUrlInfoModel} The preview URLs of the document.
+     * @memberof UmbPreviewRepository
+     */
+    getPreviewUrl(unique: string, providerAlias: string, culture?: string, segment?: string): Promise<DocumentUrlInfoModel>;
+    /**
+     * Gets the published URL info for a document.
+     * @param {string} unique The unique identifier of the document.
+     * @param {string | undefined} culture The culture to preview (undefined means invariant).
+     * @returns {DocumentUrlInfoModel} The published URL info of the document.
+     * @memberof UmbPreviewRepository
+     */
+    getPublishedUrl(unique: string, culture?: string): Promise<DocumentUrlInfoModel | null | undefined>;
+    /**
+     * Exits preview mode.
+     * @returns {Promise<void>}
+     * @memberof UmbPreviewRepository
+     */
+    exit(): Promise<void>;
+}

package/dist-cms/packages/preview/repository/preview.repository.js

@@ -0,0 +1,56 @@
+import { tryExecute } from '../../core/resources/index.js';
+import { DocumentService, PreviewService } from '../../core/backend-api/index.js';
+import { UmbRepositoryBase } from '../../core/repository/index.js';
+export class UmbPreviewRepository extends UmbRepositoryBase {
+    constructor(host) {
+        super(host);
+    }
+    /**
+     * Gets the preview URL for a document.
+     * @param {string} unique The unique identifier of the document.
+     * @param {string} providerAlias The alias of the URL provider registered on the server.
+     * @param {string | undefined} culture The culture to preview (undefined means invariant).
+     * @param {string | undefined} segment The segment to preview (undefined means no specific segment).
+     * @returns {DocumentUrlInfoModel} The preview URLs of the document.
+     * @memberof UmbPreviewRepository
+     */
+    async getPreviewUrl(unique, providerAlias, culture, segment) {
+        const { data, error } = await tryExecute(this, DocumentService.getDocumentByIdPreviewUrl({
+            path: { id: unique },
+            query: { providerAlias, culture, segment },
+        }));
+        if (error) {
+            throw new Error(error.message);
+        }
+        return data;
+    }
+    /**
+     * Gets the published URL info for a document.
+     * @param {string} unique The unique identifier of the document.
+     * @param {string | undefined} culture The culture to preview (undefined means invariant).
+     * @returns {DocumentUrlInfoModel} The published URL info of the document.
+     * @memberof UmbPreviewRepository
+     */
+    async getPublishedUrl(unique, culture) {
+        if (!unique)
+            return null;
+        const { data, error } = await tryExecute(this, DocumentService.getDocumentUrls({ query: { id: [unique] } }));
+        if (error) {
+            throw new Error(error.message);
+        }
+        if (!data?.length)
+            return null;
+        // TODO: [LK] Review the logic here, unsure whether this is correct. When will the array have more than one item?
+        const urlInfo = culture ? data[0].urlInfos.find((x) => x.culture === culture) : data[0].urlInfos[0];
+        return urlInfo;
+    }
+    /**
+     * Exits preview mode.
+     * @returns {Promise<void>}
+     * @memberof UmbPreviewRepository
+     */
+    async exit() {
+        await tryExecute(this, PreviewService.deletePreview(), { disableNotifications: true });
+        return;
+    }
+}

package/dist-cms/packages/preview/umbraco-package.d.ts

@@ -0,0 +1,7 @@
+export declare const name = "Umbraco.Core.Preview";
+export declare const extensions: {
+    name: string;
+    alias: string;
+    type: string;
+    js: () => Promise<typeof import("./manifests.js")>;
+}[];