@designcrowd/library.brand-page 6.0.6-tracker-1 → 6.0.6-undo-2

package/lib/src/metadata-builder/builders/reorder-pages-builder.d.ts

@@ -0,0 +1,13 @@
+import type { BrandPageModel } from '../../brand-page/models';
+import { BaseMetadataBuilder, type BuilderResult, type MetadataBuilderRequest } from '../models';
+import type { Logger } from '../logger';
+export interface ReorderPagesPayload {
+    pageOrder: string[];
+}
+export declare class ReorderPagesBuilder extends BaseMetadataBuilder<ReorderPagesPayload> {
+    constructor(request: MetadataBuilderRequest<ReorderPagesPayload>, logger?: Logger);
+    validateAsync(): Promise<{
+        errors: string[];
+    }>;
+    buildAsync(model: BrandPageModel): Promise<BuilderResult>;
+}

package/lib/src/metadata-builder/builders/reorder-pages-builder.js

@@ -0,0 +1,49 @@
+import { BaseMetadataBuilder, } from '../models';
+export class ReorderPagesBuilder extends BaseMetadataBuilder {
+    constructor(request, logger) {
+        super(request, logger);
+    }
+    async validateAsync() {
+        const errors = [];
+        const payload = this.request.payload;
+        if (!payload?.pageOrder?.length) {
+            errors.push('page_order is required for reorder_pages');
+        }
+        return { errors };
+    }
+    async buildAsync(model) {
+        this.log('Build called');
+        const validation = await this.validateAsync();
+        if (validation.errors.length) {
+            return { request: this.request, model, errors: validation.errors };
+        }
+        const { pageOrder } = this.request.payload;
+        // Build pageId → routeId lookup from nav.routes
+        const pageIdToRouteId = new Map();
+        for (const route of model.nav.routes) {
+            pageIdToRouteId.set(route.pageId, route.id);
+        }
+        // Build new nav.orders from the flat page_order (array of pageIds)
+        const newOrders = [];
+        const seenRouteIds = new Set();
+        for (const pageId of pageOrder) {
+            const routeId = pageIdToRouteId.get(pageId);
+            if (!routeId)
+                continue;
+            newOrders.push({ routeId, subRoutes: [] });
+            seenRouteIds.add(routeId);
+        }
+        // Safety: append any routes not mentioned (don't lose pages)
+        for (const route of model.nav.routes) {
+            const routeId = pageIdToRouteId.get(route.pageId);
+            if (routeId && !seenRouteIds.has(routeId)) {
+                newOrders.push({ routeId, subRoutes: [] });
+            }
+        }
+        model.nav.orders = newOrders;
+        this.log({
+            message: `Reordered pages: ${pageOrder.join(', ')}`,
+        });
+        return { request: this.request, model };
+    }
+}

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.mixin.d.ts

@@ -147,7 +147,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             content: TContent;
         }>(payload: P): Promise<void>;
         _captureTemplateSwitchIfEnabled(): void;
-        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string): Promise<void>;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string, selectedTemplateId?: string | false): Promise<void>;
         _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string): Promise<void>;
         _navigateToActivePage(activePageId?: string): void;
         _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;

package/lib/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.d.ts

@@ -676,7 +676,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             content: TContent;
         }>(payload: P): Promise<void>;
         _captureTemplateSwitchIfEnabled(): void;
-        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string): Promise<void>;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string, selectedTemplateId?: string | false): Promise<void>;
         _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string): Promise<void>;
         _navigateToActivePage(activePageId?: string): void;
         _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.d.ts

@@ -620,7 +620,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             content: TContent;
         }>(payload: P): Promise<void>;
         _captureTemplateSwitchIfEnabled(): void;
-        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string): Promise<void>;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string, selectedTemplateId?: string | false): Promise<void>;
         _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string): Promise<void>;
         _navigateToActivePage(activePageId?: string): void;
         _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;

package/lib/src/shared/content-settings/components/text-style-field/TextStyleField.mixin.d.ts

@@ -383,6 +383,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onLetterSpacingChange(spacing: string): void;
     onLineHeightChange(lineHeight: string): void;
     generateFontFamilySelectorKey(): string;
