@designcrowd/library.brand-page 5.18.4 → 5.18.5

package/lib/src/{CreatedOnBrandCrowd-de-de-DQLtpdLe.js → CreatedOnBrandCrowd-de-de-ciKpCAd9.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BI3J4Mbk.js";
+import { _ as t } from "./lib-BXbo_N88.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-CvEhlADd.js → CreatedOnBrandCrowd-en-us-CZbTS1AZ.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BI3J4Mbk.js";
+import { _ as t } from "./lib-BXbo_N88.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-pYQeTTC0.js → CreatedOnBrandCrowd-es-es-C8MExng5.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BI3J4Mbk.js";
+import { _ as t } from "./lib-BXbo_N88.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CcE-iCEq.js → CreatedOnBrandCrowd-fr-ca-CO0L9NK2.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BI3J4Mbk.js";
+import { _ as t } from "./lib-BXbo_N88.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CcE-iCEq.js → CreatedOnBrandCrowd-fr-fr-CO0L9NK2.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BI3J4Mbk.js";
+import { _ as t } from "./lib-BXbo_N88.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-OyhWWWyO.js → CreatedOnBrandCrowd-pt-br-zVDvBF2H.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BI3J4Mbk.js";
+import { _ as t } from "./lib-BXbo_N88.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-OyhWWWyO.js → CreatedOnBrandCrowd-pt-pt-zVDvBF2H.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BI3J4Mbk.js";
+import { _ as t } from "./lib-BXbo_N88.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-DH98FFLS.js → CreatedOnDcom-de-de-WrUSQdjf.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BI3J4Mbk.js";
+import { _ as e } from "./lib-BXbo_N88.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-DK67NN1r.js → CreatedOnDcom-en-us-BqC9YtkL.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BI3J4Mbk.js";
+import { _ as e } from "./lib-BXbo_N88.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-9-QU4BU6.js → CreatedOnDcom-es-es-BzH32Oya.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BI3J4Mbk.js";
+import { _ as e } from "./lib-BXbo_N88.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-U9J9H9VB.js → CreatedOnDcom-fr-ca-D7TYfCW0.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BI3J4Mbk.js";
+import { _ as e } from "./lib-BXbo_N88.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-DqdzB1DJ.js → CreatedOnDcom-fr-fr-DVlyfBtb.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BI3J4Mbk.js";
+import { _ as e } from "./lib-BXbo_N88.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-c4UiWtkB.js → CreatedOnDcom-pt-br-CSRB91ey.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-BI3J4Mbk.js";
+import { _ as M } from "./lib-BXbo_N88.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-Do2qJsYp.js → CreatedOnDcom-pt-pt-9KMj5gpc.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-BI3J4Mbk.js";
+import { _ as M } from "./lib-BXbo_N88.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/models/navigation-styles.model.d.ts

@@ -8,6 +8,13 @@ export declare class NavigationMenuStyles {
     subNavBackgroundColor?: string;
     constructor(options: Partial<NavigationMenuStyles>, defaultOptions: Partial<NavigationMenuStyles>);
 }
+export declare const getDefaultSubNavBackgroundColor: (defaultTextColor: string | undefined) => string | undefined;
+/**
+ * The hamburger sub nav background colour is auto color-matched only when the
+ * user has not deliberately set it - i.e. it has no value or is transparent.
+ * Any explicit colour (a hex) or an already color-matched key is preserved.
+ */
+export declare const isUnsetOrTransparentColor: (color: string | undefined | null) => boolean;
 type NavigationStylesOptionType = Partial<Omit<NavigationDesktop | NavigationMobile, 'hamburgerMenuStyle'>> & {
     hamburgerMenuStyle?: Partial<NavigationMenuStyles>;
 };

package/lib/src/brand-page/models/navigation-styles.model.js

@@ -1,4 +1,4 @@
-import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
+import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, STYLE_THEME_KEYS, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
 import { VIEWPORTS } from './index';
 import { TEXT_STYLE_TYPES } from './index';
 import cloneDeep from 'lodash.clonedeep';
@@ -15,6 +15,29 @@ export class NavigationMenuStyles {
             options.subNavBackgroundColor ?? defaultOptions.subNavBackgroundColor;
     }
 }
