@designcrowd/library.brand-page 5.17.25-undo-21 → 5.17.25

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

@@ -1,1246 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { createPinia, setActivePinia } from 'pinia';
-import { useHistoryStore } from './history-store';
-import { useEventTracker } from '../../composables/useEventTracker';
-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);
-  });
-
-  // BP-5506 phantom-undo dedup: opening a content settings panel can
-  // mutate `brandPageData` in ways the user can't see (RTE empty-paragraph
-  // init, lazy textStyle hydration, isModifiedAfterTemplateApplied flip).
-  // The dedup gate normalizes these out so capture returns 'noop'.
-  describe('phantom-edit dedup (sidebar-open cascades)', () => {
-    it('treats RTE empty-paragraph init as a no-op', async () => {
-      const store = useHistoryStore();
-
-      // Baseline has description = "" (cold start).
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        {
-          contents: [{ type: 'contact-form', description: '' }],
-        },
-      ];
-      await store.captureBaseline();
-
-      // Sidebar open writes back TipTap's empty-paragraph default.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages[0].contents[0].description =
-        '<p style="text-align: center;"></p>';
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('noop');
-      expect(store.entries.length).toBe(1);
-    });
-
-    it('treats lazy textStyle hydration of every resolver-written key as a no-op', async () => {
-      const store = useHistoryStore();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        {
-          contents: [
-            {
-              type: 'contact-form',
-              titleStyle: { textStyleType: 'titles' },
-              descriptionStyle: { textStyleType: 'paragraphs' },
-            },
-          ],
-        },
-      ];
-      await store.captureBaseline();
-
-      // Settings panel — or canvas section selection — resolves
-      // textStyleType into the full set of resolver-written fields. The
-      // dedup keeps `textStyleType` (the authoring intent) and drops
-      // every resolved key, regardless of which exact keys it was.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const cf = (mockMakerStore.brandPageData as any).pages[0].contents[0];
-
-      cf.titleStyle.fontSize = '2.25em';
-      cf.titleStyle.fontFamily = 'Gloock';
-      cf.titleStyle.fontWeight = 'bold';
-      cf.titleStyle.fontStyle = 'italic';
-      cf.titleStyle.letterSpacing = '0';
-      cf.titleStyle.lineHeight = '1.3';
-      cf.titleStyle.color = 'rgb(255, 253, 233)';
-      cf.titleStyle.textDecoration = 'underline';
-      cf.descriptionStyle.fontSize = '1em';
-      cf.descriptionStyle.fontFamily = 'Lato';
-      cf.descriptionStyle.fontWeight = 'normal';
-      cf.descriptionStyle.letterSpacing = '0';
-      cf.descriptionStyle.lineHeight = '1.5';
-      cf.descriptionStyle.color = 'rgb(0, 0, 0)';
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('noop');
-      expect(store.entries.length).toBe(1);
-    });
-
-    it('preserves textAlign on a hydrated *Style as user authoring intent', async () => {
-      // textAlign is the user's per-instance alignment override — the
-      // resolver carries it through unchanged, so it must NOT be dropped.
-      const store = useHistoryStore();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        {
-          contents: [
-            {
-              type: 'banner',
-              titleStyle: { textStyleType: 'titles', textAlign: 'left' },
-            },
-          ],
-        },
-      ];
-      await store.captureBaseline();
-
-      // User changes alignment from left to center — that's a real edit
-      // even though every other field is a hydration shape.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const banner = (mockMakerStore.brandPageData as any).pages[0].contents[0];
-
-      banner.titleStyle.textAlign = 'center';
-      banner.titleStyle.fontSize = '2.25em';
-      banner.titleStyle.fontFamily = 'Gloock';
-      banner.titleStyle.lineHeight = '1.3';
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('committed');
-      expect(store.entries.length).toBe(2);
-    });
-
-    it('still commits per-content style overrides (no textStyleType)', async () => {
-      // When the user edits a style via the inline RTE toolbar,
-      // `useRichTextEditor.ts` clears `textStyleType` (sets it to undefined)
-      // and writes the full set of fields directly to the per-content
-      // *Style. Those fields ARE the user's authoring intent, so they
-      // must be preserved by the dedup.
-      const store = useHistoryStore();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        {
-          contents: [
-            {
-              type: 'banner',
-              titleStyle: { fontSize: '2.25em', fontFamily: 'Gloock' },
-            },
-          ],
-        },
-      ];
-      await store.captureBaseline();
-
-      // User bumps the font size — no textStyleType in the snapshot, so
-      // the field is treated as a real edit.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (
-        mockMakerStore.brandPageData as any
-      ).pages[0].contents[0].titleStyle.fontSize = '5em';
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('committed');
-      expect(store.entries.length).toBe(2);
-    });
-
-    // BP-5506 follow-up: editing logo text via the Logo sidebar mutates
-    // `editableLogoStore.logoEdits` (not in brandPageData), then re-renders
-    // the result into `logoImageBase64Url` on every header/footer +
-    // per-page logo content. If history captured that base64, undo would
-    // revert the canvas without touching the sidebar input — the user
-    // sees the canvas snap back but the sidebar still shows their typed
-    // value. V1 excludes logo property edits from undo, so dedup must
-    // collapse base64-only diffs.
-    it('treats isolated logoImageBase64Url changes as a no-op', async () => {
-      const store = useHistoryStore();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pageHeaderDesktop = {
-        logoImageBase64Url: 'data:image/png;base64,AAAA',
-      };
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pageHeaderMobile = {
-        logoImageBase64Url: 'data:image/png;base64,AAAA',
-      };
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pageFooterDesktop = {
-        logoImageBase64Url: 'data:image/png;base64,AAAA',
-      };
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pageFooterMobile = {
-        logoImageBase64Url: 'data:image/png;base64,AAAA',
-      };
-      await store.captureBaseline();
-
-      // Logo text/font/color edit re-renders all four base64 fields.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const data = mockMakerStore.brandPageData as any;
-
-      data.pageHeaderDesktop.logoImageBase64Url = 'data:image/png;base64,BBBB';
-      data.pageHeaderMobile.logoImageBase64Url = 'data:image/png;base64,BBBB';
-      data.pageFooterDesktop.logoImageBase64Url = 'data:image/png;base64,BBBB';
-      data.pageFooterMobile.logoImageBase64Url = 'data:image/png;base64,BBBB';
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('noop');
-      expect(store.entries.length).toBe(1);
-    });
-
-    // BYO-upload undo MUST still work — that diff is in
-    // `logoImage.logoDraftToken`, not `logoImageBase64Url`. Stripping the
-    // base64 must not collapse a draft-token change.
-    it('still commits when logoImage.logoDraftToken changes (BYO upload)', async () => {
-      const store = useHistoryStore();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pageHeaderDesktop = {
-        logoImage: { logoDraftToken: 'token-original', logoVariation: 0 },
-        logoImageBase64Url: 'data:image/png;base64,AAAA',
-      };
-      await store.captureBaseline();
-
-      // BYO upload swaps both the draft token AND the base64.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const header = (mockMakerStore.brandPageData as any).pageHeaderDesktop;
-
-      header.logoImage.logoDraftToken = 'token-uploaded';
-      header.logoImageBase64Url = 'data:image/png;base64,BBBB';
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('committed');
-      expect(store.entries.length).toBe(2);
-    });
-
-    it('treats isModifiedAfterTemplateApplied flip as a no-op', async () => {
-      const store = useHistoryStore();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).isModifiedAfterTemplateApplied =
-        false;
-      await store.captureBaseline();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).isModifiedAfterTemplateApplied =
-        true;
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('noop');
-      expect(store.entries.length).toBe(1);
-    });
-
-    it('treats RTE empty-paragraph init as a no-op when the prior key was absent', async () => {
-      const store = useHistoryStore();
-
-      // Baseline content has NO `description` key at all (the cold-start
-      // shape for sections like testimonial-section before any editor
-      // mounts). JSON.stringify drops `undefined`, so the captured snapshot
-      // simply lacks the key.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        {
-          contents: [{ type: 'testimonial-section', title: 'A' }],
-        },
-      ];
-      await store.captureBaseline();
-
-      // Sidebar open writes back TipTap's empty-paragraph default, creating
-      // the key that was previously absent.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages[0].contents[0].description =
-        '<p style="text-align: center;"></p>';
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('noop');
-      expect(store.entries.length).toBe(1);
-    });
-
-    it('treats RTE default-hydration wrapper around plain text as a no-op', async () => {
-      const store = useHistoryStore();
-
-      // Cold-start: titles/descriptions are plain strings (no <p> wrapper).
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        {
-          contents: [
-            {
-              type: 'banner',
-              title: 'Makeup Artist ✦ Eleanor Reeves',
-              description: 'Creating Flawless Looks',
-            },
-            {
-              type: 'about-section',
-              title: 'Passionate About Makeup',
-              paragraph:
-                'Makeup is my art form, and I believe that everyone deserves to feel confident.',
-            },
-          ],
-        },
-      ];
-      await store.captureBaseline();
-
-      // Opening any content sidebar mounts every RTE editor on the page; each
-      // one writes back its plain-text input wrapped in TipTap's default
-      // <p>/<span>/<mark> hydration HTML. Same visible text, no real edit.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const banner = (mockMakerStore.brandPageData as any).pages[0].contents[0];
-
-      banner.title =
-        '<p style="text-align: center;"><span style="font-family: Belleza; font-size: 1.5625em; letter-spacing: 0.02em; line-height: 1.5; color: rgb(209, 128, 47);"><mark data-color="#fffde9" style="background-color: rgb(255, 253, 233); color: inherit;">Makeup Artist ✦ Eleanor Reeves</mark></span></p>';
-      banner.description =
-        '<p style="text-align: center;"><span style="font-family: Gloock; font-size: 4.6875em; letter-spacing: 0.05em; line-height: 1.4; color: rgb(209, 128, 47);"><mark data-color="#fffde9" style="background-color: rgb(255, 253, 233); color: inherit;">Creating Flawless Looks</mark></span></p>';
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const about = (mockMakerStore.brandPageData as any).pages[0].contents[1];
-
-      about.title =
-        '<p style="text-align: left;"><span style="font-family: Gloock; font-size: 3.125em; letter-spacing: 0.05em; line-height: 1.3; color: rgb(255, 253, 233);">Passionate About Makeup</span></p>';
-      about.paragraph =
-        '<p style="text-align: left;"><span style="font-family: Belleza; font-size: 1.375em; letter-spacing: 0px; line-height: 1.5; color: rgb(255, 253, 233);">Makeup is my art form, and I believe that everyone deserves to feel confident.</span></p>';
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('noop');
-      expect(store.entries.length).toBe(1);
-    });
-
-    it('treats bare <p>plain text</p> hydration as a no-op', async () => {
-      const store = useHistoryStore();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        {
-          contents: [
-            {
-              type: 'contact-form',
-              successMessage:
-                "Thank you! We'll get in touch with you as soon as possible.",
-            },
-          ],
-        },
-      ];
-      await store.captureBaseline();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (
-        mockMakerStore.brandPageData as any
-      ).pages[0].contents[0].successMessage =
-        "<p>Thank you! We'll get in touch with you as soon as possible.</p>";
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('noop');
-      expect(store.entries.length).toBe(1);
-    });
-
-    it('still commits when RTE content has partial-text inline formatting', async () => {
-      // Partial bold (`Hello <strong>world</strong>`) is a real edit — only
-      // *part* of the text is bold, which can't be expressed via the global
-      // textStyle. The dedup must NOT collapse this.
-      const store = useHistoryStore();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        {
-          contents: [
-            {
-              type: 'banner',
-              title: 'Hello world',
-            },
-          ],
-        },
-      ];
-      await store.captureBaseline();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages[0].contents[0].title =
-        '<p>Hello <strong>world</strong></p>';
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('committed');
-      expect(store.entries.length).toBe(2);
-    });
-
-    // BP-5506 follow-up: TipTap re-emits a whole-content <strong>/<em>/<u>/<s>
-    // wrapper on first hydration to mirror the textStyle's fontWeight /
-    // fontStyle / textDecoration. The whole-content case is hydration noise
-    // (textStyle already encodes it), so it must dedup. The earlier RTE
-    // canonicalizer rejected anything containing `<` or `>` inside the inner
-    // text, so this case slipped through and produced phantom undo entries
-    // when the user clicked any content section that had bolded text.
-    it('treats whole-content <strong>/<em>/<u>/<s> hydration wrappers as a no-op', async () => {
-      const store = useHistoryStore();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        {
-          contents: [
-            {
-              type: 'shapes-section',
-              textItems: [
-                { text: 'This test is for text' },
-                { text: 'Italic line' },
-                { text: 'Underline line' },
-                { text: 'Strikethrough line' },
-                { text: 'Bold italic combo' },
-              ],
-            },
-          ],
-        },
-      ];
-      await store.captureBaseline();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const items = (mockMakerStore.brandPageData as any).pages[0].contents[0]
-        .textItems;
-
-      // Each item gets hydrated to its TipTap default-shape with a
-      // whole-content format tag mirroring the textStyle.
-      items[0].text =
-        '<p style="text-align: left;"><span style="font-family: Lemonada; font-size: 1.875em;"><strong>This test is for text</strong></span></p>';
-      items[1].text =
-        '<p><span style="font-family: Lato;"><em>Italic line</em></span></p>';
-      items[2].text = '<p><u>Underline line</u></p>';
-      items[3].text = '<p><s>Strikethrough line</s></p>';
-      items[4].text = '<p><em><strong>Bold italic combo</strong></em></p>';
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('noop');
-      expect(store.entries.length).toBe(1);
-    });
-
-    // Anything beyond the hydration whitelist must NOT be collapsed.
-    // <a> is the canonical case — a TipTap-rendered link is real authoring
-    // intent and must survive dedup.
-    it('still commits when RTE content adds a link (real authoring intent)', async () => {
-      const store = useHistoryStore();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        {
-          contents: [{ type: 'banner', title: 'click here' }],
-        },
-      ];
-      await store.captureBaseline();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages[0].contents[0].title =
-        '<p>click <a href="https://example.com">here</a></p>';
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('committed');
-      expect(store.entries.length).toBe(2);
-    });
-
-    // A <span> carrying a style property outside the hydration whitelist
-    // (e.g. `text-shadow`, `text-transform`) is a real edit. TipTap's
-    // hydration span only emits `font-family / font-size / letter-spacing /
-    // line-height / color / background-color`.
-    it('still commits when RTE content adds a non-hydration style property', async () => {
-      const store = useHistoryStore();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        {
-          contents: [{ type: 'banner', title: 'shadowed' }],
-        },
-      ];
-      await store.captureBaseline();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages[0].contents[0].title =
-        '<p><span style="text-shadow: 1px 1px 2px black;">shadowed</span></p>';
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('committed');
-      expect(store.entries.length).toBe(2);
-    });
-
-    it('treats canvas section-click cascade as a no-op (BP-5506 repro)', async () => {
-      // Captured live from UAT: clicking any section on the canvas mounts
-      // every RTE editor on the page at once + resolves textStyleType for
-      // the section's style objects + flips isModifiedAfterTemplateApplied.
-      // None of that is a user-visible edit, so dedup must collapse it.
-      const store = useHistoryStore();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).isModifiedAfterTemplateApplied =
-        false;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        {
-          contents: [
-            {
-              type: 'banner',
-              title: 'Makeup Artist ✦ Eleanor Reeves',
-              description: 'Creating Flawless Looks',
-            },
-            {
-              type: 'text-media-section',
-              title: 'My Specialties',
-              description: '',
-              descriptionStyle: { textStyleType: 'paragraphs' },
-            },
-          ],
-        },
-      ];
-      await store.captureBaseline();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const data = mockMakerStore.brandPageData as any;
-      const banner = data.pages[0].contents[0];
-      const tms = data.pages[0].contents[1];
-
-      banner.title =
-        '<p style="text-align: center;"><span style="font-family: Belleza;"><mark data-color="#fffde9">Makeup Artist ✦ Eleanor Reeves</mark></span></p>';
-      banner.description =
-        '<p style="text-align: center;"><span style="font-family: Gloock;"><mark>Creating Flawless Looks</mark></span></p>';
-      tms.title =
-        '<p style="text-align: center;"><span style="font-family: Gloock;">My Specialties</span></p>';
-      tms.description = '<p style="text-align: center;"></p>';
-      tms.descriptionStyle.fontSize = '1em';
-      tms.descriptionStyle.fontFamily = 'Lato';
-      tms.descriptionStyle.lineHeight = '1.5';
-      tms.descriptionStyle.letterSpacing = '0';
-      data.isModifiedAfterTemplateApplied = true;
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('noop');
-      expect(store.entries.length).toBe(1);
-    });
-
-    it('still commits when a real edit accompanies a phantom field', async () => {
-      const store = useHistoryStore();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (mockMakerStore.brandPageData as any).pages = [
-        {
-          contents: [
-            {
-              type: 'contact-form',
-              buttonText: 'Send',
-              description: '',
-            },
-          ],
-        },
-      ];
-      await store.captureBaseline();
-
-      // Real edit + phantom together — must commit.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const cf = (mockMakerStore.brandPageData as any).pages[0].contents[0];
-
-      cf.buttonText = 'Submit';
-      cf.description = '<p style="text-align: center;"></p>';
-
-      const result = store.capture({ source: 'manual_edit', actor: 'user' });
-
-      expect(result).toBe('committed');
-      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).
-    expect(mockMakerStore.applyHistorySnapshot).toHaveBeenCalledWith(
-      expect.objectContaining(baselineBrandPageData),
-      undefined,
-    );
-  });
-
-  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',
-      );
-    });
-
-    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',
-      );
-    });
-
-    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',
-      );
-    });
-
-    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',
-      );
-    });
-
-    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',
-      );
-
-      // 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',
-      );
-    });
-  });
-
-  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);
-    });
-  });
-});