@mmlogic/components 0.5.1 → 0.5.2

package/dist/cjs/mrd-merge-view.cjs.entry.js

@@ -0,0 +1,273 @@
+'use strict';
+
+var index = require('./index-DzRfoAPz.js');
+var clientLayout = require('./client-layout-RZ3Ix-4a.js');
+var cellRenderer = require('./cell-renderer-CmaO0CZT.js');
+
+/**
+ * Whether a layout item can appear in the merge diff at all. m-n relations
+ * (`multiple: true`) are unioned automatically server-side (DataService.merge)
+ * and must never be surfaced as a user choice — only FIELD and single-value
+ * (n-1) RELATION items are diffable.
+ */
+function isDiffable(item) {
+    if (item.type === clientLayout.ClientLayoutItemType.FIELD)
+        return true;
+    if (item.type === clientLayout.ClientLayoutItemType.RELATION)
+        return !item.multiple;
+    return false;
+}
+/**
+ * Raw value for a field/relation off a record in the API's row shape (flat
+ * fields + `_links`). History-enabled fields come back as `{ current,
+ * history: [...] }` — this returns that whole object as-is, since a winning
+ * B value must carry its entire history into the patch (FINDING-0114: "the
+ * entire history list follows whichever value wins ... never interleaved").
+ */
+function getRawValue(item, record) {
+    var _a, _b, _c, _d, _e;
+    const name = (_a = item.name) !== null && _a !== void 0 ? _a : '';
+    if (item.type === clientLayout.ClientLayoutItemType.RELATION) {
+        return (_d = (_c = (_b = record === null || record === void 0 ? void 0 : record._links) === null || _b === void 0 ? void 0 : _b[name]) === null || _c === void 0 ? void 0 : _c.href) !== null && _d !== void 0 ? _d : null;
+    }
+    return (_e = record === null || record === void 0 ? void 0 : record[name]) !== null && _e !== void 0 ? _e : null;
+}
+/** Unwraps a history-enabled field's `{ current, history }` shape to its current value, for comparison only. */
+function comparableValue(item, value) {
+    if (item.historyEnabled && value != null && typeof value === 'object' && !Array.isArray(value) && 'current' in value) {
+        return value.current;
+    }
+    return value;
+}
+function normalize(value) {
+    return value === undefined || value === '' ? null : value;
+}
+function valuesEqual(a, b) {
+    const na = normalize(a);
+    const nb = normalize(b);
+    if (na === nb)
+        return true;
+    if (na === null || nb === null)
+        return false;
+    return JSON.stringify(na) === JSON.stringify(nb);
+}
+function isEmpty(value) {
+    return normalize(value) === null;
+}
+/**
+ * Splits diffable fields into `conflicts` (both records have a — different —
+ * value, user must pick) and `autoFilled` (A has no value, B does; silently
+ * taken from B without a UI choice).
+ */
+function diffFields(fields, recordA, recordB) {
+    const conflicts = [];
+    const autoFilled = [];
+    for (const item of fields.filter(isDiffable)) {
+        const aValue = getRawValue(item, recordA);
+        const bValue = getRawValue(item, recordB);
+        const aComparable = comparableValue(item, aValue);
+        const bComparable = comparableValue(item, bValue);
+        if (valuesEqual(aComparable, bComparable))
+            continue;
+        if (isEmpty(aComparable) && !isEmpty(bComparable)) {
+            autoFilled.push({ item, aValue, bValue });
+        }
+        else {
+            conflicts.push({ item, aValue, bValue });
+        }
+    }
+    return { conflicts, autoFilled };
+}
+/**
+ * Builds the patch payload per the merge endpoint contract: every `autoFilled`
+ * entry is always included (A had nothing to lose); a `conflicts` entry is
+ * only included when the user explicitly resolved it to B — anything left
+ * unresolved keeps A's value by omission.
+ */
+function buildPatch(diff, resolutions) {
+    var _a, _b, _c;
+    const patch = {};
+    for (const { item, bValue } of diff.autoFilled) {
+        patch[(_a = item.name) !== null && _a !== void 0 ? _a : ''] = bValue;
+    }
+    for (const { item, bValue } of diff.conflicts) {
+        if (resolutions[(_b = item.name) !== null && _b !== void 0 ? _b : ''] === 'B') {
+            patch[(_c = item.name) !== null && _c !== void 0 ? _c : ''] = bValue;
+        }
+    }
+    return patch;
+}
+/** Display label for a candidate record in the search results list. */
+function candidateLabel(record) {
+    var _a, _b, _c, _d, _e;
+    return (_e = (_b = (_a = record === null || record === void 0 ? void 0 : record.name) !== null && _a !== void 0 ? _a : record === null || record === void 0 ? void 0 : record.label) !== null && _b !== void 0 ? _b : (_d = (_c = record === null || record === void 0 ? void 0 : record._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : '';
+}
+
+/** History-enabled fields carry `{ current, history: [...] }` — this is the legal record itself (e.g. past company names), not an audit log. */
+function getHistory(item, record) {
+    var _a, _b;
+    if (!item.historyEnabled || !item.name)
+        return [];
+    return (_b = (_a = record === null || record === void 0 ? void 0 : record[item.name]) === null || _a === void 0 ? void 0 : _a.history) !== null && _b !== void 0 ? _b : [];
+}
+/** Small clock badge + popover listing past values for a history-enabled field — same UX as mrd-layout-section's field view. */
+const HistoryBadge = ({ locale, history, isOpen, onToggle }) => {
+    if (history.length === 0)
+        return null;
+    const sorted = [...history].sort((a, b) => b.until.localeCompare(a.until));
+    return (index.h("span", { class: "mrd-merge-view__history-wrap" }, index.h("button", { type: "button", class: "mrd-merge-view__history-btn", title: cellRenderer.t('history_badge_tooltip', locale), "aria-label": cellRenderer.t('history_badge_tooltip', locale), onClick: (e) => { e.stopPropagation(); onToggle(); } }, index.h("svg", { class: "mrd-merge-view__history-icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { "fill-rule": "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .207.085.394.22.53l2.5 2.5a.75.75 0 101.06-1.06L10.75 9.69V5z", "clip-rule": "evenodd" }))), isOpen && (index.h("div", { class: "mrd-merge-view__history-popover", role: "listbox" }, sorted.map((entry, i) => (index.h("div", { key: String(i), class: "mrd-merge-view__history-entry" }, entry.value, " (", cellRenderer.t('history_until', locale), " ", cellRenderer.formatDate(entry.until, locale), ")")))))));
+};
+const MergeSearchStep = ({ locale, searchQuery, searchResults, isLoading, onSearchInput, onSelect }) => (index.h("div", { class: "mrd-merge-view__search-step" }, index.h("p", { class: "mrd-merge-view__hint" }, cellRenderer.t('merge_search_hint', locale)), index.h("div", { class: "mrd-merge-view__search-wrapper" }, index.h("input", { class: "mrd-merge-view__search", type: "text", value: searchQuery, placeholder: cellRenderer.t('search_placeholder', locale), onInput: (e) => onSearchInput(e.target.value) }), isLoading && index.h("span", { class: "mrd-merge-view__spinner", "aria-label": cellRenderer.t('loading', locale) })), searchQuery.trim().length >= 2 && !isLoading && (index.h("div", { class: "mrd-merge-view__results" }, searchResults.length === 0 ? (index.h("div", { class: "mrd-merge-view__no-results" }, cellRenderer.t('no_results', locale))) : (searchResults.map(record => {
+    var _a, _b, _c;
+    return (index.h("div", { key: (_c = (_b = (_a = record === null || record === void 0 ? void 0 : record._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href) !== null && _c !== void 0 ? _c : candidateLabel(record), class: "mrd-merge-view__result-item" }, index.h("span", { class: "mrd-merge-view__result-label" }, candidateLabel(record)), index.h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--secondary", onClick: () => onSelect(record) }, cellRenderer.t('merge_select', locale))));
+}))))));
+const MergeCompareStep = ({ locale, currentLabel, candidateLabel: bLabel, conflicts, autoFilled, recordA, recordB, resolutions, openHistoryKey, onResolve, onToggleHistory, onChangeCandidate, onContinue }) => (index.h("div", { class: "mrd-merge-view__compare-step" }, index.h("h3", { class: "mrd-merge-view__heading" }, cellRenderer.t('merge_compare_heading', locale)), conflicts.length === 0 ? (index.h("p", { class: "mrd-merge-view__no-conflicts" }, cellRenderer.t('merge_no_conflicts', locale))) : (index.h("table", { class: "mrd-merge-view__table" }, index.h("thead", null, index.h("tr", null, index.h("th", { class: "mrd-merge-view__header" }), index.h("th", { class: "mrd-merge-view__header" }, cellRenderer.t('merge_column_a', locale), index.h("span", { class: "mrd-merge-view__header-name" }, currentLabel)), index.h("th", { class: "mrd-merge-view__header" }, cellRenderer.t('merge_column_b', locale), index.h("span", { class: "mrd-merge-view__header-name" }, bLabel)))), index.h("tbody", null, conflicts.map(({ item }) => {
+    var _a, _b, _c;
+    const name = (_a = item.name) !== null && _a !== void 0 ? _a : '';
+    const resolution = (_b = resolutions[name]) !== null && _b !== void 0 ? _b : 'A';
+    const historyA = getHistory(item, recordA);
+    const historyB = getHistory(item, recordB);
+    const keyA = `${name}:A`;
+    const keyB = `${name}:B`;
+    return (index.h("tr", { key: name, class: "mrd-merge-view__row" }, index.h("td", { class: "mrd-merge-view__cell mrd-merge-view__cell--label" }, (_c = item.label) !== null && _c !== void 0 ? _c : name), index.h("td", { class: "mrd-merge-view__cell" }, index.h("label", { class: "mrd-merge-view__option" }, index.h("input", { type: "radio", name: `merge-${name}`, checked: resolution === 'A', onChange: () => onResolve(name, 'A') }), index.h("span", null, cellRenderer.CellRenderer.render(item, recordA, locale) || '—')), index.h(HistoryBadge, { locale: locale, history: historyA, isOpen: openHistoryKey === keyA, onToggle: () => onToggleHistory(openHistoryKey === keyA ? null : keyA) })), index.h("td", { class: "mrd-merge-view__cell" }, index.h("label", { class: "mrd-merge-view__option" }, index.h("input", { type: "radio", name: `merge-${name}`, checked: resolution === 'B', onChange: () => onResolve(name, 'B') }), index.h("span", null, cellRenderer.CellRenderer.render(item, recordB, locale) || '—')), index.h(HistoryBadge, { locale: locale, history: historyB, isOpen: openHistoryKey === keyB, onToggle: () => onToggleHistory(openHistoryKey === keyB ? null : keyB) }))));
+})))), autoFilled.length > 0 && (index.h("div", { class: "mrd-merge-view__auto-note" }, index.h("p", null, cellRenderer.t('merge_auto_heading', locale)), index.h("ul", null, autoFilled.map(({ item }) => { var _a; return index.h("li", { key: item.name }, (_a = item.label) !== null && _a !== void 0 ? _a : item.name); })))), index.h("div", { class: "mrd-merge-view__actions" }, index.h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--secondary", onClick: onChangeCandidate }, cellRenderer.t('merge_back', locale)), index.h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--primary", onClick: onContinue }, cellRenderer.t('merge_continue', locale)))));
+const MergeConfirmStep = ({ locale, candidateLabel: bLabel, conflicts, autoFilled, resolutions, recordB, openHistoryKey, onToggleHistory, onBack, onConfirm }) => {
+    const changed = [
+        ...autoFilled,
+        ...conflicts.filter(({ item }) => { var _a; return resolutions[(_a = item.name) !== null && _a !== void 0 ? _a : ''] === 'B'; }),
+    ];
+    return (index.h("div", { class: "mrd-merge-view__confirm-step" }, index.h("h3", { class: "mrd-merge-view__heading" }, cellRenderer.t('merge_confirm_heading', locale)), changed.length === 0 ? (index.h("p", { class: "mrd-merge-view__no-conflicts" }, cellRenderer.t('merge_no_conflicts', locale))) : (index.h("ul", { class: "mrd-merge-view__summary-list" }, changed.map(({ item }) => {
+        var _a;
+        const key = `${item.name}:confirm`;
+        return (index.h("li", { key: item.name }, (_a = item.label) !== null && _a !== void 0 ? _a : item.name, ": ", cellRenderer.CellRenderer.render(item, recordB, locale) || '—', index.h(HistoryBadge, { locale: locale, history: getHistory(item, recordB), isOpen: openHistoryKey === key, onToggle: () => onToggleHistory(openHistoryKey === key ? null : key) })));
+    }))), index.h("p", { class: "mrd-merge-view__warning" }, cellRenderer.t('merge_confirm_warning', locale), " (", bLabel, ")"), index.h("div", { class: "mrd-merge-view__actions" }, index.h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--secondary", onClick: onBack }, cellRenderer.t('merge_back', locale)), index.h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--danger", onClick: onConfirm }, cellRenderer.t('merge_confirm_button', locale)))));
+};
+
+const mrdMergeViewCss = () => `.sc-mrd-merge-view-h{display:block;width:100%}.mrd-merge-view.sc-mrd-merge-view{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-900)}.mrd-merge-view__hint.sc-mrd-merge-view{margin:0 0 var(--mrd-space-4);color:var(--mrd-color-neutral-600)}.mrd-merge-view__heading.sc-mrd-merge-view{margin:0 0 var(--mrd-space-4);font-size:var(--mrd-font-size-lg);font-weight:var(--mrd-font-weight-semibold)}.mrd-merge-view__search-wrapper.sc-mrd-merge-view{position:relative;display:flex;align-items:center}.mrd-merge-view__search.sc-mrd-merge-view{width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);background:var(--mrd-input-bg);color:var(--mrd-input-color);font-size:var(--mrd-font-size-sm)}.mrd-merge-view__search.sc-mrd-merge-view:focus{outline:none;border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-merge-view__spinner.sc-mrd-merge-view{position:absolute;right:var(--mrd-space-3);width:1rem;height:1rem;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:var(--mrd-border-radius-full);animation:mrd-merge-view-spin var(--mrd-transition-slow) linear infinite}.mrd-merge-view__results.sc-mrd-merge-view{margin-top:var(--mrd-space-2);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);overflow:hidden}.mrd-merge-view__no-results.sc-mrd-merge-view{padding:var(--mrd-space-3) var(--mrd-space-4);color:var(--mrd-color-neutral-500)}.mrd-merge-view__result-item.sc-mrd-merge-view{display:flex;align-items:center;justify-content:space-between;gap:var(--mrd-space-3);padding:var(--mrd-space-2) var(--mrd-space-4)}.mrd-merge-view__result-item.sc-mrd-merge-view:not(:last-child){border-bottom:var(--mrd-border-width) solid var(--mrd-border-color)}.mrd-merge-view__result-label.sc-mrd-merge-view{font-weight:var(--mrd-font-weight-medium)}.mrd-merge-view__no-conflicts.sc-mrd-merge-view{color:var(--mrd-color-neutral-600)}.mrd-merge-view__table.sc-mrd-merge-view{width:100%;border-collapse:collapse;margin-bottom:var(--mrd-space-4)}.mrd-merge-view__header.sc-mrd-merge-view{text-align:left;padding:var(--mrd-space-2) var(--mrd-space-3);border-bottom:2px solid var(--mrd-border-color);font-size:var(--mrd-font-size-xs);text-transform:uppercase;letter-spacing:0.04em;color:var(--mrd-color-neutral-600)}.mrd-merge-view__header-name.sc-mrd-merge-view{display:block;text-transform:none;letter-spacing:normal;font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-900);margin-top:var(--mrd-space-1)}.mrd-merge-view__row.sc-mrd-merge-view:nth-child(even){background:var(--mrd-color-neutral-50)}.mrd-merge-view__cell.sc-mrd-merge-view{padding:var(--mrd-space-2) var(--mrd-space-3);border-bottom:var(--mrd-border-width) solid var(--mrd-border-color);vertical-align:top}.mrd-merge-view__cell--label.sc-mrd-merge-view{font-weight:var(--mrd-font-weight-medium);white-space:nowrap}.mrd-merge-view__option.sc-mrd-merge-view{display:flex;align-items:flex-start;gap:var(--mrd-space-2);cursor:pointer}.mrd-merge-view__option.sc-mrd-merge-view input[type=radio].sc-mrd-merge-view{margin-top:0.2em}.mrd-merge-view__history-wrap.sc-mrd-merge-view{position:relative;display:inline-flex;align-items:center;margin-left:var(--mrd-space-1)}.mrd-merge-view__history-btn.sc-mrd-merge-view{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:transparent;border:none;border-radius:var(--mrd-border-radius-sm);color:var(--mrd-color-neutral-400);cursor:pointer;flex-shrink:0;transition:color var(--mrd-transition-fast), background-color var(--mrd-transition-fast)}.mrd-merge-view__history-btn.sc-mrd-merge-view:hover{color:var(--mrd-color-neutral-700);background-color:var(--mrd-color-neutral-100)}.mrd-merge-view__history-btn.sc-mrd-merge-view:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-merge-view__history-icon.sc-mrd-merge-view{width:0.875rem;height:0.875rem}.mrd-merge-view__history-popover.sc-mrd-merge-view{position:absolute;top:calc(100% + 0.25rem);left:0;min-width:18rem;max-width:18rem;background-color:var(--mrd-color-white);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);box-shadow:var(--mrd-shadow-md);padding:var(--mrd-space-1) 0;z-index:var(--mrd-z-dropdown)}.mrd-merge-view__history-entry.sc-mrd-merge-view{font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-700);padding:var(--mrd-space-2) var(--mrd-space-3);line-height:var(--mrd-line-height-normal)}.mrd-merge-view__history-entry.sc-mrd-merge-view:not(:last-child){border-bottom:var(--mrd-border-width) solid var(--mrd-color-neutral-100)}.mrd-merge-view__auto-note.sc-mrd-merge-view{margin-bottom:var(--mrd-space-4);padding:var(--mrd-space-3) var(--mrd-space-4);background:var(--mrd-color-neutral-50);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);color:var(--mrd-color-neutral-700)}.mrd-merge-view__auto-note.sc-mrd-merge-view p.sc-mrd-merge-view{margin:0 0 var(--mrd-space-1);font-weight:var(--mrd-font-weight-medium)}.mrd-merge-view__auto-note.sc-mrd-merge-view ul.sc-mrd-merge-view{margin:0;padding-left:var(--mrd-space-5)}.mrd-merge-view__summary-list.sc-mrd-merge-view{margin:0 0 var(--mrd-space-4);padding-left:var(--mrd-space-5)}.mrd-merge-view__warning.sc-mrd-merge-view{padding:var(--mrd-space-3) var(--mrd-space-4);background:var(--mrd-color-danger-light);border:var(--mrd-border-width) solid var(--mrd-color-danger);border-radius:var(--mrd-border-radius);color:var(--mrd-color-danger-dark);margin-bottom:var(--mrd-space-4)}.mrd-merge-view__actions.sc-mrd-merge-view{display:flex;gap:var(--mrd-space-3)}.mrd-merge-view__btn.sc-mrd-merge-view{height:var(--mrd-input-height-sm);padding:0 var(--mrd-space-4);border-radius:var(--mrd-border-radius);border:var(--mrd-border-width) solid transparent;font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);cursor:pointer;transition:background-color var(--mrd-transition-fast), border-color var(--mrd-transition-fast)}.mrd-merge-view__btn--primary.sc-mrd-merge-view{background:var(--mrd-color-primary);color:var(--mrd-color-white)}.mrd-merge-view__btn--primary.sc-mrd-merge-view:hover{background:var(--mrd-color-primary-hover)}.mrd-merge-view__btn--secondary.sc-mrd-merge-view{background:var(--mrd-color-white);border-color:var(--mrd-border-color);color:var(--mrd-color-neutral-700)}.mrd-merge-view__btn--secondary.sc-mrd-merge-view:hover{background:var(--mrd-color-neutral-50)}.mrd-merge-view__btn--danger.sc-mrd-merge-view{background:var(--mrd-color-danger);color:var(--mrd-color-white)}.mrd-merge-view__btn--danger.sc-mrd-merge-view:hover{background:var(--mrd-color-danger-dark)}@keyframes mrd-merge-view-spin{to{transform:rotate(360deg)}}`;
+
+const MrdMergeView = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mrdSearch = index.createEvent(this, "mrdSearch");
+        this.mrdMerge = index.createEvent(this, "mrdMerge");
+        this.locale = navigator.language;
+        /** Dot-notation class, passed through on mrdSearch (host may use it to pick the right search endpoint). */
+        this.basicType = '';
+        /** URL segment for the search endpoint; falls back to basicType when absent. */
+        this.mostSignificantClass = '';
+        /** Flat FIELD/RELATION items describing the basic type's schema (host flattens SECTION/GROUP, same as mrd-table's `columns`). */
+        this.fields = [];
+        /** Href of A (winner) — the object the merge screen was opened from. */
+        this.currentHref = '';
+        /** A's full raw record: flat fields + `_links`, the same row shape CellRenderer.render expects. */
+        this.currentRecord = {};
+        /** Display name for A, shown in the compare step's column header. */
+        this.currentLabel = '';
+        this.step = 'search';
+        this.searchQuery = '';
+        this.searchResults = [];
+        this.isLoading = false;
+        this.candidate = null;
+        this.resolutions = {};
+        /** Which history badge popover is open, keyed e.g. `legalName:A` / `legalName:confirm`. */
+        this.openHistoryKey = null;
+        this.historyClickOutside = null;
+        this.searchDebounce = null;
+        this.handleSearchInput = (query) => {
+            this.searchQuery = query;
+            if (this.searchDebounce)
+                clearTimeout(this.searchDebounce);
+            if (query.trim().length >= 2) {
+                this.isLoading = true;
+                this.searchDebounce = setTimeout(() => {
+                    this.mrdSearch.emit({
+                        query,
+                        basicType: this.basicType,
+                        mostSignificantClass: this.mostSignificantClass || undefined,
+                    });
+                }, 300);
+            }
+            else {
+                this.searchResults = [];
+                this.isLoading = false;
+            }
+        };
+        this.handleSelect = (record) => {
+            this.candidate = record;
+            const { conflicts } = diffFields(this.fields, this.currentRecord, record);
+            const resolutions = {};
+            conflicts.forEach(({ item }) => { var _a; resolutions[(_a = item.name) !== null && _a !== void 0 ? _a : ''] = 'A'; });
+            this.resolutions = resolutions;
+            this.openHistoryKey = null;
+            this.step = 'compare';
+        };
+        this.handleChangeCandidate = () => {
+            this.candidate = null;
+            this.resolutions = {};
+            this.openHistoryKey = null;
+            this.step = 'search';
+        };
+        this.handleResolve = (name, side) => {
+            this.resolutions = Object.assign(Object.assign({}, this.resolutions), { [name]: side });
+        };
+        this.handleToggleHistory = (key) => {
+            this.openHistoryKey = key;
+        };
+        this.handleContinue = () => {
+            this.step = 'confirm';
+        };
+        this.handleBack = () => {
+            this.step = 'compare';
+        };
+        this.handleConfirm = () => {
+            var _a, _b, _c, _d;
+            if (!this.candidate)
+                return;
+            const diff = diffFields(this.fields, this.currentRecord, this.candidate);
+            const patch = buildPatch(diff, this.resolutions);
+            const loserHref = (_d = (_c = (_b = (_a = this.candidate) === null || _a === void 0 ? void 0 : _a._links) === null || _b === void 0 ? void 0 : _b.self) === null || _c === void 0 ? void 0 : _c.href) !== null && _d !== void 0 ? _d : '';
+            this.mrdMerge.emit({ winnerHref: this.currentHref, loserHref, patch });
+        };
+    }
+    connectedCallback() {
+        this.historyClickOutside = (e) => {
+            if (!this.el.contains(e.target))
+                this.openHistoryKey = null;
+        };
+        document.addEventListener('mousedown', this.historyClickOutside);
+    }
+    disconnectedCallback() {
+        if (this.historyClickOutside) {
+            document.removeEventListener('mousedown', this.historyClickOutside);
+            this.historyClickOutside = null;
+        }
+    }
+    /**
+     * Stores search results, filtering out A itself regardless of what the
+     * host's search returns — A must never appear as a mergeable candidate.
+     */
+    async setSearchResults(records) {
+        this.searchResults = (records !== null && records !== void 0 ? records : []).filter(r => { var _a, _b, _c; return ((_c = (_b = (_a = r === null || r === void 0 ? void 0 : r._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href) !== null && _c !== void 0 ? _c : null) !== this.currentHref; });
+        this.isLoading = false;
+    }
+    async setLoading(loading) {
+        this.isLoading = loading;
+    }
+    render() {
+        var _a, _b;
+        let stepContent;
+        if (this.step === 'search') {
+            stepContent = (index.h(MergeSearchStep, { key: '4b79504f62f85274c9cd9681b6819c2318f4246a', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
+        }
+        else {
+            const diff = diffFields(this.fields, this.currentRecord, this.candidate);
+            const bLabel = candidateLabel(this.candidate);
+            stepContent = this.step === 'compare' ? (index.h(MergeCompareStep, { locale: this.locale, currentLabel: this.currentLabel, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, recordA: this.currentRecord, recordB: (_a = this.candidate) !== null && _a !== void 0 ? _a : {}, resolutions: this.resolutions, openHistoryKey: this.openHistoryKey, onResolve: this.handleResolve, onToggleHistory: this.handleToggleHistory, onChangeCandidate: this.handleChangeCandidate, onContinue: this.handleContinue })) : (index.h(MergeConfirmStep, { locale: this.locale, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, resolutions: this.resolutions, recordB: (_b = this.candidate) !== null && _b !== void 0 ? _b : {}, openHistoryKey: this.openHistoryKey, onToggleHistory: this.handleToggleHistory, onBack: this.handleBack, onConfirm: this.handleConfirm }));
+        }
+        return (index.h(index.Host, { key: 'f3fc046fa728646e2ff686d2eae30024da3121e1' }, index.h("div", { key: '55bef786973d22dce49be021cfb78588b119139c', class: "mrd-merge-view" }, stepContent)));
+    }
+    get el() { return index.getElement(this); }
+};
+MrdMergeView.style = mrdMergeViewCss();
+
+exports.mrd_merge_view = MrdMergeView;

package/dist/collection/collection-manifest.json

@@ -22,6 +22,7 @@
     "components/form/mrd-field/mrd-field.js",
     "components/form/mrd-form/mrd-form.js",
     "components/layout/mrd-layout-section/mrd-layout-section.js",
+    "components/merge/mrd-merge-view/mrd-merge-view.js",
     "components/table/mrd-table/mrd-table.js"
   ],
   "mixins": [],

package/dist/collection/components/fields/mrd-textarea-field/mrd-textarea-field.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import DOMPurify from "dompurify";
 import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdTextareaField {
     constructor() {
@@ -40,14 +41,12 @@ export class MrdTextareaField {
                 quill.clipboard.dangerouslyPasteHTML(this.value);
             }
             quill.on('text-change', () => {
-                var _a, _b;
-                const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
+                const html = this.getSanitizedHtml();
                 this.mrdChange.emit({ name: this.name, value: html });
             });
             quill.on('selection-change', (range) => {
-                var _a, _b;
                 if (!range) {
-                    const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
+                    const html = this.getSanitizedHtml();
                     this.error = requiredError(html, this.required, this.locale);
                     this.mrdBlur.emit({ name: this.name, value: html });
                 }
@@ -59,8 +58,13 @@ export class MrdTextareaField {
             console.error('Failed to load Quill editor:', err);
         }
     }
+    getSanitizedHtml() {
+        var _a, _b;
+        const html = (_b = (_a = this.editorEl.querySelector('.ql-editor')) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : '';
+        return DOMPurify.sanitize(html);
+    }
     render() {
-        return (h(Host, { key: 'de39890fc23146b880e69be7a8f04c91786ae9c9' }, h("div", { key: '0ccc855f3ee44553559a9ea8a70690466789f76d', class: "mrd-textarea-field" }, h(FieldLabel, { key: '2a16dcbeedbba8b5d8d1e8e8c0f021f14813f609', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: '979ecb0ed163e3f753d75635452eea49d76edf29', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: '8ea96a080086b68df55017a1464f6bce502f9a58', class: "mrd-textarea-field__editor" })), h(FieldError, { key: 'd6ac1a12f7be3594ed8cdb6d94b304c46dc8285b', base: "mrd-textarea-field", error: this.error }))));
+        return (h(Host, { key: '708c1f8f14d2de4b5a274155d190fc19a304d7f0' }, h("div", { key: 'cf5c7a571e74cad08e0e320e91db4e22a3b2e080', class: "mrd-textarea-field" }, h(FieldLabel, { key: '4ced05f3914440f89dc5605901fc311e8ad54360', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: '81147829bc575d05f3521bf3704edfdfe0d9b2cf', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: 'a9f42d86cab460d5e0cf6de87e0c0a0a1ca7d77a', class: "mrd-textarea-field__editor" })), h(FieldError, { key: '9f4b5271d0901e474ef6c0f1170b3ef718a844a9', base: "mrd-textarea-field", error: this.error }))));
     }
     static get is() { return "mrd-textarea-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/merge/mrd-merge-view/merge-diff.js

@@ -0,0 +1,99 @@
+import { ClientLayoutItemType } from "../../../types/client-layout";
+/**
+ * Whether a layout item can appear in the merge diff at all. m-n relations
+ * (`multiple: true`) are unioned automatically server-side (DataService.merge)
+ * and must never be surfaced as a user choice — only FIELD and single-value
+ * (n-1) RELATION items are diffable.
+ */
+export function isDiffable(item) {
+    if (item.type === ClientLayoutItemType.FIELD)
+        return true;
+    if (item.type === ClientLayoutItemType.RELATION)
+        return !item.multiple;
+    return false;
+}
+/**
+ * Raw value for a field/relation off a record in the API's row shape (flat
+ * fields + `_links`). History-enabled fields come back as `{ current,
+ * history: [...] }` — this returns that whole object as-is, since a winning
+ * B value must carry its entire history into the patch (FINDING-0114: "the
+ * entire history list follows whichever value wins ... never interleaved").
+ */
+export function getRawValue(item, record) {
+    var _a, _b, _c, _d, _e;
+    const name = (_a = item.name) !== null && _a !== void 0 ? _a : '';
+    if (item.type === ClientLayoutItemType.RELATION) {
+        return (_d = (_c = (_b = record === null || record === void 0 ? void 0 : record._links) === null || _b === void 0 ? void 0 : _b[name]) === null || _c === void 0 ? void 0 : _c.href) !== null && _d !== void 0 ? _d : null;
+    }
+    return (_e = record === null || record === void 0 ? void 0 : record[name]) !== null && _e !== void 0 ? _e : null;
+}
+/** Unwraps a history-enabled field's `{ current, history }` shape to its current value, for comparison only. */
+function comparableValue(item, value) {
+    if (item.historyEnabled && value != null && typeof value === 'object' && !Array.isArray(value) && 'current' in value) {
+        return value.current;
+    }
+    return value;
+}
+function normalize(value) {
+    return value === undefined || value === '' ? null : value;
+}
+function valuesEqual(a, b) {
+    const na = normalize(a);
+    const nb = normalize(b);
+    if (na === nb)
+        return true;
+    if (na === null || nb === null)
+        return false;
+    return JSON.stringify(na) === JSON.stringify(nb);
+}
+function isEmpty(value) {
+    return normalize(value) === null;
+}
+/**
+ * Splits diffable fields into `conflicts` (both records have a — different —
+ * value, user must pick) and `autoFilled` (A has no value, B does; silently
+ * taken from B without a UI choice).
+ */
+export function diffFields(fields, recordA, recordB) {
+    const conflicts = [];
+    const autoFilled = [];
+    for (const item of fields.filter(isDiffable)) {
+        const aValue = getRawValue(item, recordA);
+        const bValue = getRawValue(item, recordB);
+        const aComparable = comparableValue(item, aValue);
+        const bComparable = comparableValue(item, bValue);
+        if (valuesEqual(aComparable, bComparable))
+            continue;
+        if (isEmpty(aComparable) && !isEmpty(bComparable)) {
+            autoFilled.push({ item, aValue, bValue });
+        }
+        else {
+            conflicts.push({ item, aValue, bValue });
+        }
+    }
+    return { conflicts, autoFilled };
+}
+/**
+ * Builds the patch payload per the merge endpoint contract: every `autoFilled`
+ * entry is always included (A had nothing to lose); a `conflicts` entry is
+ * only included when the user explicitly resolved it to B — anything left
+ * unresolved keeps A's value by omission.
+ */
+export function buildPatch(diff, resolutions) {
+    var _a, _b, _c;
+    const patch = {};
+    for (const { item, bValue } of diff.autoFilled) {
+        patch[(_a = item.name) !== null && _a !== void 0 ? _a : ''] = bValue;
+    }
+    for (const { item, bValue } of diff.conflicts) {
+        if (resolutions[(_b = item.name) !== null && _b !== void 0 ? _b : ''] === 'B') {
+            patch[(_c = item.name) !== null && _c !== void 0 ? _c : ''] = bValue;
+        }
+    }
+    return patch;
+}
+/** Display label for a candidate record in the search results list. */
+export function candidateLabel(record) {
+    var _a, _b, _c, _d, _e;
+    return (_e = (_b = (_a = record === null || record === void 0 ? void 0 : record.name) !== null && _a !== void 0 ? _a : record === null || record === void 0 ? void 0 : record.label) !== null && _b !== void 0 ? _b : (_d = (_c = record === null || record === void 0 ? void 0 : record._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : '';
+}

package/dist/collection/components/merge/mrd-merge-view/merge-parts.js

@@ -0,0 +1,44 @@
+import { h } from "@stencil/core";
+import { CellRenderer } from "../../../utils/cell-renderer";
+import { t } from "../../../utils/i18n";
+import { formatDate } from "../../../utils/format";
+import { candidateLabel } from "./merge-diff";
+/** History-enabled fields carry `{ current, history: [...] }` — this is the legal record itself (e.g. past company names), not an audit log. */
+function getHistory(item, record) {
+    var _a, _b;
+    if (!item.historyEnabled || !item.name)
+        return [];
+    return (_b = (_a = record === null || record === void 0 ? void 0 : record[item.name]) === null || _a === void 0 ? void 0 : _a.history) !== null && _b !== void 0 ? _b : [];
+}
+/** Small clock badge + popover listing past values for a history-enabled field — same UX as mrd-layout-section's field view. */
+const HistoryBadge = ({ locale, history, isOpen, onToggle }) => {
+    if (history.length === 0)
+        return null;
+    const sorted = [...history].sort((a, b) => b.until.localeCompare(a.until));
+    return (h("span", { class: "mrd-merge-view__history-wrap" }, h("button", { type: "button", class: "mrd-merge-view__history-btn", title: t('history_badge_tooltip', locale), "aria-label": t('history_badge_tooltip', locale), onClick: (e) => { e.stopPropagation(); onToggle(); } }, h("svg", { class: "mrd-merge-view__history-icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .207.085.394.22.53l2.5 2.5a.75.75 0 101.06-1.06L10.75 9.69V5z", "clip-rule": "evenodd" }))), isOpen && (h("div", { class: "mrd-merge-view__history-popover", role: "listbox" }, sorted.map((entry, i) => (h("div", { key: String(i), class: "mrd-merge-view__history-entry" }, entry.value, " (", t('history_until', locale), " ", formatDate(entry.until, locale), ")")))))));
+};
+export const MergeSearchStep = ({ locale, searchQuery, searchResults, isLoading, onSearchInput, onSelect }) => (h("div", { class: "mrd-merge-view__search-step" }, h("p", { class: "mrd-merge-view__hint" }, t('merge_search_hint', locale)), h("div", { class: "mrd-merge-view__search-wrapper" }, h("input", { class: "mrd-merge-view__search", type: "text", value: searchQuery, placeholder: t('search_placeholder', locale), onInput: (e) => onSearchInput(e.target.value) }), isLoading && h("span", { class: "mrd-merge-view__spinner", "aria-label": t('loading', locale) })), searchQuery.trim().length >= 2 && !isLoading && (h("div", { class: "mrd-merge-view__results" }, searchResults.length === 0 ? (h("div", { class: "mrd-merge-view__no-results" }, t('no_results', locale))) : (searchResults.map(record => {
+    var _a, _b, _c;
+    return (h("div", { key: (_c = (_b = (_a = record === null || record === void 0 ? void 0 : record._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href) !== null && _c !== void 0 ? _c : candidateLabel(record), class: "mrd-merge-view__result-item" }, h("span", { class: "mrd-merge-view__result-label" }, candidateLabel(record)), h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--secondary", onClick: () => onSelect(record) }, t('merge_select', locale))));
+}))))));
+export const MergeCompareStep = ({ locale, currentLabel, candidateLabel: bLabel, conflicts, autoFilled, recordA, recordB, resolutions, openHistoryKey, onResolve, onToggleHistory, onChangeCandidate, onContinue }) => (h("div", { class: "mrd-merge-view__compare-step" }, h("h3", { class: "mrd-merge-view__heading" }, t('merge_compare_heading', locale)), conflicts.length === 0 ? (h("p", { class: "mrd-merge-view__no-conflicts" }, t('merge_no_conflicts', locale))) : (h("table", { class: "mrd-merge-view__table" }, h("thead", null, h("tr", null, h("th", { class: "mrd-merge-view__header" }), h("th", { class: "mrd-merge-view__header" }, t('merge_column_a', locale), h("span", { class: "mrd-merge-view__header-name" }, currentLabel)), h("th", { class: "mrd-merge-view__header" }, t('merge_column_b', locale), h("span", { class: "mrd-merge-view__header-name" }, bLabel)))), h("tbody", null, conflicts.map(({ item }) => {
+    var _a, _b, _c;
+    const name = (_a = item.name) !== null && _a !== void 0 ? _a : '';
+    const resolution = (_b = resolutions[name]) !== null && _b !== void 0 ? _b : 'A';
+    const historyA = getHistory(item, recordA);
+    const historyB = getHistory(item, recordB);
+    const keyA = `${name}:A`;
+    const keyB = `${name}:B`;
+    return (h("tr", { key: name, class: "mrd-merge-view__row" }, h("td", { class: "mrd-merge-view__cell mrd-merge-view__cell--label" }, (_c = item.label) !== null && _c !== void 0 ? _c : name), h("td", { class: "mrd-merge-view__cell" }, h("label", { class: "mrd-merge-view__option" }, h("input", { type: "radio", name: `merge-${name}`, checked: resolution === 'A', onChange: () => onResolve(name, 'A') }), h("span", null, CellRenderer.render(item, recordA, locale) || '—')), h(HistoryBadge, { locale: locale, history: historyA, isOpen: openHistoryKey === keyA, onToggle: () => onToggleHistory(openHistoryKey === keyA ? null : keyA) })), h("td", { class: "mrd-merge-view__cell" }, h("label", { class: "mrd-merge-view__option" }, h("input", { type: "radio", name: `merge-${name}`, checked: resolution === 'B', onChange: () => onResolve(name, 'B') }), h("span", null, CellRenderer.render(item, recordB, locale) || '—')), h(HistoryBadge, { locale: locale, history: historyB, isOpen: openHistoryKey === keyB, onToggle: () => onToggleHistory(openHistoryKey === keyB ? null : keyB) }))));
+})))), autoFilled.length > 0 && (h("div", { class: "mrd-merge-view__auto-note" }, h("p", null, t('merge_auto_heading', locale)), h("ul", null, autoFilled.map(({ item }) => { var _a; return h("li", { key: item.name }, (_a = item.label) !== null && _a !== void 0 ? _a : item.name); })))), h("div", { class: "mrd-merge-view__actions" }, h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--secondary", onClick: onChangeCandidate }, t('merge_back', locale)), h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--primary", onClick: onContinue }, t('merge_continue', locale)))));
+export const MergeConfirmStep = ({ locale, candidateLabel: bLabel, conflicts, autoFilled, resolutions, recordB, openHistoryKey, onToggleHistory, onBack, onConfirm }) => {
+    const changed = [
+        ...autoFilled,
+        ...conflicts.filter(({ item }) => { var _a; return resolutions[(_a = item.name) !== null && _a !== void 0 ? _a : ''] === 'B'; }),
+    ];
+    return (h("div", { class: "mrd-merge-view__confirm-step" }, h("h3", { class: "mrd-merge-view__heading" }, t('merge_confirm_heading', locale)), changed.length === 0 ? (h("p", { class: "mrd-merge-view__no-conflicts" }, t('merge_no_conflicts', locale))) : (h("ul", { class: "mrd-merge-view__summary-list" }, changed.map(({ item }) => {
+        var _a;
+        const key = `${item.name}:confirm`;
+        return (h("li", { key: item.name }, (_a = item.label) !== null && _a !== void 0 ? _a : item.name, ": ", CellRenderer.render(item, recordB, locale) || '—', h(HistoryBadge, { locale: locale, history: getHistory(item, recordB), isOpen: openHistoryKey === key, onToggle: () => onToggleHistory(openHistoryKey === key ? null : key) })));
+    }))), h("p", { class: "mrd-merge-view__warning" }, t('merge_confirm_warning', locale), " (", bLabel, ")"), h("div", { class: "mrd-merge-view__actions" }, h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--secondary", onClick: onBack }, t('merge_back', locale)), h("button", { type: "button", class: "mrd-merge-view__btn mrd-merge-view__btn--danger", onClick: onConfirm }, t('merge_confirm_button', locale)))));
+};