@jumoo/usync 17.5.2 → 17.5.3-prerelease.16

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

@@ -0,0 +1,25 @@
+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 document, media or member
+ * type side by side, laid out the way the backoffice editor shows them, with
+ * every property rendered by its real property editor. Added, removed and
+ * changed tabs, groups and properties are highlighted.
+ */
+export declare class uSyncContentTypePreviewElement extends UmbLitElement {
+    #private;
+    preview?: SyncItemPreviewResponse;
+    /** the tab shown on both sides (by name, so it lines up when ids differ) */
+    private _activeTab?;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncContentTypePreviewElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usync-content-type-preview': uSyncContentTypePreviewElement;
+    }
+}

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

@@ -0,0 +1,530 @@
+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 _uSyncContentTypePreviewElement_instances, _uSyncContentTypePreviewElement_sides, _uSyncContentTypePreviewElement_compositions, _uSyncContentTypePreviewElement_dataTypes, _uSyncContentTypePreviewElement_newDataTypes, _uSyncContentTypePreviewElement_newCompositions, _uSyncContentTypePreviewElement_diff, _uSyncContentTypePreviewElement_renderSide, _uSyncContentTypePreviewElement_missingMessage, _uSyncContentTypePreviewElement_renderInfo, _uSyncContentTypePreviewElement_renderTabButton, _uSyncContentTypePreviewElement_tabStatus, _uSyncContentTypePreviewElement_renderTab, _uSyncContentTypePreviewElement_ownStatus, _uSyncContentTypePreviewElement_renderProperties, _uSyncContentTypePreviewElement_renderBadge;
+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, compositionIds, } from '../utils/preview/content-type-layout.js';
+import { diffContentTypes, } from '../utils/preview/content-type-diff.js';
+const KIND_LABELS = {
+    'document-type': ['uSync_previewDocumentType', 'Document type'],
+    'media-type': ['uSync_previewMediaType', 'Media type'],
+    'member-type': ['uSync_previewMemberType', 'Member type'],
+};
+/**
+ * Shows the current and incoming versions of a document, media or member
+ * type side by side, laid out the way the backoffice editor shows them, with
+ * every property rendered by its real property editor. Added, removed and
+ * changed tabs, groups and properties are highlighted.
+ */
+let uSyncContentTypePreviewElement = class uSyncContentTypePreviewElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _uSyncContentTypePreviewElement_instances.add(this);
+        _uSyncContentTypePreviewElement_sides.set(this, { compositions: [] });
+        _uSyncContentTypePreviewElement_compositions.set(this, new Map());
+        _uSyncContentTypePreviewElement_dataTypes.set(this, new Map());
+        _uSyncContentTypePreviewElement_newDataTypes.set(this, new Set());
+        _uSyncContentTypePreviewElement_newCompositions.set(this, new Set());
+        _uSyncContentTypePreviewElement_diff.set(this, void 0);
+    }
+    willUpdate(changed) {
+        if (!changed.has('preview') || !this.preview)
+            return;
+        const model = getPreviewModel(this.preview);
+        __classPrivateFieldSet(this, _uSyncContentTypePreviewElement_sides, {
+            current: model?.current ?? undefined,
+            incoming: model?.incoming ?? undefined,
+            compositions: model?.compositions ?? [],
+        }, "f");
+        __classPrivateFieldSet(this, _uSyncContentTypePreviewElement_compositions, new Map(__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_sides, "f").compositions.map((c) => [c.id, c])), "f");
+        __classPrivateFieldSet(this, _uSyncContentTypePreviewElement_dataTypes, new Map((model?.dataTypes ?? []).map((d) => [d.id, d])), "f");
+        __classPrivateFieldSet(this, _uSyncContentTypePreviewElement_newDataTypes, new Set(model?.newDataTypes), "f");
+        __classPrivateFieldSet(this, _uSyncContentTypePreviewElement_newCompositions, new Set(model?.newCompositions), "f");
+        __classPrivateFieldSet(this, _uSyncContentTypePreviewElement_diff, diffContentTypes(__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_sides, "f").current, __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_sides, "f").incoming), "f");
+        this._activeTab = undefined;
+    }
+    render() {
+        if (!this.preview)
+            return nothing;
+        return html `
+			<div class="sides">
+				${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderSide).call(this, 'current', __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_sides, "f").current)}
+				${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderSide).call(this, 'incoming', __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_sides, "f").incoming)}
+			</div>
+		`;
+    }
+};
+_uSyncContentTypePreviewElement_sides = new WeakMap();
+_uSyncContentTypePreviewElement_compositions = new WeakMap();
+_uSyncContentTypePreviewElement_dataTypes = new WeakMap();
+_uSyncContentTypePreviewElement_newDataTypes = new WeakMap();
+_uSyncContentTypePreviewElement_newCompositions = new WeakMap();
+_uSyncContentTypePreviewElement_diff = new WeakMap();
+_uSyncContentTypePreviewElement_instances = new WeakSet();
+_uSyncContentTypePreviewElement_renderSide = function _uSyncContentTypePreviewElement_renderSide(side, type) {
+    const headline = side === 'current'
+        ? this.localize.termOrDefault('uSync_previewCurrent', 'Current (this site)')
+        : this.localize.termOrDefault('uSync_previewIncoming', 'Incoming (uSync files)');
+    if (!type) {
+        return html `<div class="side">
+				<h4 class="side-headline">${headline}</h4>
+				<uui-box class="info"><p class="empty">${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_missingMessage).call(this, side)}</p></uui-box>
+			</div>`;
+    }
+    const tabs = buildContentTypeLayout(type, __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_compositions, "f"));
+    const active = tabs.find((t) => t.name === this._activeTab) ?? tabs[0];
+    return html `
+			<div class="side">
+				<h4 class="side-headline">${headline}</h4>
+				${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderInfo).call(this, type)}
+				${tabs.length > 1 || (tabs.length === 1 && tabs[0].name)
+        ? html `<uui-tab-group>
+								${tabs.map((tab) => __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderTabButton).call(this, tab, tab === active))}
+							</uui-tab-group>`
+        : html `<div></div>`}
+				${active
+        ? __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderTab).call(this, active)
+        : html `<uui-box>
+								<p class="empty">
+									${this.localize.termOrDefault('uSync_previewNoProperties', 'This type has no properties')}
+								</p>
+							</uui-box>`}
+			</div>
+		`;
+};
+_uSyncContentTypePreviewElement_missingMessage = function _uSyncContentTypePreviewElement_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');
+};
+_uSyncContentTypePreviewElement_renderInfo = function _uSyncContentTypePreviewElement_renderInfo(type) {
+    const changed = (field) => ({
+        changed: __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_diff, "f")?.fields.has(field) ?? false,
+    });
+    const [kindKey, kindDefault] = KIND_LABELS[this.preview?.entityType ?? ''] ?? [
+        '',
+        '',
+    ];
+    const compositions = compositionIds(type).map((id) => ({
+        name: __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_compositions, "f").get(id)?.name ?? id,
+        isNew: __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_newCompositions, "f").has(id),
+    }));
+    return html `
+			<uui-box class="info">
+				<div slot="headline" class="headline">
+					<umb-icon
+						name=${type.icon.split(' ')[0]}
+						class=${classMap(changed('icon'))}></umb-icon>
+					<span class=${classMap(changed('name'))}>${type.name}</span>
+					<code class=${classMap(changed('alias'))}>${type.alias}</code>
+				</div>
+				<div class="info-body">
+					<div class="tags">
+						<uui-tag look="secondary" class=${classMap(changed('isElement'))}>
+							${type.isElement
+        ? this.localize.termOrDefault('uSync_previewElementType', 'Element type')
+        : this.localize.termOrDefault(kindKey, kindDefault)}
+						</uui-tag>
+						${type.allowedAsRoot
+        ? html `<uui-tag
+										look="secondary"
+										class=${classMap(changed('allowedAsRoot'))}>
+										${this.localize.termOrDefault('uSync_previewAllowedAtRoot', 'Allowed at root')}
+									</uui-tag>`
+        : nothing}
+						${type.variesByCulture
+        ? html `<uui-tag
+										look="secondary"
+										class=${classMap(changed('variesByCulture'))}>
+										${this.localize.termOrDefault('uSync_previewVariesByCulture', 'Varies by culture')}
+									</uui-tag>`
+        : nothing}
+						${type.variesBySegment
+        ? html `<uui-tag
+										look="secondary"
+										class=${classMap(changed('variesBySegment'))}>
+										${this.localize.termOrDefault('uSync_previewVariesBySegment', 'Varies by segment')}
+									</uui-tag>`
+        : nothing}
+					</div>
+					${type.description
+        ? html `<p
+									class=${classMap({ description: true, ...changed('description') })}>
+									${type.description}
+								</p>`
+        : nothing}
+					${compositions.length
+        ? html `<dl class="meta">
+									<dt>
+										${this.localize.termOrDefault('uSync_previewCompositions', 'Compositions')}
+									</dt>
+									<dd class=${classMap(changed('compositions'))}>
+										${compositions.map((c) => html `<uui-tag
+													look="outline"
+													color=${c.isNew ? 'positive' : 'default'}
+													>${c.name}${c.isNew
+            ? ` (${this.localize.termOrDefault('uSync_previewNew', 'new')})`
+            : ''}</uui-tag
+												> `)}
+									</dd>
+								</dl>`
+        : nothing}
+				</div>
+			</uui-box>
+		`;
+};
+_uSyncContentTypePreviewElement_renderTabButton = function _uSyncContentTypePreviewElement_renderTabButton(tab, active) {
+    const status = __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_tabStatus).call(this, tab);
+    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}
+				${status ? html `<span class="dot ${status}" title=${status}></span>` : nothing}
+			</span>
+		</uui-tab>`;
+};
+_uSyncContentTypePreviewElement_tabStatus = function _uSyncContentTypePreviewElement_tabStatus(tab) {
+    const own = tab.ids.map((id) => __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_diff, "f")?.containers.get(id)).find(Boolean);
+    if (own)
+        return own.status;
+    const children = [
+        ...tab.groups.flatMap((g) => g.ids.map((id) => __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_diff, "f")?.containers.get(id))),
+        ...tab.properties.map((p) => __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_diff, "f")?.properties.get(p.property.id)),
+        ...tab.groups.flatMap((g) => g.properties.map((p) => __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_diff, "f")?.properties.get(p.property.id))),
+    ];
+    return children.some(Boolean) ? 'changed' : undefined;
+};
+_uSyncContentTypePreviewElement_renderTab = function _uSyncContentTypePreviewElement_renderTab(tab) {
+    // 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.
+    return html `
+			<umb-property-dataset .value=${[]} inert>
+				${tab.properties.length
+        ? html `<uui-box
+								>${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderProperties).call(this, tab.properties, __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_ownStatus).call(this, tab.ids))}</uui-box
+							>`
+        : nothing}
+				${repeat(tab.groups, (group) => group.name, (group) => {
+        const change = group.ids
+            .map((id) => __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_diff, "f")?.containers.get(id))
+            .find(Boolean);
+        return html `<uui-box class=${change?.status ?? ''}>
+							<div slot="headline" class="headline">
+								${group.name}
+								${group.inherited ? html `<small class="inherited">inherited</small>` : nothing}
+								${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderBadge).call(this, change)}
+							</div>
+							${group.properties.length
+            ? __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderProperties).call(this, group.properties, change?.status ?? __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_ownStatus).call(this, tab.ids))
+            : html `<p class="empty">
+											${this.localize.termOrDefault('uSync_previewNoProperties', 'No properties')}
+										</p>`}
+						</uui-box>`;
+    })}
+			</umb-property-dataset>
+		`;
+};
+_uSyncContentTypePreviewElement_ownStatus = function _uSyncContentTypePreviewElement_ownStatus(ids) {
+    return ids.map((id) => __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_diff, "f")?.containers.get(id)).find(Boolean)?.status;
+};
+_uSyncContentTypePreviewElement_renderProperties = function _uSyncContentTypePreviewElement_renderProperties(properties, parentStatus) {
+    const markItems = parentStatus !== 'added' && parentStatus !== 'removed';
+    return repeat(properties, (entry) => entry.property.id, ({ property: p, inheritedFrom }) => {
+        const change = markItems ? __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_diff, "f")?.properties.get(p.id) : undefined;
+        const dataType = __classPrivateFieldGet(this, _uSyncContentTypePreviewElement_dataTypes, "f").get(p.dataType.id);
+        return html `<div class="property ${change?.status ?? ''}">
+					<div class="property-meta">
+						<code>${p.alias}</code>
+						<span>${dataType?.name ?? p.dataType.id}</span>
+						${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_newDataTypes, "f").has(p.dataType.id)
+            ? html `<uui-tag size="s" look="outline" color="positive"
+										>${this.localize.termOrDefault('uSync_previewNewDataType', 'new data type')}</uui-tag
+									>`
+            : nothing}
+						${inheritedFrom ? html `<small class="inherited">from ${inheritedFrom}</small>` : nothing}
+						${p.variesByCulture ? html `<small>varies by culture</small>` : nothing}
+						${p.variesBySegment ? html `<small>varies by segment</small>` : nothing}
+						${__classPrivateFieldGet(this, _uSyncContentTypePreviewElement_instances, "m", _uSyncContentTypePreviewElement_renderBadge).call(this, change)}
+					</div>
+					${dataType
+            ? html `<umb-property
+									.alias=${p.alias}
+									.label=${p.name}
+									.description=${p.description ?? ''}
+									.propertyEditorUiAlias=${dataType.editorUiAlias}
+									.config=${dataType.values}
+									.appearance=${p.appearance}
+									.validation=${p.validation}></umb-property>`
+            : html `<p class="empty">
+									${p.name} -
+									${this.localize.termOrDefault('uSync_previewMissingDataType', 'the data type for this property is not in the site yet')}
+								</p>`}
+				</div>`;
+    });
+};
+_uSyncContentTypePreviewElement_renderBadge = function _uSyncContentTypePreviewElement_renderBadge(change) {
+    if (!change)
+        return nothing;
+    const color = change.status === 'added'
+        ? 'positive'
+        : change.status === 'removed'
+            ? 'danger'
+            : 'warning';
+    return html `<uui-tag size="s" color=${color} title=${change.fields.join(', ')}
+			>${change.status}</uui-tag
+		>`;
+};
+uSyncContentTypePreviewElement.styles = css `
+		:host {
+			display: block;
+			container-type: inline-size;
+		}
+
+		/* the two sides share rows (headline, info, tabs, content), so the
+		   tab bars and groups 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;
+		}
+
+		/* info boxes match heights across the sides (but a lone "not here" box doesn't stretch). */
+		.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 {
+				display: flex;
+				flex-direction: column;
+				align-items: stretch;
+				gap: var(--uui-size-space-4);
+				grid-row: auto;
+			}
+		}
+
+		umb-property-dataset {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-4);
+			min-width: 0;
+		}
+
+		.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;
+			flex-wrap: wrap;
+			gap: var(--uui-size-space-2) var(--uui-size-space-3);
+		}
+
+		.headline code {
+			font-size: var(--uui-type-small-size);
+			color: var(--uui-color-text-alt);
+		}
+
+		.info-body {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-4);
+		}
+
+		.tags {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--uui-size-space-2);
+		}
+
+		.description {
+			margin: 0;
+		}
+
+		.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;
+		}
+
+		.meta dt {
+			font-weight: 700;
+		}
+
+		.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(uui-box) {
+			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.added {
+			background: var(--uui-color-positive);
+		}
+
+		.dot.removed {
+			background: var(--uui-color-danger);
+		}
+
+		.dot.changed {
+			background: var(--uui-color-warning);
+		}
+
+		uui-box.added {
+			border-left: 3px solid var(--uui-color-positive);
+		}
+
+		uui-box.removed {
+			border-left: 3px solid var(--uui-color-danger);
+		}
+
+		uui-box.changed {
+			border-left: 3px solid 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: var(--uui-size-space-4) var(--uui-size-space-5) 0;
+			margin: 0 calc(-1 * var(--uui-size-space-5));
+		}
+
+		.property:first-child,
+		.headline + .property {
+			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);
+		}
+
+		.property-meta {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: var(--uui-size-space-2) var(--uui-size-space-3);
+			font-size: var(--uui-type-small-size);
+			color: var(--uui-color-text-alt);
+		}
+
+		.property-meta code {
+			color: var(--uui-color-text);
+		}
+
+		.inherited {
+			font-style: italic;
+			color: var(--uui-color-text-alt);
+		}
+
+		.empty {
+			margin: 0;
+			color: var(--uui-color-text-alt);
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], uSyncContentTypePreviewElement.prototype, "preview", void 0);
+__decorate([
+    state()
+], uSyncContentTypePreviewElement.prototype, "_activeTab", void 0);
+uSyncContentTypePreviewElement = __decorate([
+    customElement('usync-content-type-preview')
+], uSyncContentTypePreviewElement);
+export { uSyncContentTypePreviewElement };
+export default uSyncContentTypePreviewElement;

package/dist/components/usync-data-type-preview.d.ts

@@ -0,0 +1,21 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { 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 data type side by side,
+ * rendered with the real property editor, so you can see what an import
+ * will do before running it.
+ */
+export declare class uSyncDataTypePreviewElement extends UmbLitElement {
+    #private;
+    preview?: SyncItemPreviewResponse;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default uSyncDataTypePreviewElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usync-data-type-preview': uSyncDataTypePreviewElement;
+    }
+}