@designcrowd/library.brand-page 5.18.1-undo-27 → 5.18.1-undo-29

package/lib/src/brand-page-maker/stores/history/history-store.js

@@ -5,8 +5,8 @@ import { useAiWebsiteBuilderThreadStore } from '../ai-thread/ai-website-builder-
 import { useEventTracker } from '../../composables/useEventTracker';
 import { usePageNavigationStore } from '@shared/page-navigation/store/page-navigation-store';
 import { useUiEditableLogoStore } from '@shared/logo-settings/store/editable-logo-store';
+import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
-import { ESCAPED_NEWLINE_CHARACTER } from '@src/constants/ui';
 /**
  * Single-stack history model with a pointer instead of two stacks.
  *
@@ -49,33 +49,22 @@ const MAX_ENTRY_BYTES = 25 * 1024 * 1024;
 // reactive cascades (template loadPageNo, router afterEach, layout settle)
 // that would otherwise make undo light up before the user has done anything.
 const BASELINE_SETTLE_MS = 2000;
-// Content-level wrapper keys whose `paymentConfig` child is the user's
-// Stripe Connect linkage — backend-confirmed state, not native authoring
-// intent (per `project-guardrails.md`). It must be invariant under undo /
-// redo regardless of what other edits the user makes.
+// Content-level wrapper keys whose `paymentConfig` child is a denormalised
+// cache of `shopConfigStore.paymentConfig` (the user's Stripe Connect
+// linkage). Stripe Connect linkage state is backend-confirmed (per
+// `project-guardrails.md`) and must NEVER ride along on the undo/redo stack.
 //
-// paymentConfig is kept invariant by `applySnapshotString`:
-//   - Before applying the target snapshot, harvest each live
-//     wrapper.paymentConfig keyed by content id.
-//   - applyHistorySnapshot rebuilds page contents from the snapshot
-//     (which may carry a stale or absent paymentConfig).
-//   - After the apply resolves, walk the rebuilt live pages and re-stamp
-//     wrapper.paymentConfig from the harvest, so each wrapper holds the
-//     same paymentConfig it had immediately before the apply.
-//
-// Snapshots themselves still carry paymentConfig (we don't strip at
-// capture time) — there's nothing to gain from stripping when the live
-// value is preserved across the apply, and keeping snapshots whole avoids
-// any data-loss risk for any future code path that might read paymentConfig
-// from a snapshot directly. The dedup-side strip below ignores
-// `paymentConfig` for the byte-compare so a click-without-edit doesn't
-// generate a phantom entry.
+// paymentConfig is kept invariant under undo/redo by re-stamping every live
+// wrapper from `shopConfigStore.paymentConfig` after every restore — see
+// `restorePaymentConfigsOnLivePages`. The shop store itself is never
+// touched by undo/redo (see `applyHistorySnapshot` step 6), so the live
+// wrapper always equals the live shop store regardless of what's in the
+// snapshot bytes.
 const PAYMENT_CONFIG_WRAPPER_KEYS = [
     'supportMeConfig',
     'requestPaymentConfig',
     'shopPaymentConfig',
 ];
-const PAYMENT_CONFIG_WRAPPER_KEY_SET = new Set(PAYMENT_CONFIG_WRAPPER_KEYS);
 export const useHistoryStore = defineStore('history', () => {
     const eventTracker = useEventTracker();
     // --- State ---
@@ -140,357 +129,31 @@ export const useHistoryStore = defineStore('history', () => {
         }
     }
     /**
-     * Normalize a snapshot for the dedup byte-compare. Strips/canonicalizes
-     * fields that get mutated by sidebar-open reactive cascades but aren't
-     * user-visible edits — without this, opening a content panel produces an
-     * undo step that "does nothing" when replayed.
-     *
-     * Known phantom sources (BP-5506):
-     *   - TipTap RTE writing back its empty-paragraph default on first mount
-     *     (e.g. `""` → `<p style="text-align: center;"></p>`).
-     *   - TipTap RTE writing back its default-style hydration on first mount
-     *     (e.g. plain `"Hello"` → `<p style="..."><span style="..."><mark ...>Hello</mark></span></p>`).
-     *   - TipTap re-emitting whole-content `<strong>`/`<em>`/`<u>`/`<s>` tags
-     *     to mirror the resolved `textStyle.fontWeight / fontStyle /
-     *     textDecoration` (e.g. plain `"text"` →
-     *     `<p>...<span>...<strong>text</strong></span></p>`).
-     *   - TipTap rendering the codebase's URL-encoded newline
-     *     (`ESCAPED_NEWLINE_CHARACTER` = `%0A`) as `<br>` on first hydration
-     *     (e.g. plain `"A%0AB"` → `<p><span>A<br>B</span></p>`). Plain-side
-     *     `%0A` is decoded to `\n` and attributeless `<br>` is collapsed to
-     *     `\n` in `extractCanonicalText`, so the two sides converge.
-     *   - Lazy hydration of `*Style` objects when a content settings panel —
-     *     or section selection on the canvas — resolves `textStyleType` and
-     *     writes the full resolved style (fontFamily, fontSize, color,
-     *     fontWeight, fontStyle, letterSpacing, lineHeight, textDecoration)
-     *     onto the model. The `textStyleType` itself is the authoring
-     *     intent; the resolved keys are just cached values.
-     *   - `isModifiedAfterTemplateApplied` flipping on first edit gesture.
-     *
-     * Note: `logoImageBase64Url` (the rendered logo PNG) is NOT stripped here.
-     * Pre-purchase logo-tab edits (text, support text, logo colors, fonts)
-     * land in `editableLogoStore.logoEdits` (sidecar — see
-     * `HistoryEntry.logoEdits`) AND trigger a fabric-render that writes the
-     * new base64 into `pageHeaderDesktop.logoImageBase64Url` + per-page
-     * logo content. The base64 IS the canonical signal that a logo edit
-     * happened; stripping it would dedup real logo edits as no-ops. The
-     * 2-second `BASELINE_SETTLE_MS` window already collapses initial-load
-     * base64 churn into the baseline.
+     * One-shot "fold next mutation back into the baseline (or current entry)
+     * rather than pushing a new entry" flag.
      *
-     * RTE strings are canonicalized by parsing the HTML with DOMParser and
-     * walking the tree; only attributeless format wrappers (and a tightly
-     * scoped set of hydration styles on `<p>` / `<span>` / `<mark>`) are
-     * collapsed. Real authoring intent (links, custom colors, partial-text
-     * formatting like `Hello <strong>world</strong>`) survives the walk
-     * because at least one node falls outside the hydration whitelist,
-     * and the walker bails to "preserve original" the moment that happens.
-     *
-     * Used ONLY for dedup comparison. Stored snapshots remain unchanged so
-     * `applyHistorySnapshot` always sees the real state.
-     */
-    // Tags TipTap re-emits purely to mirror the resolved textStyle on first
-    // hydration. None carry user authoring intent on their own when they are
-    // the sole element-child wrapping the entire content:
-    //   - <p>:    only its `text-align` style is meaningful, and that's already
-    //             captured in `textStyle.textAlign`.
-    //   - <span>: TipTap wraps content in a span with `font-family`, `font-size`,
-    //             `color`, `letter-spacing`, `line-height` resolved from the
-    //             textStyle. The textStyle object on the same content is the
-    //             authoritative source.
-    //   - <mark>: TipTap's highlight extension default — collapses regardless
-    //             of `data-color` / `style` attrs, mirroring the original
-    //             regex's behavior on a hydrated highlight.
-    //   - <strong>/<em>/<u>/<s>: attributeless tags that mirror
-    //             `fontWeight: bold` / `fontStyle: italic` / `textDecoration:
-    //             underline / line-through`. ONLY recognized as hydration when
-    //             they are the sole child of their parent — partial-content
-    //             usage like `Hello <strong>world</strong>` is a real edit.
-    // Anything else (`<a>`, `<br>`, `<span style="color: red">`, attributes on
-    // <strong>/<em>, etc.) is preserved as a real diff.
-    const STRUCTURAL_HYDRATION_TAGS = new Set(['P', 'SPAN', 'MARK']);
-    const FORMAT_HYDRATION_TAGS = new Set(['STRONG', 'EM', 'U', 'S']);
-    // Default style properties TipTap emits on a hydration <span> /
-    // <mark>. The textStyle resolver writes all of these onto the live
-    // model, so when TipTap re-emits them as inline style on its
-    // hydration span/mark there is no user-visible delta.
-    // Anything outside this whitelist (e.g. `text-decoration` mid-content,
-    // `text-shadow`, `text-transform`) is treated as a real edit.
-    const HYDRATION_INLINE_STYLE_PROPS = new Set([
-        'font-family',
-        'font-size',
-        'letter-spacing',
-        'line-height',
-        'color',
-        'background-color',
-    ]);
-    // Empty paragraph forms TipTap emits when an editor mounts on an empty
-    // string. Treated as equivalent to `""` for dedup.
-    function isEmptyRteHtml(value) {
-        if (typeof value !== 'string')
-            return false;
-        return /^<p(\s[^>]*)?>(<br\s*\/?>)?<\/p>$/.test(value);
-    }
-    function isHydrationOnlyAttributes(el) {
-        // Format tags (<strong>/<em>/<u>/<s>) must be attributeless. Anything
-        // with class/style/data-*/etc. is a real edit.
-        if (FORMAT_HYDRATION_TAGS.has(el.tagName))
-            return el.attributes.length === 0;
-        for (const attr of Array.from(el.attributes)) {
-            // <mark> may carry a `data-color` attr (TipTap highlight extension's
-            // default-and-resolved value). The accompanying `style` is checked
-            // against the same hydration-prop whitelist as <span>.
-            if (el.tagName === 'MARK' &&
-                (attr.name === 'data-color' || attr.name === 'style')) {
-                if (attr.name === 'data-color')
-                    continue;
-            }
-            else if (attr.name !== 'style') {
-                return false;
-            }
-            const decls = attr.value
-                .split(';')
-                .map((d) => d.trim())
-                .filter(Boolean);
-            if (el.tagName === 'P') {
-                for (const decl of decls) {
-                    const [prop] = decl.split(':').map((s) => s.trim());
-                    if (prop !== 'text-align')
-                        return false;
-                }
-            }
-            else if (el.tagName === 'SPAN' || el.tagName === 'MARK') {
-                for (const decl of decls) {
-                    const [prop, value] = decl.split(':').map((s) => s.trim());
-                    // Allow `color: inherit` on <mark> (TipTap stamps it on the
-                    // default highlight to inherit the span's color). Otherwise
-                    // require the prop to be in the hydration whitelist.
-                    if (el.tagName === 'MARK' &&
-                        prop === 'color' &&
-                        value === 'inherit') {
-                        continue;
-                    }
-                    if (!HYDRATION_INLINE_STYLE_PROPS.has(prop))
-                        return false;
-                }
-            }
-            else {
-                return false;
-            }
-        }
-        return true;
-    }
-    /**
-     * Walk a parsed HTML node tree. Return the joined text content if every
-     * descendant is hydration noise; return null if any node carries real
-     * authoring intent (links, partial formatting, custom styles, etc.).
+     * Hydration write sites (TipTap mount, lazy paymentConfig fill,
+     * stale-page-ref clear) all run from a lifecycle hook on first sidebar
+     * open / section click. Each site mutates `brandPageData` exactly once
+     * with a value the user can't see as a change — but the deep watcher
+     * fires anyway, and without this gate the next idle flush would land a
+     * phantom undo entry.
      *
-     * `isFormatTag` differs in how it's allowed to appear: a structural tag
-     * (P/SPAN/MARK) can have siblings; a format tag (STRONG/EM/U/S) is only
-     * allowed when it's the SOLE child of its parent. The caller enforces
-     * that at the iteration site.
-     */
-    function extractCanonicalText(node) {
-        if (node.nodeType === 3 /* TEXT_NODE */)
-            return node.textContent ?? '';
-        if (node.nodeType !== 1 /* ELEMENT_NODE */) {
-            // Comments, CDATA, etc. — treat as opaque (preserve original).
-            return null;
-        }
-        const el = node;
-        // Attributeless <br> is TipTap's deterministic emission of a hard break.
-        // Treated as `\n` so a hydrated `<p><span>A<br>B</span></p>` canonicalizes
-        // to `"A\nB"` and matches the plain-side `"A%0AB"` after newline decoding.
-        // <br> with any attribute (e.g. `<br data-x>`) bails as before.
-        if (el.tagName === 'BR') {
-            return el.attributes.length === 0 ? '\n' : null;
-        }
-        const isStructural = STRUCTURAL_HYDRATION_TAGS.has(el.tagName);
-        const isFormat = FORMAT_HYDRATION_TAGS.has(el.tagName);
-        if (!isStructural && !isFormat)
-            return null;
-        if (!isHydrationOnlyAttributes(el))
-            return null;
-        const children = Array.from(el.childNodes);
-        let out = '';
-        for (const child of children) {
-            // Format tags only count as hydration when they wrap the ENTIRE
-            // content of their parent. If a <strong>/<em>/<u>/<s> appears
-            // alongside any sibling (text or element), it's partial-content
-            // formatting — a real edit that can't be expressed via textStyle —
-            // so bail.
-            if (child.nodeType === 1 &&
-                FORMAT_HYDRATION_TAGS.has(child.tagName) &&
-                children.length > 1) {
-                return null;
-            }
-            const part = extractCanonicalText(child);
-            if (part === null)
-                return null;
-            out += part;
-        }
-        return out;
-    }
-    /**
-     * If `value` is TipTap's default-hydration wrapper around plain text
-     * (only hydration-noise elements wrapping bare text), return that bare
-     * text. Otherwise return the original string unchanged.
+     * Each call site sets the flag immediately before the imperative write
+     * it knows is a hydration. The watcher's flush consumes the flag (clears
+     * it) and merges the resulting snapshot into `entries[currentIndex]`
+     * instead of pushing. No TTL — the flag stays armed until either:
+     *   - the watcher fires and consumes it, or
+     *   - a snapshot apply (undo/redo) clears it (we don't want a hydration
+     *     flag set immediately before an apply to swallow the post-apply
+     *     watcher tick), or
+     *   - `reset()` clears it on save.
      *
-     * This collapses the BP-5506 phantom where opening a content sidebar —
-     * or selecting a section on the canvas — mounts every RTE editor at
-     * once and writes back wrapped HTML with no user-visible delta.
+     * Multiple call sites in the same burst all set the same flag — they
+     * collapse together into a single merge into the current head, which is
+     * the semantics we want.
      */