+export const getDefaultSubNavBackgroundColor = (defaultTextColor) => {
+    if (defaultTextColor === STYLE_THEME_KEYS.LogoTextColor ||
+        defaultTextColor === STYLE_THEME_KEYS.LogoTextMultiColor) {
+        return STYLE_THEME_KEYS.LogoBackgroundColor;
+    }
+    if (defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundColor ||
+        defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundMultiColor) {
+        return STYLE_THEME_KEYS.LogoTextColor;
+    }
+    return undefined;
+};
+/**
+ * The hamburger sub nav background colour is auto color-matched only when the
+ * user has not deliberately set it - i.e. it has no value or is transparent.
+ * Any explicit colour (a hex) or an already color-matched key is preserved.
+ */
+export const isUnsetOrTransparentColor = (color) => {
+    if (color == null) {
+        return true;
+    }
+    const normalised = color.trim().toLowerCase();
+    return normalised === '' || normalised === 'transparent';
+};
 class NavigationStyles {
     displayType;
     renderAfterLogo;
@@ -79,7 +102,7 @@ class NavigationStyles {
                 color: theme?.secondaryColor,
                 backgroundColor: theme?.primaryColor,
             },
-            subNavBackgroundColor: theme?.secondaryColor,
+            // No sub nav default: a hex here defeats migration-16's colour match.
         });
     }
 }

package/lib/src/brand-page/utils/migration/migration-16.d.ts

@@ -0,0 +1,2 @@
+import type { MigrationData, MigrationOptions } from '../migration.util';
+export declare const migration16: (migrationResult: MigrationData, options: MigrationOptions) => Promise<MigrationData>;

package/lib/src/brand-page/utils/migration/migration-16.js

@@ -0,0 +1,47 @@
+import { getDefaultSubNavBackgroundColor, isUnsetOrTransparentColor, } from '../../models';
+/**
+ * Migration 16: default the sub nav background colour to "colour matched" (the opposite
+ * logo colour) when the menu font is itself colour matched and the sub nav has no
+ * deliberate value. The default is applied ONCE, when content is first materialised — a
+ * template load, the create-draft flow, or the admin maker (isUserDraft === false). An
+ * existing user draft already carries its resolved value (including a deliberate
+ * transparent/explicit choice), so it is left untouched.
+ */
+// Hamburger keeps its styles on hamburgerMenuStyle; every other nav type uses the
+// top-level navigation styles. (This only locates the styles - the rule itself is uniform.)
+const isHamburger = (displayType) => displayType.includes('hamburger');
+const applyDefaultSubNavColorMatch = (navigation) => {
+    if (!navigation?.displayType) {
+        return;
+    }
+    let menuStyles;
+    if (isHamburger(navigation.displayType)) {
+        navigation.hamburgerMenuStyle =
+            navigation.hamburgerMenuStyle ?? {};
+        menuStyles = navigation.hamburgerMenuStyle;
+    }
+    else {
+        menuStyles = navigation;
+    }
+    // Leave a deliberately-set colour (an explicit hex or an already colour-matched key).
+    if (!isUnsetOrTransparentColor(menuStyles.subNavBackgroundColor)) {
+        return;
+    }
+    // Only when the menu font is itself colour matched: take the opposite logo colour
+    // (the helper returns undefined when the font is not colour matched).
+    const colorMatchedSubNav = getDefaultSubNavBackgroundColor(menuStyles.defaultButtonStyle?.color);
+    if (colorMatchedSubNav) {
+        menuStyles.subNavBackgroundColor = colorMatchedSubNav;
+    }
+};
+export const migration16 = async (migrationResult, options) => {
+    // Skip user drafts (isUserDraft === true) — they already have their value. Only
+    // templates (isUserDraft === false) get the sub nav default.
+    if (options.isUserDraft) {
+        return migrationResult;
+    }
+    const { brandPageModel } = migrationResult;
+    applyDefaultSubNavColorMatch(brandPageModel.pageHeaderDesktop?.navigation);
+    applyDefaultSubNavColorMatch(brandPageModel.pageHeaderMobile?.navigation);
+    return migrationResult;
+};

