@jumoo/usync 0.0.0-stage → 17.5.1

package/dist/components/usync-change-detail.js

@@ -0,0 +1,709 @@
+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 _uSyncChangeDetail_instances, _uSyncChangeDetail_toggleOpen, _uSyncChangeDetail_toggleRun, _uSyncChangeDetail_toggleLeaf, _uSyncChangeDetail_toggleRaw, _uSyncChangeDetail_copyPath, _uSyncChangeDetail_isExpandable, _uSyncChangeDetail_lineCounts, _uSyncChangeDetail_renderSummary, _uSyncChangeDetail_renderBody, _uSyncChangeDetail_renderJsonBody, _uSyncChangeDetail_renderLeaf, _uSyncChangeDetail_renderLeafValue, _uSyncChangeDetail_renderLinesBody, _uSyncChangeDetail_renderLineRow, _uSyncChangeDetail_renderCollapsed, _uSyncChangeDetail_renderWordsBody, _uSyncChangeDetail_renderSingleBody, _uSyncChangeDetail_renderMaskedBody, _uSyncChangeDetail_renderOversizedBody, _uSyncChangeDetail_renderNoticeBody;
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { classMap, css, customElement, html, nothing, property, state, styleMap, when, } from '@umbraco-cms/backoffice/external/lit';
+import '@umbraco-cms/backoffice/components';
+import { diffWords } from '@umbraco-cms/backoffice/utils';
+import { ChangeDetailType } from '../api';
+import { USYNC_DIFF_LIMITS, classifyChange, collapseUnchanged, diffJsonValues, diffTextLines, formatDiffPath, formatLeafValue, parseChangeName, prettyJson, } from '../utils/diff/index.js';
+/**
+ * Renders a single `USyncChange` detail as an expandable row, using the
+ * strategy chosen by `classifyChange` to pick a compact, readable diff
+ * rather than a wall of pretty-printed JSON.
+ */
+let uSyncChangeDetail = class uSyncChangeDetail extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _uSyncChangeDetail_instances.add(this);
+        this.open = false;
+        this._lineDegraded = false;
+        this._showRaw = false;
+        this._expandedRuns = new Set();
+        this._expandedLeaves = new Set();
+    }
+    // Diffing happens here, and only here - `render()` runs on every property
+    // change (including a plain expand/collapse click), so computing the
+    // diff there would re-diff on every toggle instead of once per detail.
+    willUpdate(changed) {
+        if (!changed.has('detail') || !this.detail)
+            return;
+        const detail = this.detail;
+        this._label = parseChangeName(detail.name);
+        this._classified = classifyChange(detail);
+        this._json =
+            this._classified.strategy === 'json'
+                ? diffJsonValues(this._classified.oldJson, this._classified.newJson)
+                : undefined;
+        if (this._classified.strategy === 'lines') {
+            const lineDiff = diffTextLines(this._classified.oldText, this._classified.newText);
+            this._lines = collapseUnchanged(lineDiff.rows);
+            this._lineDegraded = lineDiff.degraded;
+        }
+        else {
+            this._lines = undefined;
+            this._lineDegraded = false;
+        }
+        this._expandedRuns.clear();
+        this._expandedLeaves.clear();
+        this._showRaw = false;
+        if (detail.success === false) {
+            this.open = true;
+        }
+    }
+    render() {
+        if (!this.detail || !this._classified)
+            return nothing;
+        const detail = this.detail;
+        const classified = this._classified;
+        const failed = detail.success === false;
+        const expandable = __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_isExpandable).call(this, classified.strategy);
+        const isOpen = this.open;
+        return html `
+			<div class=${classMap({ 'change-row': true, danger: failed })}>
+				<div
+					class=${classMap({ summary: true, expanded: isOpen, static: !expandable })}
+					@click=${expandable ? __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_toggleOpen) : undefined}>
+					<div class="summary-left">
+						${when(failed, () => html `<umb-icon name="icon-alert" class="color-red"></umb-icon>`)}
+						${when(this._label?.prefix, () => html `<span class="prefix"
+									>${this.localize.term('uSync_changeProperty')}</span
+								>`)}
+						<span class="label" title=${detail.path}
+							>${this._label?.label || detail.name}</span
+						>
+						${when(this._label?.culture, () => html `<uui-tag size="s" look="secondary"
+									>${this._label.culture}</uui-tag
+								>`)}
+					</div>
+					<div class="summary-right">
+						<span class=${classMap({ danger: classified.strategy === 'notice' })}
+							>${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderSummary).call(this, classified)}</span
+						>
+						${when(expandable, () => html `<uui-icon
+									name="icon-play"
+									class=${classMap({ expanded: isOpen })}></uui-icon>`)}
+					</div>
+				</div>
+				${when(isOpen && expandable, () => html `
+						<div class="body">
+							${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderBody).call(this, classified)}
+							<div class="path-line">
+								<span class="muted"
+									>${this.localize.term('uSync_diffPath', detail.path)}</span
+								>
+								<div class="path-line-actions">
+									${when(classified.strategy === 'json', () => html `
+											<uui-button look="text" compact @click=${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_toggleRaw)}>
+												${this._showRaw
+            ? this.localize.term('uSync_diffHideRaw')
+            : this.localize.term('uSync_diffShowRaw')}
+											</uui-button>
+										`)}
+									<uui-button
+										look="text"
+										compact
+										label=${this.localize.term('uSync_diffCopyPath')}
+										@click=${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_copyPath)}>
+										<uui-icon name="icon-documents"></uui-icon>
+									</uui-button>
+								</div>
+							</div>
+						</div>
+					`)}
+			</div>
+		`;
+    }
+};
+_uSyncChangeDetail_instances = new WeakSet();
+_uSyncChangeDetail_toggleOpen = function _uSyncChangeDetail_toggleOpen() {
+    this.open = !this.open;
+};
+_uSyncChangeDetail_toggleRun = function _uSyncChangeDetail_toggleRun(index) {
+    if (this._expandedRuns.has(index)) {
+        this._expandedRuns.delete(index);
+    }
+    else {
+        this._expandedRuns.add(index);
+    }
+    this.requestUpdate();
+};
+_uSyncChangeDetail_toggleLeaf = function _uSyncChangeDetail_toggleLeaf(index) {
+    if (this._expandedLeaves.has(index)) {
+        this._expandedLeaves.delete(index);
+    }
+    else {
+        this._expandedLeaves.add(index);
+    }
+    this.requestUpdate();
+};
+_uSyncChangeDetail_toggleRaw = function _uSyncChangeDetail_toggleRaw() {
+    this._showRaw = !this._showRaw;
+};
+_uSyncChangeDetail_copyPath = function _uSyncChangeDetail_copyPath() {
+    if (!this.detail)
+        return;
+    navigator.clipboard?.writeText(this.detail.path)?.catch(() => undefined);
+};
+_uSyncChangeDetail_isExpandable = function _uSyncChangeDetail_isExpandable(strategy) {
+    return strategy !== 'scalar' && strategy !== 'skip';
+};
+_uSyncChangeDetail_lineCounts = function _uSyncChangeDetail_lineCounts() {
+    let added = 0;
+    let removed = 0;
+    for (const block of this._lines ?? []) {
+        if (block.type !== 'row')
+            continue;
+        if (block.row.type === 'add')
+            added++;
+        else if (block.row.type === 'remove')
+            removed++;
+    }
+    return { added, removed };
+};
+_uSyncChangeDetail_renderSummary = function _uSyncChangeDetail_renderSummary(c) {
+    switch (c.strategy) {
+        case 'scalar':
+            return html `<span class="inline-change"
+					><del>${c.oldText}</del> → <ins>${c.newText}</ins></span
+				>`;
+        case 'json': {
+            const diff = this._json;
+            if (!diff)
+                return nothing;
+            if (diff.truncated) {
+                return this.localize.term('uSync_diffChangeCapped', diff.changes.length, diff.totalCount);
+            }
+            if (diff.totalCount === 1)
+                return this.localize.term('uSync_diffOneChange');
+            return this.localize.term('uSync_diffChangeCount', diff.totalCount);
+        }
+        case 'lines': {
+            const { added, removed } = __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_lineCounts).call(this);
+            return this.localize.term('uSync_diffLineCount', added, removed);
+        }
+        case 'masked':
+            return this.localize.term('uSync_diffMaskedShort');
+        case 'single':
+            return c.oldText === ''
+                ? this.localize.term('uSync_diffValueAdded')
+                : this.localize.term('uSync_diffValueRemoved');
+        case 'oversized':
+            return this.localize.term('uSync_diffTooLargeShort');
+        case 'notice':
+            return c.oldText;
+        case 'words':
+            return this.localize.term('uSync_diffValueChanged');
+        case 'skip':
+        default:
+            return this.localize.term('uSync_noChange');
+    }
+};
+_uSyncChangeDetail_renderBody = function _uSyncChangeDetail_renderBody(c) {
+    switch (c.strategy) {
+        case 'json':
+            return __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderJsonBody).call(this, c);
+        case 'lines':
+            return __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderLinesBody).call(this);
+        case 'words':
+            return __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderWordsBody).call(this, c);
+        case 'single':
+            return __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderSingleBody).call(this, c);
+        case 'masked':
+            return __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderMaskedBody).call(this);
+        case 'oversized':
+            return __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderOversizedBody).call(this, c);
+        case 'notice':
+            return __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderNoticeBody).call(this, c);
+        default:
+            return nothing;
+    }
+};
+_uSyncChangeDetail_renderJsonBody = function _uSyncChangeDetail_renderJsonBody(c) {
+    const diff = this._json;
+    if (!diff)
+        return nothing;
+    return html `
+			<ul class="leaf-list">
+				${diff.changes.map((leaf, index) => __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderLeaf).call(this, leaf, index))}
+			</ul>
+			${when(diff.truncated, () => html `<p class="muted">
+						${this.localize.term(diff.stopped ? 'uSync_diffMoreChangesAtLeast' : 'uSync_diffMoreChanges', diff.totalCount - diff.changes.length)}
+					</p>`)}
+			${when(diff.reordered.length > 0, () => html `<p class="muted">
+						${this.localize.term('uSync_diffReordered')}: ${diff.reordered.join(', ')}
+					</p>`)}
+			${when(this._showRaw, () => html `
+					<div class="raw-values">
+						<div>
+							<div class="muted">${this.localize.term('uSync_diffOldValue')}</div>
+							<umb-code-block language="json" copy
+								>${prettyJson(c.oldJson)}</umb-code-block
+							>
+						</div>
+						<div>
+							<div class="muted">${this.localize.term('uSync_diffNewValue')}</div>
+							<umb-code-block language="json" copy
+								>${prettyJson(c.newJson)}</umb-code-block
+							>
+						</div>
+					</div>
+				`)}
+		`;
+};
+_uSyncChangeDetail_renderLeaf = function _uSyncChangeDetail_renderLeaf(leaf, index) {
+    const path = formatDiffPath(leaf.path);
+    const symbol = leaf.kind === 'added' ? '+' : leaf.kind === 'removed' ? '−' : '~';
+    return html `
+			<li class=${classMap({ leaf: true, [leaf.kind]: true })}>
+				<div class="leaf-path" title=${leaf.path}>
+					<span class="symbol">${symbol}</span>${path}
+					${when(leaf.expanded, () => html `<uui-tag
+								size="s"
+								look="secondary"
+								title=${this.localize.term('uSync_diffExpandedNote')}
+								>»</uui-tag
+							>`)}
+				</div>
+				<div class="leaf-value">${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderLeafValue).call(this, leaf, index)}</div>
+			</li>
+		`;
+};
+_uSyncChangeDetail_renderLeafValue = function _uSyncChangeDetail_renderLeafValue(leaf, index) {
+    if (leaf.kind === 'added') {
+        return html `<span class="added-value">${formatLeafValue(leaf.newValue)}</span>`;
+    }
+    if (leaf.kind === 'removed') {
+        return html `<span class="removed-value">${formatLeafValue(leaf.oldValue)}</span>`;
+    }
+    const oldText = formatLeafValue(leaf.oldValue);
+    const newText = formatLeafValue(leaf.newValue);
+    const bothSingleLine = !oldText.includes('\n') && !newText.includes('\n');
+    const combinedLen = oldText.length + newText.length;
+    if (bothSingleLine && combinedLen <= USYNC_DIFF_LIMITS.inlineScalarChars) {
+        return html `<span class="inline-change"
+				><del>${oldText}</del> → <ins>${newText}</ins></span
+			>`;
+    }
+    const bothStrings = typeof leaf.oldValue === 'string' && typeof leaf.newValue === 'string';
+    const hasWhitespace = /\s/.test(oldText) || /\s/.test(newText);
+    if (bothStrings &&
+        hasWhitespace &&
+        combinedLen <= USYNC_DIFF_LIMITS.maxScalarWordDiffBytes) {
+        const words = diffWords(oldText, newText);
+        return html `<span class="word-diff"
+				>${words.map((word) => word.added
+            ? html `<ins>${word.value}</ins>`
+            : word.removed
+                ? html `<del>${word.value}</del>`
+                : html `<span>${word.value}</span>`)}</span
+			>`;
+    }
+    const expanded = this._expandedLeaves.has(index);
+    return html `
+			<uui-button look="text" compact @click=${() => __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_toggleLeaf).call(this, index)}>
+				${expanded
+        ? this.localize.term('uSync_diffHideRaw')
+        : this.localize.term('uSync_diffShowRaw')}
+			</uui-button>
+			${when(expanded, () => html `
+					<pre class="stacked"><del>- ${oldText}</del>
+<ins>+ ${newText}</ins></pre>
+				`)}
+		`;
+};
+_uSyncChangeDetail_renderLinesBody = function _uSyncChangeDetail_renderLinesBody() {
+    const blocks = this._lines ?? [];
+    return html `
+			${when(this._lineDegraded, () => html `<p class="muted">${this.localize.term('uSync_diffDegraded')}</p>`)}
+			<uui-scroll-container class="line-diff">
+				${blocks.map((block, index) => block.type === 'row'
+        ? __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderLineRow).call(this, block.row)
+        : __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderCollapsed).call(this, block, index))}
+			</uui-scroll-container>
+		`;
+};
+_uSyncChangeDetail_renderLineRow = function _uSyncChangeDetail_renderLineRow(row) {
+    const tint = row.type === 'add'
+        ? 'color-mix(in srgb, var(--uui-color-positive) 12%, transparent)'
+        : row.type === 'remove'
+            ? 'color-mix(in srgb, var(--uui-color-danger) 12%, transparent)'
+            : undefined;
+    const marker = row.type === 'add' ? '+' : row.type === 'remove' ? '-' : ' ';
+    return html `
+			<div
+				class="line-row ${row.type}"
+				style=${styleMap({ background: tint ?? 'transparent' })}>
+				<span class="gutter">${row.oldLine ?? ''}</span>
+				<span class="gutter">${row.newLine ?? ''}</span>
+				<span class="marker">${marker}</span>
+				<span class="text">${row.text}</span>
+			</div>
+		`;
+};
+_uSyncChangeDetail_renderCollapsed = function _uSyncChangeDetail_renderCollapsed(block, index) {
+    const expanded = this._expandedRuns.has(index);
+    return html `
+			<div class="collapsed-toggle" @click=${() => __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_toggleRun).call(this, index)}>
+				<uui-icon name="icon-navigation"></uui-icon>
+				${expanded
+        ? this.localize.term('uSync_diffHideUnchanged')
+        : this.localize.term('uSync_diffShowUnchanged', block.count)}
+			</div>
+			${when(expanded, () => html `${block.rows.map((row) => __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderLineRow).call(this, row))}`)}
+		`;
+};
+_uSyncChangeDetail_renderWordsBody = function _uSyncChangeDetail_renderWordsBody(c) {
+    const changes = diffWords(c.oldText, c.newText);
+    return html `<pre class="word-diff">
+${changes.map((word) => word.added
+        ? html `<ins>${word.value}</ins>`
+        : word.removed
+            ? html `<del>${word.value}</del>`
+            : html `<span>${word.value}</span>`)}</pre
+		>`;
+};
+_uSyncChangeDetail_renderSingleBody = function _uSyncChangeDetail_renderSingleBody(c) {
+    const isAdded = c.oldText === '';
+    const value = isAdded ? c.newText : c.oldText;
+    const tint = isAdded
+        ? 'color-mix(in srgb, var(--uui-color-positive) 12%, transparent)'
+        : 'color-mix(in srgb, var(--uui-color-danger) 12%, transparent)';
+    return html `
+			<div class="muted">
+				${isAdded
+        ? this.localize.term('uSync_diffValueAdded')
+        : this.localize.term('uSync_diffValueRemoved')}
+			</div>
+			<div class="tinted" style=${styleMap({ background: tint })}>
+				<umb-code-block language=${c.language} copy>${value}</umb-code-block>
+			</div>
+		`;
+};
+_uSyncChangeDetail_renderMaskedBody = function _uSyncChangeDetail_renderMaskedBody() {
+    return html `<p class="muted">${this.localize.term('uSync_diffMasked')}</p>`;
+};
+_uSyncChangeDetail_renderOversizedBody = function _uSyncChangeDetail_renderOversizedBody(c) {
+    return html `
+			<p class="muted">${this.localize.term('uSync_diffTooLarge')}</p>
+			<div class="raw-values">
+				<div>
+					<div class="muted">${this.localize.term('uSync_diffOldValue')}</div>
+					<umb-code-block language=${c.language} copy>${c.oldText}</umb-code-block>
+				</div>
+				<div>
+					<div class="muted">${this.localize.term('uSync_diffNewValue')}</div>
+					<umb-code-block language=${c.language} copy>${c.newText}</umb-code-block>
+				</div>
+			</div>
+		`;
+};
+_uSyncChangeDetail_renderNoticeBody = function _uSyncChangeDetail_renderNoticeBody(c) {
+    const label = this.detail?.change === ChangeDetailType.ERROR
+        ? this.localize.term('uSync_changeError')
+        : this.localize.term('uSync_changeWarning');
+    return html `
+			<div class="notice-callout danger">
+				<strong>${label}</strong>
+				<p>${c.oldText}</p>
+			</div>
+		`;
+};
+uSyncChangeDetail.styles = css `
+		:host {
+			display: block;
+			border-bottom: 1px solid var(--uui-color-border);
+		}
+
+		.change-row.danger {
+			border-left: 3px solid var(--uui-color-danger);
+		}
+
+		.summary {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: var(--uui-size-space-4);
+			padding: var(--uui-size-space-3) var(--uui-size-space-5);
+			cursor: pointer;
+		}
+
+		.summary.static {
+			cursor: default;
+		}
+
+		.summary:hover:not(.static) {
+			background-color: var(--uui-color-surface-alt);
+		}
+
+		.summary-left {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-3);
+			min-width: 0;
+			overflow: hidden;
+		}
+
+		.summary-left .label {
+			font-weight: bold;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.prefix {
+			color: var(--uui-color-disabled-contrast);
+		}
+
+		.summary-right {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-4);
+			flex-shrink: 0;
+		}
+
+		.summary-right uui-icon {
+			transition: transform 90ms ease;
+		}
+
+		.summary-right uui-icon.expanded {
+			transform: rotate(90deg);
+		}
+
+		.danger {
+			color: var(--uui-color-danger);
+		}
+
+		.color-red {
+			color: var(--uui-color-danger);
+		}
+
+		.muted {
+			color: var(--uui-color-disabled-contrast);
+			font-size: smaller;
+		}
+
+		.body {
+			padding: 0 var(--uui-size-space-5) var(--uui-size-space-4);
+		}
+
+		.path-line {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: var(--uui-size-space-3);
+			margin-top: var(--uui-size-space-3);
+		}
+
+		.path-line > .muted {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.path-line-actions {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-1, 3px);
+			flex-shrink: 0;
+		}
+
+		.leaf-list {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-3);
+		}
+
+		.leaf {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-1, 3px);
+			padding: var(--uui-size-space-2) var(--uui-size-space-3);
+			border-radius: var(--uui-border-radius);
+			border: 1px solid var(--uui-color-border);
+			background: var(--uui-color-surface-alt);
+		}
+
+		.leaf.added {
+			background: color-mix(in srgb, var(--uui-color-positive) 8%, transparent);
+			border-color: color-mix(in srgb, var(--uui-color-positive) 30%, transparent);
+		}
+
+		.leaf.removed {
+			background: color-mix(in srgb, var(--uui-color-danger) 8%, transparent);
+			border-color: color-mix(in srgb, var(--uui-color-danger) 30%, transparent);
+		}
+
+		.leaf-path {
+			font-family: monospace;
+			font-size: smaller;
+			font-weight: 600;
+			color: var(--uui-color-text);
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.symbol {
+			display: inline-block;
+			width: 1em;
+			font-weight: bold;
+		}
+
+		.added-value {
+			color: var(--uui-color-positive);
+		}
+
+		.removed-value {
+			color: var(--uui-color-danger);
+		}
+
+		.inline-change del {
+			color: var(--uui-color-danger);
+			text-decoration: line-through;
+		}
+
+		.inline-change ins {
+			color: var(--uui-color-positive);
+			text-decoration: none;
+		}
+
+		.word-diff {
+			white-space: pre-wrap;
+		}
+
+		.word-diff ins {
+			color: var(--uui-color-positive);
+			text-decoration: none;
+		}
+
+		.word-diff del {
+			color: var(--uui-color-danger);
+			text-decoration: line-through;
+		}
+
+		.stacked {
+			margin: 0;
+			white-space: pre;
+		}
+
+		.stacked del {
+			display: block;
+			color: var(--uui-color-danger);
+			text-decoration: none;
+		}
+
+		.stacked ins {
+			display: block;
+			color: var(--uui-color-positive);
+			text-decoration: none;
+		}
+
+		.raw-values {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-4);
+			margin-top: var(--uui-size-space-3);
+		}
+
+		.tinted {
+			border-radius: var(--uui-border-radius);
+		}
+
+		uui-scroll-container.line-diff {
+			max-height: 400px;
+			display: block;
+			border: 1px solid var(--uui-color-border);
+			border-radius: var(--uui-border-radius);
+		}
+
+		.line-row {
+			display: flex;
+			gap: var(--uui-size-space-2);
+			font-family: monospace;
+			white-space: pre;
+			padding: 0 var(--uui-size-space-2);
+		}
+
+		.line-row .gutter {
+			display: inline-block;
+			width: 3em;
+			text-align: right;
+			color: var(--uui-color-disabled-contrast);
+			flex-shrink: 0;
+		}
+
+		.line-row .marker {
+			flex-shrink: 0;
+			width: 1em;
+		}
+
+		.line-row .text {
+			white-space: pre;
+		}
+
+		.collapsed-toggle {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-2);
+			padding: var(--uui-size-space-2);
+			color: var(--uui-color-disabled-contrast);
+			cursor: pointer;
+			font-size: smaller;
+		}
+
+		.collapsed-toggle:hover {
+			background-color: var(--uui-color-surface-alt);
+		}
+
+		.notice-callout {
+			padding: var(--uui-size-space-4);
+			border-radius: var(--uui-border-radius);
+			background: color-mix(in srgb, var(--uui-color-danger) 10%, transparent);
+		}
+
+		.notice-callout p {
+			margin: var(--uui-size-space-2) 0 0;
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], uSyncChangeDetail.prototype, "detail", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], uSyncChangeDetail.prototype, "open", void 0);
+__decorate([
+    state()
+], uSyncChangeDetail.prototype, "_classified", void 0);
+__decorate([
+    state()
+], uSyncChangeDetail.prototype, "_json", void 0);
+__decorate([
+    state()
+], uSyncChangeDetail.prototype, "_lines", void 0);
+__decorate([
+    state()
+], uSyncChangeDetail.prototype, "_lineDegraded", void 0);
+__decorate([
+    state()
+], uSyncChangeDetail.prototype, "_label", void 0);
+__decorate([
+    state()
+], uSyncChangeDetail.prototype, "_showRaw", void 0);
+uSyncChangeDetail = __decorate([
+    customElement('usync-change-detail')
+], uSyncChangeDetail);
+export { uSyncChangeDetail };
+export default uSyncChangeDetail;