+    syncTextStyleTypeSelection(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;

package/lib/src/shared/content-settings/components/text-style-field/TextStyleField.mixin.js

@@ -124,13 +124,7 @@ export default defineComponent({
         this.debounceOnTextSizeChange = debounce(this.onTextSizeChange, TEXT_SIZE_CHANGE_DEBOUNCE_WAIT_IN_MS);
         this.debounceOnLetterSpacingChange = debounce(this.onLetterSpacingChange, TEXT_SIZE_CHANGE_DEBOUNCE_WAIT_IN_MS);
         this.debounceOnLineHeightChange = debounce(this.onLineHeightChange, TEXT_SIZE_CHANGE_DEBOUNCE_WAIT_IN_MS);
-        const value = this.value;
-        if (value.textStyleType) {
-            const textStyleTypeOption = this.textStyleTypeOptions.find((x) => x.value === value.textStyleType);
-            if (textStyleTypeOption) {
-                textStyleTypeOption.isSelected = true;
-            }
-        }
+        this.syncTextStyleTypeSelection();
     },
     computed: {
         selectedTextStyle() {
@@ -320,9 +314,26 @@ export default defineComponent({
         generateFontFamilySelectorKey() {
             return `fontFamilySelector-${this.id}-${Date.now()}`;
         },
+        // Re-derive the text-style-type selection from the current `value`.
+        // Seeded in created() and re-run whenever `value` changes (e.g. undo/redo
+        // restores the model) so the dropdown title and `selectedTextStyle`
+        // reflect the model rather than a stale local flag. (BP-5811 / BP-5817)
+        syncTextStyleTypeSelection() {
+            const value = this.value;
+            this.textStyleTypeOptions.forEach((option) => {
+                // The leading Boolean(...) guard is deliberate — do NOT simplify to
+                // `option.value === value?.textStyleType`. The "none" option's value
+                // is `undefined`, so that form would SELECT it whenever no style is
+                // set, whereas the convention (see emitChange) is all-flags-false
+                // when there is no textStyleType.
+                option.isSelected =
+                    Boolean(value?.textStyleType) && option.value === value.textStyleType;
+            });
+        },
     },
     watch: {
         value() {
+            this.syncTextStyleTypeSelection();
             this.$nextTick(() => {
                 this.fontFamilySelectorKey = this.generateFontFamilySelectorKey();
             });

package/lib/src/shared/logo-settings/components/LogoSettings.mixin.d.ts

@@ -134,7 +134,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             content: TContent;
         }>(payload: P): Promise<void>;
         _captureTemplateSwitchIfEnabled(): void;
-        applyHistorySnapshot(snapshot: import("../../../brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string): Promise<void>;
+        applyHistorySnapshot(snapshot: import("../../../brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string, selectedTemplateId?: string | false): Promise<void>;
         _syncLogoSettingsFromSnapshot(snapshot: import("../../../brand-page").BrandPageModel, logoEditsStr?: string): Promise<void>;
         _navigateToActivePage(activePageId?: string): void;
         _fallbackSidebarIfSelectedContentMissing(snapshot: import("../../../brand-page").BrandPageModel): void;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -3856,7 +3856,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             content: TContent;
         }>(payload: P): Promise<void>;
         _captureTemplateSwitchIfEnabled(): void;
-        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string): Promise<void>;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string, selectedTemplateId?: string | false): Promise<void>;
         _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string): Promise<void>;
         _navigateToActivePage(activePageId?: string): void;
         _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -4425,7 +4425,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             content: TContent;
         }>(payload: P): Promise<void>;
         _captureTemplateSwitchIfEnabled(): void;
-        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string): Promise<void>;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string, selectedTemplateId?: string | false): Promise<void>;
         _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string): Promise<void>;
         _navigateToActivePage(activePageId?: string): void;
         _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -184,7 +184,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             content: TContent;
         }>(payload: P): Promise<void>;
         _captureTemplateSwitchIfEnabled(): void;
-        applyHistorySnapshot(snapshot: import("../../brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string): Promise<void>;
+        applyHistorySnapshot(snapshot: import("../../brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string, selectedTemplateId?: string | false): Promise<void>;
         _syncLogoSettingsFromSnapshot(snapshot: import("../../brand-page").BrandPageModel, logoEditsStr?: string): Promise<void>;
         _navigateToActivePage(activePageId?: string): void;
         _fallbackSidebarIfSelectedContentMissing(snapshot: import("../../brand-page").BrandPageModel): void;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -582,7 +582,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             content: TContent;
         }>(payload: P): Promise<void>;
         _captureTemplateSwitchIfEnabled(): void;
-        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string): Promise<void>;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string, logoEditsStr?: string, selectedTemplateId?: string | false): Promise<void>;
         _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string): Promise<void>;
         _navigateToActivePage(activePageId?: string): void;
         _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;

package/package.json

@@ -1,27 +1,12 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.0.6-tracker-1",
+  "version": "6.0.6-undo-2",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
   "types": "./lib/src/index.d.ts",
   "main": "./lib/src/index.mjs",
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "exports": {
-    ".": {
-      "types": "./lib/src/index.d.ts",
-      "import": "./lib/src/index.mjs"
-    },
-    "./tracker": {
-      "types": "./lib/src/tracker.d.ts",
-      "import": "./lib/src/tracker.mjs"
-    },
-    "./lib/src/css/*": "./lib/src/css/*",
-    "./package.json": "./package.json"
-  },
   "files": [
     "lib",
     "src"

package/src/brand-page/utils/logo.util.test.ts

@@ -12,7 +12,12 @@ import {
   PageHeaderMobile,
   PageStyles,
 } from '../models';
-import type { BrandPageModel, LogoContent, PageModel } from '../models';
+import type {
+  BrandPageModel,
+  BrandPageType,
+  LogoContent,
+  PageModel,
+} from '../models';
 import * as logoUtil from './logo.util';
 
 interface GetLogoVariationIndexFromLogoImageUrlTestCase {
@@ -212,4 +217,52 @@ describe('logo-util', () => {
       logoImage.logoDraftToken,
     );
   });
+
+  describe('getLogoImageFromModel', () => {
+    // Distinct tokens in the content block vs the header so each assertion
+    // proves which location the helper read from.
+    const buildModel = (brandPageType: BrandPageType): BrandPageModel => {
+      const model = createTestBrandPageModel();
+
+      model.brandPageType = brandPageType;
+      (model.pages[0].contents[0] as LogoContent).logoImage = {
+        logoDraftToken: 'content-token',
+        logoVariation: 0,
+        logoLastUpdate: undefined,
+      };
+      model.pageHeaderDesktop.logoImage = {
+        logoDraftToken: 'header-token',
+        logoVariation: 0,
+        logoLastUpdate: undefined,
+      };
+
+      return model;
+    };
+
+    test('reads the header logo for brand-site', () => {
+      const model = buildModel(BRAND_PAGE_TYPES.brandSite);
+
+      expect(logoUtil.getLogoImageFromModel(model)?.logoDraftToken).toBe(
+        'header-token',
+      );
+    });
+
+    test('reads the content-block logo for brand-page', () => {
+      const model = buildModel(BRAND_PAGE_TYPES.default);
+
+      expect(logoUtil.getLogoImageFromModel(model)?.logoDraftToken).toBe(
+        'content-token',
+      );
+    });
+
+    // Regression guard: brand-contact previously fell through to the header
+    // branch (the `=== brandPage` check) and read a stale header logo on undo.
+    test('reads the content-block logo for brand-contact', () => {
+      const model = buildModel(BRAND_PAGE_TYPES.brandContact);
+
+      expect(logoUtil.getLogoImageFromModel(model)?.logoDraftToken).toBe(
+        'content-token',
+      );
+    });
+  });
 });

