@jumoo/usync 18.2.1 → 18.3.0

package/dist/api/index.d.ts

@@ -1,2 +1,2 @@
-export { getActionsBySet, getAddOns, getAddOnSplash, getCheckLegacy, getHandlerSettings, getRunning, getSets, getSettings, getStatus, getSyncFileInfo, type Options, postCopyLegacy, postDownload, postIgnoreLegacy, postImport, postMergeExport, postPerform, postProcessUpload } from './sdk.gen';
-export { ChangeDetailType, ChangeType, type ClientOptions, type EntityTagHeaderValue, type FileContentResult, type GetActionsBySetData, type GetActionsBySetErrors, type GetActionsBySetResponse, type GetActionsBySetResponses, type GetAddOnsData, type GetAddOnsErrors, type GetAddOnSplashData, type GetAddOnSplashErrors, type GetAddOnSplashResponse, type GetAddOnSplashResponses, type GetAddOnsResponse, type GetAddOnsResponses, type GetCheckLegacyData, type GetCheckLegacyErrors, type GetCheckLegacyResponse, type GetCheckLegacyResponses, type GetHandlerSettingsData, type GetHandlerSettingsErrors, type GetHandlerSettingsResponse, type GetHandlerSettingsResponses, type GetRunningData, type GetRunningErrors, type GetRunningResponse, type GetRunningResponses, type GetSetsData, type GetSetsErrors, type GetSetsResponse, type GetSetsResponses, type GetSettingsData, type GetSettingsErrors, type GetSettingsResponse, type GetSettingsResponses, type GetStatusData, type GetStatusErrors, type GetStatusResponse, type GetStatusResponses, type GetSyncFileInfoData, type GetSyncFileInfoErrors, type GetSyncFileInfoResponse, type GetSyncFileInfoResponses, type HandlerSettings, HandlerStatus, type PerformActionRequest, type PerformActionResponse, type PostCopyLegacyData, type PostCopyLegacyErrors, type PostCopyLegacyResponse, type PostCopyLegacyResponses, type PostDownloadData, type PostDownloadErrors, type PostDownloadResponse, type PostDownloadResponses, type PostIgnoreLegacyData, type PostIgnoreLegacyErrors, type PostIgnoreLegacyResponse, type PostIgnoreLegacyResponses, type PostImportData, type PostImportErrors, type PostImportResponse, type PostImportResponses, type PostMergeExportData, type PostMergeExportErrors, type PostMergeExportResponse, type PostMergeExportResponses, type PostPerformData, type PostPerformErrors, type PostPerformResponse, type PostPerformResponses, type PostProcessUploadData, type PostProcessUploadErrors, type PostProcessUploadResponse, type PostProcessUploadResponses, type StringSegment, type SyncActionButton, type SyncActionGroup, type SyncFileVersionCheckResult, SyncFolderMode, type SyncHandlerSummary, type SyncLegacyCheckResponse, type SyncOperationStatusResponse, SyncProcessingMode, type SyncRunningOperationResponse, type SyncSelectableSet, type UploadImportResult, type USyncActionView, type USyncAddonInfo, type USyncAddonSplash, type USyncChange, type USyncHandlerSetSettings, type USyncOptions, type USyncSettings } from './types.gen';
+export { getActionsBySet, getAddOns, getAddOnSplash, getCheckLegacy, getHandlerSettings, getPreview, getRunning, getSets, getSettings, getStatus, getSyncFileInfo, type Options, postCopyLegacy, postDownload, postIgnoreLegacy, postImport, postMergeExport, postPerform, postProcessUpload } from './sdk.gen';
+export { ChangeDetailType, ChangeType, type ClientOptions, type EntityTagHeaderValue, type FileContentResult, type GetActionsBySetData, type GetActionsBySetErrors, type GetActionsBySetResponse, type GetActionsBySetResponses, type GetAddOnsData, type GetAddOnsErrors, type GetAddOnSplashData, type GetAddOnSplashErrors, type GetAddOnSplashResponse, type GetAddOnSplashResponses, type GetAddOnsResponse, type GetAddOnsResponses, type GetCheckLegacyData, type GetCheckLegacyErrors, type GetCheckLegacyResponse, type GetCheckLegacyResponses, type GetHandlerSettingsData, type GetHandlerSettingsErrors, type GetHandlerSettingsResponse, type GetHandlerSettingsResponses, type GetPreviewData, type GetPreviewErrors, type GetPreviewResponse, type GetPreviewResponses, type GetRunningData, type GetRunningErrors, type GetRunningResponse, type GetRunningResponses, type GetSetsData, type GetSetsErrors, type GetSetsResponse, type GetSetsResponses, type GetSettingsData, type GetSettingsErrors, type GetSettingsResponse, type GetSettingsResponses, type GetStatusData, type GetStatusErrors, type GetStatusResponse, type GetStatusResponses, type GetSyncFileInfoData, type GetSyncFileInfoErrors, type GetSyncFileInfoResponse, type GetSyncFileInfoResponses, type HandlerSettings, HandlerStatus, type PerformActionRequest, type PerformActionResponse, type PostCopyLegacyData, type PostCopyLegacyErrors, type PostCopyLegacyResponse, type PostCopyLegacyResponses, type PostDownloadData, type PostDownloadErrors, type PostDownloadResponse, type PostDownloadResponses, type PostIgnoreLegacyData, type PostIgnoreLegacyErrors, type PostIgnoreLegacyResponse, type PostIgnoreLegacyResponses, type PostImportData, type PostImportErrors, type PostImportResponse, type PostImportResponses, type PostMergeExportData, type PostMergeExportErrors, type PostMergeExportResponse, type PostMergeExportResponses, type PostPerformData, type PostPerformErrors, type PostPerformResponse, type PostPerformResponses, type PostProcessUploadData, type PostProcessUploadErrors, type PostProcessUploadResponse, type PostProcessUploadResponses, type StringSegment, type SyncActionButton, type SyncActionGroup, type SyncFileVersionCheckResult, SyncFolderMode, type SyncHandlerSummary, type SyncItemPreviewResponse, type SyncLegacyCheckResponse, type SyncOperationStatusResponse, SyncProcessingMode, type SyncRunningOperationResponse, type SyncSelectableSet, type UploadImportResult, type USyncActionView, type USyncAddonInfo, type USyncAddonSplash, type USyncChange, type USyncHandlerSetSettings, type USyncOptions, type USyncSettings } from './types.gen';

