@mmlogic/components 0.5.1 → 0.5.3

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

@@ -0,0 +1,273 @@
+'use strict';
+
+var index = require('./index-DVbdkYO3.js');
+var clientLayout = require('./client-layout-CqVuJumR.js');
+var cellRenderer = require('./cell-renderer-7KX9Qbml.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: '3adb36fb46aa7260641a46a2cf27cc0ef320876f', 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: 'e33a6d66a220b28cc9533da78dc274e2d7ec5c4a' }, index.h("div", { key: 'b5fb1390d86192f9f6f15e3ccb89e2d21d9c7c8b', 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

@@ -3,6 +3,7 @@
     "components/documents/mrd-document-container/mrd-document-container.js",
     "components/documents/mrd-document-list/mrd-document-list.js",
     "components/documents/mrd-document-view/mrd-document-view.js",
+    "components/email/mrd-email-view/mrd-email-view.js",
     "components/fields/mrd-boolean-field/mrd-boolean-field.js",
     "components/fields/mrd-currency-field/mrd-currency-field.js",
     "components/fields/mrd-date-field/mrd-date-field.js",
@@ -21,7 +22,9 @@
     "components/fields/mrd-time-field/mrd-time-field.js",
     "components/form/mrd-field/mrd-field.js",
     "components/form/mrd-form/mrd-form.js",
+    "components/invoice/mrd-invoice-view/mrd-invoice-view.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/documents/mrd-document-view/mrd-document-view.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { t } from "../../../utils/i18n";
 import { formatDate } from "../../../utils/format";
-import { attachmentsFromRecord } from "../../../utils/document-attachments";
+import { attachmentsFromRecord, attachmentsKey } from "../../../utils/document-attachments";
 /**
  * Archetype-driven single-document view. Given a `commons.document` binding and a
  * data record, renders the document recognisably — title, date, a navigation
@@ -24,9 +24,9 @@ export class MrdDocumentView {
         /** The data record from the /data endpoint. Fields keyed by name; relations under `_links`. */
         this.data = {};
         this.locale = navigator.language;
-        /** Tracks the href attachments were last emitted for, so componentDidLoad and
+        /** Tracks the key attachments were last emitted for, so componentDidLoad and
          *  the data watcher don't emit duplicate events for the same file. */
-        this.lastAttachmentHref = null;
+        this.lastAttachmentKey = null;
     }
     componentDidLoad() {
         this.emitAttachmentsIfNeeded();
@@ -35,12 +35,11 @@ export class MrdDocumentView {
         this.emitAttachmentsIfNeeded();
     }
     emitAttachmentsIfNeeded() {
-        var _a, _b;
         const attachments = attachmentsFromRecord(this.archetype, this.data);
-        const href = (_b = (_a = attachments[0]) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : null;
-        if (href === this.lastAttachmentHref)
+        const key = attachmentsKey(attachments);
+        if (key === this.lastAttachmentKey)
             return;
-        this.lastAttachmentHref = href;
+        this.lastAttachmentKey = key;
         this.mrdAttachments.emit({ attachments });
     }
     /** Value of a value-slot: reads data[field] via the slot→field map. */
@@ -88,7 +87,7 @@ export class MrdDocumentView {
         const fileRaw = this.slotValue('file');
         const fileHref = (_a = fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.href) !== null && _a !== void 0 ? _a : '';
         const fileName = (_b = fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.fileName) !== null && _b !== void 0 ? _b : (fileRaw ? String(fileRaw) : '');
-        return (h(Host, { key: 'd4e8d4a6c5c66677df3d4e80943fc4538d9a2be7' }, h("div", { key: 'c67bb1742590dc3ab3cec959f20dfa9030268411', class: "mrd-document-view" }, h("div", { key: '5da6e15d1f67990a9ee06bc07b717e5fa17a2ee7', class: "mrd-document-view__body" }, h("div", { key: '0fc38933add3fff48096c48d2fb6cd06fb5d1eac', class: "mrd-document-view__meta" }, title && h("h1", { key: 'e9ac8d99f9afae6b64dd7e6bd461c54b92a6ea39', class: "mrd-document-view__title" }, title), date && h("p", { key: '8591d77b300ed3c021cfa64b8e9564dee98199cd', class: "mrd-document-view__date" }, date), this.renderContainer(), fileRaw && this.renderFileMeta(fileName, fileHref), summary && (h("div", { key: '8a6d630afcf187fa86c9bab77d06d93695fd5c9f', class: "mrd-document-view__summary" }, h("div", { key: 'bd98e2cf740d08837accd8d260973d4e51cd24f7', class: "mrd-document-view__summary-body", innerHTML: summary }))))))));
+        return (h(Host, { key: '405890ef9135d4e9f15532dbc669c4d8d1e8b201' }, h("div", { key: 'be60f0867664a0ded6a85b17999ab207f042d8e2', class: "mrd-document-view" }, h("div", { key: 'f0202da7e83a05f782ba70c3cff91049d56c3e04', class: "mrd-document-view__body" }, h("div", { key: '85d5075c6751200ae3840b1d9e4544792ea52b5e', class: "mrd-document-view__meta" }, title && h("h1", { key: '63a4676ef488f2b0cf2347e0aa4e3c728b2d9351', class: "mrd-document-view__title" }, title), date && h("p", { key: '4ff630a9967509f661050ba04eece5ca26773ce2', class: "mrd-document-view__date" }, date), this.renderContainer(), fileRaw && this.renderFileMeta(fileName, fileHref), summary && (h("div", { key: '412e4934755e801e8a6cd10f5d00da82f9b6aa6a', class: "mrd-document-view__summary" }, h("div", { key: 'fc5c1b88cdba2f2398d09b42ede0b4dc556cd0f3', class: "mrd-document-view__summary-body", innerHTML: summary }))))))));
     }
     static get is() { return "mrd-document-view"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/email/mrd-email-view/mrd-email-view.css

@@ -0,0 +1,126 @@
+:host {
+  display: block;
+}
+
+.mrd-email-view {
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-4);
+}
+.mrd-email-view__subject {
+  font-size: var(--mrd-font-size-2xl);
+  font-weight: var(--mrd-font-weight-bold);
+  color: var(--mrd-color-neutral-900);
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+.mrd-email-view__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+}
+.mrd-email-view__header-row {
+  display: flex;
+  gap: var(--mrd-space-3);
+  font-size: var(--mrd-font-size-sm);
+}
+.mrd-email-view__header-label {
+  flex-shrink: 0;
+  width: 3rem;
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-400);
+}
+.mrd-email-view__header-value {
+  color: var(--mrd-color-neutral-700);
+}
+.mrd-email-view__link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: inherit;
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-primary);
+  cursor: pointer;
+}
+.mrd-email-view__link:hover {
+  text-decoration: underline;
+}
+.mrd-email-view__container-link {
+  align-self: flex-start;
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-primary);
+  cursor: pointer;
+}
+.mrd-email-view__container-link:hover {
+  text-decoration: underline;
+}
+.mrd-email-view__divider {
+  height: var(--mrd-border-width);
+  background: var(--mrd-color-neutral-200);
+}
+.mrd-email-view__body-html {
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-color-neutral-700);
+  line-height: var(--mrd-line-height-relaxed);
+  word-break: break-word;
+}
+.mrd-email-view__body-text {
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-color-neutral-700);
+  line-height: var(--mrd-line-height-relaxed);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.mrd-email-view__attachments {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-2);
+}
+.mrd-email-view__attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  align-self: flex-start;
+  height: 2rem;
+  padding: 0 var(--mrd-space-3);
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-color-neutral-300);
+  border-radius: var(--mrd-border-radius);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-700);
+  cursor: pointer;
+}
+.mrd-email-view__attachment:hover {
+  background: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-900);
+}
+.mrd-email-view__attachment-icon {
+  width: 0.9375rem;
+  height: 0.9375rem;
+  flex-shrink: 0;
+}
+.mrd-email-view__headers {
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-400);
+}
+.mrd-email-view__headers summary {
+  cursor: pointer;
+  font-weight: var(--mrd-font-weight-medium);
+}
+.mrd-email-view__headers-body {
+  margin: var(--mrd-space-2) 0 0 0;
+  padding: var(--mrd-space-3);
+  background: var(--mrd-color-neutral-50);
+  border-radius: var(--mrd-border-radius);
+  white-space: pre-wrap;
+  word-break: break-word;
+}