package/lib/src/brand-page/utils/migration.util.js

@@ -18,6 +18,7 @@ import { migration12_1 } from './migration/migration-12_1';
 import { migration13 } from './migration/migration-13';
 import { migration14 } from './migration/migration-14';
 import { migration15 } from './migration/migration-15';
+import { migration16 } from './migration/migration-16';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -115,6 +116,12 @@ const MIGRATION_TABLE = [
         migrateFn: migration15,
         description: 'Adding default mediaOverlayStyle to background styles',
     },
+    {
+        version: 16,
+        migrateFn: migration16,
+        runAlways: true,
+        description: 'Default sub nav background color to color match on for TAB_2 and hamburger navs depending on font color only on first load flow',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

package/lib/src/brand-page-maker/components/action-bar/ActionBar.mixin.d.ts

@@ -107,16 +107,21 @@ declare const _default: import("vue").DefineComponent<{}, {
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("@brand-page/models").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("@brand-page/models").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page/models").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page/models").BrandPageModel): void;
         export(): import("@brand-page/models").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";

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

@@ -152,16 +152,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("@brand-page").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;
         export(): import("@brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.js

@@ -11,6 +11,8 @@ import { navigateToPageByPageId } from '../../routing';
 import { useBrandPageContainerStore } from '@brand-page-maker/stores';
 import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES, } from '@shared/models';
 import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useUiStore, useSnapshotStore, useVideoStore, } from '@brand-page-maker/stores';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