package/dist/api/index.js

@@ -1,3 +1,3 @@
 // This file is auto-generated by @hey-api/openapi-ts
-export { getActionsBySet, getAddOns, getAddOnSplash, getCheckLegacy, getHandlerSettings, getRunning, getSets, getSettings, getStatus, getSyncFileInfo, postCopyLegacy, postDownload, postIgnoreLegacy, postImport, postMergeExport, postPerform, postProcessUpload } from './sdk.gen';
+export { getActionsBySet, getAddOns, getAddOnSplash, getCheckLegacy, getHandlerSettings, getPreview, getRunning, getSets, getSettings, getStatus, getSyncFileInfo, postCopyLegacy, postDownload, postIgnoreLegacy, postImport, postMergeExport, postPerform, postProcessUpload } from './sdk.gen';
 export { ChangeDetailType, ChangeType, HandlerStatus, SyncFolderMode, SyncProcessingMode } from './types.gen';

package/dist/api/sdk.gen.d.ts

@@ -1,5 +1,5 @@
 import type { Client, ClientMeta, Options as Options2, RequestResult, TDataShape } from './client';
-import type { GetActionsBySetData, GetActionsBySetErrors, GetActionsBySetResponses, GetAddOnsData, GetAddOnsErrors, GetAddOnSplashData, GetAddOnSplashErrors, GetAddOnSplashResponses, GetAddOnsResponses, GetCheckLegacyData, GetCheckLegacyErrors, GetCheckLegacyResponses, GetHandlerSettingsData, GetHandlerSettingsErrors, GetHandlerSettingsResponses, GetRunningData, GetRunningErrors, GetRunningResponses, GetSetsData, GetSetsErrors, GetSetsResponses, GetSettingsData, GetSettingsErrors, GetSettingsResponses, GetStatusData, GetStatusErrors, GetStatusResponses, GetSyncFileInfoData, GetSyncFileInfoErrors, GetSyncFileInfoResponses, PostCopyLegacyData, PostCopyLegacyErrors, PostCopyLegacyResponses, PostDownloadData, PostDownloadErrors, PostDownloadResponses, PostIgnoreLegacyData, PostIgnoreLegacyErrors, PostIgnoreLegacyResponses, PostImportData, PostImportErrors, PostImportResponses, PostMergeExportData, PostMergeExportErrors, PostMergeExportResponses, PostPerformData, PostPerformErrors, PostPerformResponses, PostProcessUploadData, PostProcessUploadErrors, PostProcessUploadResponses } from './types.gen';
+import type { GetActionsBySetData, GetActionsBySetErrors, GetActionsBySetResponses, GetAddOnsData, GetAddOnsErrors, GetAddOnSplashData, GetAddOnSplashErrors, GetAddOnSplashResponses, GetAddOnsResponses, GetCheckLegacyData, GetCheckLegacyErrors, GetCheckLegacyResponses, GetHandlerSettingsData, GetHandlerSettingsErrors, GetHandlerSettingsResponses, GetPreviewData, GetPreviewErrors, GetPreviewResponses, GetRunningData, GetRunningErrors, GetRunningResponses, GetSetsData, GetSetsErrors, GetSetsResponses, GetSettingsData, GetSettingsErrors, GetSettingsResponses, GetStatusData, GetStatusErrors, GetStatusResponses, GetSyncFileInfoData, GetSyncFileInfoErrors, GetSyncFileInfoResponses, PostCopyLegacyData, PostCopyLegacyErrors, PostCopyLegacyResponses, PostDownloadData, PostDownloadErrors, PostDownloadResponses, PostIgnoreLegacyData, PostIgnoreLegacyErrors, PostIgnoreLegacyResponses, PostImportData, PostImportErrors, PostImportResponses, PostMergeExportData, PostMergeExportErrors, PostMergeExportResponses, PostPerformData, PostPerformErrors, PostPerformResponses, PostProcessUploadData, PostProcessUploadErrors, PostProcessUploadResponses } from './types.gen';
 export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean, TResponse = unknown> = Options2<TData, ThrowOnError, TResponse> & {
     /**
      * You can provide a client instance returned by `createClient()` instead of
@@ -17,6 +17,7 @@ export declare const getActionsBySet: <ThrowOnError extends boolean = false>(opt
 export declare const postDownload: <ThrowOnError extends boolean = false>(options?: Options<PostDownloadData, ThrowOnError>) => RequestResult<PostDownloadResponses, PostDownloadErrors, ThrowOnError>;
 export declare const postImport: <ThrowOnError extends boolean = false>(options: Options<PostImportData, ThrowOnError>) => RequestResult<PostImportResponses, PostImportErrors, ThrowOnError>;
 export declare const postPerform: <ThrowOnError extends boolean = false>(options: Options<PostPerformData, ThrowOnError>) => RequestResult<PostPerformResponses, PostPerformErrors, ThrowOnError>;
+export declare const getPreview: <ThrowOnError extends boolean = false>(options?: Options<GetPreviewData, ThrowOnError>) => RequestResult<GetPreviewResponses, GetPreviewErrors, ThrowOnError>;
 export declare const postProcessUpload: <ThrowOnError extends boolean = false>(options?: Options<PostProcessUploadData, ThrowOnError>) => RequestResult<PostProcessUploadResponses, PostProcessUploadErrors, ThrowOnError>;
 export declare const getRunning: <ThrowOnError extends boolean = false>(options?: Options<GetRunningData, ThrowOnError>) => RequestResult<GetRunningResponses, GetRunningErrors, ThrowOnError>;
 export declare const getStatus: <ThrowOnError extends boolean = false>(options?: Options<GetStatusData, ThrowOnError>) => RequestResult<GetStatusResponses, GetStatusErrors, ThrowOnError>;

package/dist/api/sdk.gen.js

@@ -28,6 +28,11 @@ export const postPerform = (options) => (options.client ?? client).post({
         ...options.headers
     }
 });
+export const getPreview = (options) => (options?.client ?? client).get({
+    security: [{ scheme: 'bearer', type: 'http' }],
+    url: '/umbraco/usync/api/v1/Preview',
+    ...options
+});
 export const postProcessUpload = (options) => (options?.client ?? client).post({
     security: [{ scheme: 'bearer', type: 'http' }],
     url: '/umbraco/usync/api/v1/ProcessUpload',

package/dist/api/types.gen.d.ts

@@ -115,6 +115,17 @@ export type SyncHandlerSummary = {
     changes: number | string;
     inError: boolean;
 };
+export type SyncItemPreviewResponse = {
+    key: string;
+    handler: string;
+    itemType: string;
+    entityType: string;
+    isDelete: boolean;
+    success: boolean;
+    message?: null | string;
+    preview?: unknown;
+    details: Array<USyncChange>;
+};
 export type SyncLegacyCheckResponse = {
     hasLegacy: boolean;
     legacyFolder?: null | string;
@@ -310,6 +321,32 @@ export type PostPerformResponses = {
     200: PerformActionResponse;
 };
 export type PostPerformResponse = PostPerformResponses[keyof PostPerformResponses];
+export type GetPreviewData = {
+    body?: never;
+    path?: never;
+    query?: {
+        handler?: string;
+        key?: string;
+    };
+    url: '/umbraco/usync/api/v1/Preview';
+};
+export type GetPreviewErrors = {
+    /**
+     * The resource is protected and requires an authentication token
+     */
+    401: unknown;
+    /**
+     * Not Found
+     */
+    404: unknown;
+};
+export type GetPreviewResponses = {
+    /**
+     * OK
+     */
+    200: SyncItemPreviewResponse;
+};
+export type GetPreviewResponse = GetPreviewResponses[keyof GetPreviewResponses];
 export type PostProcessUploadData = {
     body?: never;
     path?: never;

package/dist/components/usync-content-preview.d.ts

@@ -0,0 +1,27 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { type PropertyValues, nothing } from '@umbraco-cms/backoffice/external/lit';
+import '@umbraco-cms/backoffice/components';
+import type { SyncItemPreviewResponse } from '../api';
+/**
+ * Shows the current and incoming versions of a content or media item side by
+ * side, laid out the way the backoffice editor shows them, with every value
+ * rendered by its real property editor. Values that change are highlighted.
+ */
+export declare class uSyncContentPreviewElement extends UmbLitElement {
+    #private;
+    preview?: SyncItemPreviewResponse;
+    /** the tab shown on both sides (by name) */
+    private _activeTab?;
+    /** the culture shown on both sides (undefined for invariant items) */
+    private _culture?;
+    private _onlyChanges;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncContentPreviewElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usync-content-preview': uSyncContentPreviewElement;
+    }
+}

