@designcrowd/library.brand-page 5.18.6 → 5.18.7-ast-padding-1

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -292,6 +292,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         "contents": [
           {
             "backgroundStyle": {},
+            "bottomPadding": 32,
             "buttonLinkType": "url",
             "buttonPageId": "",
             "buttonText": "Get Started",
@@ -330,6 +331,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
               "textAlign": "center",
               "wordBreak": "normal",
             },
+            "topPadding": 32,
             "type": "banner-section",
             "url": "",
           },
@@ -454,7 +456,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 16,
+    "v": 17,
   },
   "useOldLogoRenderSize": true,
 }
@@ -751,6 +753,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       {
         "contents": [
           {
+            "bottomPadding": 12,
             "id": "bec5aca6-e3c5-4d4c-93fa-2894816a8040",
             "text": "",
             "textColor": {},
@@ -774,6 +777,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
               "textAlign": "center",
               "textStyleType": "paragraphs",
             },
+            "topPadding": 12,
             "type": "text",
           },
         ],
@@ -897,7 +901,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 16,
+    "v": 17,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1194,6 +1198,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       {
         "contents": [
           {
+            "bottomPadding": 12,
             "id": "bec5aca6-e3c5-4d4c-93fa-2894816a8040",
             "text": "",
             "textColor": {},
@@ -1224,6 +1229,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
               "textAlign": "center",
               "textStyleType": "paragraphs",
             },
+            "topPadding": 12,
             "type": "text",
           },
         ],
@@ -1347,7 +1353,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 16,
+    "v": 17,
   },
   "useOldLogoRenderSize": true,
 }

package/src/brand-page/utils/content-padding.util.test.ts

@@ -0,0 +1,29 @@
+import { describe, test, expect } from 'vitest';
+import { contentPaddingStyle } from './content-padding.util';
+
+describe('content-padding.util', () => {
+  test('contentPaddingStyle should map stored padding to px values', () => {
+    expect(contentPaddingStyle({ topPadding: 53, bottomPadding: 24 })).toEqual({
+      paddingTop: '53px',
+      paddingBottom: '24px',
+    });
+  });
+
+  test('contentPaddingStyle should default missing values to 0 for content created before the field existed', () => {
+    expect(contentPaddingStyle({})).toEqual({
+      paddingTop: '0px',
+      paddingBottom: '0px',
+    });
+    expect(contentPaddingStyle({ topPadding: 16 })).toEqual({
+      paddingTop: '16px',
+      paddingBottom: '0px',
+    });
+  });
+
+  test('contentPaddingStyle should keep an explicit 0 rather than treating it as unset', () => {
+    expect(contentPaddingStyle({ topPadding: 0, bottomPadding: 0 })).toEqual({
+      paddingTop: '0px',
+      paddingBottom: '0px',
+    });
+  });
+});

package/src/brand-page/utils/content-padding.util.ts

@@ -0,0 +1,13 @@
+/**
+ * Block top/bottom padding (BP-5687) as a bindable CSS style object. Defaults
+ * live in the data — `content-settings` for new content, a migration for
+ * existing — so this just reads the stored value (`?? 0` covers content from
+ * before the field existed).
+ */
+export const contentPaddingStyle = (content: {
+  topPadding?: number;
+  bottomPadding?: number;
+}): { paddingTop: string; paddingBottom: string } => ({
+  paddingTop: `${content.topPadding ?? 0}px`,
+  paddingBottom: `${content.bottomPadding ?? 0}px`,
+});

package/src/brand-page/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './style.util';
+export * from './content-padding.util';
 export * from './view-model.util';
 export * from './text.util';
 export * from './model.util';

package/src/brand-page/utils/migration/migration-17.ts

@@ -0,0 +1,65 @@
+import type { MigrationData } from '../migration.util';
+import type { BannerSectionContent, ContactFormContent } from '../../models';
+import {
+  CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
+  bannerDisplayStyleDefaultPadding,
+} from '../../constants';
+
+/**
+ * Padding Control backfill (BP-5699 Tier 2, BP-5700 Store): blocks that already
+ * had hard-coded top/bottom spacing. Backfill that spacing as the block's explicit
+ * topPadding/bottomPadding so existing pages render unchanged once the spacing
+ * moves to the Padding Control sliders. Type-scoped and idempotent — only the
+ * listed types, and only when the value isn't already set.
+ */
+const BLOCK_DEFAULT_PADDING: Partial<Record<string, number>> = {
+  text: 12,
+  'images-section': 32,
+  'social-links': 32,
+  'shapes-section': 32,
+  'booking-section': 32,
+  'shop-section': 16,
+  'about-section': 32,
+};
+
+export const migration17 = async (
+  migrationResult: MigrationData,
+): Promise<MigrationData> => {
+  const { brandPageModel } = migrationResult;
+
+  brandPageModel.pages.forEach((page) => {
+    page.contents.forEach((content) => {
+      // Contact Form and Banner previously varied their hard-coded spacing by
+      // layout/display style (full-bleed image layouts had no outer padding), so they're
+      // keyed by that rather than a single per-type value.
+      let value: number | undefined;
+
+      if (content.type === 'contact-form') {
+        value =
+          CONTACT_FORM_LAYOUT_DEFAULT_PADDING[
+            (content as ContactFormContent).layoutStyle ?? ''
+          ];
+      } else if (content.type === 'banner-section') {
+        value = bannerDisplayStyleDefaultPadding(
+          (content as BannerSectionContent).displayStyle,
+        );
+      } else {
+        value = BLOCK_DEFAULT_PADDING[content.type];
+      }
+
+      if (value === undefined) {
+        return;
+      }
+
+      if (content.topPadding === undefined) {
+        content.topPadding = value;
+      }
+
+      if (content.bottomPadding === undefined) {
+        content.bottomPadding = value;
+      }
+    });
+  });
+
+  return migrationResult;
+};

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