package/src/brand-page/utils/logo.util.ts

@@ -394,6 +394,29 @@ export const calculateOptimizedLogoDimensions = (
   return { width: currentWidth, height: currentHeight };
 };
 
+/**
+ * Resolves the "current" logo image from a brand-page MODEL (the raw,
+ * deserialized shape — not the live stores, whose contents are wrapped in
+ * `settings.content`).
+ *
+ * Brand-site keeps its logo in the page header; brand-page and brand-contact
+ * keep it as a logo CONTENT block on the home page — the same `isBrandSite ?
+ * header : content` split the logo-settings store getters/setter use. This is
+ * the single source of truth for model-level logo reads: initial load and
+ * history-restore both call it so the two paths can't drift. They previously
+ * hard-coded `=== brandPage`, which silently excluded brand-contact and read a
+ * stale header logo on undo.
+ */
+export const getLogoImageFromModel = (
+  model: BrandPageModel,
+): LogoImageModel | undefined => {
+  if (model.brandPageType === BRAND_PAGE_TYPES.brandSite) {
+    return model.pageHeaderDesktop?.logoImage;
+  }
+
+  return model.pages?.[0]?.contents?.find(isLogoContent)?.logoImage;
+};
+
 export const recalculateLogoContentDimensions = async (
   pageData: any,
   editableLogoVariations: {

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.ts

@@ -291,7 +291,7 @@ export default defineComponent({
 
     // Capture baseline for undo/redo when the feature is active for this
     // session — see useUndoRedoFlag.ts for the gate (LaunchDarkly flag +
-    // brand-site + non-admin maker).
+    // non-admin maker; all three brands).
     if (useUndoRedoFlag().value) {
       useHistoryStore().captureBaseline();
     }

package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts

@@ -503,6 +503,23 @@ export const useRichTextEditor = (
   editor.on('update', () => {
     const sanitizedData = sanitiseClientSideRTE(editor.getHTML());
 
+    // An update fired while the editor is unfocused is TipTap rewriting the
+    // model back into its canonical HTML during mount rehydration or a
+    // programmatic setContent — not a user edit. Fold it into the current
+    // head so merely selecting a section doesn't push a phantom undo entry
+    // (BP-5810). The construction-time arm above lapses before this async
+    // write-back fires, so re-arm here. Genuine edits happen while focused and
+    // still push a new entry.
+    //
+    // Known limitation: a programmatic toolbar command run on an editor the
+    // user hasn't focused yet would also merge (losing that undo step). Today
+    // the RTE only mounts inside an already-open settings drawer and the user
+    // focuses it before formatting, so this doesn't occur — revisit if a
+    // consumer ever drives toolbar actions on an unfocused editor.
+    if (!editor.isFocused && !historyStore.isApplyingSnapshot) {
+      historyStore.mergeNextMutation();
+    }
+
     emit('update:modelValue', sanitizedData.sanitizedHtml);
   });
 

package/src/brand-page-maker/composables/useUndoRedoFlag.ts

@@ -1,30 +1,24 @@
 import { computed, type ComputedRef } from 'vue';
 import { useBrandPageMakerUserStore } from '@brand-page-maker/stores/user';
-import { useBrandPageMakerStore } from '@brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
 
 /**
- * Returns whether undo/redo is active for the current maker session. All
- * three conditions must hold:
+ * Returns whether undo/redo is active for the current maker session. Both
+ * conditions must hold:
  *
  *   1. `userStore.features.canUseUndoRedo` is true. The flag is populated by
  *      the consumer (BrandCrowd.Net / web-renderer) via the
  *      `WebsiteDesignUserFeatures.CanUseUndoRedo` boolean on the ViewModel —
- *      same precedent as RichTextEditor / GettyVideos / AITextGenerator.
- *   2. The maker is a brand-site (Website Maker). V1 scope is brand-site
- *      only; brand-page (single-page profile) and brand-contact (vCard) are
- *      out of scope.
- *   3. The session is NOT in admin-maker mode (`userStore.isAdmin`). The
+ *      same precedent as RichTextEditor / GettyVideos / AITextGenerator. The
+ *      one flag governs all three brands (brand-site, brand-page,
+ *      brand-contact) — there is no per-brand gating.
+ *   2. The session is NOT in admin-maker mode (`userStore.isAdmin`). The
  *      admin maker uses the same components but a different editing flow
  *      (template authoring) where undo/redo is out of scope.
  */
 export function useUndoRedoFlag(): ComputedRef<boolean> {
   const userStore = useBrandPageMakerUserStore();
-  const brandPageMakerStore = useBrandPageMakerStore();
 
   return computed(
-    () =>
-      userStore.features.canUseUndoRedo &&
-      brandPageMakerStore.isBrandSite &&
-      !userStore.isAdmin,
+    () => userStore.features.canUseUndoRedo && !userStore.isAdmin,
   );
 }

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

@@ -727,6 +727,59 @@ describe('brand page maker store module', () => {
     expect(pageNavigationStore.activePageId).toBe(expectedFirstId);
   });
 
+  // BP-5813: the templates sidebar highlight binds to `selectedTemplateId`,
+  // which isn't part of `brandPageData`. It rides along as a history-entry
+  // sidecar; applyHistorySnapshot restores it so the highlight reverts in
+  // lock-step with the canvas.
+  test('applyHistorySnapshot restores selectedTemplateId from the sidecar', async () => {
+    const makerStore = useBrandPageMakerStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    makerStore.setSelectedTemplateId({ templateId: 'template-current' });
+
+    // Undo lands on an entry captured while 'template-previous' was selected.
+    await makerStore.applyHistorySnapshot(
+      makerStore.brandPageData,
+      undefined,
+      undefined,
+      'template-previous',
+    );
+
+    expect(makerStore.selectedTemplateId).toBe('template-previous');
+  });
+
+  test('applyHistorySnapshot restores a cleared (false) selectedTemplateId', async () => {
+    const makerStore = useBrandPageMakerStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    makerStore.setSelectedTemplateId({ templateId: 'template-current' });
+
+    await makerStore.applyHistorySnapshot(
+      makerStore.brandPageData,
+      undefined,
+      undefined,
+      false,
+    );
+
+    expect(makerStore.selectedTemplateId).toBe(false);
+  });
+
+  test('applyHistorySnapshot leaves selectedTemplateId untouched when the sidecar is undefined', async () => {
+    const makerStore = useBrandPageMakerStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    makerStore.setSelectedTemplateId({ templateId: 'template-current' });
+
+    // An entry with no sidecar (e.g. captured before the field existed) must
+    // not clobber the current selection.
+    await makerStore.applyHistorySnapshot(makerStore.brandPageData);
+
+    expect(makerStore.selectedTemplateId).toBe('template-current');
+  });
+
   // BP-5506 follow-up: undoing a non-page-structural edit (e.g. a title
   // change) must NOT push a new route. The router push fires
   // `router.afterEach`, and BrandPageMaker.mixin's afterEach hook resets

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

@@ -793,6 +793,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       snapshot: BrandPageModel,
       activePageId?: string,
       logoEditsStr?: string,
+      selectedTemplateId?: string | false,
     ): Promise<void> {
       const styleSettingsStore = useUiStyleSettingsStore();
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
@@ -883,6 +884,16 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       this.cookieOptions = snapshot.cookieOptions;
       this.saveContactSettings = snapshot.saveContactSettings;
 
+      // 7b. Restore the selected-template pointer that drives the templates
+      //     sidebar highlight. It's a UI pointer, not part of the persisted
+      //     model, so it rides along as a history-entry sidecar (like
+      //     `activePageId`). Its watchers only reset scroll position (no
+      //     template re-application), so setting it here is safe during apply.
+      //     (BP-5813)
+      if (selectedTemplateId !== undefined) {
+        this.setSelectedTemplateId({ templateId: selectedTemplateId });
+      }
+
       // 8. Re-sync the logo-settings sidebar's `selectedLogoImage` from the
       //    restored header logo. The preview rehydrates via the page contents,
       //    but `uiLogoSettings` holds its own copy that drives the sidebar
@@ -945,14 +956,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         }
       }
 
-      const logoImage =
-        snapshot.brandPageType === BRAND_PAGE_TYPES.default
-          ? (
-              snapshot.pages?.[0]?.contents?.find(
-                (c) => c.type === 'logo',
-              ) as any
-            )?.logoImage
-          : snapshot.pageHeaderDesktop?.logoImage;
+      const logoImage = logoUtil.getLogoImageFromModel(snapshot);
 
       if (!logoImage) return;
 
@@ -1273,14 +1277,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           brandPageType: _brandPageType,
         });
 
-        let logoImage =
-          brandPageModel.brandPageType === BRAND_PAGE_TYPES.default
-            ? (
-                brandPageModel.pages?.[0].contents.find(
-                  (c) => c.type === 'logo',
-                ) as any
-              )?.logoImage
-            : brandPageModel.pageHeaderDesktop?.logoImage;
+        let logoImage = logoUtil.getLogoImageFromModel(brandPageModel);
 
         if (!logoImage?.logoDraftToken) {
           logoImage = logoUtil.safeGetLogoImageFromLogoImageUrl(

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

@@ -16,6 +16,8 @@ const mockMakerStore = {
   isBrandPageLoaded: false,
   applyHistorySnapshot: vi.fn(async () => undefined),
   setIsBrandPageLoaded: vi.fn(),
+  selectedTemplateId: false as string | false,
+  setSelectedTemplateId: vi.fn(),
 };
 
 const mockPageNavigationStore = {
@@ -64,6 +66,8 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
   beforeEach(() => {
     setActivePinia(createPinia());
     mockMakerStore.applyHistorySnapshot.mockClear();
+    mockMakerStore.setSelectedTemplateId.mockClear();
+    mockMakerStore.selectedTemplateId = false;
     mutationCounter = 0;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (mockMakerStore.brandPageData as any).v = 1;
@@ -443,6 +447,46 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
     });
   });
 
+  // BP-5813: the templates sidebar highlight binds to
+  // `brandPageMakerStore.selectedTemplateId`, which is NOT part of
+  // `brandPageData`. It rides along as a per-entry sidecar so undo/redo can
+  // restore the highlight in lock-step with the canvas.
+  describe('selectedTemplateId sidecar (BP-5813 — template sidebar highlight)', () => {
+    it('captures the current selectedTemplateId on each entry', async () => {
+      const store = useHistoryStore();
+
+      mockMakerStore.selectedTemplateId = 'template-a';
+      await store.captureBaseline();
+
+      expect(store.entries[0].selectedTemplateId).toBe('template-a');
+
+      mockMakerStore.selectedTemplateId = 'template-b';
+      captureMutated(store);
+
+      expect(store.entries[1].selectedTemplateId).toBe('template-b');
+    });
+
+    it('passes the target entry selectedTemplateId to applyHistorySnapshot on undo', async () => {
+      const store = useHistoryStore();
+
+      mockMakerStore.selectedTemplateId = 'template-a';
+      await store.captureBaseline();
+
+      mockMakerStore.selectedTemplateId = 'template-b';
+      captureMutated(store);
+
+      await store.undo();
+
+      // 4th arg is the baseline entry's template id — the sidebar reverts
+      // with the canvas instead of lagging on the undone template.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const callArgs = mockMakerStore.applyHistorySnapshot.mock
+        .calls[0] as any[];
+
+      expect(callArgs[3]).toBe('template-a');
+    });
+  });
+
   it('reentrancy guard: capture no-ops when isApplyingSnapshot is true', async () => {
     const store = useHistoryStore();
 
@@ -505,6 +549,7 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
       expect.objectContaining(baselineBrandPageData),
       undefined,
       expect.any(String),
+      false,
     );
   });
 
@@ -767,6 +812,7 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
         expect.anything(),
         'page-home',
         expect.any(String),
+        false,
       );
     });
 
@@ -801,6 +847,7 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
         expect.anything(),
         'page-home',
         expect.any(String),
+        false,
       );
     });
 
@@ -842,6 +889,7 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
         expect.anything(),
         'page-about',
         expect.any(String),
+        false,
       );
     });
 
@@ -879,6 +927,7 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
         expect.anything(),
         'page-new',
         expect.any(String),
+        false,
       );
     });
 
@@ -912,6 +961,7 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
         expect.anything(),
         'page-home',
         expect.any(String),
+        false,
       );
 
       // Now redo. Pointer moves forward to entry 1 (page-x captured),
@@ -922,6 +972,7 @@ describe('history-store (single stack + JSON-string snapshots)', () => {
         expect.anything(),
         'page-x',
         expect.any(String),
+        false,
       );
     });
   });