package/dist/components/usync-content-preview.js

@@ -0,0 +1,532 @@
+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;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _uSyncContentPreviewElement_instances, _uSyncContentPreviewElement_current, _uSyncContentPreviewElement_incoming, _uSyncContentPreviewElement_type, _uSyncContentPreviewElement_compositions, _uSyncContentPreviewElement_dataTypes, _uSyncContentPreviewElement_cultures, _uSyncContentPreviewElement_renderToolbar, _uSyncContentPreviewElement_renderSide, _uSyncContentPreviewElement_missingMessage, _uSyncContentPreviewElement_renderInfo, _uSyncContentPreviewElement_renderPublished, _uSyncContentPreviewElement_name, _uSyncContentPreviewElement_renderTabButton, _uSyncContentPreviewElement_renderTab, _uSyncContentPreviewElement_renderProperties, _uSyncContentPreviewElement_visibleTabs, _uSyncContentPreviewElement_tabProperties, _uSyncContentPreviewElement_datasetValue, _uSyncContentPreviewElement_value, _uSyncContentPreviewElement_valueStatus;
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { classMap, css, customElement, html, nothing, property, repeat, state, } from '@umbraco-cms/backoffice/external/lit';
+import '@umbraco-cms/backoffice/components';
+import { getPreviewModel, } from '../preview/types.js';
+import { buildContentTypeLayout, } from '../utils/preview/content-type-layout.js';
+import { deepEqual } from '../utils/diff/deep-equal.js';
+/**
+ * Shows the current and incoming versions of a content or media item side by
+ * side, laid out the way the backoffice editor shows them, with every value
+ * rendered by its real property editor. Values that change are highlighted.
+ */
+let uSyncContentPreviewElement = class uSyncContentPreviewElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _uSyncContentPreviewElement_instances.add(this);
+        this._onlyChanges = false;
+        _uSyncContentPreviewElement_current.set(this, {});
+        _uSyncContentPreviewElement_incoming.set(this, {});
+        _uSyncContentPreviewElement_type.set(this, void 0);
+        _uSyncContentPreviewElement_compositions.set(this, new Map());
+        _uSyncContentPreviewElement_dataTypes.set(this, new Map());
+        _uSyncContentPreviewElement_cultures.set(this, []);
+    }
+    willUpdate(changed) {
+        if (!changed.has('preview') || !this.preview)
+            return;
+        const model = getPreviewModel(this.preview);
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_current, { item: model?.current ?? undefined, info: model?.currentInfo }, "f");
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_incoming, { item: model?.incoming ?? undefined, info: model?.incomingInfo }, "f");
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_type, model?.contentType ?? undefined, "f");
+        const compositions = model?.compositions ?? [];
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_compositions, new Map(compositions.map((c) => [c.id, c])), "f");
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_dataTypes, new Map((model?.dataTypes ?? []).map((d) => [d.id, d])), "f");
+        __classPrivateFieldSet(this, _uSyncContentPreviewElement_cultures, [
+            ...new Set([__classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f").item, __classPrivateFieldGet(this, _uSyncContentPreviewElement_incoming, "f").item]
+                .flatMap((item) => item?.variants ?? [])
+                .map((v) => v.culture)
+                .filter((c) => !!c)),
+        ].sort(), "f");
+        this._culture = __classPrivateFieldGet(this, _uSyncContentPreviewElement_cultures, "f")[0];
+        this._activeTab = undefined;
+    }
+    render() {
+        if (!this.preview)
+            return nothing;
+        const tabs = __classPrivateFieldGet(this, _uSyncContentPreviewElement_type, "f")
+            ? __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_visibleTabs).call(this, buildContentTypeLayout(__classPrivateFieldGet(this, _uSyncContentPreviewElement_type, "f"), __classPrivateFieldGet(this, _uSyncContentPreviewElement_compositions, "f")))
+            : [];
+        // until a tab is picked, open on the first one with changes.
+        const active = tabs.find((t) => t.name === this._activeTab) ??
+            tabs.find((t) => __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_tabProperties).call(this, t).some((p) => __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_valueStatus).call(this, p.property))) ??
+            tabs[0];
+        return html `
+			<div class="sides">
+				${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderToolbar).call(this)}
+				${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderSide).call(this, 'current', __classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f"), tabs, active)}
+				${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderSide).call(this, 'incoming', __classPrivateFieldGet(this, _uSyncContentPreviewElement_incoming, "f"), tabs, active)}
+			</div>
+		`;
+    }
+};
+_uSyncContentPreviewElement_current = new WeakMap();
+_uSyncContentPreviewElement_incoming = new WeakMap();
+_uSyncContentPreviewElement_type = new WeakMap();
+_uSyncContentPreviewElement_compositions = new WeakMap();
+_uSyncContentPreviewElement_dataTypes = new WeakMap();
+_uSyncContentPreviewElement_cultures = new WeakMap();
+_uSyncContentPreviewElement_instances = new WeakSet();
+_uSyncContentPreviewElement_renderToolbar = function _uSyncContentPreviewElement_renderToolbar() {
+    if (__classPrivateFieldGet(this, _uSyncContentPreviewElement_cultures, "f").length < 2 && !(__classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f").item && __classPrivateFieldGet(this, _uSyncContentPreviewElement_incoming, "f").item))
+        return nothing;
+    return html `<div class="toolbar">
+			${__classPrivateFieldGet(this, _uSyncContentPreviewElement_cultures, "f").length > 1
+        ? html `<uui-button-group
+							aria-label=${this.localize.termOrDefault('uSync_previewCulture', 'Language')}>
+							${__classPrivateFieldGet(this, _uSyncContentPreviewElement_cultures, "f").map((culture) => html `<uui-button
+										look=${culture === this._culture ? 'primary' : 'secondary'}
+										compact
+										label=${culture}
+										@click=${() => (this._culture = culture)}></uui-button>`)}
+						</uui-button-group>`
+        : nothing}
+			${
+    // there is only something to compare when the item is on both sides.
+    __classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f").item && __classPrivateFieldGet(this, _uSyncContentPreviewElement_incoming, "f").item
+        ? html `<uui-toggle
+							label=${this.localize.termOrDefault('uSync_previewOnlyChanges', 'Only show changes')}
+							?checked=${this._onlyChanges}
+							@change=${(e) => (this._onlyChanges = e.target.checked)}></uui-toggle>`
+        : nothing}
+		</div>`;
+};
+_uSyncContentPreviewElement_renderSide = function _uSyncContentPreviewElement_renderSide(side, data, tabs, active) {
+    const headline = side === 'current'
+        ? this.localize.termOrDefault('uSync_previewCurrent', 'Current (this site)')
+        : this.localize.termOrDefault('uSync_previewIncoming', 'Incoming (uSync files)');
+    if (!data.item) {
+        return html `<div class="side ${side}">
+				<h4 class="side-headline">${headline}</h4>
+				<uui-box class="info"><p class="empty">${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_missingMessage).call(this, side)}</p></uui-box>
+			</div>`;
+    }
+    return html `
+			<div class="side ${side}">
+				<h4 class="side-headline">${headline}</h4>
+				${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderInfo).call(this, data)}
+				${tabs.length > 1 || (tabs.length === 1 && tabs[0].name)
+        ? html `<uui-tab-group>
+								${tabs.map((tab) => __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderTabButton).call(this, tab, tab === active))}
+							</uui-tab-group>`
+        : html `<div></div>`}
+				${active
+        ? __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderTab).call(this, data.item, active)
+        : html `<uui-box>
+								<p class="empty">
+									${this._onlyChanges
+            ? this.localize.termOrDefault('uSync_previewNoValueChanges', 'No values change')
+            : this.localize.termOrDefault('uSync_previewNoProperties', 'No properties')}
+								</p>
+							</uui-box>`}
+			</div>
+		`;
+};
+_uSyncContentPreviewElement_missingMessage = function _uSyncContentPreviewElement_missingMessage(side) {
+    if (side === 'current') {
+        return this.localize.termOrDefault('uSync_previewNotInSite', 'This item does not exist in the site yet');
+    }
+    return this.preview?.isDelete
+        ? this.localize.termOrDefault('uSync_previewDeleted', 'This item will be deleted or renamed by the import')
+        : this.localize.termOrDefault('uSync_previewFailed', 'The incoming item could not be built for the preview');
+};
+_uSyncContentPreviewElement_renderInfo = function _uSyncContentPreviewElement_renderInfo(data) {
+    const item = data.item;
+    const info = data.info;
+    const other = data === __classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f") ? __classPrivateFieldGet(this, _uSyncContentPreviewElement_incoming, "f") : __classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f");
+    const both = !!other.item;
+    const changed = (field) => {
+        if (!both)
+            return { changed: false };
+        const mine = field === 'name' ? __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_name).call(this, item) : info?.[field];
+        const theirs = field === 'name' ? __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_name).call(this, other.item) : other.info?.[field];
+        return { changed: !deepEqual(mine, theirs) };
+    };
+    const icon = 'documentType' in item ? item.documentType.icon : item.mediaType.icon;
+    return html `
+			<uui-box class="info">
+				<div slot="headline" class="headline">
+					<umb-icon name=${icon}></umb-icon>
+					<span class=${classMap(changed('name'))}>${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_name).call(this, item)}</span>
+				</div>
+				<dl class="meta">
+					<dt>${this.localize.termOrDefault('uSync_previewParent', 'Parent')}</dt>
+					<dd>
+						<span class=${classMap(changed('parent'))}
+							>${info?.parent ?? this.localize.termOrDefault('uSync_previewRoot', '(root)')}</span
+						>
+					</dd>
+					${info?.template !== undefined && this.preview?.entityType === 'document'
+        ? html `<dt>
+										${this.localize.termOrDefault('uSync_previewTemplate', 'Template')}
+									</dt>
+									<dd>
+										<span class=${classMap(changed('template'))}
+											>${info?.template ?? '-'}</span
+										>
+									</dd>`
+        : nothing}
+					<dt>${this.localize.termOrDefault('uSync_previewSortOrder', 'Sort order')}</dt>
+					<dd>
+						<span class=${classMap(changed('sortOrder'))}>${info?.sortOrder ?? '-'}</span>
+					</dd>
+					${info?.published.length
+        ? html `<dt>
+										${this.localize.termOrDefault('uSync_previewPublished', 'Published')}
+									</dt>
+									<dd>
+										<span class=${classMap({ tags: true, ...changed('published') })}>
+											${info.published.map((p) => __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderPublished).call(this, p.culture, p.published))}
+										</span>
+									</dd>`
+        : nothing}
+				</dl>
+				${info?.trashed
+        ? html `<uui-tag color="danger" look="secondary"
+								>${this.localize.termOrDefault('uSync_previewTrashed', 'In the recycle bin')}</uui-tag
+							>`
+        : nothing}
+			</uui-box>
+		`;
+};
+_uSyncContentPreviewElement_renderPublished = function _uSyncContentPreviewElement_renderPublished(culture, published) {
+    const label = published
+        ? this.localize.termOrDefault('uSync_previewPublished', 'Published')
+        : this.localize.termOrDefault('uSync_previewNotPublished', 'Not published');
+    return html `<uui-tag
+			size="s"
+			look=${published ? 'primary' : 'secondary'}
+			color=${published ? 'positive' : 'default'}
+			>${culture ? `${culture}: ` : ''}${label}</uui-tag
+		>`;
+};
+_uSyncContentPreviewElement_name = function _uSyncContentPreviewElement_name(item) {
+    const variant = item.variants.find((v) => (v.culture ?? undefined) === this._culture) ??
+        item.variants[0];
+    return variant?.name ?? '';
+};
+_uSyncContentPreviewElement_renderTabButton = function _uSyncContentPreviewElement_renderTabButton(tab, active) {
+    const changed = __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_tabProperties).call(this, tab).some((p) => __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_valueStatus).call(this, p.property));
+    const label = tab.name || this.localize.termOrDefault('uSync_previewGenericTab', 'Generic');
+    return html `<uui-tab
+			label=${label}
+			?active=${active}
+			@click=${() => (this._activeTab = tab.name)}>
+			<span class="tab-label">
+				${label} ${changed ? html `<span class="dot changed"></span>` : nothing}
+			</span>
+		</uui-tab>`;
+};
+_uSyncContentPreviewElement_renderTab = function _uSyncContentPreviewElement_renderTab(item, tab) {
+    // inert rather than readonly: editors are shown as an editor would see them,
+    // but nothing in the preview can be changed.
+    return html `
+			<umb-property-dataset .value=${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_datasetValue).call(this, item)} inert>
+				${tab.properties.length ? html `<uui-box>${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderProperties).call(this, tab.properties)}</uui-box>` : nothing}
+				${repeat(tab.groups, (group) => group.name, (group) => html `<uui-box headline=${group.name}
+							>${__classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_renderProperties).call(this, group.properties)}</uui-box
+						>`)}
+			</umb-property-dataset>
+		`;
+};
+_uSyncContentPreviewElement_renderProperties = function _uSyncContentPreviewElement_renderProperties(properties) {
+    return repeat(properties, (entry) => entry.property.id, ({ property: p }) => {
+        const dataType = __classPrivateFieldGet(this, _uSyncContentPreviewElement_dataTypes, "f").get(p.dataType.id);
+        const status = __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_valueStatus).call(this, p);
+        return html `<div class="property ${status ?? ''}">
+					${dataType
+            ? html `<umb-property
+									.alias=${p.alias}
+									.label=${p.name}
+									.description=${p.description ?? ''}
+									.propertyEditorUiAlias=${dataType.editorUiAlias}
+									.config=${dataType.values}
+									.appearance=${p.appearance}></umb-property>`
+            : html `<p class="empty">${p.name}</p>`}
+				</div>`;
+    });
+};
+_uSyncContentPreviewElement_visibleTabs = function _uSyncContentPreviewElement_visibleTabs(tabs) {
+    if (!this._onlyChanges)
+        return tabs;
+    const keep = (properties) => properties.filter((p) => __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_valueStatus).call(this, p.property));
+    return tabs
+        .map((tab) => ({
+        ...tab,
+        properties: keep(tab.properties),
+        groups: tab.groups
+            .map((group) => ({ ...group, properties: keep(group.properties) }))
+            .filter((group) => group.properties.length > 0),
+    }))
+        .filter((tab) => tab.properties.length > 0 || tab.groups.length > 0);
+};
+_uSyncContentPreviewElement_tabProperties = function _uSyncContentPreviewElement_tabProperties(tab) {
+    return [...tab.properties, ...tab.groups.flatMap((g) => g.properties)];
+};
+_uSyncContentPreviewElement_datasetValue = function _uSyncContentPreviewElement_datasetValue(item) {
+    return item.values
+        .filter((v) => !v.segment && (!v.culture || v.culture === this._culture))
+        .map((v) => ({ alias: v.alias, value: v.value }));
+};
+_uSyncContentPreviewElement_value = function _uSyncContentPreviewElement_value(item, p) {
+    const culture = p.variesByCulture ? this._culture : undefined;
+    return item?.values.find((v) => v.alias === p.alias && !v.segment && (v.culture ?? undefined) === culture)?.value;
+};
+_uSyncContentPreviewElement_valueStatus = function _uSyncContentPreviewElement_valueStatus(p) {
+    const current = __classPrivateFieldGet(this, _uSyncContentPreviewElement_current, "f").item;
+    const incoming = __classPrivateFieldGet(this, _uSyncContentPreviewElement_incoming, "f").item;
+    if (!current || !incoming)
+        return undefined;
+    const before = __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_value).call(this, current, p);
+    const after = __classPrivateFieldGet(this, _uSyncContentPreviewElement_instances, "m", _uSyncContentPreviewElement_value).call(this, incoming, p);
+    if (deepEqual(normalise(before), normalise(after)))
+        return undefined;
+    if (isEmpty(before))
+        return 'added';
+    if (isEmpty(after))
+        return 'removed';
+    return 'changed';
+};
+uSyncContentPreviewElement.styles = css `
+		:host {
+			display: block;
+			container-type: inline-size;
+		}
+
+		/* the toolbar shares the headline row with the incoming side, on the right. */
+		.toolbar {
+			grid-column: 2;
+			grid-row: 1;
+			justify-self: end;
+			align-self: center;
+			z-index: 1;
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: var(--uui-size-space-4);
+		}
+
+		/* the two sides share rows (headline, info, tabs, content), so the
+		   tab bars and properties line up even when the info boxes differ. */
+		.sides {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: auto auto auto 1fr;
+			gap: var(--uui-size-space-4) var(--uui-size-space-5);
+		}
+
+		.side {
+			display: grid;
+			grid-row: span 4;
+			grid-template-rows: subgrid;
+			align-items: start;
+			min-width: 0;
+		}
+
+		.side.current {
+			grid-column: 1;
+			grid-row: 1 / span 4;
+		}
+
+		.side.incoming {
+			grid-column: 2;
+			grid-row: 1 / span 4;
+		}
+
+		.side > .info:not(:last-child) {
+			align-self: stretch;
+		}
+
+		@container (max-width: 760px) {
+			.sides {
+				grid-template-columns: 1fr;
+				grid-template-rows: none;
+				row-gap: var(--uui-size-layout-1);
+			}
+
+			.side,
+			.side.current,
+			.side.incoming,
+			.toolbar {
+				grid-column: 1;
+				grid-row: auto;
+			}
+
+			.side {
+				display: flex;
+				flex-direction: column;
+				align-items: stretch;
+				gap: var(--uui-size-space-4);
+			}
+
+			.side > .side-headline {
+				align-self: auto;
+			}
+		}
+
+		umb-property-dataset {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-4);
+			min-width: 0;
+		}
+
+		.side-headline {
+			align-self: center;
+			margin: 0;
+			font-size: var(--uui-type-small-size);
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+			color: var(--uui-color-text-alt);
+		}
+
+		.headline {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-3);
+		}
+
+		.meta {
+			display: grid;
+			grid-template-columns: max-content 1fr;
+			align-items: center;
+			gap: var(--uui-size-space-2) var(--uui-size-space-5);
+			margin: 0 0 var(--uui-size-space-2);
+		}
+
+		.meta dt {
+			font-weight: 700;
+		}
+
+		.tags {
+			display: inline-flex;
+			flex-wrap: wrap;
+			gap: var(--uui-size-space-2);
+		}
+
+		.meta dd {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--uui-size-space-2);
+			margin: 0;
+		}
+
+		/* a changed field gets a soft highlight, spread with a shadow so the text doesn't move. */
+		.changed:not(.property):not(.dot) {
+			background: color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
+			border-radius: var(--uui-border-radius);
+			box-shadow: 0 0 0 var(--uui-size-space-1)
+				color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
+		}
+
+		uui-tab-group {
+			--uui-tab-divider: var(--uui-color-border);
+			border-bottom: 1px solid var(--uui-color-border);
+		}
+
+		.tab-label {
+			display: inline-flex;
+			align-items: center;
+			gap: var(--uui-size-space-2);
+			white-space: nowrap;
+		}
+
+		.dot {
+			display: inline-block;
+			width: 8px;
+			height: 8px;
+			border-radius: 50%;
+		}
+
+		.dot.changed {
+			background: var(--uui-color-warning);
+		}
+
+		/* marked with an inset bar rather than a border, so the content doesn't shift. */
+		.property.added {
+			box-shadow: inset 3px 0 0 var(--uui-color-positive);
+			background: color-mix(in srgb, var(--uui-color-positive) 6%, transparent);
+		}
+
+		.property.removed {
+			box-shadow: inset 3px 0 0 var(--uui-color-danger);
+			background: color-mix(in srgb, var(--uui-color-danger) 6%, transparent);
+		}
+
+		.property.changed {
+			box-shadow: inset 3px 0 0 var(--uui-color-warning);
+			background: color-mix(in srgb, var(--uui-color-warning) 10%, transparent);
+		}
+
+		/* properties run edge to edge in their box, like the backoffice editor. */
+		.property {
+			padding: 0 var(--uui-size-space-5);
+			margin: 0 calc(-1 * var(--uui-size-space-5));
+		}
+
+		.property:first-child {
+			margin-top: calc(-1 * var(--uui-size-space-5));
+		}
+
+		.property:last-child {
+			margin-bottom: calc(-1 * var(--uui-size-space-5));
+		}
+
+		.property + .property {
+			border-top: 1px solid var(--uui-color-divider);
+		}
+
+		/* umb-property pads itself for a full workspace, tighten it up here. */
+		umb-property {
+			--uui-size-layout-1: var(--uui-size-space-4);
+		}
+
+		.empty {
+			margin: 0;
+			color: var(--uui-color-text-alt);
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], uSyncContentPreviewElement.prototype, "preview", void 0);
+__decorate([
+    state()
+], uSyncContentPreviewElement.prototype, "_activeTab", void 0);
+__decorate([
+    state()
+], uSyncContentPreviewElement.prototype, "_culture", void 0);
+__decorate([
+    state()
+], uSyncContentPreviewElement.prototype, "_onlyChanges", void 0);
+uSyncContentPreviewElement = __decorate([
+    customElement('usync-content-preview')
+], uSyncContentPreviewElement);
+export { uSyncContentPreviewElement };
+/** values that mean "nothing set" compare as equal */
+function normalise(value) {
+    return isEmpty(value) ? undefined : value;
+}
+function isEmpty(value) {
+    return (value === undefined ||
+        value === null ||
+        value === '' ||
+        (Array.isArray(value) && value.length === 0));
+}
+export default uSyncContentPreviewElement;