@designcrowd/library.brand-page 5.18.1-undo-26 → 5.18.1-undo-28

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

@@ -7,7 +7,6 @@ import { usePageNavigationStore } from '@shared/page-navigation/store/page-navig
 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.
  *
@@ -52,52 +51,20 @@ const MAX_ENTRY_BYTES = 25 * 1024 * 1024;
 const BASELINE_SETTLE_MS = 2000;
 // Content-level wrapper keys whose `paymentConfig` child is a denormalised
 // cache of `shopConfigStore.paymentConfig` (the user's Stripe Connect
-// linkage). The cache is hydrated lazily by
-// `PaymentConfigField.mixin.ts:created()` when the user clicks into one of
-// these sections — that hydration is not user authoring intent, and Stripe
-// Connect linkage state is backend-confirmed (per `project-guardrails.md`).
+// 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 fully invariant under undo/redo via two layers in
-// this file:
-//   1. Capture-time strip in `serializeCurrentSnapshot` — snapshots are
-//      paymentConfig-free, so no entry can carry a stale or absent value.
-//   2. Restore-time re-stamp in `applySnapshotString` — after every undo /
-//      redo apply, every live wrapper's `paymentConfig` is reset from
-//      `shopConfigStore.paymentConfig`, which is itself never touched by
-//      undo/redo (see `applyHistorySnapshot` step 6).
-//
-// Together: the live wrapper always equals the live shop store, regardless
-// of what the user does in between captures and restores.
+// 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',
 ];
