@designcrowd/library.brand-page 6.0.6-undo-5 → 6.0.6-undo-7

package/lib/src/shared/content-settings/store/content-settings-store.js

@@ -14,6 +14,17 @@ const DEFAULT_TEXT_COLOR_DEPENDENT_TYPES = [
     'profile',
     'text',
 ];
+/**
+ * True when the incoming value is byte-identical (as JSON, matching how
+ * history snapshots the model) to what the model already holds. Such
+ * re-writes must be dropped whole: the assignment would be a reactive
+ * no-op, but onContentChanged() still flips isModifiedAfterTemplateApplied
+ * — and when that flag was false, its flip is itself a model mutation, so
+ * undo history commits an entry in which nothing user-visible changed
+ * (phantom undo state, BP-5772: re-clicking the logo panel's Upload/Logo
+ * option, re-clicking an already-active display style).
+ */
+const isSameValue = (a, b) => a === b || JSON.stringify(a) === JSON.stringify(b);
 export const CONTENT_SETTINGS_MODES = {
     edit: 'edit',
     add: 'add',
@@ -211,6 +222,9 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             if (!item) {
                 return;
             }
+            if (isSameValue(item.settings.content[payload.name], payload.value)) {
+                return; // no-op write: don't validate, don't flip the modified flag
+            }
             // Hydration write-backs (RTE canonical HTML on mount, lazy config
             // hydration, stale-id clears) fold into the current undo head instead
             // of pushing an entry. Arming here — same tick as the write — is what
@@ -232,6 +246,9 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             if (!item) {
                 return;
             }
+            if (Object.keys(value ?? {}).every((k) => isSameValue(item.settings.content[k], value[k]))) {
+                return; // every field a no-op — see isSameValue
+            }
             // Same hydration-write contract as updateItemValue.
             if (isHydrationWrite) {
                 useHistoryStore().mergeNextMutation();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.0.6-undo-5",
+  "version": "6.0.6-undo-7",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page-maker/components/quick-link-bar/RedoButton.vue

@@ -39,17 +39,25 @@ import { Icon, Tooltip } from '@designcrowd/fe-shared-lib';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { useAiWebsiteBuilderThreadStore } from '@brand-page-maker/stores/ai-thread/ai-website-builder-thread-store';
 import { useBrandPageContainerStore } from '@brand-page-maker/stores/brandpage-container';
+import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 
 const historyStore = useHistoryStore();
 const aiThreadStore = useAiWebsiteBuilderThreadStore();
 const containerStore = useBrandPageContainerStore();
+const templateSettingsStore = useUiTemplateSettingsStore();
 
 const isDisabled = computed(
   () =>
     !historyStore.canRedo ||
     aiThreadStore.isProcessing ||
-    containerStore.isSaving,
+    containerStore.isSaving ||
+    // Locked while a restore is applying (the apply awaits the designed-logo
+    // re-render) or the template previews are refetching: re-entering
+    // mid-regeneration overlapped two reloads and left the sidebar keyed to
+    // the wrong logo (fast undo→redo desync).
+    historyStore.isApplyingSnapshot ||
+    templateSettingsStore.isBusy,
 );
 
 const onClick = () => {

package/src/brand-page-maker/components/quick-link-bar/UndoButton.vue

@@ -39,17 +39,25 @@ import { Icon, Tooltip } from '@designcrowd/fe-shared-lib';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { useAiWebsiteBuilderThreadStore } from '@brand-page-maker/stores/ai-thread/ai-website-builder-thread-store';
 import { useBrandPageContainerStore } from '@brand-page-maker/stores/brandpage-container';
+import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 
 const historyStore = useHistoryStore();
 const aiThreadStore = useAiWebsiteBuilderThreadStore();
 const containerStore = useBrandPageContainerStore();
+const templateSettingsStore = useUiTemplateSettingsStore();
 
 const isDisabled = computed(
   () =>
     !historyStore.canUndo ||
     aiThreadStore.isProcessing ||
-    containerStore.isSaving,
+    containerStore.isSaving ||
+    // Locked while a restore is applying (the apply awaits the designed-logo
+    // re-render) or the template previews are refetching: re-entering
+    // mid-regeneration overlapped two reloads and left the sidebar keyed to
+    // the wrong logo (fast undo→redo desync).
+    historyStore.isApplyingSnapshot ||
+    templateSettingsStore.isBusy,
 );
 
 const onClick = () => {

package/src/brand-page-maker/components/quick-link-bar/undo-redo-buttons.test.ts

@@ -6,8 +6,10 @@ import RedoButton from './RedoButton.vue';
 
 // These tests cover the click-dispatch contract for the undo/redo buttons:
 //   - Click → historyStore.undo()/redo() ONLY when enabled.
-//   - Disabled when any of three guards is true: canUndo/canRedo,
-//     aiThread.isProcessing, container.isSaving.
+//   - Disabled when any of five guards is true: canUndo/canRedo,
+//     aiThread.isProcessing, container.isSaving, history.isApplyingSnapshot
+//     (a restore is applying — spans the awaited logo re-render), or
+//     templateSettings.isBusy (template previews are refetching).
 //
 // Markup, class names, and i18n strings are intentionally not asserted —
 // they're covered by e2e tests and the data-component / data-test-*
@@ -34,6 +36,7 @@ vi.mock('@designcrowd/fe-shared-lib', () => ({
 const historyStoreMock = {
   canUndo: true,
   canRedo: true,
+  isApplyingSnapshot: false,
   undo: vi.fn(),
   redo: vi.fn(),
 };
@@ -57,14 +60,22 @@ vi.mock('@brand-page-maker/stores/brandpage-container', () => ({
   useBrandPageContainerStore: vi.fn(() => containerStoreMock),
 }));
 
+const templateSettingsStoreMock = { isBusy: false };
+
+vi.mock('@shared/template-settings/store', () => ({
+  useUiTemplateSettingsStore: vi.fn(() => templateSettingsStoreMock),
+}));
+
 beforeEach(() => {
   setActivePinia(createPinia());
   historyStoreMock.canUndo = true;
   historyStoreMock.canRedo = true;
+  historyStoreMock.isApplyingSnapshot = false;
   historyStoreMock.undo = vi.fn();
   historyStoreMock.redo = vi.fn();
   aiStoreMock.isProcessing = false;
   containerStoreMock.isSaving = false;
+  templateSettingsStoreMock.isBusy = false;
 });
 
 describe('UndoButton', () => {
@@ -80,6 +91,14 @@ describe('UndoButton', () => {
     ['canUndo is false', () => (historyStoreMock.canUndo = false)],
     ['AI is processing', () => (aiStoreMock.isProcessing = true)],
     ['save is in flight', () => (containerStoreMock.isSaving = true)],
+    [
+      'a restore is applying',
+      () => (historyStoreMock.isApplyingSnapshot = true),
+    ],
+    [
+      'template previews are refetching',
+      () => (templateSettingsStoreMock.isBusy = true),
+    ],
   ])('does not dispatch when %s', async (_label, applyGuard) => {
     applyGuard();
 
@@ -104,6 +123,14 @@ describe('RedoButton', () => {
     ['canRedo is false', () => (historyStoreMock.canRedo = false)],
     ['AI is processing', () => (aiStoreMock.isProcessing = true)],
     ['save is in flight', () => (containerStoreMock.isSaving = true)],
+    [
+      'a restore is applying',
+      () => (historyStoreMock.isApplyingSnapshot = true),
+    ],
+    [
+      'template previews are refetching',
+      () => (templateSettingsStoreMock.isBusy = true),
+    ],
   ])('does not dispatch when %s', async (_label, applyGuard) => {
     applyGuard();
 

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

@@ -50,6 +50,9 @@ import {
 } from '@shared/content-settings/store';
 import { useUiSideBarStore } from '@shared/side-bar/store';
 import { useUiEditableLogoStore } from '@shared/logo-settings/store/editable-logo-store';
+import { useUiLogoSettingsStore } from '@shared/logo-settings/store';
+import { useLogoStore } from '@brand-page-maker/stores';
+import { getLogoImageFromModel } from '@brand-page/utils/logo.util';
 import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
@@ -988,4 +991,131 @@ describe('brand page maker store module', () => {
     // Still 'Acme' — no restore attempted.
     expect(editableLogoStore.logoEdits.textObjects[0].text).toBe('Acme');
   });
+
+  // The template sidebar regenerates off the selectedLogoImage watcher, so
+  // the restore must hand it a READY preview key. For a designed logo
+  // (pre-purchase) that key is the s3 render token minted by the awaited
+  // fabric re-render — exposing selectedLogoImage BEFORE the render made the
+  // sidebar fetch a list keyed to the previous render, which repainted
+  // seconds later (the undo "flash"). Same precondition that makes the BYO
+  // upload flow work: the key exists before the watcher fires.
+  test('_syncLogoSettingsFromSnapshot re-renders the designed logo BEFORE exposing selectedLogoImage', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const containerStore = useBrandPageContainerStore();
+    const editableLogoStore = useUiEditableLogoStore();
+    const logoSettingsStore = useUiLogoSettingsStore();
+    const logoStore = useLogoStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    const originalStamp = editableLogoStore.stampLogoBase64IntoBrandPageData;
+    const originalRender = editableLogoStore.updateEditableLogoImageUrlAsync;
+    const originalSetSelected = logoSettingsStore.setSelectedLogoImage;
+
+    try {
+      containerStore.isPrePurchase = true;
+      logoStore.setLogoTemplateAsset({
+        token: 'designed-template',
+        isByo: false,
+      } as never);
+      logoStore.addLogoDraftAsset({
+        logoDraftAsset: { token: 'designed-2', tick: 1, isByo: false },
+      } as never);
+      // Previous token differs from the snapshot's → not the
+      // logoUnchanged short-circuit.
+      editableLogoStore.setLogoDraftToken('designed-1');
+
+      const snapshot = JSON.parse(
+        JSON.stringify(makerStore.brandPageData),
+      ) as BrandPageModel;
+      const snapshotLogoImage = getLogoImageFromModel(snapshot);
+
+      expect(snapshotLogoImage).toBeTruthy();
+      snapshotLogoImage!.logoDraftToken = 'designed-2';
+
+      const callOrder: string[] = [];
+
+      editableLogoStore.stampLogoBase64IntoBrandPageData = vi.fn();
+      editableLogoStore.updateEditableLogoImageUrlAsync = vi.fn(async () => {
+        // Async like the real fabric render — the order assertion below
+        // fails if the sync doesn't await it before exposing the logo.
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        callOrder.push('render');
+      });
+      logoSettingsStore.setSelectedLogoImage = vi.fn(() => {
+        callOrder.push('selectedLogoImage');
+      });
+
+      await makerStore._syncLogoSettingsFromSnapshot(
+        snapshot,
+        '{"colors":["#123456"]}',
+      );
+
+      expect(callOrder).toEqual(['render', 'selectedLogoImage']);
+      expect(logoSettingsStore.setSelectedLogoImage).toHaveBeenCalledWith(
+        expect.objectContaining({ logoDraftToken: 'designed-2' }),
+      );
+    } finally {
+      containerStore.isPrePurchase = false;
+      editableLogoStore.stampLogoBase64IntoBrandPageData = originalStamp;
+      editableLogoStore.updateEditableLogoImageUrlAsync = originalRender;
+      logoSettingsStore.setSelectedLogoImage = originalSetSelected;
+    }
+  });
+
+  test('_syncLogoSettingsFromSnapshot still exposes selectedLogoImage on the BYO and token-less paths', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const editableLogoStore = useUiEditableLogoStore();
+    const logoSettingsStore = useUiLogoSettingsStore();
+    const logoStore = useLogoStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    const originalStamp = editableLogoStore.stampLogoBase64IntoBrandPageData;
+    const originalSetSelected = logoSettingsStore.setSelectedLogoImage;
+
+    try {
+      editableLogoStore.stampLogoBase64IntoBrandPageData = vi.fn();
+
+      const setSelectedSpy = vi.fn();
+
+      logoSettingsStore.setSelectedLogoImage = setSelectedSpy;
+
+      // BYO path: registered byo draft, differing previous token.
+      logoStore.addLogoDraftAsset({
+        logoDraftAsset: { token: 'byo-1', tick: 2, isByo: true },
+      } as never);
+      editableLogoStore.setLogoDraftToken('designed-1');
+
+      const byoSnapshot = JSON.parse(
+        JSON.stringify(makerStore.brandPageData),
+      ) as BrandPageModel;
+      const byoLogoImage = getLogoImageFromModel(byoSnapshot);
+
+      byoLogoImage!.logoDraftToken = 'byo-1';
+
+      await makerStore._syncLogoSettingsFromSnapshot(byoSnapshot);
+
+      expect(setSelectedSpy).toHaveBeenCalledWith(
+        expect.objectContaining({ logoDraftToken: 'byo-1' }),
+      );
+
+      // Token-less path: the logoImage exists but has no draft token.
+      setSelectedSpy.mockClear();
+
+      const tokenlessSnapshot = JSON.parse(
+        JSON.stringify(makerStore.brandPageData),
+      ) as BrandPageModel;
+      const tokenlessLogoImage = getLogoImageFromModel(tokenlessSnapshot);
+
+      tokenlessLogoImage!.logoDraftToken = '';
+
+      await makerStore._syncLogoSettingsFromSnapshot(tokenlessSnapshot);
+
+      expect(setSelectedSpy).toHaveBeenCalledTimes(1);
+    } finally {
+      editableLogoStore.stampLogoBase64IntoBrandPageData = originalStamp;
+      logoSettingsStore.setSelectedLogoImage = originalSetSelected;
+    }
+  });
 });

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -960,83 +960,92 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
       if (!logoImage) return;
 
-      // Assign a FRESH object — the same way the upload/selection flows
-      // write selectedLogoImage. A setState/$patch here deep-merges into the
-      // existing object, so the templates store's deep watcher receives
-      // old === new (same reference), sees no logoDraftToken change, and
-      // never refetches the template previews. Post-purchase that watcher
-      // is the ONLY refetch path (previews are keyed by logoDraftToken and
-      // the designed-logo re-render below is pre-purchase-only), which left
-      // the sidebar stuck on the undone logo (BP-5814).
-      logoSettingsStore.setSelectedLogoImage({ ...logoImage });
-
-      const draftToken: string | undefined = logoImage.logoDraftToken;
+      try {
+        const draftToken: string | undefined = logoImage.logoDraftToken;
 
-      if (!draftToken) return;
+        if (!draftToken) return;
 
-      // Re-derive enableEditMode + templateAsset from the draft registry
-      // (append-only for the session) instead of stashing on every entry.
-      const draft = logoStore.getLogoDraftAssetByToken(draftToken);
+        // Re-derive enableEditMode + templateAsset from the draft registry
+        // (append-only for the session) instead of stashing on every entry.
+        const draft = logoStore.getLogoDraftAssetByToken(draftToken);
 
-      if (draft) {
-        editableLogoStore.setEnableEditMode(!draft.isByo);
+        if (draft) {
+          editableLogoStore.setEnableEditMode(!draft.isByo);
 
-        if (draft.templateAsset) {
-          logoStore.setLogoTemplateAsset(draft.templateAsset);
+          if (draft.templateAsset) {
+            logoStore.setLogoTemplateAsset(draft.templateAsset);
+          }
         }
-      }
 
-      editableLogoStore.setLogoDraftToken(draftToken);
+        editableLogoStore.setLogoDraftToken(draftToken);
 
-      // No logo change → cache is still correct; just stamp base64 back
-      // (snapshot doesn't carry logoImageBase64Url).
-      const logoUnchanged =
-        prevDraftToken === draftToken &&
-        (logoEditsStr === undefined || logoEditsStr === prevLogoEditsStr);
+        // No logo change → cache is still correct; just stamp base64 back
+        // (snapshot doesn't carry logoImageBase64Url).
+        const logoUnchanged =
+          prevDraftToken === draftToken &&
+          (logoEditsStr === undefined || logoEditsStr === prevLogoEditsStr);
 
-      if (logoUnchanged) {
-        editableLogoStore.stampLogoBase64IntoBrandPageData();
+        if (logoUnchanged) {
+          editableLogoStore.stampLogoBase64IntoBrandPageData();
 
-        return;
-      }
+          return;
+        }
 
-      const isByo = !!draft?.isByo;
+        const isByo = !!draft?.isByo;
 
-      if (isByo) {
-        // BYO mints a fresh draftToken per upload so the per-token
-        // cache always matches; no re-render needed.
-        if (editableLogoStore.restoreVariationsForDraftToken(draftToken)) {
-          editableLogoStore.stampLogoBase64IntoBrandPageData();
-        }
+        if (isByo) {
+          // BYO mints a fresh draftToken per upload so the per-token
+          // cache always matches; no re-render needed.
+          if (editableLogoStore.restoreVariationsForDraftToken(draftToken)) {
+            editableLogoStore.stampLogoBase64IntoBrandPageData();
+          }
 
-        return;
-      }
+          return;
+        }
 
-      // Designed: draft token is reused across edits, so the cache
-      // only holds the latest render. Re-issue fabric-render — same
-      // call as the live edit path. Awaited so concurrent undos
-      // serialize and the call sits inside the isApplyingSnapshot
-      // window (watcher guard suppresses the writeback).
-      if (
-        containerStore.isPrePurchase &&
-        logoEditsStr &&
-        logoStore.logoTemplateAsset
-      ) {
-        // Stamp the cached (pre-undo) base64 onto brandPageData first
-        // so the canvas keeps showing the previous logo while the
-        // re-render is in flight. Without this the logoImageBase64Url
-        // fields are undefined (snapshot is stripped pre-purchase) and
-        // the canvas flickers blank for ~500-1500ms.
-        editableLogoStore.stampLogoBase64IntoBrandPageData();
+        // Designed: draft token is reused across edits, so the cache
+        // only holds the latest render. Re-issue fabric-render — same
+        // call as the live edit path. Awaited so concurrent undos
+        // serialize and the call sits inside the isApplyingSnapshot
+        // window (watcher guard suppresses the writeback).
+        if (
+          containerStore.isPrePurchase &&
+          logoEditsStr &&
+          logoStore.logoTemplateAsset
+        ) {
+          // Stamp the cached (pre-undo) base64 onto brandPageData first
+          // so the canvas keeps showing the previous logo while the
+          // re-render is in flight. Without this the logoImageBase64Url
+          // fields are undefined (snapshot is stripped pre-purchase) and
+          // the canvas flickers blank for ~500-1500ms.
+          editableLogoStore.stampLogoBase64IntoBrandPageData();
 
-        try {
-          await editableLogoStore.updateEditableLogoImageUrlAsync();
-        } catch (error) {
-          console.error(
-            'brandpage-maker-store: failed to re-render logo on history apply',
-            error,
-          );
+          try {
+            await editableLogoStore.updateEditableLogoImageUrlAsync();
+          } catch (error) {
+            console.error(
+              'brandpage-maker-store: failed to re-render logo on history apply',
+              error,
+            );
+          }
         }
+      } finally {
+        // Assign a FRESH object — the same way the upload/selection flows
+        // write selectedLogoImage. A setState/$patch here deep-merges into
+        // the existing object, so the templates store's deep watcher would
+        // receive old === new (same reference), see no logoDraftToken
+        // change, and never refetch the template previews (BP-5814).
+        //
+        // Set LAST — after the branch above has prepared the preview key
+        // (BYO cache restore, or the awaited designed re-render that mints
+        // the s3 token) — so the watcher always fires with a fetchable key,
+        // the same precondition that makes the upload flow work. Firing it
+        // before the re-render fetched the template list with the previous
+        // render's s3 token: an obsolete list that repainted seconds later
+        // (the undo "flash"). The sidebar instead holds the previous
+        // previews while the render is in flight, matching the canvas
+        // policy above.
+        logoSettingsStore.setSelectedLogoImage({ ...logoImage });
       }
     },
 

package/src/shared/content-settings/store/content-settings-store.test.ts

@@ -206,3 +206,106 @@ describe('content settings store — hydration writes arm the history merge', ()
     expect(mergeNextMutationMock).not.toHaveBeenCalled();
   });
 });
+
+// BP-5772: a value-identical re-write must be dropped whole. The assignment
+// would be a reactive no-op, but onContentChanged() still flips
+// isModifiedAfterTemplateApplied — and when that flag was false, its flip is
+// itself a model mutation, so history commits an entry in which nothing
+// user-visible changed. Live repro: with the logo visible, clicking the logo
+// panel's "Upload" option re-emits { logoImage, logoTemplateImage,
+// logoImageBase64Url, isLogoVisible } deep-equal to the model under fresh
+// references (LogoSelectionField.onLogoVisibleChanged). Same class:
+// re-clicking the already-active display style.
+describe('content settings store — value-identical writes are dropped', () => {
+  const logoImage = () => ({
+    logoDraftToken: 'dae5cda0-602d-4c69-a26e-000000000001',
+    logoVariation: 0,
+    logoLastUpdate: '638000000000000000',
+  });
+
+  const makeItem = () => ({
+    id: 'item-1',
+    type: 'logo',
+    settings: {
+      content: {
+        title: '<p>old</p>',
+        isLogoVisible: true,
+        logoImage: logoImage(),
+      },
+    },
+  });
+
+  const setupStore = () => {
+    setActivePinia(createPinia());
+
+    const store = useUiContentSettingsStore();
+
+    store.items.push(makeItem() as never);
+
+    store.validateItem = vi.fn();
+    store.onContentChanged = vi.fn();
+
+    return store;
+  };
+
+  beforeEach(() => {
+    mergeNextMutationMock.mockClear();
+  });
+
+  test('updateMultipleItemValues drops the logo-panel Upload re-click payload', () => {
+    const store = setupStore();
+
+    // Deep-equal to the model but every reference is fresh — exactly what
+    // the Upload option click emits when visibility didn't change.
+    store.updateMultipleItemValues({
+      id: 'item-1',
+      name: 'logoImage',
+      value: { logoImage: logoImage(), isLogoVisible: true },
+    });
+
+    expect(store.onContentChanged).not.toHaveBeenCalled();
+    expect(store.validateItem).not.toHaveBeenCalled();
+  });
+
+  test('updateItemValue drops an identical primitive', () => {
+    const store = setupStore();
+
+    store.updateItemValue({
+      id: 'item-1',
+      name: 'title',
+      value: '<p>old</p>',
+    });
+
+    expect(store.onContentChanged).not.toHaveBeenCalled();
+    expect(store.validateItem).not.toHaveBeenCalled();
+  });
+
+  test('updateMultipleItemValues writes when any one field differs', () => {
+    const store = setupStore();
+
+    store.updateMultipleItemValues({
+      id: 'item-1',
+      name: 'logoImage',
+      value: { logoImage: logoImage(), isLogoVisible: false },
+    });
+
+    expect(store.onContentChanged).toHaveBeenCalledTimes(1);
+    expect(
+      (store.items[0].settings.content as { isLogoVisible?: boolean })
+        .isLogoVisible,
+    ).toBe(false);
+  });
+
+  test('a dropped write never arms the history merge, even when hydration-flagged', () => {
+    const store = setupStore();
+
+    store.updateItemValue({
+      id: 'item-1',
+      name: 'title',
+      value: '<p>old</p>',
+      isHydrationWrite: true,
+    });
+
+    expect(mergeNextMutationMock).not.toHaveBeenCalled();
+  });
+});

package/src/shared/content-settings/store/content-settings-store.ts

@@ -60,6 +60,19 @@ const DEFAULT_TEXT_COLOR_DEPENDENT_TYPES: readonly ContentType[] = [
   'text',
 ] as const;
 
+/**
+ * True when the incoming value is byte-identical (as JSON, matching how
+ * history snapshots the model) to what the model already holds. Such
+ * re-writes must be dropped whole: the assignment would be a reactive
+ * no-op, but onContentChanged() still flips isModifiedAfterTemplateApplied
+ * — and when that flag was false, its flip is itself a model mutation, so
+ * undo history commits an entry in which nothing user-visible changed
+ * (phantom undo state, BP-5772: re-clicking the logo panel's Upload/Logo
+ * option, re-clicking an already-active display style).
+ */
+const isSameValue = (a: unknown, b: unknown): boolean =>
+  a === b || JSON.stringify(a) === JSON.stringify(b);
+
 export const CONTENT_SETTINGS_MODES = {
   edit: 'edit',
   add: 'add',
@@ -390,6 +403,10 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         return;
       }
 
+      if (isSameValue(item.settings.content[payload.name], payload.value)) {
+        return; // no-op write: don't validate, don't flip the modified flag
+      }
+
       // Hydration write-backs (RTE canonical HTML on mount, lazy config
       // hydration, stale-id clears) fold into the current undo head instead
       // of pushing an entry. Arming here — same tick as the write — is what
@@ -421,6 +438,17 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         return;
       }
 
+      if (
+        Object.keys(value ?? {}).every((k) =>
+          isSameValue(
+            item.settings.content[k],
+            (value as Record<string, unknown>)[k],
+          ),
+        )
+      ) {
+        return; // every field a no-op — see isSameValue
+      }
+
       // Same hydration-write contract as updateItemValue.
       if (isHydrationWrite) {
         useHistoryStore().mergeNextMutation();