+import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
@@ -189,6 +191,12 @@ export default defineComponent({
         }
         // Mark brand page as fully loaded
         this.brandPageMakerStore.setIsBrandPageLoaded(true);
+        // 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).
+        if (useUndoRedoFlag().value) {
+            useHistoryStore().captureBaseline();
+        }
         this.$emit(EVENTS.Initialised);
     },
     mounted() {

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMakerTemplateSettings.mixin.d.ts

@@ -96,16 +96,21 @@ declare const _default: import("vue").DefineComponent<{}, {
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("../../stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("../../stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("../../../lib").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("../../../lib").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("../../../lib").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("../../../lib").BrandPageModel): void;
         export(): import("../../../lib").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.js

@@ -53,6 +53,7 @@ export const userFeatures = {
     canUseGettyVideos: false,
     canUseGoogleAdsense: false,
     googleAdsenseEnabled: false,
+    canUseUndoRedo: false,
 };
 export const BRAND_PAGE = {
     styles: {

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -602,16 +602,21 @@ declare const _default: import("vue").DefineComponent<{}, {
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;
         export(): import("@brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";
@@ -1046,6 +1051,22 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendUndoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendRedoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendHistoryCappedEvent: (props: {
+            entries_count: number;
+            size_bytes: number;
+        }) => void;
+        sendHistoryOversizedEvent: (props: {
+            attempted_bytes: number;
+            source: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;
@@ -1150,6 +1171,70 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): Promise<void>;
         toggleLogoBackground(): Promise<any>;
     }>;
+    historyStore: import("pinia").Store<"history", Pick<{
+        entries: import("vue").ShallowRef<import("@brand-page-maker/stores/history/history-store").HistoryEntry[], import("@brand-page-maker/stores/history/history-store").HistoryEntry[]>;
+        currentIndex: import("vue").Ref<number, number>;
+        isApplyingSnapshot: import("vue").Ref<boolean, boolean>;
+        baselineCaptured: import("vue").Ref<boolean, boolean>;
+        canUndo: import("vue").ComputedRef<boolean>;
+        canRedo: import("vue").ComputedRef<boolean>;
+        captureBaseline: () => void;
+        capture: (args: {
+            source: "manual_edit" | "template_switch" | "ai_changeset" | "rich_text";
+            actor: "user" | "ai_builder";
+            label?: string | undefined;
+        }) => "committed" | "oversized" | "noop" | "skipped";
+        captureTemplateSwitch: (label?: string | undefined) => "committed" | "oversized" | "noop" | "skipped";
+        captureAiChangeset: (label?: string | undefined) => "committed" | "oversized" | "noop" | "skipped";
+        mergeNextMutation: () => void;
+        undo: () => Promise<void>;
+        redo: () => Promise<void>;
+        reset: () => void;
+        getCurrentSizeBytes: () => number;
+        getCurrentEntryCount: () => number;
+    }, "entries" | "currentIndex" | "isApplyingSnapshot" | "baselineCaptured">, Pick<{
+        entries: import("vue").ShallowRef<import("@brand-page-maker/stores/history/history-store").HistoryEntry[], import("@brand-page-maker/stores/history/history-store").HistoryEntry[]>;
+        currentIndex: import("vue").Ref<number, number>;
+        isApplyingSnapshot: import("vue").Ref<boolean, boolean>;
+        baselineCaptured: import("vue").Ref<boolean, boolean>;
+        canUndo: import("vue").ComputedRef<boolean>;
+        canRedo: import("vue").ComputedRef<boolean>;
+        captureBaseline: () => void;
+        capture: (args: {
+            source: "manual_edit" | "template_switch" | "ai_changeset" | "rich_text";
+            actor: "user" | "ai_builder";
+            label?: string | undefined;
+        }) => "committed" | "oversized" | "noop" | "skipped";
+        captureTemplateSwitch: (label?: string | undefined) => "committed" | "oversized" | "noop" | "skipped";
+        captureAiChangeset: (label?: string | undefined) => "committed" | "oversized" | "noop" | "skipped";
+        mergeNextMutation: () => void;
+        undo: () => Promise<void>;
+        redo: () => Promise<void>;
+        reset: () => void;
+        getCurrentSizeBytes: () => number;
+        getCurrentEntryCount: () => number;
+    }, "canUndo" | "canRedo">, Pick<{
+        entries: import("vue").ShallowRef<import("@brand-page-maker/stores/history/history-store").HistoryEntry[], import("@brand-page-maker/stores/history/history-store").HistoryEntry[]>;
+        currentIndex: import("vue").Ref<number, number>;
+        isApplyingSnapshot: import("vue").Ref<boolean, boolean>;
+        baselineCaptured: import("vue").Ref<boolean, boolean>;
+        canUndo: import("vue").ComputedRef<boolean>;
+        canRedo: import("vue").ComputedRef<boolean>;
+        captureBaseline: () => void;
+        capture: (args: {
+            source: "manual_edit" | "template_switch" | "ai_changeset" | "rich_text";
+            actor: "user" | "ai_builder";
+            label?: string | undefined;
+        }) => "committed" | "oversized" | "noop" | "skipped";
+        captureTemplateSwitch: (label?: string | undefined) => "committed" | "oversized" | "noop" | "skipped";
+        captureAiChangeset: (label?: string | undefined) => "committed" | "oversized" | "noop" | "skipped";
+        mergeNextMutation: () => void;
+        undo: () => Promise<void>;
+        redo: () => Promise<void>;
+        reset: () => void;
+        getCurrentSizeBytes: () => number;
+        getCurrentEntryCount: () => number;
+    }, "reset" | "undo" | "redo" | "captureBaseline" | "capture" | "captureTemplateSwitch" | "captureAiChangeset" | "mergeNextMutation" | "getCurrentSizeBytes" | "getCurrentEntryCount">>;
 }, {
     isDraggingContent: boolean;
     isContentSelected: boolean;

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.js

@@ -15,6 +15,7 @@ import { transformToRTE, RTE_ALLOWED_SECTION_TYPES, } from '@brand-page-maker/ut
 import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 import { STYLE_THEME_KEYS } from '@brand-page/constants';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 export default defineComponent({
     mixins: [PageMixin],
     setup() {
@@ -29,6 +30,7 @@ export default defineComponent({
         const eventTracker = useEventTracker();
         const { externalEditor } = useExternalRichTextEditor();
         const styleSettingsStore = useUiStyleSettingsStore();
+        const historyStore = useHistoryStore();
         return {
             items: computed(() => contentSettingsStore.items),
             selectedItemId: computed(() => contentSettingsStore.selectedItemId),
@@ -51,6 +53,7 @@ export default defineComponent({
             eventTracker,
             externalEditor,
             styleSettingsStore,
+            historyStore,
         };
     },
     data() {
@@ -214,6 +217,8 @@ export default defineComponent({
                         selectedItem = currentItem.settings.content;
                     }
                 }
+                // RTE rewrap on section selection — fold into current head.
+                this.historyStore.mergeNextMutation();
                 transformToRTE(this.pageSettingsStore, this.externalEditor, this.styleSettingsStore, selectedItem);
             }
             if (this.selectEventDebounceHandler) {

package/lib/src/brand-page-maker/components/brandpage-settings/ReplaceImageSettingsForBrandPageSettings.mixin.d.ts

@@ -102,16 +102,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("../../../brand-page").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("../../../brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("../../../brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("../../../brand-page").BrandPageModel): void;
         export(): import("../../../brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";

package/lib/src/brand-page-maker/components/quick-link-bar/QuickLinkBar.mixin.d.ts

@@ -291,9 +291,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         pushManageWebPageUpdateSensitiveContentClickEvent(): Promise<void>;
         pushManageWebPageUnpublishClickEvent(): Promise<void>;
     }>;
+    undoRedoEnabled: import("vue").ComputedRef<boolean>;
 }, {
     copied: boolean;
 }, {
+    isPublished(): boolean;
+    shouldShowBar(): boolean;
     brandPageUrl(): string;
     copyButtonLabel(): string;
 }, {

package/lib/src/brand-page-maker/components/quick-link-bar/QuickLinkBar.mixin.js

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import { CUSTOM_DOMAIN_STATUSES } from '@brand-page-maker/constants';
 import { useBrandPageContainerStore, useEventManagerStore, } from '@brand-page-maker/stores';
+import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 export default defineComponent({
     props: {
@@ -17,6 +18,7 @@ export default defineComponent({
         return {
             brandPageContainerStore: useBrandPageContainerStore(),
             eventManagerStore: useEventManagerStore(),
+            undoRedoEnabled: useUndoRedoFlag(),
         };
     },
     data() {
@@ -25,6 +27,15 @@ export default defineComponent({
         };
     },
     computed: {
+        isPublished() {
+            return this.brandPageContainerStore.isPublished;
+        },
+        // Only render the bar when at least one inner cluster has something to
+        // show. Otherwise we'd render an empty white strip — e.g. on an
+        // unpublished page with the undo flag off.
+        shouldShowBar() {
+            return Boolean(this.undoRedoEnabled) || this.isPublished;
+        },
         brandPageUrl() {
             if (this.brandPageContainerStore.isCustomDomainEnabled &&
                 this.brandPageContainerStore.customDomain &&

package/lib/src/brand-page-maker/components/seo-settings/SeoPageSettings.mixin.d.ts

@@ -380,16 +380,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("../../../brand-page").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("../../../brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("../../../brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("../../../brand-page").BrandPageModel): void;
         export(): import("../../../brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";

package/lib/src/brand-page-maker/components/seo-settings/UrlSettings.mixin.d.ts

@@ -381,16 +381,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): void;
+        onChangeTemplateConfirmModalConfirm(): Promise<void>;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("../../../brand-page").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
+        _captureTemplateSwitchIfEnabled(): void;
+        applyHistorySnapshot(snapshot: import("../../../brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("../../../brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
+        _navigateToActivePage(activePageId?: string | undefined): void;
+        _fallbackSidebarIfSelectedContentMissing(snapshot: import("../../../brand-page").BrandPageModel): void;
         export(): import("../../../brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";