-/**
- * Walk a `pages` array and remove the `paymentConfig` key from every
- * payment-config wrapper found inside `pages[*].contents[*]`. Mutates in
- * place — caller is responsible for passing a clone if the source must
- * remain untouched.
- */
-function stripPaymentConfigsFromPages(pages) {
-    if (!Array.isArray(pages))
-        return;
-    for (const page of pages) {
-        const contents = page?.contents;
-        if (!Array.isArray(contents))
-            continue;
-        for (const content of contents) {
-            if (!content || typeof content !== 'object')
-                continue;
-            for (const key of PAYMENT_CONFIG_WRAPPER_KEYS) {
-                const wrapper = content[key];
-                if (wrapper && typeof wrapper === 'object' && !Array.isArray(wrapper)) {
-                    delete wrapper.paymentConfig;
-                }
-            }
-        }
-    }
-}
 export const useHistoryStore = defineStore('history', () => {
     const eventTracker = useEventTracker();
     // --- State ---
@@ -131,15 +98,7 @@ export const useHistoryStore = defineStore('history', () => {
         if (!cachedMakerStore)
             return null;
         try {
-            // JSON round-trip detaches the live reactive proxy, then we strip
-            // `paymentConfig` from every payment-config wrapper before re-
-            // stringifying. paymentConfig is the user's Stripe Connect linkage
-            // (backend-confirmed) and must not enter the undo stack — see
-            // `PAYMENT_CONFIG_WRAPPER_KEYS` above. The live store is never
-            // mutated; the strip operates on the detached clone only.
-            const cloned = JSON.parse(JSON.stringify(toRaw(cachedMakerStore.brandPageData)));
-            stripPaymentConfigsFromPages(cloned.pages);
-            return JSON.stringify(cloned);
+            return JSON.stringify(toRaw(cachedMakerStore.brandPageData));
         }
         catch (error) {
             console.error('history-store: failed to serialize snapshot', error);
@@ -170,334 +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.
+     * One-shot "fold next mutation back into the baseline (or current entry)
+     * rather than pushing a new entry" flag.
      *
-     * 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.
+     * 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.
      *
-     * 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.
+     * 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.
      *
-     * Used ONLY for dedup comparison. Stored snapshots remain unchanged so
-     * `applyHistorySnapshot` always sees the real state.
+     * 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.
      */
-    // 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.).
-     *
-     * `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.
-     *
-     * 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.
-     */
-    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;
-            // 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.
      *
@@ -524,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,
@@ -642,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 = [
                     {
@@ -655,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',
@@ -828,16 +497,25 @@ export const useHistoryStore = defineStore('history', () => {
         }
         const targetEntry = entries.value[targetIndex];
         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();
             // Re-stamp `wrapper.paymentConfig` on every payment-config wrapper in
-            // the freshly-restored content tree from the live shop store. The
-            // snapshot is paymentConfig-free (capture-time strip in
-            // `serializeCurrentSnapshot`), so without this step every wrapper
-            // would be left with `paymentConfig: undefined` after restore. The
-            // shop store's value is itself never undoable (see `project-
-            // guardrails.md` — Stripe Connect linkage is backend-confirmed).
+            // 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 {
@@ -938,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() {
@@ -967,6 +663,7 @@ export const useHistoryStore = defineStore('history', () => {
         capture,
         captureTemplateSwitch,
         captureAiChangeset,
+        mergeNextMutation,
         undo,
         redo,
         reset,

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

@@ -19,7 +19,7 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
             canUseGettyVideos: false,
             canUseGoogleAdsense: false,
             googleAdsenseEnabled: false,
-            canUseUndoRedo: false,
+            canUseUndoRedo: true,
         },
         emailAddress: '',
         hasPremiumSubscription: false,

package/lib/src/index.mjs

@@ -1,4 +1,4 @@
-import { A as E, a as T, b as s, c as I, d as S, e as N, f as e, B as A, g as O, h as C, i as G, j as D, k as P, l as t, m as R, n as L, o as M, p as o, q as r, r as b, s as n, t as F, u as i, v as l, w as g, x as B, y as c, z as Y, C as U, D as d, E as u, F as H, G as p, H as y, I as K, J as k, K as m, L as V, M as X, N as h, O as v, P as W, Q as f, R as x, S as z, T as w, U as Z, V as j, W as Q, X as q, Y as J, Z as $, $ as aa, a0 as _a, a1 as Ea, a2 as Ta, a3 as sa, a4 as Ia, a5 as Sa, a6 as Na, a7 as ea, a8 as Aa, a9 as Oa, aa as Ca, ab as Ga, ac as Da, ad as Pa, ae as ta, af as Ra, ag as La, ah as Ma, ai as oa, aj as ra, ak as ba, al as na, am as Fa, an as ia, ao as la, ap as ga, aq as Ba, ar as ca, as as Ya, at as Ua, au as da, av as ua, aw as Ha, ax as pa, ay as ya, az as Ka, aA as ka, aB as ma, aC as Va, aD as Xa, aE as ha, aF as va, aG as Wa, aH as fa, aI as xa, aJ as za, aK as wa, aL as Za, aM as ja, aN as Qa, aO as qa, aP as Ja, aQ as $a, aR as a_, aS as __, aT as E_, aU as T_, aV as s_, aW as I_, aX as S_, aY as N_, aZ as e_, a_ as A_, a$ as O_, b0 as C_, b1 as G_, b2 as D_, b3 as P_, b4 as t_, b5 as R_, b6 as L_, b7 as M_, b8 as o_, b9 as r_, ba as b_, bb as n_, bc as F_, bd as i_, be as l_, bf as g_, bg as B_, bh as c_, bi as Y_, bj as U_, bk as d_, bl as u_, bm as H_, bn as p_, bo as y_, bp as K_, bq as k_, br as m_, bs as V_, bt as X_, bu as h_, bv as v_, bw as W_, bx as f_, by as x_, bz as z_, bA as w_, bB as Z_, bC as j_, bD as Q_, bE as q_, bF as J_, bG as $_, bH as aE, bI as _E, bJ as EE, bK as TE, bL as sE, bM as IE, bN as SE, bO as NE, bP as eE, bQ as AE, bR as OE, bS as CE, bT as GE, bU as DE, bV as PE, bW as tE, bX as RE, bY as LE, bZ as ME, b_ as oE, b$ as rE, c0 as bE, c1 as nE, c2 as FE, c3 as iE, c4 as lE, c5 as gE, c6 as BE, c7 as cE, c8 as YE, c9 as UE, ca as dE, cb as uE, cc as HE, cd as pE, ce as yE, cf as KE, cg as kE, ch as mE, ci as VE, cj as XE, ck as hE, cl as vE, cm as WE, cn as fE, co as xE } from "./lib-D_xnR4VH.js";
+import { A as E, a as T, b as s, c as I, d as S, e as N, f as e, B as A, g as O, h as C, i as G, j as D, k as P, l as t, m as R, n as L, o as M, p as o, q as r, r as b, s as n, t as F, u as i, v as l, w as g, x as B, y as c, z as Y, C as U, D as d, E as u, F as H, G as p, H as y, I as K, J as k, K as m, L as V, M as X, N as h, O as v, P as W, Q as f, R as x, S as z, T as w, U as Z, V as j, W as Q, X as q, Y as J, Z as $, $ as aa, a0 as _a, a1 as Ea, a2 as Ta, a3 as sa, a4 as Ia, a5 as Sa, a6 as Na, a7 as ea, a8 as Aa, a9 as Oa, aa as Ca, ab as Ga, ac as Da, ad as Pa, ae as ta, af as Ra, ag as La, ah as Ma, ai as oa, aj as ra, ak as ba, al as na, am as Fa, an as ia, ao as la, ap as ga, aq as Ba, ar as ca, as as Ya, at as Ua, au as da, av as ua, aw as Ha, ax as pa, ay as ya, az as Ka, aA as ka, aB as ma, aC as Va, aD as Xa, aE as ha, aF as va, aG as Wa, aH as fa, aI as xa, aJ as za, aK as wa, aL as Za, aM as ja, aN as Qa, aO as qa, aP as Ja, aQ as $a, aR as a_, aS as __, aT as E_, aU as T_, aV as s_, aW as I_, aX as S_, aY as N_, aZ as e_, a_ as A_, a$ as O_, b0 as C_, b1 as G_, b2 as D_, b3 as P_, b4 as t_, b5 as R_, b6 as L_, b7 as M_, b8 as o_, b9 as r_, ba as b_, bb as n_, bc as F_, bd as i_, be as l_, bf as g_, bg as B_, bh as c_, bi as Y_, bj as U_, bk as d_, bl as u_, bm as H_, bn as p_, bo as y_, bp as K_, bq as k_, br as m_, bs as V_, bt as X_, bu as h_, bv as v_, bw as W_, bx as f_, by as x_, bz as z_, bA as w_, bB as Z_, bC as j_, bD as Q_, bE as q_, bF as J_, bG as $_, bH as aE, bI as _E, bJ as EE, bK as TE, bL as sE, bM as IE, bN as SE, bO as NE, bP as eE, bQ as AE, bR as OE, bS as CE, bT as GE, bU as DE, bV as PE, bW as tE, bX as RE, bY as LE, bZ as ME, b_ as oE, b$ as rE, c0 as bE, c1 as nE, c2 as FE, c3 as iE, c4 as lE, c5 as gE, c6 as BE, c7 as cE, c8 as YE, c9 as UE, ca as dE, cb as uE, cc as HE, cd as pE, ce as yE, cf as KE, cg as kE, ch as mE, ci as VE, cj as XE, ck as hE, cl as vE, cm as WE, cn as fE, co as xE } from "./lib-BBItimSg.js";
 import { createPinia as wE, setActivePinia as ZE } from "pinia";
 export {
   E as ABOUT_SECTION_SETTINGS_CONFIG,