@jumoo/usync 17.5.2 → 17.5.3-prerelease.17

package/dist/components/usync-data-type-preview.js

@@ -0,0 +1,295 @@
+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 __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 _uSyncDataTypePreviewElement_instances, _uSyncDataTypePreviewElement_renderSide, _uSyncDataTypePreviewElement_renderMissing, _uSyncDataTypePreviewElement_renderInfo, _uSyncDataTypePreviewElement_renderEditor, _uSyncDataTypePreviewElement_renderConfig;
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { classMap, css, customElement, html, nothing, property, } from '@umbraco-cms/backoffice/external/lit';
+import '@umbraco-cms/backoffice/components';
+import { getPreviewModel } from '../preview/types.js';
+import { deepEqual, prettyJson } from '../utils/diff/index.js';
+/**
+ * Shows the current and incoming versions of a data type side by side,
+ * rendered with the real property editor, so you can see what an import
+ * will do before running it.
+ */
+let uSyncDataTypePreviewElement = class uSyncDataTypePreviewElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _uSyncDataTypePreviewElement_instances.add(this);
+    }
+    render() {
+        if (!this.preview)
+            return nothing;
+        const model = getPreviewModel(this.preview);
+        const current = model?.current ?? undefined;
+        const incoming = model?.incoming ?? undefined;
+        return html `
+			<div class="sides">
+				${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderSide).call(this, 'current', current, incoming)}
+				${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderSide).call(this, 'incoming', incoming, current)}
+			</div>
+		`;
+    }
+};
+_uSyncDataTypePreviewElement_instances = new WeakSet();
+_uSyncDataTypePreviewElement_renderSide = function _uSyncDataTypePreviewElement_renderSide(side, dataType, other) {
+    const headline = side === 'current'
+        ? this.localize.termOrDefault('uSync_previewCurrent', 'Current (this site)')
+        : this.localize.termOrDefault('uSync_previewIncoming', 'Incoming (uSync files)');
+    return html `
+			<div class="side">
+				<h4 class="side-headline">${headline}</h4>
+				${dataType
+        ? html `
+								${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderInfo).call(this, dataType, other)} ${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderEditor).call(this, dataType)}
+								${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderConfig).call(this, dataType, other, side)}
+							`
+        : __classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderMissing).call(this, side)}
+			</div>
+		`;
+};
+_uSyncDataTypePreviewElement_renderMissing = function _uSyncDataTypePreviewElement_renderMissing(side) {
+    const message = side === 'current'
+        ? this.localize.termOrDefault('uSync_previewNotInSite', 'This item does not exist in the site yet')
+        : 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');
+    return html `<uui-box class="info"><p class="empty">${message}</p></uui-box>`;
+};
+_uSyncDataTypePreviewElement_renderInfo = function _uSyncDataTypePreviewElement_renderInfo(dataType, other) {
+    const changed = (field) => other !== undefined && other[field] !== dataType[field];
+    return html `
+			<uui-box class="info">
+				<div slot="headline" class="headline">
+					<umb-icon name="icon-autofill"></umb-icon>
+					<span class=${classMap({ changed: changed('name') })}>${dataType.name}</span>
+				</div>
+				<dl class="meta">
+					<dt>
+						${this.localize.termOrDefault('uSync_previewPropertyEditor', 'Property editor')}
+					</dt>
+					<dd class=${classMap({ changed: changed('editorAlias') })}>
+						<code>${dataType.editorAlias}</code>
+					</dd>
+					<dt>
+						${this.localize.termOrDefault('uSync_previewPropertyEditorUi', 'Property editor UI')}
+					</dt>
+					<dd class=${classMap({ changed: changed('editorUiAlias') })}>
+						<code>${dataType.editorUiAlias}</code>
+					</dd>
+				</dl>
+			</uui-box>
+		`;
+};
+_uSyncDataTypePreviewElement_renderEditor = function _uSyncDataTypePreviewElement_renderEditor(dataType) {
+    return html `
+			<uui-box
+				.headline=${this.localize.termOrDefault('uSync_previewEditor', 'Editor preview')}>
+				<!-- inert rather than readonly: most editors render only their value when
+				     readonly, which is empty here, so you wouldn't see the editor at all. -->
+				<umb-property-dataset .value=${[]} inert>
+					<umb-property
+						alias="usyncPreview"
+						.label=${dataType.name}
+						.description=${this.localize.termOrDefault('uSync_previewEditorDesc', 'How this data type looks to editors')}
+						.propertyEditorUiAlias=${dataType.editorUiAlias}
+						.config=${dataType.values}></umb-property>
+				</umb-property-dataset>
+			</uui-box>
+		`;
+};
+_uSyncDataTypePreviewElement_renderConfig = function _uSyncDataTypePreviewElement_renderConfig(dataType, other, side) {
+    const values = [...dataType.values].sort((a, b) => a.alias.localeCompare(b.alias));
+    return html `
+			<uui-box
+				.headline=${this.localize.termOrDefault('uSync_previewConfiguration', 'Configuration')}>
+				${values.length === 0
+        ? html `<p class="empty">
+								${this.localize.termOrDefault('uSync_previewNoConfiguration', 'No configuration')}
+							</p>`
+        : html `<table>
+								${values.map((value) => {
+            const status = configStatus(value.alias, value.value, other, side);
+            return html `<tr class="row-${status}">
+										<th><code>${value.alias}</code></th>
+										<td><pre>${formatConfigValue(value.value)}</pre></td>
+									</tr>`;
+        })}
+							</table>`}
+			</uui-box>
+		`;
+};
+uSyncDataTypePreviewElement.styles = css `
+		:host {
+			display: block;
+			container-type: inline-size;
+		}
+
+		/* the two sides share rows (headline, info, editor, config), so the
+		   boxes line up across the sides. */
+		.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;
+			min-width: 0;
+		}
+
+		.side > :last-child {
+			align-self: start;
+		}
+
+		@container (max-width: 760px) {
+			.sides {
+				grid-template-columns: 1fr;
+				grid-template-rows: none;
+				row-gap: var(--uui-size-layout-1);
+			}
+
+			.side {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+				grid-row: auto;
+			}
+		}
+
+		.side-headline {
+			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: baseline;
+			gap: var(--uui-size-space-3) var(--uui-size-space-5);
+			margin: 0;
+		}
+
+		.meta dt {
+			font-weight: 700;
+		}
+
+		.meta dd {
+			margin: 0;
+			overflow-wrap: anywhere;
+		}
+
+		/* a changed field gets a soft highlight, spread with a shadow so the text doesn't move. */
+		.changed {
+			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);
+		}
+
+		/* umb-property pads itself for a full workspace, tighten it up here. */
+		umb-property {
+			--uui-size-layout-1: var(--uui-size-space-2);
+		}
+
+		table {
+			width: 100%;
+			border-collapse: collapse;
+			margin: calc(-1 * var(--uui-size-space-2)) 0;
+		}
+
+		tr + tr {
+			border-top: 1px solid var(--uui-color-divider);
+		}
+
+		th,
+		td {
+			text-align: left;
+			vertical-align: baseline;
+			padding: var(--uui-size-space-3) var(--uui-size-space-3);
+		}
+
+		/* the alias column is as wide as the longest alias (up to 40%), so values sit beside their names. */
+		th {
+			width: 1%;
+			max-width: 40%;
+			white-space: nowrap;
+			font-weight: 700;
+		}
+
+		th code,
+		td pre {
+			font-size: var(--uui-type-small-size);
+		}
+
+		td pre {
+			margin: 0;
+			white-space: pre-wrap;
+			word-break: break-word;
+		}
+
+		/* marked with an inset bar rather than a border, so the content doesn't shift. */
+		tr.row-changed {
+			box-shadow: inset 3px 0 0 var(--uui-color-warning);
+			background: color-mix(in srgb, var(--uui-color-warning) 10%, transparent);
+		}
+
+		tr.row-added {
+			box-shadow: inset 3px 0 0 var(--uui-color-positive);
+			background: color-mix(in srgb, var(--uui-color-positive) 6%, transparent);
+		}
+
+		tr.row-removed {
+			box-shadow: inset 3px 0 0 var(--uui-color-danger);
+			background: color-mix(in srgb, var(--uui-color-danger) 6%, transparent);
+		}
+
+		.empty {
+			margin: 0;
+			color: var(--uui-color-text-alt);
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], uSyncDataTypePreviewElement.prototype, "preview", void 0);
+uSyncDataTypePreviewElement = __decorate([
+    customElement('usync-data-type-preview')
+], uSyncDataTypePreviewElement);
+export { uSyncDataTypePreviewElement };
+/**
+ * how a config value on this side compares to the other side. an alias
+ * missing from the current side is being added, one missing from the
+ * incoming side is being removed.
+ */
+function configStatus(alias, value, other, side) {
+    if (!other)
+        return 'unchanged';
+    const match = other.values.find((v) => v.alias === alias);
+    if (!match)
+        return side === 'incoming' ? 'added' : 'removed';
+    return deepEqual(value, match.value) ? 'unchanged' : 'changed';
+}
+function formatConfigValue(value) {
+    return typeof value === 'string' ? value : prettyJson(value);
+}
+export default uSyncDataTypePreviewElement;

package/dist/components/usync-results-view.js

@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _uSyncResultsView_instances, _uSyncResultsView_modalContext, _uSyncResultsView_toggleShowAll, _uSyncResultsView_showDetail;
+var _uSyncResultsView_instances, _uSyncResultsView_modalContext, _uSyncResultsView_toggleShowAll, _uSyncResultsView_showDetail, _uSyncResultsView_visibleItems;
 import { LitElement, html, customElement, property, css, state, nothing, } from '@umbraco-cms/backoffice/external/lit';
 import { ChangeType } from '@jumoo/uSync';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
@@ -98,10 +98,11 @@ _uSyncResultsView_showDetail = async function _uSyncResultsView_showDetail(e) {
     const detailsModal = __classPrivateFieldGet(this, _uSyncResultsView_modalContext, "f")?.open(this, USYNC_DETAILS_MODAL, {
         data: {
             item: e.action,
-            showActions: !this.hideActions &&
-                (e.action.change == ChangeType.CREATE ||
-                    e.action.change == ChangeType.UPDATE ||
-                    e.action.change == ChangeType.IMPORT),
+            items: __classPrivateFieldGet(this, _uSyncResultsView_instances, "m", _uSyncResultsView_visibleItems).call(this),
+            showActions: (item) => !this.hideActions &&
+                (item.change == ChangeType.CREATE ||
+                    item.change == ChangeType.UPDATE ||
+                    item.change == ChangeType.IMPORT),
         },
     });
     const data = await detailsModal?.onSubmit().catch(() => {
@@ -110,6 +111,13 @@ _uSyncResultsView_showDetail = async function _uSyncResultsView_showDetail(e) {
     if (!data)
         return;
 };
+_uSyncResultsView_visibleItems = function _uSyncResultsView_visibleItems() {
+    const groups = this.groupBy(this.results || [], (result) => result.itemType);
+    return Object.values(groups)
+        .flat()
+        .filter((r) => r.change !== ChangeType.EXPORT &&
+        (this.showAll || r.change !== ChangeType.NO_CHANGE));
+};
 uSyncResultsView.styles = css `
 		:host {
 			display: block;

package/dist/dialogs/details-modal-element.d.ts

@@ -2,11 +2,26 @@ import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { nothing } from '@umbraco-cms/backoffice/external/lit';
 import { uSyncDetailsModalData, uSyncDetailsModalValue } from '@jumoo/uSync';
 import { UUIButtonState } from '@umbraco-cms/backoffice/external/uui';
+type DetailsTab = 'changes' | 'diff';
 export declare class uSyncDetailsModalElement extends UmbModalBaseElement<uSyncDetailsModalData, uSyncDetailsModalValue> {
     #private;
     importState: UUIButtonState;
+    private _preview?;
+    private _tab;
+    private _loading;
+    private _item?;
+    private _index;
+    /** the entity types there is a 'usync-item-preview' element for */
+    private _previewTypes;
     constructor();
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
+    renderHeadline(): typeof nothing | import("lit-html").TemplateResult<1>;
+    renderNavigation(): typeof nothing | import("lit-html").TemplateResult<1>;
+    renderTabs(): typeof nothing | import("lit-html").TemplateResult<1>;
+    renderTab(tab: DetailsTab, key: string, fallback: string, icon: string): import("lit-html").TemplateResult<1>;
+    renderTabContent(): import("lit-html").TemplateResult<1>;
+    renderPreview(): import("lit-html").TemplateResult<1>;
     renderActions(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult;
 }

package/dist/dialogs/details-modal-element.js

@@ -9,22 +9,48 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _uSyncDetailsModalElement_instances, _uSyncDetailsModalElement_onImport, _uSyncDetailsModalElement_onClose;
+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 _uSyncDetailsModalElement_instances, _uSyncDetailsModalElement_repository, _uSyncDetailsModalElement_previewFilter, _uSyncDetailsModalElement_previewProps, _uSyncDetailsModalElement_moveTo, _uSyncDetailsModalElement_loadPreview, _uSyncDetailsModalElement_hasPreview, _uSyncDetailsModalElement_showActions, _uSyncDetailsModalElement_onImport, _uSyncDetailsModalElement_onClose;
 import { UMB_MODAL_MANAGER_CONTEXT, UmbModalBaseElement, } from '@umbraco-cms/backoffice/modal';
 import { css, customElement, html, nothing, state, } from '@umbraco-cms/backoffice/external/lit';
-import { USYNC_IMPORT_SINGLE_MODAL, } from '@jumoo/uSync';
+import { USYNC_IMPORT_SINGLE_MODAL, uSyncActionRepository, } from '@jumoo/uSync';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 let uSyncDetailsModalElement = class uSyncDetailsModalElement extends UmbModalBaseElement {
     constructor() {
         super();
         _uSyncDetailsModalElement_instances.add(this);
+        this._tab = 'changes';
+        this._loading = false;
+        this._index = -1;
+        /** the entity types there is a 'usync-item-preview' element for */
+        this._previewTypes = new Set();
+        _uSyncDetailsModalElement_repository.set(this, new uSyncActionRepository(this));
+        // kept between renders, so the extension slot doesn't rebuild the preview each time.
+        _uSyncDetailsModalElement_previewFilter.set(this, (_manifest) => false);
+        _uSyncDetailsModalElement_previewProps.set(this, {});
+        this.observe(umbExtensionsRegistry.byType('usync-item-preview'), (manifests) => {
+            this._previewTypes = new Set(manifests.flatMap((m) => m.forEntityTypes));
+        });
         // this.consumeContext(USYNC_CORE_CONTEXT_TOKEN, (_instance) => {
         // 	if (!_instance) return;
         // 	this.#actionContext = _instance;
         // });
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this._item = this.data?.item;
+        this._index = this.data?.items?.indexOf(this.data.item) ?? -1;
+        __classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_loadPreview).call(this);
+    }
     render() {
         return html `
-			<umb-body-layout headline="Changes : ${this.data?.item.name ?? ''}">
+			<umb-body-layout>
+				${this.renderHeadline()}
 				<div class="layout">
 					<uui-box style="--uui-box-default-padding: 0;">
 						<div slot="header" id="header">
@@ -33,10 +59,10 @@ let uSyncDetailsModalElement = class uSyncDetailsModalElement extends UmbModalBa
 						</div>
 						<div slot="header-actions">${this.renderActions()}</div>
 					</uui-box>
-					<uui-box style="--uui-box-default-padding: 0;">
-						<usync-change-view .item=${this.data?.item}></usync-change-view>
-					</uui-box>
+					${this.renderTabs()}
+					${this.renderTabContent()}
 				</div>
+				${this.renderNavigation()}
 				<div slot="actions">
 					<uui-button
 						id="cancel"
@@ -46,8 +72,87 @@ let uSyncDetailsModalElement = class uSyncDetailsModalElement extends UmbModalBa
 			</umb-body-layout>
 		`;
     }
+    renderHeadline() {
+        const item = this._item;
+        if (!item)
+            return nothing;
+        // singular names first (Content type), then the plural group
+        // names the results use (Content Types), then the raw type.
+        const itemType = this.localize.termOrDefault(`uSync_itemType${item.itemType}`, this.localize.termOrDefault(`uSync_${item.itemType}`, item.itemType));
+        return html `<div slot="header" id="headline">
+			<h3 title=${item.name}>Changes : ${item.name}</h3>
+			<span class="item-info">${itemType} · ${item.change}</span>
+		</div>`;
+    }
+    renderNavigation() {
+        const count = this.data?.items?.length ?? 0;
+        if (count < 2 || this._index < 0)
+            return nothing;
+        return html `<div slot="footer-info" id="navigation">
+			<uui-button
+				compact
+				look="secondary"
+				.label=${this.localize.term('general_previous')}
+				?disabled=${this._index === 0}
+				@click=${() => __classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_moveTo).call(this, this._index - 1)}>
+				<uui-icon name="icon-arrow-left"></uui-icon>
+			</uui-button>
+			<span>
+				${this.localize.termOrDefault('uSync_detailPosition', `${this._index + 1} of ${count}`, this.localize.number(this._index + 1), this.localize.number(count))}
+			</span>
+			<uui-button
+				compact
+				look="secondary"
+				.label=${this.localize.term('general_next')}
+				?disabled=${this._index === count - 1}
+				@click=${() => __classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_moveTo).call(this, this._index + 1)}>
+				<uui-icon name="icon-arrow-right"></uui-icon>
+			</uui-button>
+		</div>`;
+    }
+    renderTabs() {
+        if (!__classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_hasPreview).call(this))
+            return nothing;
+        return html `<uui-tab-group>
+			${this.renderTab('changes', 'uSync_changesTab', 'Changes', 'icon-eye')}
+			${this.renderTab('diff', 'uSync_diffTab', 'Diff', 'icon-code')}
+		</uui-tab-group>`;
+    }
+    renderTab(tab, key, fallback, icon) {
+        const label = this.localize.termOrDefault(key, fallback);
+        return html `<uui-tab
+			.label=${label}
+			?active=${this._tab === tab}
+			@click=${() => (this._tab = tab)}>
+			<!-- uui-tab stacks its icon slot above the label, so the icon
+			     goes in the label to keep them on one line. -->
+			<span class="tab-label"><umb-icon name=${icon}></umb-icon>${label}</span>
+		</uui-tab>`;
+    }
+    renderTabContent() {
+        // the visual changes view is the default, the raw diff is there
+        // for anything that doesn't have a preview (or if you ask for it).
+        if (this._tab === 'changes') {
+            if (this._loading)
+                return html `<uui-loader-bar></uui-loader-bar>`;
+            if (__classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_hasPreview).call(this))
+                return this.renderPreview();
+        }
+        return html `<uui-box style="--uui-box-default-padding: 0;">
+			<usync-change-view .item=${this._item}></usync-change-view>
+		</uui-box>`;
+    }
+    renderPreview() {
+        // packages can show previews for their own items by registering a
+        // 'usync-item-preview' element for the entity type their preview mapper returns.
+        return html `<umb-extension-slot
+			type="usync-item-preview"
+			single
+			.filter=${__classPrivateFieldGet(this, _uSyncDetailsModalElement_previewFilter, "f")}
+			.props=${__classPrivateFieldGet(this, _uSyncDetailsModalElement_previewProps, "f")}></umb-extension-slot>`;
+    }
     renderActions() {
-        if (!this.data?.showActions)
+        if (!__classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_showActions).call(this))
             return nothing;
         return html ` <uui-button
 			id="import"
@@ -58,16 +163,59 @@ let uSyncDetailsModalElement = class uSyncDetailsModalElement extends UmbModalBa
 			@click="${__classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_onImport)}"></uui-button>`;
     }
 };