@@ -24,6 +24,12 @@ import {
   createInitialTestimonialSectionContent,
 } from '@brand-page-maker/models';
 import {
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_LEFT_FULL_IMAGE,
+  ALIGN_RIGHT_FULL_IMAGE,
+  ALIGN_TOP_FULL_IMAGE,
+  ALIGN_BOTTOM_FULL_IMAGE,
+  ALIGN_MIDDLE_FULL_IMAGE,
   DEFAULT_LETTER_SPACING,
   LINE_HEIGHT_BODY,
   LINE_HEIGHT_HEADINGS,
@@ -1464,6 +1470,195 @@ describe('migration.util', () => {
       expect(content.layoutStyle).toBe(TEXT_ONLY);
     });
 
+    test('migration17 should backfill contact form padding from its layout style', async () => {
+      const model = await migrateBrandPageModel(getBsModel(), {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      const collapsible = model.brandPageModel.pages[3]
+        .contents[0] as ContactFormContent;
+      const textOnly = model.brandPageModel.pages[3]
+        .contents[1] as ContactFormContent;
+
+      expect(collapsible.topPadding).toBe(0);
+      expect(collapsible.bottomPadding).toBe(0);
+      expect(textOnly.topPadding).toBe(32);
+      expect(textOnly.bottomPadding).toBe(32);
+    });
+
+    test.each([
+      [ALIGN_LEFT_FULL_IMAGE],
+      [ALIGN_RIGHT_FULL_IMAGE],
+      [ALIGN_CARD_CENTER_IMAGE],
+    ])(
+      'migration17 should backfill zero padding for the %s contact form layout',
+      async (layoutStyle) => {
+        const brandPageModel = getBsModel();
+
+        (
+          brandPageModel.pages[3].contents[1] as ContactFormContent
+        ).layoutStyle = layoutStyle;
+
+        const model = await migrateBrandPageModel(brandPageModel, {
+          isUserDraft: false,
+          isServerRender: false,
+        });
+
+        const content = model.brandPageModel.pages[3]
+          .contents[1] as ContactFormContent;
+
+        expect(content.topPadding).toBe(0);
+        expect(content.bottomPadding).toBe(0);
+      },
+    );
+
+    test('migration17 should not overwrite contact form padding that is already set', async () => {
+      const brandPageModel = getBsModel();
+
+      (brandPageModel.pages[3].contents[1] as ContactFormContent).topPadding =
+        10;
+
+      const model = await migrateBrandPageModel(brandPageModel, {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      const content = model.brandPageModel.pages[3]
+        .contents[1] as ContactFormContent;
+
+      expect(content.topPadding).toBe(10);
+      expect(content.bottomPadding).toBe(32);
+    });
+
+    test('migration17 should backfill 32 padding for standard banner display styles', async () => {
+      const model = await migrateBrandPageModel(getBsModel(), {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      // pages[0].contents[0] is a 'centered' banner (standard, not full-bleed).
+      const banner = model.brandPageModel.pages[0]
+        .contents[0] as BannerSectionContent;
+
+      expect(banner.topPadding).toBe(32);
+      expect(banner.bottomPadding).toBe(32);
+    });
+
+    test.each([
+      [ALIGN_LEFT_FULL_IMAGE],
+      [ALIGN_RIGHT_FULL_IMAGE],
+      [ALIGN_TOP_FULL_IMAGE],
+      [ALIGN_BOTTOM_FULL_IMAGE],
+      [ALIGN_MIDDLE_FULL_IMAGE],
+    ])(
+      'migration17 should backfill zero padding for the %s full-bleed banner style',
+      async (displayStyle) => {
+        const brandPageModel = getBsModel();
+
+        (
+          brandPageModel.pages[0].contents[0] as BannerSectionContent
+        ).displayStyle = displayStyle;
+
+        const model = await migrateBrandPageModel(brandPageModel, {
+          isUserDraft: false,
+          isServerRender: false,
+        });
+
+        const banner = model.brandPageModel.pages[0]
+          .contents[0] as BannerSectionContent;
+
+        expect(banner.topPadding).toBe(0);
+        expect(banner.bottomPadding).toBe(0);
+      },
+    );
+
+    test('migration17 should backfill 32 padding for standard about display styles', async () => {
+      const model = await migrateBrandPageModel(getBsModel(), {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      // pages[0].contents[2] is a 'centered' about section (standard, not full-image).
+      const about = model.brandPageModel.pages[0]
+        .contents[2] as AboutSectionContent;
+
+      expect(about.topPadding).toBe(32);
+      expect(about.bottomPadding).toBe(32);
+    });
+
+    test.each([[ALIGN_LEFT_FULL_IMAGE], [ALIGN_RIGHT_FULL_IMAGE]])(
+      'migration17 should backfill 32 padding for the %s full-image about style',
+      async (displayStyle) => {
+        const brandPageModel = getBsModel();
+
+        (
+          brandPageModel.pages[0].contents[2] as AboutSectionContent
+        ).displayStyle = displayStyle;
+
+        const model = await migrateBrandPageModel(brandPageModel, {
+          isUserDraft: false,
+          isServerRender: false,
+        });
+
+        const about = model.brandPageModel.pages[0]
+          .contents[2] as AboutSectionContent;
+
+        expect(about.topPadding).toBe(32);
+        expect(about.bottomPadding).toBe(32);
+      },
+    );
+
+    test('migration17 should backfill 16 padding for the shop section', async () => {
+      const oldTemplate: BrandPageModel = {
+        pages: [
+          {
+            slug: 'shop',
+            title: 'Shop',
+            contents: [{ type: 'shop-section', id: 'shop-1' }],
+          },
+        ],
+        brandPageType: 'brandSite',
+      } as any;
+
+      const model = await migrateBrandPageModel(
+        new BrandPageModel(oldTemplate),
+        {
+          isUserDraft: false,
+          isServerRender: false,
+        },
+      );
+      const shop = model.brandPageModel.pages[0].contents[0] as any;
+
+      expect(shop.topPadding).toBe(16);
+      expect(shop.bottomPadding).toBe(16);
+    });
+
+    test('migration17 should not overwrite shop padding that is already set', async () => {
+      const oldTemplate: BrandPageModel = {
+        pages: [
+          {
+            slug: 'shop',
+            title: 'Shop',
+            contents: [{ type: 'shop-section', id: 'shop-1', topPadding: 40 }],
+          },
+        ],
+        brandPageType: 'brandSite',
+      } as any;
+
+      const model = await migrateBrandPageModel(
+        new BrandPageModel(oldTemplate),
+        {
+          isUserDraft: false,
+          isServerRender: false,
+        },
+      );
+      const shop = model.brandPageModel.pages[0].contents[0] as any;
+
+      expect(shop.topPadding).toBe(40);
+      expect(shop.bottomPadding).toBe(16);
+    });
+
     test('migrateNewLogoLogic should migrate logoDraftToken and logoVariation', () => {
       const oldTemplate: BrandPageData = {
         pages: [

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

@@ -19,6 +19,7 @@ import { migration13 } from './migration/migration-13';
 import { migration14 } from './migration/migration-14';
 import { migration15 } from './migration/migration-15';
 import { migration16 } from './migration/migration-16';
+import { migration17 } from './migration/migration-17';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -149,6 +150,16 @@ const MIGRATION_TABLE = [
     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',
   },
+  {
+    version: 17,
+    migrateFn: migration17,
+    // runAlways: re-apply on every load (ticket stack) so already-migrated pages
+    // pick up newly-added block defaults (e.g. Store) without a new migration.
+    // Idempotent — only backfills when topPadding/bottomPadding aren't already set.
+    runAlways: true,
+    description:
+      'Padding Control backfill (BP-5699 Tier 2 + BP-5700 Store): backfill existing top/bottom spacing as explicit padding for text (12px), images/social links/shapes/booking (32px), store (16px), contact form (per layout), banner and about (per display style)',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

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,13 @@ 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/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/brandpage-maker-page/BrandPageMakerPage.mixin.ts

@@ -36,6 +36,7 @@ import {
 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],
@@ -51,6 +52,7 @@ export default defineComponent({
     const eventTracker = useEventTracker();
     const { externalEditor } = useExternalRichTextEditor();
     const styleSettingsStore = useUiStyleSettingsStore();
+    const historyStore = useHistoryStore();
 
     return {
       items: computed(() => contentSettingsStore.items),
@@ -84,6 +86,7 @@ export default defineComponent({
       eventTracker,
       externalEditor,
       styleSettingsStore,
+      historyStore,
     };
   },
   data() {
@@ -301,6 +304,8 @@ export default defineComponent({
           }
         }
 
+        // RTE rewrap on section selection — fold into current head.
+        this.historyStore.mergeNextMutation();
         transformToRTE(
           this.pageSettingsStore,
           this.externalEditor,

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) {