-    function canonicalizeRteString(value) {
-        // Decode the codebase's URL-encoded newline (`%0A` — see
-        // `ESCAPED_NEWLINE_CHARACTER`) on the plain-text side. The hydrated side
-        // emits `<br>` for the same logical newline, and `extractCanonicalText`
-        // collapses attributeless `<br>` to `\n`, so the two converge.
-        // `split`/`join` rather than `decodeURIComponent` keeps this narrow —
-        // we don't want to decode `%20`, `%3C`, etc., which would change real
-        // user content.
-        const decodeNewlines = (s) => s.split(ESCAPED_NEWLINE_CHARACTER).join('\n');
-        // Cheap exit: no tags at all. Still decode `%0A` so a plain-text entry
-        // matches a hydrated entry whose only diff is `<br>`-vs-newline.
-        if (!value.includes('<'))
-            return decodeNewlines(value);
-        if (isEmptyRteHtml(value))
-            return '';
-        // DOMParser is unavailable in some non-browser test environments;
-        // fall back to leaving the value as-is so the caller produces a
-        // real diff (i.e. fail open — never falsely collapse).
-        if (typeof DOMParser === 'undefined')
-            return decodeNewlines(value);
-        let doc;
-        try {
-            doc = new DOMParser().parseFromString(`<div id="__rte_root__">${value}</div>`, 'text/html');
-        }
-        catch {
-            return decodeNewlines(value);
-        }
-        const root = doc.getElementById('__rte_root__');
-        if (!root)
-            return decodeNewlines(value);
-        // Join top-level blocks with `\n`. TipTap renders an Enter keypress as
-        // a new top-level `<p>` sibling — without the join, `<p>Hello</p>` and
-        // `<p>Hello</p><p></p>` (or `<p>Hello</p><p>World</p>`) collapse to the
-        // same canonical text and the Enter is invisible to dedup. The join
-        // also matches plain-side `%0A` between paragraphs (e.g. stored
-        // `Hello%0AWorld` ↔ hydrated `<p>Hello</p><p>World</p>`).
-        const parts = [];
-        for (const child of Array.from(root.childNodes)) {
-            const part = extractCanonicalText(child);
-            if (part === null)
-                return decodeNewlines(value);
-            parts.push(part);
-        }
-        return parts.join('\n');
-    }
-    function normalizeNode(node) {
-        if (Array.isArray(node))
-            return node.map(normalizeNode);
-        if (node === null || typeof node !== 'object')
-            return node;
-        const out = {};
-        for (const key of Object.keys(node)) {
-            let v = node[key];
-            // Strip the template-modified flag — it's meta-state that flips on
-            // first edit gesture (e.g. clicking into a panel) and does not
-            // represent a user-visible change.
-            if (key === 'isModifiedAfterTemplateApplied')
-                continue;
-            // Strip lazily-hydrated `paymentConfig` from payment-config wrappers
-            // (`supportMeConfig` / `requestPaymentConfig` / `shopPaymentConfig`)
-            // for the dedup byte-compare. paymentConfig is preserved across
-            // every undo/redo by `applySnapshotString`'s harvest+re-stamp pair,
-            // so capturing a wrapper-only diff (e.g. lazy hydration on first
-            // section click) would generate a phantom undo entry that, on
-            // playback, has no user-visible effect. Same reasoning as the
-            // `*Style` / RTE hydration carve-outs above. See
-            // `PAYMENT_CONFIG_WRAPPER_KEYS`.
-            if (PAYMENT_CONFIG_WRAPPER_KEY_SET.has(key) &&
-                v !== null &&
-                typeof v === 'object' &&
-                !Array.isArray(v) &&
-                'paymentConfig' in v) {
-                const wrapper = v;
-                const stripped = {};
-                for (const k of Object.keys(wrapper)) {
-                    if (k === 'paymentConfig')
-                        continue;
-                    stripped[k] = wrapper[k];
-                }
-                v = stripped;
-            }
-            // Collapse RTE default-hydration wrappers down to the plain text
-            // they wrap. Plain "X" and `<p style="..."><span ...><mark ...>X
-            // </mark></span></p>` share the same canonical "X" so a sidebar
-            // open that mounts every editor at once doesn't generate phantom
-            // undo steps.
-            if (typeof v === 'string') {
-                v = canonicalizeRteString(v);
-            }
-            // Empty TipTap paragraphs collapse to "" — and an empty string is
-            // equivalent to the key being absent (JSON.stringify drops `undefined`),
-            // so skip the key entirely. Otherwise the normalizer would emit
-            // `"description": ""` here while the baseline snapshot — captured when
-            // `description` was `undefined` — has no `description` key at all,
-            // and the two normalized strings would differ.
-            if (isEmptyRteHtml(v) || v === '')
-                continue;
-            // textStyle / descriptionStyle / titleStyle / *Style objects.
-            //
-            // When `textStyleType` is set, the live store lazily fills in the
-            // resolved values (fontFamily, fontSize, color, fontWeight,
-            // fontStyle, letterSpacing, lineHeight, textDecoration, etc.) the
-            // first time a settings panel — or section-selection on the canvas
-            // — resolves `textStyleType` against `styles.textStyles.textStyleOptions`.
-            // None of those lazy fields represent a real user edit; the
-            // `textStyleType` itself is the authoring intent.
-            //
-            // Real user edits via the inline RTE toolbar set `textStyleType: undefined`
-            // (see useRichTextEditor.ts `fontStyleChanges = { ..., textStyleType: undefined }`),
-            // so we leave every key intact in that case — those values ARE the
-            // real authoring intent.
-            //
-            // Per-content style edits via the global Style panel land in
-            // `snapshot.styles.textStyles` (a separate sub-tree), so they still
-            // produce a real diff outside this branch.
-            if (v !== null &&
-                typeof v === 'object' &&
-                !Array.isArray(v) &&
-                /Style$/.test(key)) {
-                const styleObj = v;
-                const hasTextStyleType = styleObj.textStyleType !== undefined &&
-                    styleObj.textStyleType !== null;
-                if (hasTextStyleType) {
-                    // Drop everything except `textStyleType` itself + `textAlign`,
-                    // which is the user's per-instance alignment override (preserved
-                    // on hydration via `globalContentStyle = { ...resolved, textAlign: style?.textAlign }`).
-                    out[key] = {
-                        textStyleType: styleObj.textStyleType,
-                        ...(styleObj.textAlign !== undefined
-                            ? { textAlign: styleObj.textAlign }
-                            : {}),
-                    };
-                    continue;
-                }
-                // No textStyleType — these are real per-content overrides. Recurse
-                // normally so nested objects still get the standard treatment.
-                out[key] = normalizeNode(styleObj);
-                continue;
-            }
-            out[key] = normalizeNode(v);
-        }
-        return out;
-    }
-    function normalizeSnapshotForDedup(snapshotStr) {
-        try {
-            const parsed = JSON.parse(snapshotStr);
-            return JSON.stringify(normalizeNode(parsed));
-        }
-        catch {
-            return snapshotStr;
-        }
-    }
+    const mergeNextFlush = ref(false);
     /**
      * Commit a new entry into the stack at the current pointer position.
      *
@@ -517,19 +180,8 @@ export const useHistoryStore = defineStore('history', () => {
      */
     function commitEntry(args) {
         const current = entries.value[currentIndex.value];
-        if (current) {
-            if (current.snapshot === args.snapshot)
-                return 'noop';
-            // Phantom-edit dedup: normalize both snapshots to ignore
-            // sidebar-open reactive cascades (RTE empty-paragraph init, lazy
-            // textStyle hydration, isModifiedAfterTemplateApplied flips). If
-            // they're equal after normalization, this capture has no
-            // user-visible diff vs. the entry at the pointer.
-            if (normalizeSnapshotForDedup(current.snapshot) ===
-                normalizeSnapshotForDedup(args.snapshot)) {
-                return 'noop';
-            }
-        }
+        if (current && current.snapshot === args.snapshot)
+            return 'noop';
         if (args.snapshot.length > MAX_ENTRY_BYTES) {
             eventTracker.sendHistoryOversizedEvent({
                 attempted_bytes: args.snapshot.length,
@@ -635,6 +287,17 @@ export const useHistoryStore = defineStore('history', () => {
             // than the pre-router value captured in `captureBaseline`).
             const inSettleWindow = currentIndex.value === 0 &&
                 Date.now() - baselineCapturedAt < BASELINE_SETTLE_MS;
+            // Merge branch — a hydration write site (TipTap mount, lazy
+            // paymentConfig fill, stale-page-ref clear) flagged this flush as
+            // "fold into the head, don't push". Replace `entries[currentIndex]`
+            // in place so the user-visible undo stack stays exactly as it was
+            // before the hydration burst arrived. Consume the flag whether or
+            // not we're in the settle window — `inSettleWindow` already merges
+            // into the baseline, but past that window the same merge has to
+            // happen against the current head for hydrations that fire when the
+            // user clicks into a section after the settle elapsed.
+            const shouldMerge = mergeNextFlush.value;
+            mergeNextFlush.value = false;
             if (inSettleWindow) {
                 entries.value = [
                     {
@@ -648,6 +311,19 @@ export const useHistoryStore = defineStore('history', () => {
                 ];
                 return;
             }
+            if (shouldMerge && entries.value[currentIndex.value]) {
+                const next = entries.value.slice();
+                next[currentIndex.value] = {
+                    ...next[currentIndex.value],
+                    snapshot,
+                    timestamp: new Date().toISOString(),
+                    sizeBytes: snapshot.length,
+                    activePageId,
+                    logoEdits,
+                };
+                entries.value = next;
+                return;
+            }
             commitEntry({
                 snapshot,
                 source: 'manual_edit',
@@ -820,95 +496,60 @@ export const useHistoryStore = defineStore('history', () => {
             }
         }
         const targetEntry = entries.value[targetIndex];
-        // Harvest the LIVE `wrapper.paymentConfig` from every payment-config
-        // wrapper BEFORE applying the snapshot. The snapshot may carry a
-        // stale or absent paymentConfig (e.g. baseline captured before the
-        // wrapper was hydrated), but the live value reflects the current
-        // truth — wherever it came from (server bootstrap, Stripe Connect
-        // onboarding via PaymentConfigField, or the shop store's lazy hydration).
-        // We re-stamp this harvest onto the rebuilt live wrappers after the
-        // apply so paymentConfig is invariant under undo/redo regardless of
-        // what other content edits the user made. See `PAYMENT_CONFIG_WRAPPER_KEYS`.
-        const paymentConfigHarvest = harvestLivePaymentConfigsByContentId();
         isApplyingSnapshot.value = true;
+        // Drop any merge flag a hydration site might have armed but the
+        // watcher hasn't yet consumed — otherwise the post-apply watcher
+        // tick would silently fold the freshly-restored snapshot into the
+        // entry at the new pointer position and erase the user's redo.
+        mergeNextFlush.value = false;
+        cancelPendingAutoCapture();
         try {
             await brandPageMakerStore.applyHistorySnapshot(snapshot, resolvedActivePageId, targetEntry?.logoEdits);
             await nextTick();
-            restorePaymentConfigsFromHarvest(paymentConfigHarvest);
+            // Re-stamp `wrapper.paymentConfig` on every payment-config wrapper in
+            // the freshly-restored content tree from the live shop store. Stripe
+            // Connect linkage is backend-confirmed (per `project-guardrails.md`)
+            // and must NEVER come from the snapshot — the captured value can be
+            // arbitrarily stale (an entry captured before
+            // `PaymentConfigField.mixin.ts:created()` lazily filled in the
+            // wrapper carries `paymentConfig: undefined`) and using it would
+            // re-surface the "Please enable a payment provider" warning on
+            // undo. The shop store's value is itself never undoable (see
+            // `applyHistorySnapshot` step 6).
+            restorePaymentConfigsOnLivePages();
         }
         finally {
             isApplyingSnapshot.value = false;
         }
     }
-    function harvestLivePaymentConfigsByContentId() {
-        const out = new Map();
-        try {
-            const pageSettingsStore = useUiPageSettingsStore();
-            for (const page of pageSettingsStore.pages) {
-                for (const item of page.contents) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const content = item.settings.content;
-                    const id = content?.id;
-                    if (!id)
-                        continue;
-                    let entryRecord = undefined;
-                    for (const key of PAYMENT_CONFIG_WRAPPER_KEYS) {
-                        const wrapper = content?.[key];
-                        if (wrapper &&
-                            typeof wrapper === 'object' &&
-                            !Array.isArray(wrapper) &&
-                            'paymentConfig' in wrapper) {
-                            if (!entryRecord)
-                                entryRecord = {};
-                            entryRecord[key] = wrapper.paymentConfig;
-                        }
-                    }
-                    if (entryRecord)
-                        out.set(id, entryRecord);
-                }
-            }
-        }
-        catch (error) {
-            console.error('history-store: failed to harvest live paymentConfig before apply', error);
-        }
-        return out;
-    }
     /**
-     * Re-stamp `wrapper.paymentConfig` onto every matching live wrapper from
-     * the pre-apply harvest. Wrappers whose content id is missing from the
-     * harvest are left as-is (e.g. a content item that didn't exist before
-     * this restore — there's nothing to preserve).
+     * Walk the live `pageSettingsStore.pages` and stamp
+     * `wrapper.paymentConfig = shopConfigStore.paymentConfig` on every
+     * payment-config wrapper. Called from `applySnapshotString` after
+     * `applyHistorySnapshot` rebuilds page contents.
      */
-    function restorePaymentConfigsFromHarvest(harvest) {
-        if (harvest.size === 0)
-            return;
+    function restorePaymentConfigsOnLivePages() {
         try {
+            const shopStore = useShopConfigStore();
             const pageSettingsStore = useUiPageSettingsStore();
+            const livePaymentConfig = shopStore.paymentConfig;
             for (const page of pageSettingsStore.pages) {
                 for (const item of page.contents) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const content = item.settings.content;
-                    const id = content?.id;
-                    if (!id)
-                        continue;
-                    const harvestedRecord = harvest.get(id);
-                    if (!harvestedRecord)
-                        continue;
                     for (const key of PAYMENT_CONFIG_WRAPPER_KEYS) {
-                        if (!(key in harvestedRecord))
-                            continue;
                         const wrapper = content?.[key];
                         if (wrapper &&
                             typeof wrapper === 'object' &&
                             !Array.isArray(wrapper)) {
-                            wrapper.paymentConfig = harvestedRecord[key];
+                            wrapper.paymentConfig = livePaymentConfig;
                         }
                     }
                 }
             }
         }
         catch (error) {
-            console.error('history-store: failed to restore paymentConfig from harvest', error);
+            console.error('history-store: failed to restore paymentConfig on live pages', error);
         }
     }
     /** Move the pointer back one step and apply the entry at the new position. */
@@ -975,12 +616,30 @@ export const useHistoryStore = defineStore('history', () => {
         if (!baselineCaptured.value)
             return;
         cancelPendingAutoCapture();
+        mergeNextFlush.value = false;
         entries.value = [];
         currentIndex.value = -1;
         baselineCaptured.value = false;
         baselineCapturedAt = 0;
         captureBaseline();
     }
+    /**
+     * Arm the next watcher flush to fold its snapshot into the current head
+     * entry instead of pushing a new one. Hydration write sites (TipTap mount,
+     * lazy paymentConfig fill, stale-page-ref clear) call this immediately
+     * before the imperative `update:modelValue` / `$emit` they know is a
+     * hydration mutation. The next flush consumes (clears) the flag.
+     *
+     * Idempotent — multiple call sites in the same burst all set the same
+     * flag and collapse together into a single merge into the current head.
+     *
+     * No-op when the watcher hasn't yet baselined: hydration writes inside
+     * the settle window already merge into the baseline; outside a flagged
+     * session the flag has no observable effect.
+     */
+    function mergeNextMutation() {
+        mergeNextFlush.value = true;
+    }
     // --- Instrumentation (NFR-04a) ---
     /** Sum of all entries' serialized sizes in bytes. */
     function getCurrentSizeBytes() {
@@ -1004,6 +663,7 @@ export const useHistoryStore = defineStore('history', () => {
         capture,
         captureTemplateSwitch,
         captureAiChangeset,
+        mergeNextMutation,
         undo,
         redo,
         reset,