@designcrowd/library.brand-page 5.18.3-button-fix-1 → 5.18.3-undo-35

package/lib/src/shared/logo-settings/store/editable-logo-store.d.ts

@@ -74,8 +74,9 @@ export interface EditableLogoState {
     logoTemplateMetadata: string;
     isLogoDraftSaved: boolean;
     isTextOnlyLogo: boolean;
+    variationsByDraftToken: Record<string, EditableLogoVariation[]>;
 }
-export type SetStateAsyncPayload = Omit<EditableLogoState, 'enableEditMode' | 'editableLogoVariations'>;
+export type SetStateAsyncPayload = Omit<EditableLogoState, 'enableEditMode' | 'editableLogoVariations' | 'variationsByDraftToken'>;
 export declare const useUiEditableLogoStore: import("pinia").StoreDefinition<"uiEditableLogo", EditableLogoState, {
     getLogoPrimaryText: (state: {
         enableEditMode: boolean;
@@ -167,6 +168,7 @@ export declare const useUiEditableLogoStore: import("pinia").StoreDefinition<"ui
         logoTemplateMetadata: string;
         isLogoDraftSaved: boolean;
         isTextOnlyLogo: boolean;
+        variationsByDraftToken: Record<string, EditableLogoVariation[]>;
     } & import("pinia").PiniaCustomStateProperties<EditableLogoState>) => () => string | undefined;
 }, {
     setStateAsync(payload: {
@@ -184,6 +186,8 @@ export declare const useUiEditableLogoStore: import("pinia").StoreDefinition<"ui
     getEditableLogoVariationByVariationId(id: number): any;
     getEditableLogoVariationByBase64(base64: string): any;
     updateEditableLogoImageUrlAsync(defaultPrimaryText?: string, overrideLogoVariation?: number | undefined, layout?: string): Promise<void>;
+    stampLogoBase64IntoBrandPageData(overrideLogoVariation?: number): void;
+    restoreVariationsForDraftToken(logoDraftToken: string): boolean;
     updateMetadataAsync(defaultPrimaryText?: string, resetLogoTemplateMetadata?: boolean, layout?: string): Promise<void>;
     updateEditableLogoImageByVariationAsync(editableLogoVariation: EditableLogoVariation, defaultPrimaryText?: string, layout?: string): Promise<ModifyLogoDataResponse | null>;
     getDraftMetadata(logoDraftToken: string): string | undefined;

package/lib/src/shared/logo-settings/store/editable-logo-store.js

@@ -74,6 +74,7 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         },
         makerFonts: [],
         isLogoDraftSaved: false,
+        variationsByDraftToken: {},
     }),
     actions: {
         async setStateAsync(payload) {
@@ -217,6 +218,17 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         async updateEditableLogoImageUrlAsync(defaultPrimaryText, overrideLogoVariation, layout) {
             const tasks = this.editableLogoVariations.map((x) => this.updateEditableLogoImageByVariationAsync(x, defaultPrimaryText, layout));
             await Promise.all(tasks);
+            this.stampLogoBase64IntoBrandPageData(overrideLogoVariation);
+            // Cache per draft token so BYO undo can restore without re-rendering.
+            if (this.logoDraftToken) {
+                this.variationsByDraftToken[this.logoDraftToken] =
+                    this.editableLogoVariations.map((v) => ({ ...v }));
+            }
+        },
+        // Stamp editableLogoVariations[*].base64 across header/footer + every
+        // LogoContent. Called by the live edit path post-render, and by
+        // undo/redo to repopulate the stripped logoImageBase64Url fields.
+        stampLogoBase64IntoBrandPageData(overrideLogoVariation) {
             const pageSettingStore = useUiPageSettingsStore();
             [PAGE_SECTIONS.header, PAGE_SECTIONS.footer].forEach((section) => {
                 [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewport) => {
@@ -243,6 +255,15 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 });
             });
         },
+        // Restore variations grid for a draft token from the per-token cache.
+        // Returns true on cache hit.
+        restoreVariationsForDraftToken(logoDraftToken) {
+            const cached = this.variationsByDraftToken[logoDraftToken];
+            if (!cached)
+                return false;
+            this.editableLogoVariations = cached.map((v) => ({ ...v }));
+            return true;
+        },
         async updateMetadataAsync(defaultPrimaryText, resetLogoTemplateMetadata = false, layout) {
             const result = await this.postEditableLogoRequestAsync({
                 returnJson: true,
@@ -285,6 +306,13 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
             const logoDraft = logoStore.getLogoDraftAssetByToken(this.logoDraftToken);
             if (logoDraft) {
                 logoDraft.metadata = metadata;
+                // Refresh the template-asset stamp in case the active asset has
+                // changed since this draft was first registered (e.g. successive
+                // BYO uploads that share an existing draft token would otherwise
+                // keep pointing at an older template).
+                if (logoStore.logoTemplateAsset) {
+                    logoDraft.templateAsset = { ...logoStore.logoTemplateAsset };
+                }
             }
             else {
                 logoStore.addLogoDraftAsset({
@@ -293,6 +321,9 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                         metadata,
                         tick: Date.now(),
                         isByo: logoStore.logoTemplateAsset?.isByo || false,
+                        templateAsset: logoStore.logoTemplateAsset
+                            ? { ...logoStore.logoTemplateAsset }
+                            : undefined,
                     },
                 });
             }

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

@@ -3124,6 +3124,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         canUseGettyVideos: boolean;
         canUseGoogleAdsense: boolean;
         googleAdsenseEnabled: boolean;
+        canUseUndoRedo: boolean;
     }>;
     isAdmin: import("vue").ComputedRef<boolean>;
     isBrandSite: import("vue").ComputedRef<boolean>;
@@ -3835,16 +3836,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";
@@ -4787,6 +4793,22 @@ declare const _default: import("vue").DefineComponent<{}, {
     onDraggingEnd: (ev?: any, routeId?: string, previousParentRouteId?: string) => void;
     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;

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

@@ -4269,6 +4269,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             logoTemplateMetadata: string;
             isLogoDraftSaved: boolean;
             isTextOnlyLogo: boolean;
+            variationsByDraftToken: Record<string, import("@shared/logo-settings/store").EditableLogoVariation[]>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/logo-settings/store").EditableLogoState>) => () => string | undefined;
     }, {
         setStateAsync(payload: {
@@ -4286,6 +4287,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         getEditableLogoVariationByVariationId(id: number): any;
         getEditableLogoVariationByBase64(base64: string): any;
         updateEditableLogoImageUrlAsync(defaultPrimaryText?: string | undefined, overrideLogoVariation?: number | undefined, layout?: string | undefined): Promise<void>;
+        stampLogoBase64IntoBrandPageData(overrideLogoVariation?: number | undefined): void;
+        restoreVariationsForDraftToken(logoDraftToken: string): boolean;
         updateMetadataAsync(defaultPrimaryText?: string | undefined, resetLogoTemplateMetadata?: boolean, layout?: string | undefined): Promise<void>;
         updateEditableLogoImageByVariationAsync(editableLogoVariation: import("@shared/logo-settings/store").EditableLogoVariation, defaultPrimaryText?: string | undefined, layout?: string | undefined): Promise<import("../../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
         getDraftMetadata(logoDraftToken: string): string | undefined;
@@ -4393,16 +4396,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/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -173,16 +173,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/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";
@@ -479,6 +484,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     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;

package/lib/src/shared/side-bar/components/SideBarTabButton.mixin.d.ts

@@ -17,6 +17,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDesignCom: import("vue").ComputedRef<boolean>;
     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;

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

@@ -565,16 +565,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").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";
@@ -915,6 +920,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;

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.d.ts

@@ -565,6 +565,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDesignCom: import("vue").ComputedRef<boolean>;
     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;

package/package.json

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

package/src/brand-page/components/button/Button.vue

@@ -253,21 +253,13 @@ const onCloseModal = (): void => {
   text-decoration: none;
 }
 
-/* Shape-library icons (vector, nested in .c-shape, no class on the img):
-   render at the default icon size, centered in normal flow like the SVG icons. */
 .bp-button :deep(.c-button__icon-img img) {
   @apply tw-object-cover tw-max-w-none;
-  width: var(--icon-w);
-  height: var(--icon-h);
-}
-
-/* Raster image thumbnails (FallbackImage renders <img class="c-image">):
-   render larger/prominent and centered over the icon slot. */
-.bp-button :deep(.c-button__icon-img img.c-image) {
   --icon-img-size: 2.3rem;
+  --icon-img-offset-x: calc((var(--button-p-x) - var(--button-p-y)) * 2);
   position: absolute;
   top: calc(var(--icon-img-size) / -2 + var(--icon-h) / 2);
-  left: calc(var(--icon-img-size) / -2 + var(--icon-w) / 2);
+  left: calc(var(--icon-img-size) / -2 + var(--icon-img-offset-x));
   width: var(--icon-img-size);
   height: var(--icon-img-size);
 }

package/src/brand-page/components/contact-form/ContactForm.vue

@@ -286,7 +286,7 @@
                   {{ value.error }}
                 </p>
               </div>
-              <div class="tw-flex tw-w-full tw-justify-start tw-col-span-2">
+              <div class="tw-flex tw-w-full tw-justify-center tw-col-span-2">
                 <button
                   v-if="isSubmitButtonVisible"
                   class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
@@ -417,7 +417,7 @@
                       </p>
                     </div>
                     <div
-                      class="tw-flex tw-w-full tw-justify-start tw-col-span-2"
+                      class="tw-flex tw-w-full tw-justify-center tw-col-span-2"
                     >
                       <button
                         v-if="isSubmitButtonVisible"

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

@@ -35,6 +35,8 @@ import {
   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 type { AdminPreviewLogoTemplateModel } from '@brand-page-maker/stores/admin-logo-settings';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
@@ -283,6 +285,15 @@ 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. `useUndoRedoFlag` requires both the LaunchDarkly feature
+    // (`userStore.features.canUseUndoRedo`) AND the maker being a brand-site
+    // — V1 scope is brand-site only; brand-page and brand-contact don't get
+    // undo/redo. See useUndoRedoFlag.ts for the rationale.
+    if (useUndoRedoFlag().value) {
+      useHistoryStore().captureBaseline();
+    }
+
     this.$emit(EVENTS.Initialised);
   },
   mounted() {

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.vue

@@ -23,7 +23,6 @@
     >
       <div class="tw-flex tw-flex-col tw-w-full tw-h-full">
         <QuickLinkBar
-          v-if="isPublished && !isAdmin"
           class="c-quick-link-bar"
           :brand-page-base-url="brandPageBaseUrl"
           :slug="brandPageSlug"
@@ -87,8 +86,8 @@
             v-if="isBrandPageLoaded"
             :is-mobile-device="isMobileDevice"
             :is-design-com="isDesignCom"
-            :has-quick-links="isPublished"
             :container="previewContainer"
+            :has-quick-links="isPublished"
           >
             <div ref="previewContent" class="tw-h-full">
               <PreviewWithState :device-mode="deviceMode" />
@@ -123,9 +122,9 @@
       </div>
 
       <SideBar
-        :has-quick-links="isPublished"
         :mobile-tab-name="SideBarTabNames.PREVIEW"
         :is-mobile-screen-size="isMobileScreenSize"
+        :has-quick-links="isPublished"
       >
         <template #tab>
           <component

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

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

package/src/brand-page-maker/components/cookie-collection/CookieSettings.vue

@@ -20,14 +20,14 @@
           </div>
           <Toggle
             id="show-cookie-banner"
-            :model-value="data.isToggled"
+            :model-value="isToggled"
             class="tw-pointer-events-none tw-touch-none"
             color="primary"
             @update:model-value="onShowCookieBanner()"
           />
         </div>
       </div>
-      <div v-if="data.isToggled" class="tw-flex-none tw-mt-4">
+      <div v-if="isToggled" class="tw-flex-none tw-mt-4">
         <div
           class="tw-flex tw-items-center tw-justify-between tw-cursor-pointer"
           @click="onShowPreviewCookieBanner"
@@ -41,7 +41,7 @@
           </div>
           <Toggle
             id="show-preview-cookie-banner"
-            :model-value="data.isPreviewToggled"
+            :model-value="isPreviewToggled"
             class="tw-pointer-events-none tw-touch-none"
             color="primary"
             @update:model-value="onShowPreviewCookieBanner()"
@@ -55,10 +55,10 @@
 import { Toggle } from '@designcrowd/fe-shared-lib';
 import { cookieSettingTr } from '@src/composables/useTranslate';
 import type { CookieOptions } from '@brand-page/models';
-import { reactive, type PropType } from 'vue';
+import { computed, type PropType } from 'vue';
 import { useBrandPageMakerStore } from '@brand-page-maker/stores';
 
-const props = defineProps({
+defineProps({
   viewModel: {
     type: Object as PropType<CookieOptions>,
     required: true,
@@ -67,25 +67,26 @@ const props = defineProps({
 
 const brandPageMakerStore = useBrandPageMakerStore();
 
-const data = reactive({
-  isToggled: props.viewModel.isCookieEnabled,
-  isPreviewToggled: props.viewModel.isCookiePreviewEnabled,
-});
+// Read directly from the store so undo/redo (and any other external
+// mutation of cookieOptions) is reflected in the toggles.
+const isToggled = computed(
+  () => brandPageMakerStore.cookieOptions.isCookieEnabled,
+);
+const isPreviewToggled = computed(
+  () => brandPageMakerStore.cookieOptions.isCookiePreviewEnabled,
+);
 
 const onShowCookieBanner = () => {
-  data.isToggled = !data.isToggled;
-  brandPageMakerStore.setCookieEnabled({
-    isCookieEnabled: data.isToggled,
-  });
-  data.isPreviewToggled = data.isToggled;
+  const next = !isToggled.value;
+
+  brandPageMakerStore.setCookieEnabled({ isCookieEnabled: next });
   brandPageMakerStore.setCookiePreviewEnabled({
-    isCookiePreviewEnabled: data.isPreviewToggled,
+    isCookiePreviewEnabled: next,
   });
 };
 const onShowPreviewCookieBanner = () => {
-  data.isPreviewToggled = !data.isPreviewToggled;
   brandPageMakerStore.setCookiePreviewEnabled({
-    isCookiePreviewEnabled: data.isPreviewToggled,
+    isCookiePreviewEnabled: !isPreviewToggled.value,
   });
 };
 </script>

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

@@ -4,6 +4,7 @@ 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({
@@ -21,6 +22,7 @@ export default defineComponent({
     return {
       brandPageContainerStore: useBrandPageContainerStore(),
       eventManagerStore: useEventManagerStore(),
+      undoRedoEnabled: useUndoRedoFlag(),
     };
   },
   data() {
@@ -29,6 +31,17 @@ export default defineComponent({
     };
   },
   computed: {
+    isPublished(): boolean {
+      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(): boolean {
+      return Boolean(this.undoRedoEnabled) || this.isPublished;
+    },
+
     brandPageUrl(): string {
       if (
         this.brandPageContainerStore.isCustomDomainEnabled &&

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

@@ -1,10 +1,24 @@
 <template>
   <div
+    v-if="shouldShowBar"
     data-component="quick-link-bar"
     class="c-quick-links tw-w-full tw-flex-none tw-bg-white md:tw-h-12 tw-border-b tw-border-grayscale-500 tw-px-2 lg:tw-px-4 tw-box-border tw-flex tw-items-center tw-text-grayscale-800 tw-fixed lg:tw-static"
   >
-    <p
-      class="tw-flex tw-items-center tw-justify-between lg:tw-justify-center tw-w-full"
+    <!-- Left slot: Undo/Redo buttons. Always rendered for layout balance
+         (flex-1 reserves equal space on left and right) so the center
+         cluster stays geometrically centered in the bar regardless of
+         whether the buttons are visible. -->
+    <div class="tw-flex tw-flex-1 tw-justify-start tw-gap-1">
+      <template v-if="undoRedoEnabled">
+        <UndoButton />
+        <RedoButton />
+      </template>
+    </div>
+
+    <!-- Center cluster: URL label, link, copy button -->
+    <div
+      v-if="isPublished"
+      class="tw-flex tw-items-center tw-gap-2 tw-justify-center"
     >
       <strong class="tw-font-semibold tw-hidden xl:tw-inline-block">
         {{ quickLinkBarTr('myWebPageLabel') }}
@@ -27,7 +41,12 @@
         }"
         @on-click.stop="onCopyClick"
       />
-    </p>
+    </div>
+
+    <!-- Right spacer: balances the left slot so the center cluster is
+         geometrically centered. -->
+    <div class="tw-flex-1" />
+
     <textarea ref="textarea" :value="brandPageUrl" class="tw-sr-only" />
   </div>
 </template>
@@ -35,10 +54,14 @@
 import QuickLinkBarMixin from './QuickLinkBar.mixin.ts';
 import { Button } from '@designcrowd/fe-shared-lib';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
+import UndoButton from './UndoButton.vue';
+import RedoButton from './RedoButton.vue';
 
 export default {
   components: {
     Button,
+    UndoButton,
+    RedoButton,
   },
   mixins: [QuickLinkBarMixin],
   setup(props, context) {