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

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

@@ -393,7 +393,7 @@ export declare const useUiContentSettingsStore: import("pinia").StoreDefinition<
     pushMode(item: ContentSettingsModeStackItem): void;
     resetMode(): void;
     updateItemValue(payload: UpdateItemValuePayload<unknown>): void;
-    updateMultipleItemValues({ id, name, value, }: UpdateMultipleItemValuesPayload<any>): void;
+    updateMultipleItemValues({ id, name, value, isHydrationWrite, }: UpdateMultipleItemValuesPayload<any>): void;
     updateTextStyleType({ id, name, value, }: UpdateMultipleItemValuesPayload<any>): void;
     updateTextStyles({ id, name, value, }: UpdateMultipleItemValuesPayload<any>): void;
     getTextStyles({ id, name }: {

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

@@ -4,6 +4,7 @@ import { RESERVED_FIELD_NAMES } from '../constants';
 import { UI_EVENT_SOURCES } from '../../models';
 import { CONTENT_SETTINGS_DISPLAY_MODES, ITEM_CATEGORIES, ITEM_CATEGORY_NAMES, } from '@brand-page-maker/models';
 import { useUiStore, useBrandPageMakerUserStore, useBrandPageMakerStore, useVideoStore, } from '@brand-page-maker/stores';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { useUiSideBarStore } from '../../side-bar/store';
 import { createDefaultContentItemGroupState, createDefaultContentItemState, } from '../../navigation-style-settings/store';
 import { adminValidatorsDict, dummyValidator, validatorDict, } from '@brand-page-maker/validators';
@@ -210,6 +211,15 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             if (!item) {
                 return;
             }
+            // 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
+            // makes the merge reliable: the flag travelled with the payload
+            // through the debounced field chain, so emit-time arming would lapse
+            // before the write lands (BP-5810).
+            if (payload.isHydrationWrite) {
+                useHistoryStore().mergeNextMutation();
+            }
             item.settings.content[payload.name] = payload.value;
             this.validateItem({
                 id: payload.id,
@@ -217,11 +227,15 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             });
             this.onContentChanged();
         },
-        updateMultipleItemValues({ id, name, value, }) {
+        updateMultipleItemValues({ id, name, value, isHydrationWrite, }) {
             const item = this.items.find((i) => i.id === id);
             if (!item) {
                 return;
             }
+            // Same hydration-write contract as updateItemValue.
+            if (isHydrationWrite) {
+                useHistoryStore().mergeNextMutation();
+            }
             item.settings.content = vueDeepMerge(item.settings.content, value);
             this.validateItem({ id, name });
             this.onContentChanged();

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;
@@ -4411,7 +4411,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         pushMode(item: import("../../../content-settings/store").ContentSettingsModeStackItem): void;
         resetMode(): void;
         updateItemValue(payload: import("../../../content-settings/models").UpdateItemValuePayload<unknown>): void;
-        updateMultipleItemValues({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
+        updateMultipleItemValues({ id, name, value, isHydrationWrite, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyleType({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyles({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {

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

@@ -3787,7 +3787,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         pushMode(item: import("../../../content-settings/store").ContentSettingsModeStackItem): void;
         resetMode(): void;
         updateItemValue(payload: UpdateItemValuePayload<unknown>): void;
-        updateMultipleItemValues({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
+        updateMultipleItemValues({ id, name, value, isHydrationWrite, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyleType({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextStyles({ id, name, value, }: import("../../../content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         getTextStyles({ id, name }: {
@@ -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-3",
   "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

@@ -211,10 +211,6 @@ export const useRichTextEditor = (
 ): UseRichTextEditorReturn => {
   const historyStore = useHistoryStore();
 
-  // TipTap rehydrates and writes back canonical HTML on mount — fold
-  // that into the current head instead of pushing a phantom entry.
-  historyStore.mergeNextMutation();
-
   const editor = new Editor({
     content: model.value ?? '',
     editable: !props.readOnly,
@@ -492,6 +488,14 @@ export const useRichTextEditor = (
   );
 
   editor.on('transaction', ({ transaction }) => {
+    // Style detection only makes sense for user styling — an unfocused
+    // editor's transactions are mount rehydration / programmatic setContent
+    // churn, and clearing textStyleType from those would push a phantom
+    // style write into the model (BP-5810 family).
+    if (!editor.isFocused) {
+      return;
+    }
+
     if (isStyleChanged(transaction) && props.styles.textStyleType) {
       onSelectTextStyleType({
         label: 'None',
@@ -503,7 +507,24 @@ export const useRichTextEditor = (
   editor.on('update', () => {
     const sanitizedData = sanitiseClientSideRTE(editor.getHTML());
 
-    emit('update:modelValue', sanitizedData.sanitizedHtml);
+    // 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. Tag the emit so the write
+    // folds into the current undo head instead of pushing a phantom entry
+    // (BP-5810). The flag travels WITH the value through the debounced
+    // field → store chain and arms the history merge at the moment of the
+    // store write — arming here at emit time would lapse before the
+    // debounce fires. Genuine edits happen while focused and commit
+    // normally.
+    //
+    // 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.
+    emit('update:modelValue', sanitizedData.sanitizedHtml, {
+      isHydration: !editor.isFocused,
+    });
   });
 
   editor.on('selectionUpdate', () => {

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,
       );
     });
   });