+_uSyncDetailsModalElement_repository = new WeakMap();
+_uSyncDetailsModalElement_previewFilter = new WeakMap();
+_uSyncDetailsModalElement_previewProps = new WeakMap();
 _uSyncDetailsModalElement_instances = new WeakSet();
+_uSyncDetailsModalElement_moveTo = function _uSyncDetailsModalElement_moveTo(index) {
+    const item = this.data?.items?.[index];
+    if (!item)
+        return;
+    this._index = index;
+    this._item = item;
+    this._preview = undefined;
+    __classPrivateFieldGet(this, _uSyncDetailsModalElement_instances, "m", _uSyncDetailsModalElement_loadPreview).call(this);
+};
+_uSyncDetailsModalElement_loadPreview = async function _uSyncDetailsModalElement_loadPreview() {
+    const item = this._item;
+    if (!item?.handler || !item.key)
+        return;
+    // only some handlers support previews, the rest return a 404
+    // and the modal shows the diff on its own. we leave _tab alone
+    // so a user who picked the diff stays on it as they move through.
+    this._loading = true;
+    const { data } = await __classPrivateFieldGet(this, _uSyncDetailsModalElement_repository, "f").getPreview(item.handler, item.key);
+    // moving through the list quickly can return previews out of order,
+    // so drop anything that isn't for the item we are now showing.
+    if (item !== this._item)
+        return;
+    this._loading = false;
+    if (data?.entityType) {
+        const entityType = data.entityType;
+        __classPrivateFieldSet(this, _uSyncDetailsModalElement_previewFilter, (manifest) => manifest.forEntityTypes.includes(entityType), "f");
+        __classPrivateFieldSet(this, _uSyncDetailsModalElement_previewProps, { preview: data }, "f");
+        this._preview = data;
+    }
+};
+_uSyncDetailsModalElement_hasPreview = function _uSyncDetailsModalElement_hasPreview() {
+    return !!this._preview && this._previewTypes.has(this._preview.entityType);
+};
+_uSyncDetailsModalElement_showActions = function _uSyncDetailsModalElement_showActions() {
+    const showActions = this.data?.showActions;
+    if (typeof showActions === 'function') {
+        return this._item ? showActions(this._item) : false;
+    }
+    return showActions ?? false;
+};
 _uSyncDetailsModalElement_onImport = async function _uSyncDetailsModalElement_onImport(e) {
     e.stopPropagation();
-    if (!this.data?.item)
+    if (!this._item)
         return;
     const modalContext = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
     if (!modalContext)
         return;
     const modal = modalContext.open(this, USYNC_IMPORT_SINGLE_MODAL, {
-        data: { action: this.data?.item },
+        data: { action: this._item },
     });
     const data = await modal?.onSubmit().catch(() => {
         return;
@@ -87,10 +235,70 @@ uSyncDetailsModalElement.styles = css `
 		#header h3 {
 			margin: 0;
 		}
+
+		#headline {
+			display: flex;
+			flex-direction: column;
+			min-width: 0;
+		}
+
+		#headline h3 {
+			margin: 0;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		#headline .item-info {
+			font-size: var(--uui-type-small-size);
+			color: var(--uui-color-text-alt);
+		}
+
+		uui-tab-group {
+			background-color: var(--uui-color-surface);
+			border-radius: var(--uui-border-radius);
+			box-shadow: var(--uui-shadow-depth-1);
+			padding: 0 var(--uui-size-space-2);
+		}
+
+		.tab-label {
+			display: inline-flex;
+			align-items: center;
+			gap: var(--uui-size-space-2);
+		}
+
+		.tab-label umb-icon {
+			font-size: 16px;
+		}
+
+		#navigation {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-3);
+			padding-left: var(--uui-size-space-4);
+		}
 	`;
 __decorate([
     state()
 ], uSyncDetailsModalElement.prototype, "importState", void 0);
+__decorate([
+    state()
+], uSyncDetailsModalElement.prototype, "_preview", void 0);
+__decorate([
+    state()
+], uSyncDetailsModalElement.prototype, "_tab", void 0);
+__decorate([
+    state()
+], uSyncDetailsModalElement.prototype, "_loading", void 0);
+__decorate([
+    state()
+], uSyncDetailsModalElement.prototype, "_item", void 0);
+__decorate([
+    state()
+], uSyncDetailsModalElement.prototype, "_index", void 0);
+__decorate([
+    state()
+], uSyncDetailsModalElement.prototype, "_previewTypes", void 0);
 uSyncDetailsModalElement = __decorate([
     customElement('usync-details-modal')
 ], uSyncDetailsModalElement);

package/dist/dialogs/details-modal-token.d.ts

@@ -2,7 +2,16 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 import { USyncActionView } from '@jumoo/uSync';
 export interface uSyncDetailsModalData {
     item: USyncActionView;
-    showActions?: boolean;
+    /**
+     * show the import button, either for every item or decided per item
+     * (when moving through `items` the answer can change from item to item).
+     */
+    showActions?: boolean | ((item: USyncActionView) => boolean);
+    /**
+     * the full list the item came from, when set the dialog can move
+     * to the previous / next item in the list.
+     */
+    items?: Array<USyncActionView>;
 }
 export interface uSyncDetailsModalValue {
     result: boolean;

package/dist/exports.d.ts

@@ -8,3 +8,4 @@ export * from './constants.js';
 export * from './conditions/index.js';
 export * from './signalr/index.js';
 export * from './tree/index.js';
+export * from './preview/index.js';

package/dist/exports.js

@@ -8,3 +8,4 @@ export * from './constants.js';
 export * from './conditions/index.js';
 export * from './signalr/index.js';
 export * from './tree/index.js';
+export * from './preview/index.js';