@designcrowd/library.brand-page 5.18.3-undo-38 → 5.18.3

package/src/brand-page-maker/stores/history/history-store.test.ts

@@ -1,1120 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { reactive } from 'vue';
-import { createPinia, setActivePinia } from 'pinia';
-import { useHistoryStore } from './history-store';
-import { useEventTracker } from '../../composables/useEventTracker';
-import { useUiEditableLogoStore } from '@shared/logo-settings/store/editable-logo-store';
-import type { BrandPageModel } from '@brand-page';
-
-// Shared mock maker store — methods are vi.fn() so we can assert calls.
-const mockMakerStore = {
-  brandPageData: {
-    v: 1,
-    pages: [],
-    styles: {},
-  } as unknown as BrandPageModel,
-  isBrandPageLoaded: false,
-  applyHistorySnapshot: vi.fn(async () => undefined),
-  setIsBrandPageLoaded: vi.fn(),
-};
-
-const mockPageNavigationStore = {
-  activePageId: '',
-};
-
-vi.mock('../brandpage-maker/brandpage-maker-store', () => ({
-  useBrandPageMakerStore: vi.fn(() => mockMakerStore),
-}));
-
-vi.mock('../ai-thread/ai-website-builder-thread-store', () => ({
-  useAiWebsiteBuilderThreadStore: vi.fn(() => ({
-    isProcessing: false,
-  })),
-}));
-
-vi.mock('@shared/page-navigation/store/page-navigation-store', () => ({
-  usePageNavigationStore: vi.fn(() => mockPageNavigationStore),
-}));
-
-// Mutate the mock between captures so each capture produces a distinct
-// snapshot. The store now drops byte-identical captures (BP-5506: prevents
-// undo/redo steps that do nothing visible), so tests that previously relied
-// on capture-without-mutation lining up entries need to bump a field first.
-let mutationCounter = 0;
-
-function mutateMock(): void {
-  mutationCounter += 1;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (mockMakerStore.brandPageData as any).v = 1000 + mutationCounter;
-}
-
-function captureMutated(
-  store: ReturnType<typeof useHistoryStore>,
-  args: Parameters<typeof store.capture>[0] = {
-    source: 'manual_edit',
-    actor: 'user',
-  },
-) {
-  mutateMock();
-
-  return store.capture(args);
-}
-
-describe('history-store (single stack + JSON-string snapshots)', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-    mockMakerStore.applyHistorySnapshot.mockClear();
-    mutationCounter = 0;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (mockMakerStore.brandPageData as any).v = 1;
-    mockPageNavigationStore.activePageId = '';
-  });
-
-  it('captures baseline and initialises the pointer to 0', async () => {
-    const store = useHistoryStore();
-
-    expect(store.entries.length).toBe(0);
-    expect(store.currentIndex).toBe(-1);
-    expect(store.baselineCaptured).toBe(false);
-
-    await store.captureBaseline();
-
-    expect(store.baselineCaptured).toBe(true);
-    expect(store.entries.length).toBe(1);
-    expect(store.entries[0].label).toBe('baseline');
-    expect(store.currentIndex).toBe(0);
-  });
-
-  it('stores snapshots as JSON strings, not objects', async () => {
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-
-    const entry = store.entries[0];
-
-    expect(typeof entry.snapshot).toBe('string');
-    // Round-trips to the same model via JSON.parse.
-    expect(JSON.parse(entry.snapshot)).toMatchObject(
-      mockMakerStore.brandPageData,
-    );
-    // sizeBytes matches string length
-    expect(entry.sizeBytes).toBe(entry.snapshot.length);
-  });
-
-  it('does not capture baseline twice', async () => {
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-    const firstLength = store.entries.length;
-
-    await store.captureBaseline();
-
-    expect(store.entries.length).toBe(firstLength);
-  });
-
-  it('capture pushes a new entry and advances the pointer', async () => {
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-    captureMutated(store);
-
-    expect(store.entries.length).toBe(2);
-    expect(store.currentIndex).toBe(1);
-
-    captureMutated(store);
-
-    expect(store.entries.length).toBe(3);
-    expect(store.currentIndex).toBe(2);
-  });
-
-  it('capture truncates any redo tail (FR-11)', async () => {
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-    captureMutated(store); // index 1
-    captureMutated(store); // index 2
-    await store.undo(); // currentIndex = 1, entries still length 3
-    await store.undo(); // currentIndex = 0, entries still length 3
-
-    expect(store.entries.length).toBe(3);
-    expect(store.canRedo).toBe(true);
-
-    // New capture should truncate entries[1..] and replace with the new one.
-    captureMutated(store);
-
-    expect(store.entries.length).toBe(2); // baseline + new
-    expect(store.currentIndex).toBe(1);
-    expect(store.canRedo).toBe(false);
-  });
-
-  it('drops byte-identical captures so undo/redo never replays a no-op', async () => {
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-
-    // First capture mutates and lands.
-    const r1 = captureMutated(store);
-
-    expect(r1).toBe('committed');
-    expect(store.entries.length).toBe(2);
-
-    // Second capture without a mutation should be detected as a no-op
-    // and skipped — the stack stays at length 2.
-    const r2 = store.capture({ source: 'manual_edit', actor: 'user' });
-
-    expect(r2).toBe('noop');
-    expect(store.entries.length).toBe(2);
-    expect(store.currentIndex).toBe(1);
-  });
-
-  it('captures pre-purchase logo edits even when brandPageData is byte-identical', async () => {
-    // Pre-purchase logo-tab edits (text/color/font) live on
-    // `editableLogoStore.logoEdits` (sidecar) and the rendered base64 is
-    // stripped from snapshots to stay under the 25 MB cap. Two
-    // consecutive logo edits therefore produce identical snapshot bytes
-    // — without comparing the sidecar, every logo edit would dedup as
-    // a no-op and history would silently stop growing.
-    const editableLogoStore = useUiEditableLogoStore();
-
-    editableLogoStore.logoEdits.textObjects = [
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      { id: 't1', role: 'primary-text', text: 'Acme' } as any,
-    ];
-
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-    expect(store.entries.length).toBe(1);
-
-    // User changes the logo text — only the sidecar mutates. Snapshot
-    // bytes are identical (no brandPageData diff). Must still commit.
-    editableLogoStore.logoEdits.textObjects[0].text = 'AcmeCo';
-
-    const r = store.capture({ source: 'manual_edit', actor: 'user' });
-
-    expect(r).toBe('committed');
-    expect(store.entries.length).toBe(2);
-  });
-
-  // BP-5506 phantom-undo prevention via the `mergeNextMutation()` flag.
-  // Hydration write sites (TipTap mount, lazy paymentConfig fill,
-  // stale-page-ref clear) call this immediately before the imperative
-  // write they know is a hydration. The watcher's flush consumes the flag
-  // and folds the resulting snapshot into the current head entry instead
-  // of pushing a new one — so opening a sidebar or clicking a section
-  // doesn't grow the undo stack.
-  describe('mergeNextMutation flag (hydration writes fold into head)', () => {
-    // Internal constants from the watcher: BASELINE_SETTLE_MS and
-    // CAPTURE_DEBOUNCE_MS. Tests can't import them directly without
-    // exporting from the store; we use vi.useFakeTimers + advance past
-    // the debounce to drive the watcher's flush.
-    const CAPTURE_DEBOUNCE_MS = 1700;
-    const BASELINE_SETTLE_MS = 2000;
-
-    let liveData: Record<string, unknown>;
-
-    // Vue's deep watcher only fires on a reactive proxy. The shared mock
-    // is a plain object — for this group we swap in a `reactive()` proxy
-    // and mutate it directly so the watcher (installed on store baseline
-    // capture) sees the change.
-    beforeEach(() => {
-      vi.useFakeTimers();
-      liveData = reactive({ v: 1, pages: [], styles: {} });
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore as any).brandPageData = liveData;
-    });
-
-    afterEach(() => {
-      vi.useRealTimers();
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore as any).brandPageData = {
-        v: 1,
-        pages: [],
-        styles: {},
-      };
-    });
-
-    // Drive the watcher: flush Vue's reactive queue (so the watch
-    // callback runs and arms the timer), then advance past
-    // CAPTURE_DEBOUNCE_MS so the queued flush fires.
-    async function flushWatcher(): Promise<void> {
-      await Promise.resolve();
-      await vi.advanceTimersByTimeAsync(CAPTURE_DEBOUNCE_MS + 50);
-    }
-
-    async function elapseSettleWindow(): Promise<void> {
-      await vi.advanceTimersByTimeAsync(BASELINE_SETTLE_MS + 50);
-    }
-
-    it('mergeNextMutation folds the next watcher flush into the current head (no new entry)', async () => {
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-      await elapseSettleWindow();
-
-      // First real edit lands as a new entry.
-      liveData.v = 100;
-      await flushWatcher();
-
-      expect(store.entries.length).toBe(2);
-      expect(store.currentIndex).toBe(1);
-      const headBefore = store.entries[1].snapshot;
-
-      // Now a hydration site flags the next mutation as merge-into-head.
-      store.mergeNextMutation();
-      liveData.hydratedField = '<p>hydrated</p>';
-      await flushWatcher();
-
-      // No new entry — the head was replaced in place.
-      expect(store.entries.length).toBe(2);
-      expect(store.currentIndex).toBe(1);
-      expect(store.entries[1].snapshot).not.toBe(headBefore);
-      expect(JSON.parse(store.entries[1].snapshot).hydratedField).toBe(
-        '<p>hydrated</p>',
-      );
-    });
-
-    it('mergeNextMutation is one-shot — the flag clears after a single flush', async () => {
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-      await elapseSettleWindow();
-
-      // Land a real entry first so the head isn't the baseline (where
-      // the post-settle merge-into-baseline rule no longer applies but
-      // the merge branch is still doing its job).
-      liveData.v = 100;
-      await flushWatcher();
-
-      expect(store.entries.length).toBe(2);
-
-      // First post-baseline mutation: flagged as merge — folds into head.
-      store.mergeNextMutation();
-      liveData.v = 150;
-      await flushWatcher();
-
-      expect(store.entries.length).toBe(2);
-
-      // Second mutation: no flag — must push a new entry.
-      liveData.v = 200;
-      await flushWatcher();
-
-      expect(store.entries.length).toBe(3);
-      expect(store.currentIndex).toBe(2);
-    });
-
-    it('multiple mergeNextMutation calls in the same burst still produce only one merge', async () => {
-      // Idempotent flag — every editor on a page mounting at once calls
-      // it, but the watcher debounces all the mutations into a single
-      // flush, which consumes the flag once.
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-      await elapseSettleWindow();
-
-      // Three hydration writes from three editor mounts in the same tick.
-      store.mergeNextMutation();
-      liveData.a = '1';
-      store.mergeNextMutation();
-      liveData.b = '2';
-      store.mergeNextMutation();
-      liveData.c = '3';
-      await flushWatcher();
-
-      // All three writes folded into the same merge — still one entry.
-      expect(store.entries.length).toBe(1);
-      const merged = JSON.parse(store.entries[0].snapshot);
-
-      expect(merged.a).toBe('1');
-      expect(merged.b).toBe('2');
-      expect(merged.c).toBe('3');
-    });
-
-    it('a follow-up real edit after a merged hydration still pushes a new entry', async () => {
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-      await elapseSettleWindow();
-
-      // Land a real entry first.
-      liveData.v = 100;
-      await flushWatcher();
-
-      expect(store.entries.length).toBe(2);
-
-      // Hydration burst.
-      store.mergeNextMutation();
-      liveData.hydrated = 'yes';
-      await flushWatcher();
-
-      expect(store.entries.length).toBe(2);
-
-      // User makes a real edit — must push.
-      liveData.realEdit = 'yes';
-      await flushWatcher();
-
-      expect(store.entries.length).toBe(3);
-      expect(store.currentIndex).toBe(2);
-    });
-
-    it('drops a stale merge arm if no mutation follows in the same tick', async () => {
-      // Repro for the "first pre-purchase logo edit not captured" bug:
-      // a hydration site (e.g. ContentSettings.mounted on tab switch)
-      // armed the flag, but the user navigated away before the flagged
-      // write happened. A LATER unrelated mutation must NOT inherit
-      // the stale arm and merge — it must commit normally.
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-      await elapseSettleWindow();
-
-      // Land a real entry first.
-      liveData.v = 100;
-      await flushWatcher();
-
-      expect(store.entries.length).toBe(2);
-
-      // Hydration site arms the flag, but no mutation follows in the
-      // same tick — caller navigated away.
-      store.mergeNextMutation();
-      // Advance past the macrotask cleanup, no mutation in between.
-      await vi.advanceTimersByTimeAsync(10);
-
-      // Some time later, a real edit happens.
-      liveData.unrelated = 'edit';
-      await flushWatcher();
-
-      // Must push, not merge.
-      expect(store.entries.length).toBe(3);
-      expect(store.currentIndex).toBe(2);
-    });
-
-    it('clears any armed merge flag during snapshot apply (undo/redo)', async () => {
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-      await elapseSettleWindow();
-
-      // Land two real entries.
-      liveData.v = 100;
-      await flushWatcher();
-      liveData.v = 200;
-      await flushWatcher();
-
-      expect(store.entries.length).toBe(3);
-
-      // Hydration site arms the flag right before the user clicks Undo.
-      // The flag must NOT survive the apply — otherwise the post-apply
-      // watcher tick would silently fold the just-restored snapshot into
-      // entries[currentIndex.value], erasing the user's redo.
-      store.mergeNextMutation();
-      await store.undo();
-
-      // Drive any pending watcher tick.
-      liveData.postApply = 'edit';
-      await flushWatcher();
-
-      // The post-apply edit pushed a new entry — proves the merge flag
-      // was cleared, not consumed by the apply tick.
-      // (Pointer was at 1 after undo, post-apply edit pushes to 2, length 3.)
-      expect(store.entries.length).toBe(3);
-      expect(store.currentIndex).toBe(2);
-    });
-
-    it('reset() clears any armed merge flag', async () => {
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-      await elapseSettleWindow();
-
-      // Land a real entry first so reset has something to reset.
-      liveData.v = 100;
-      await flushWatcher();
-
-      store.mergeNextMutation();
-      store.reset();
-
-      // First real mutation after reset must push, not merge.
-      await elapseSettleWindow();
-      liveData.postReset = 'edit';
-      await flushWatcher();
-
-      expect(store.entries.length).toBe(2);
-    });
-  });
-
-  it('reentrancy guard: capture no-ops when isApplyingSnapshot is true', async () => {
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-    const initialLength = store.entries.length;
-
-    store.isApplyingSnapshot = true;
-    store.capture({ source: 'manual_edit', actor: 'user' });
-
-    expect(store.entries.length).toBe(initialLength);
-    store.isApplyingSnapshot = false;
-  });
-
-  it('canUndo requires currentIndex > 0', async () => {
-    const store = useHistoryStore();
-
-    expect(store.canUndo).toBe(false);
-
-    await store.captureBaseline();
-    expect(store.canUndo).toBe(false); // only baseline
-
-    captureMutated(store);
-    expect(store.canUndo).toBe(true);
-  });
-
-  it('canRedo requires currentIndex < entries.length - 1', async () => {
-    const store = useHistoryStore();
-
-    expect(store.canRedo).toBe(false);
-
-    await store.captureBaseline();
-    captureMutated(store);
-    expect(store.canRedo).toBe(false);
-
-    await store.undo();
-    expect(store.canRedo).toBe(true);
-  });
-
-  it('undo decrements pointer, keeps stack intact, calls applyHistorySnapshot', async () => {
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-    const baselineBrandPageData = JSON.parse(store.entries[0].snapshot);
-
-    captureMutated(store);
-
-    expect(store.currentIndex).toBe(1);
-    expect(store.entries.length).toBe(2);
-
-    await store.undo();
-
-    expect(store.currentIndex).toBe(0);
-    expect(store.entries.length).toBe(2); // stack is unchanged, pointer moved
-    expect(mockMakerStore.applyHistorySnapshot).toHaveBeenCalledTimes(1);
-    // Undo restores the baseline snapshot — the parsed BrandPageModel must
-    // round-trip back through applyHistorySnapshot. Second arg is the
-    // resolved activePageId (undefined here because no entry has one).
-    // Third arg is the captured logoEdits JSON sidecar.
-    expect(mockMakerStore.applyHistorySnapshot).toHaveBeenCalledWith(
-      expect.objectContaining(baselineBrandPageData),
-      undefined,
-      expect.any(String),
-    );
-  });
-
-  it('redo increments pointer, keeps stack intact, calls applyHistorySnapshot', async () => {
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-    captureMutated(store);
-    await store.undo();
-    mockMakerStore.applyHistorySnapshot.mockClear();
-
-    expect(store.currentIndex).toBe(0);
-    expect(store.canRedo).toBe(true);
-
-    await store.redo();
-
-    expect(store.currentIndex).toBe(1);
-    expect(store.entries.length).toBe(2);
-    expect(mockMakerStore.applyHistorySnapshot).toHaveBeenCalledTimes(1);
-  });
-
-  it('baseline invariant: undo refuses to go below index 0', async () => {
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-
-    expect(store.canUndo).toBe(false);
-    await store.undo();
-
-    expect(store.currentIndex).toBe(0);
-    expect(mockMakerStore.applyHistorySnapshot).not.toHaveBeenCalled();
-  });
-
-  it('getCurrentSizeBytes sums byte sizes across all entries', async () => {
-    const store = useHistoryStore();
-
-    expect(store.getCurrentSizeBytes()).toBe(0);
-
-    await store.captureBaseline();
-    const baselineSize = store.getCurrentSizeBytes();
-
-    expect(baselineSize).toBe(store.entries[0].sizeBytes);
-    expect(baselineSize).toBeGreaterThan(0);
-
-    captureMutated(store);
-    expect(store.getCurrentSizeBytes()).toBe(
-      store.entries[0].sizeBytes + store.entries[1].sizeBytes,
-    );
-  });
-
-  it('getCurrentEntryCount reflects the stack length', async () => {
-    const store = useHistoryStore();
-
-    expect(store.getCurrentEntryCount()).toBe(0);
-
-    await store.captureBaseline();
-    expect(store.getCurrentEntryCount()).toBe(1);
-
-    captureMutated(store);
-    expect(store.getCurrentEntryCount()).toBe(2);
-  });
-
-  // --- U1 finalize (FR-12 / FR-13 / FR-13c) ---
-
-  it('FR-12: caps the stack at 40 entries, dropping oldest non-baseline', async () => {
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-    const baselineSnapshot = store.entries[0].snapshot;
-
-    // Baseline + 50 edits — stack should cap at 40.
-    for (let i = 0; i < 50; i++) {
-      // Mutate the mock so each snapshot is distinguishable.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).v = i + 100;
-      store.capture({ source: 'manual_edit', actor: 'user' });
-    }
-
-    expect(store.entries.length).toBe(40);
-    // Baseline is preserved at index 0.
-    expect(store.entries[0].snapshot).toBe(baselineSnapshot);
-    // Pointer is at the new end.
-    expect(store.currentIndex).toBe(39);
-  });
-
-  it('FR-13c: skips oversize captures (> 25 MB) and leaves the stack alone', async () => {
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-    const lengthBefore = store.entries.length;
-
-    // Swap in a mock that produces a > 25 MB snapshot on serialize.
-    const originalData = mockMakerStore.brandPageData;
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (mockMakerStore as any).brandPageData = {
-      v: 1,
-      pages: [],
-      styles: {},
-      _padding: 'x'.repeat(26 * 1024 * 1024),
-    };
-
-    const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-    expect(result).toBe('oversized');
-    expect(store.entries.length).toBe(lengthBefore);
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (mockMakerStore as any).brandPageData = originalData;
-  });
-
-  it('FR-13: evicts oldest non-baseline when total memory exceeds 100 MB', async () => {
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-    const baselineSnapshot = store.entries[0].snapshot;
-
-    // Each capture is ~4 MB, under the 5 MB per-entry cap. Push 30
-    // of them — total would be ~120 MB, so memory eviction should kick in.
-    const originalData = mockMakerStore.brandPageData;
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (mockMakerStore as any).brandPageData = {
-      v: 1,
-      pages: [],
-      styles: {},
-      _padding: 'x'.repeat(4 * 1024 * 1024),
-    };
-
-    for (let i = 0; i < 30; i++) {
-      store.capture({ source: 'manual_edit', actor: 'user' });
-    }
-
-    expect(store.getCurrentSizeBytes()).toBeLessThanOrEqual(100 * 1024 * 1024);
-    // Baseline must survive memory eviction.
-    expect(store.entries[0].snapshot).toBe(baselineSnapshot);
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (mockMakerStore as any).brandPageData = originalData;
-  });
-
-  // --- U5 analytics ---
-
-  it('emits undo / redo events with entries_count + actor of the affected entry', async () => {
-    const received: { name: string; props: unknown }[] = [];
-
-    useEventTracker().subscribe((event) =>
-      received.push({ name: event.eventName, props: event.eventProps }),
-    );
-
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-    captureMutated(store, { source: 'ai_changeset', actor: 'ai_builder' });
-    await store.undo();
-    await store.redo();
-
-    const undoEvent = received.find((e) => e.name === 'website_maker_undo');
-    const redoEvent = received.find((e) => e.name === 'website_maker_redo');
-
-    expect(undoEvent).toBeDefined();
-    expect(redoEvent).toBeDefined();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((undoEvent!.props as any).entries_count).toBe(2);
-    // Undo reports the actor of the entry being undone — the ai_builder change.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((undoEvent!.props as any).actor).toBe('ai_builder');
-    // Redo reports the actor of the entry being re-applied — same ai_builder change.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((redoEvent!.props as any).actor).toBe('ai_builder');
-  });
-
-  it('emits oversized event when a capture exceeds 25 MB', async () => {
-    const received: { name: string; props: unknown }[] = [];
-
-    useEventTracker().subscribe((event) =>
-      received.push({ name: event.eventName, props: event.eventProps }),
-    );
-
-    const store = useHistoryStore();
-
-    await store.captureBaseline();
-
-    const originalData = mockMakerStore.brandPageData;
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (mockMakerStore as any).brandPageData = {
-      v: 1,
-      pages: [],
-      styles: {},
-      _padding: 'x'.repeat(26 * 1024 * 1024),
-    };
-
-    store.capture({ source: 'manual_edit', actor: 'user' });
-
-    const oversized = received.find(
-      (e) => e.name === 'website_maker_history_oversized',
-    );
-
-    expect(oversized).toBeDefined();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    expect((oversized!.props as any).attempted_bytes).toBeGreaterThan(
-      25 * 1024 * 1024,
-    );
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (mockMakerStore as any).brandPageData = originalData;
-  });
-
-  // --- BP-5506 (page-tab highlight + active-page tracking) ---
-
-  describe('activePageId capture and restore', () => {
-    it('captures the current activePageId on baseline', async () => {
-      mockPageNavigationStore.activePageId = 'page-home';
-
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-
-      expect(store.entries[0].activePageId).toBe('page-home');
-    });
-
-    it('captures the current activePageId on each force-commit', async () => {
-      mockPageNavigationStore.activePageId = 'page-home';
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-
-      mockPageNavigationStore.activePageId = 'page-2';
-      captureMutated(store);
-
-      expect(store.entries[1].activePageId).toBe('page-2');
-    });
-
-    it('passes the captured activePageId to applyHistorySnapshot when the page still exists', async () => {
-      mockPageNavigationStore.activePageId = 'page-home';
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        { id: 'page-home', contents: [] },
-      ];
-
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-
-      mockPageNavigationStore.activePageId = 'page-2';
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        { id: 'page-home', contents: [] },
-        { id: 'page-2', contents: [] },
-      ];
-      captureMutated(store);
-
-      mockMakerStore.applyHistorySnapshot.mockClear();
-      await store.undo();
-
-      // Baseline restored — its captured page was 'page-home', and that
-      // page exists in the restored snapshot, so it round-trips to apply.
-      expect(mockMakerStore.applyHistorySnapshot).toHaveBeenCalledWith(
-        expect.anything(),
-        'page-home',
-        expect.any(String),
-      );
-    });
-
-    it('walks back when the captured activePageId no longer exists in the restored snapshot (page-add undo)', async () => {
-      // Baseline: only page-home, user is on page-home.
-      mockPageNavigationStore.activePageId = 'page-home';
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        { id: 'page-home', contents: [] },
-      ];
-
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-
-      // User adds a new page. Snapshot now has both pages, user is on the
-      // new page.
-      mockPageNavigationStore.activePageId = 'page-new';
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        { id: 'page-home', contents: [] },
-        { id: 'page-new', contents: [] },
-      ];
-      captureMutated(store);
-
-      mockMakerStore.applyHistorySnapshot.mockClear();
-      await store.undo();
-
-      // Baseline only has 'page-home'. The entry being applied has
-      // activePageId='page-home', so we resolve to that.
-      expect(mockMakerStore.applyHistorySnapshot).toHaveBeenCalledWith(
-        expect.anything(),
-        'page-home',
-        expect.any(String),
-      );
-    });
-
-    it('navigates to the restored page when undoing a delete (page present in target but not source)', async () => {
-      // Baseline: home + about, user is on about (the page that will be deleted).
-      mockPageNavigationStore.activePageId = 'page-about';
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        { id: 'page-home', contents: [] },
-        { id: 'page-about', contents: [] },
-      ];
-
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-
-      // User deletes about. The delete handler navigates them to home,
-      // then captures. Snapshot has only home; activePageId on the entry
-      // is page-home (not page-about — the user was already off it by
-      // the time the watcher fired).
-      mockPageNavigationStore.activePageId = 'page-home';
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        { id: 'page-home', contents: [] },
-      ];
-      captureMutated(store);
-
-      mockMakerStore.applyHistorySnapshot.mockClear();
-      await store.undo();
-
-      // Diff resolution: target snapshot (baseline) has page-about,
-      // source snapshot (post-delete entry 1) does not. So page-about
-      // is being restored — navigate there. Without diff resolution
-      // the walk-back would land on page-home (the activePageId on
-      // entry 1 and entry 0 both happen to be page-home in this
-      // scenario), leaving the user staring at home after un-deleting
-      // about.
-      expect(mockMakerStore.applyHistorySnapshot).toHaveBeenCalledWith(
-        expect.anything(),
-        'page-about',
-        expect.any(String),
-      );
-    });
-
-    it('navigates to the newly-added page when redoing an add (page present in target but not source)', async () => {
-      // Baseline: only home.
-      mockPageNavigationStore.activePageId = 'page-home';
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        { id: 'page-home', contents: [] },
-      ];
-
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-
-      // User adds page-new and is navigated there.
-      mockPageNavigationStore.activePageId = 'page-new';
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        { id: 'page-home', contents: [] },
-        { id: 'page-new', contents: [] },
-      ];
-      captureMutated(store);
-
-      // Undo the add — back to baseline.
-      await store.undo();
-
-      // Redo the add. Source (baseline) has only home; target (entry 1)
-      // has both home and new. The diff identifies page-new as the
-      // page being restored by this transition — navigate there.
-      mockMakerStore.applyHistorySnapshot.mockClear();
-      await store.redo();
-
-      expect(mockMakerStore.applyHistorySnapshot).toHaveBeenCalledWith(
-        expect.anything(),
-        'page-new',
-        expect.any(String),
-      );
-    });
-
-    it('falls through to undefined when no entry walking back has a viable id', async () => {
-      // Baseline page exists, captured id was 'page-home'.
-      mockPageNavigationStore.activePageId = 'page-home';
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        { id: 'page-home', contents: [] },
-      ];
-
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-
-      // Snapshot contains a totally different page (e.g. template switch
-      // replaced everything) and the user is on its new page.
-      mockPageNavigationStore.activePageId = 'page-x';
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        { id: 'page-x', contents: [] },
-      ];
-      captureMutated(store);
-
-      mockMakerStore.applyHistorySnapshot.mockClear();
-      await store.undo();
-
-      // Baseline restored — its activePageId 'page-home' exists in its own
-      // snapshot, so resolution finds it on the first walk-back hop.
-      expect(mockMakerStore.applyHistorySnapshot).toHaveBeenCalledWith(
-        expect.anything(),
-        'page-home',
-        expect.any(String),
-      );
-
-      // Now redo. Pointer moves forward to entry 1 (page-x captured),
-      // page-x exists in entry-1's snapshot, so resolves to 'page-x'.
-      mockMakerStore.applyHistorySnapshot.mockClear();
-      await store.redo();
-      expect(mockMakerStore.applyHistorySnapshot).toHaveBeenCalledWith(
-        expect.anything(),
-        'page-x',
-        expect.any(String),
-      );
-    });
-  });
-
-  describe('reset()', () => {
-    it('clears entries and re-baselines against the current state', async () => {
-      mockPageNavigationStore.activePageId = 'page-home';
-
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-      captureMutated(store);
-      captureMutated(store);
-
-      expect(store.entries.length).toBe(3);
-
-      // Mutate the mock so the new baseline reflects the just-saved state.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).v = 9999;
-
-      store.reset();
-
-      expect(store.entries.length).toBe(1);
-      expect(store.currentIndex).toBe(0);
-      expect(store.baselineCaptured).toBe(true);
-      expect(JSON.parse(store.entries[0].snapshot).v).toBe(9999);
-      expect(store.canUndo).toBe(false);
-      expect(store.canRedo).toBe(false);
-    });
-
-    it('captures activePageId on the new baseline after reset', async () => {
-      mockPageNavigationStore.activePageId = 'page-home';
-
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-      captureMutated(store);
-
-      mockPageNavigationStore.activePageId = 'page-2';
-      store.reset();
-
-      expect(store.entries[0].activePageId).toBe('page-2');
-    });
-
-    it('no-ops when no baseline has ever been captured (unflagged session)', () => {
-      // Simulates a session where the undo/redo feature flag is off, so
-      // captureBaseline is never called. saveBrandPage calls reset()
-      // unconditionally — it must not install the watcher or capture a
-      // baseline as a side effect, otherwise unflagged sessions start
-      // accumulating snapshots in memory.
-      const store = useHistoryStore();
-
-      expect(store.baselineCaptured).toBe(false);
-      expect(store.entries.length).toBe(0);
-
-      store.reset();
-
-      expect(store.baselineCaptured).toBe(false);
-      expect(store.entries.length).toBe(0);
-      expect(store.currentIndex).toBe(-1);
-    });
-  });
-
-  // BP-5506 follow-up: pre-purchase logo-tab edits (template switch, logo
-  // colors, logo text, support text) author through `editableLogoStore.logoEdits`,
-  // a sidecar that's NOT in `brandPageData`. The history entry carries a
-  // `logoEdits` JSON sidecar — captured at the same instant as the snapshot,
-  // applied on undo via `_syncLogoSettingsFromSnapshot`. Without this,
-  // save-after-undo would re-derive metadata from the post-edit `logoEdits`
-  // and silently reapply the change the user undid.
-  describe('logoEdits sidecar capture', () => {
-    it('stashes editableLogoStore.logoEdits as a JSON string on baseline', async () => {
-      const editableLogoStore = useUiEditableLogoStore();
-
-      editableLogoStore.logoEdits.textObjects = [
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        {
-          id: 't1',
-          role: 'primary-text',
-          text: 'Acme',
-          textEnabled: true,
-        } as any,
-      ];
-
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-
-      const stashed = store.entries[0].logoEdits;
-
-      expect(typeof stashed).toBe('string');
-
-      const parsed = JSON.parse(stashed!);
-
-      expect(parsed.textObjects).toEqual([
-        { id: 't1', role: 'primary-text', text: 'Acme', textEnabled: true },
-      ]);
-    });
-
-    it('captures distinct logoEdits per entry as the user edits', async () => {
-      const editableLogoStore = useUiEditableLogoStore();
-
-      editableLogoStore.logoEdits.textObjects = [
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        {
-          id: 't1',
-          role: 'primary-text',
-          text: 'Acme',
-          textEnabled: true,
-        } as any,
-      ];
-
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-
-      // User types into the logo-text input — `logoEdits.textObjects[0].text`
-      // mutates and `updateEditableLogoImageUrlAsync` writes new base64 into
-      // brandPageData. The base64 mutation is what triggers the watcher; we
-      // simulate by also bumping `v` so the snapshot bytes change.
-      editableLogoStore.logoEdits.textObjects[0].text = 'AcmeCo';
-      captureMutated(store);
-
-      const baselineLogoEdits = JSON.parse(store.entries[0].logoEdits!);
-      const editLogoEdits = JSON.parse(store.entries[1].logoEdits!);
-
-      expect(baselineLogoEdits.textObjects[0].text).toBe('Acme');
-      expect(editLogoEdits.textObjects[0].text).toBe('AcmeCo');
-    });
-
-    it('forwards captured logoEdits to applyHistorySnapshot on undo', async () => {
-      const editableLogoStore = useUiEditableLogoStore();
-
-      editableLogoStore.logoEdits.textObjects = [
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        {
-          id: 't1',
-          role: 'primary-text',
-          text: 'Acme',
-          textEnabled: true,
-        } as any,
-      ];
-
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-
-      editableLogoStore.logoEdits.textObjects[0].text = 'AcmeCo';
-      captureMutated(store);
-
-      mockMakerStore.applyHistorySnapshot.mockClear();
-      await store.undo();
-
-      // Third arg is the entry's `logoEdits` — undo should hand the
-      // baseline's pre-edit blob back to the maker store.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const callArgs = mockMakerStore.applyHistorySnapshot.mock
-        .calls[0] as any[];
-      const passedLogoEdits = JSON.parse(callArgs[2]);
-
-      expect(passedLogoEdits.textObjects[0].text).toBe('Acme');
-    });
-
-    it('forwards the post-edit logoEdits on redo', async () => {
-      const editableLogoStore = useUiEditableLogoStore();
-
-      editableLogoStore.logoEdits.textObjects = [
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        {
-          id: 't1',
-          role: 'primary-text',
-          text: 'Acme',
-          textEnabled: true,
-        } as any,
-      ];
-
-      const store = useHistoryStore();
-
-      await store.captureBaseline();
-
-      editableLogoStore.logoEdits.textObjects[0].text = 'AcmeCo';
-      captureMutated(store);
-
-      await store.undo();
-      mockMakerStore.applyHistorySnapshot.mockClear();
-      await store.redo();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const callArgs = mockMakerStore.applyHistorySnapshot.mock
-        .calls[0] as any[];
-      const passedLogoEdits = JSON.parse(callArgs[2]);
-
-      expect(passedLogoEdits.textObjects[0].text).toBe('AcmeCo');
-    });
-  });
-});