@designcrowd/library.brand-page 6.2.0 → 6.2.2-live-preview-1

package/lib/src/{CreatedOnBrandCrowd-de-de-VQCQvlMg.js → CreatedOnBrandCrowd-de-de-Cn0M-eZ1.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-DSf3BjCG.js → CreatedOnBrandCrowd-en-us-DRLMSDZr.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-DGcdM9Ec.js → CreatedOnBrandCrowd-es-es-BglTu73U.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-C9g1fc39.js → CreatedOnBrandCrowd-fr-ca-Bj6YZ_el.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-C9g1fc39.js → CreatedOnBrandCrowd-fr-fr-Bj6YZ_el.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DSXr7Bxl.js → CreatedOnBrandCrowd-pt-br-DEoOmQ1F.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-DSXr7Bxl.js → CreatedOnBrandCrowd-pt-pt-DEoOmQ1F.js}

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

package/lib/src/{CreatedOnDcom-de-de-BPdCL6wS.js → CreatedOnDcom-de-de-BZ7gTt4Z.js}

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

package/lib/src/{CreatedOnDcom-en-us-CLkSTQRu.js → CreatedOnDcom-en-us-CD6Km5sH.js}

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

package/lib/src/{CreatedOnDcom-es-es-CRknMAGv.js → CreatedOnDcom-es-es-CNpZHvEl.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-ClAY_dHI.js → CreatedOnDcom-fr-ca-URS-ydJ1.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-DQtv9rR-.js → CreatedOnDcom-fr-fr-D2AVeA3H.js}

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

package/lib/src/{CreatedOnDcom-pt-br-BbIxvmxv.js → CreatedOnDcom-pt-br-C32frnFs.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-BOfOesBj.js → CreatedOnDcom-pt-pt-TDYGjRXS.js}

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

package/lib/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { BrandPageContext, NavigationDesktop, NavigationMobile } from '../../../models';
-import type { NavItemViewModel } from '../../../view-models';
+import type { ButtonViewModel, NavItemViewModel } from '../../../view-models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {
         type: PropType<BrandPageContext>;
@@ -18,6 +18,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<NavigationDesktop | NavigationMobile>;
         required: true;
     };
+    headerButtonViewModel: {
+        type: PropType<ButtonViewModel>;
+        required: false;
+        default: undefined;
+    };
 }>, {}, {
     expandedItems: Record<string, boolean>;
 }, {
@@ -27,12 +32,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     selectedButtonStyle(): BrandPageCssStyle;
     defaultWrapperStyle(): BrandPageCssStyle;
     selectedWrapperStyle(): BrandPageCssStyle;
+    showHeaderButton(): boolean;
     routes(): any[];
 }, {
     filterHiddenNavItems(navItems: NavItemViewModel[]): NavItemViewModel[];
     isCurrentPage(navItem: NavItemViewModel): boolean;
     getSubNavItemStyle(navItem: NavItemViewModel): BrandPageCssStyle;
     closeSideMenu(): void;
+    onSideMenuCtaClick(event: MouseEvent): void;
     toggleExpanded(pageId: string): void;
     isExpanded(pageId: string): boolean;
     expandSubPageIfCurrentPage(): void;
@@ -53,7 +60,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<NavigationDesktop | NavigationMobile>;
         required: true;
     };
+    headerButtonViewModel: {
+        type: PropType<ButtonViewModel>;
+        required: false;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onClose-side-menu"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    headerButtonViewModel: ButtonViewModel;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.js

@@ -1,5 +1,6 @@
 import { defineComponent } from 'vue';
 import { resolveSubNavItemBackgroundColor } from '../../../models';
+import { guardPreviewClick } from '../../../utils/context.util';
 export default defineComponent({
     props: {
         context: {
@@ -18,6 +19,13 @@ export default defineComponent({
             type: Object,
             required: true,
         },
+        // Provided only when the header row does not render the CTA (the caller
+        // decides via headerRowRendersCta) — absent means the side menu shows none.
+        headerButtonViewModel: {
+            type: Object,
+            required: false,
+            default: undefined,
+        },
     },
     emits: ['close-side-menu'],
     data() {
@@ -50,6 +58,9 @@ export default defineComponent({
             const { fontSize: _fontSize, lineHeight: _lineHeight, letterSpacing: _letterSpacing, ...rest } = this.selectedButtonStyle;
             return rest;
         },
+        showHeaderButton() {
+            return Boolean(this.headerButtonViewModel);
+        },
         routes() {
             return this.visibleNavItems.map((navItem, _i) => {
                 return {
@@ -85,6 +96,12 @@ export default defineComponent({
         closeSideMenu() {
             this.$emit('close-side-menu');
         },
+        // Preview: inert; published: follow the link and close the side menu behind it.
+        onSideMenuCtaClick(event) {
+            if (!guardPreviewClick(event, this.context)) {
+                this.closeSideMenu();
+            }
+        },
         toggleExpanded(pageId) {
             const isCurrentlyExpanded = this.expandedItems[pageId];
             this.expandedItems = {};

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { BrandPageViewModel, ContentViewModel, PageViewModel } from '@brand-page/view-models';
+import type { BrandPageViewModel, ButtonViewModel, ContentViewModel, PageViewModel } from '@brand-page/view-models';
 import type { BackgroundShape, BrandPageContext, ViewportsType } from '@brand-page/models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {
@@ -81,6 +81,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     headerViewModelDesktop(): any;
     isNavigationEmbeddedInLogoMobile(): boolean;
     isNavigationEmbeddedInLogoDesktop(): boolean;
+    sideMenuHeaderButtonViewModel(): ButtonViewModel | undefined;
     shouldShowNavigation(): boolean;
     showNavigationAfterLogoMobile(): boolean;
     showNavigationAfterLogoDesktop(): boolean;

package/lib/src/brand-page/components/page/Page.mixin.js

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
-import { DEFAULT_FONT_FAMILY_KEY, FALLBACK_FONT_FAMILIES, FONT_FAMILY_CONFIGS, } from '../../constants';
+import { DEFAULT_FONT_FAMILY_KEY, FALLBACK_FONT_FAMILIES, FONT_FAMILY_CONFIGS, headerRowRendersCta, } from '../../constants';
 import { getSlugFromContext, getPageHeadingText, buildPaletteRootCss, buildPaletteScopedCss, PAGE_SCOPE_ID_ATTRIBUTE, resolveColorReference, } from '@brand-page/utils';
-import { findNavItemByRelativePath } from '@brand-page/utils/route.util';
+import { findNavItemByRelativePath, hasVisibleNavigation, } from '@brand-page/utils/route.util';
 import { BRAND_PAGE_TYPES } from '@brand-page/models';
 import { hasProfileContent as checkHasProfileContent } from '@brand-page/utils/vcard.util';
 // Per-instance id for a `Page` instance. Deliberately generic — any per-instance
@@ -276,12 +276,17 @@ export default defineComponent({
                 this.contents[0]?.type === 'logo' &&
                 this.viewModel.pages.length > 1);
         },
+        // The button shows in the header row OR in the side menu, never both. This gives it to the side menu when the header doesn't show it; undefined = no button in the menu.
+        sideMenuHeaderButtonViewModel() {
+            const header = this.viewModel.headerViewModelMobile;
+            if (!header.headerButtonViewModel ||
+                headerRowRendersCta(header.displayStyle, this.shouldShowNavigation)) {
+                return undefined;
+            }
+            return header.headerButtonViewModel;
+        },
         shouldShowNavigation() {
-            // Show navigation if more than 1 non-hidden page exists, or if there's 1 page with non-hidden subpages
-            const visibleNavItems = this.context.nav.navItems.filter((item) => !item.isHidden);
-            return (visibleNavItems.length > 1 ||
-                (visibleNavItems.length === 1 &&
-                    visibleNavItems[0].nestedNavItems.some((item) => !item.isHidden)));
+            return hasVisibleNavigation(this.context.nav.navItems);
         },
         showNavigationAfterLogoMobile() {
             return (!this.context.isBrandSite &&

package/lib/src/brand-page/components/page-header/HeaderLayout.stories.d.ts

@@ -3,3 +3,4 @@ import HeaderLayout from './HeaderLayout.vue';
 declare const meta: Meta<typeof HeaderLayout>;
 export default meta;
 export declare const Sample: StoryFn;
+export declare const WithHeaderButton: StoryFn;

package/lib/src/brand-page/components/page-header/HeaderLayout.stories.js

@@ -36,6 +36,7 @@ const Template = (args) => ({
         nav-id="nav-1"
         :show-nav="args.showNav"
         :display-style="args.displayStyle"
+        :has-cta="args.hasCta"
         logo-width="100px"
       >
         <template v-slot:logo>
@@ -44,6 +45,9 @@ const Template = (args) => ({
         <template v-slot:nav>
           <div style="border: 1px solid red; display: inline-block;">Nav | Nav | Nav | Nav | Nav | Nav | Nav | Nav</div>
         </template>
+        <template v-slot:cta>
+          <div style="border: 1px solid green; display: inline-block; padding: 8px 16px;">Contact Us</div>
+        </template>
       </HeaderLayout>
     </div>
   `,
@@ -52,3 +56,8 @@ export const Sample = Template.bind({});
 Sample.args = {
     displayStyle: HEADER_DISPLAY.DESKTOP_TAB_5,
 };
+export const WithHeaderButton = Template.bind({});
+WithHeaderButton.args = {
+    displayStyle: HEADER_DISPLAY.DESKTOP_TAB_1,
+    hasCta: true,
+};

package/lib/src/brand-page/components/page-header/PageHeader.mixin.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { BrandPageContext } from '@brand-page/models';
-import type { PageHeaderViewModel } from '@brand-page/view-models';
+import type { ButtonViewModel, PageHeaderViewModel } from '@brand-page/view-models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     navId: {
         type: StringConstructor;
@@ -23,9 +23,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     LOGO_SLIDER_DESKTOP_MAX: number;
 }, {
     containerCss(): BrandPageCssStyle;
+    headerButtonViewModel(): ButtonViewModel | undefined;
     showNav(): boolean;
 }, {
     onHeaderContainerClick(): void;
+    onHeaderCtaClick(event: MouseEvent): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "header-container-click"[], "header-container-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     navId: {
         type: StringConstructor;

package/lib/src/brand-page/components/page-header/PageHeader.mixin.js

@@ -1,5 +1,7 @@
 import { defineComponent } from 'vue';
 import { LOGO_SLIDER_DESKTOP_MAX } from '../../constants';
+import { hasVisibleNavigation } from '../../utils/route.util';
+import { guardPreviewClick } from '../../utils/context.util';
 export default defineComponent({
     props: {
         navId: {
@@ -33,11 +35,11 @@ export default defineComponent({
                 padding: '1.5rem 0', // var(--page-padding) 0
             };
         },
+        headerButtonViewModel() {
+            return this.viewModel.headerButtonViewModel;
+        },
         showNav() {
-            const visibleNavItems = this.context.nav.navItems.filter((item) => !item.isHidden);
-            return (visibleNavItems.length > 1 ||
-                (visibleNavItems.length === 1 &&
-                    visibleNavItems[0].nestedNavItems.some((item) => !item.isHidden)));
+            return hasVisibleNavigation(this.context.nav.navItems);
         },
     },
     emits: ['header-container-click'],
@@ -45,5 +47,9 @@ export default defineComponent({
         onHeaderContainerClick() {
             this.$emit('header-container-click');
         },
+        // Preview only: deliberately inert — no link-follow, no Header Settings open.
+        onHeaderCtaClick(event) {
+            guardPreviewClick(event, this.context);
+        },
     },
 });

package/lib/src/brand-page/constants/sections/header-display.constants.d.ts

@@ -42,6 +42,9 @@ interface HeaderDisplayStyleConfig {
     supportLogo: boolean;
     supportedNavTypes: string[];
     option: ButtonGroupOption;
+    withButtonIconName?: string;
 }
 export declare const HEADER_DISPLAY_STYLE_CONFIGS: HeaderDisplayStyleConfig[];
+/** True when the header row shows the button; mobile hamburger styles put it in the side menu instead (unless the nav is hidden — then there is no side menu). */
+export declare const headerRowRendersCta: (displayStyle: string, showNav: boolean) => boolean;
 export {};

package/lib/src/brand-page/constants/sections/header-display.constants.js

@@ -48,6 +48,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_1,
             isSelected: false,
         },
+        withButtonIconName: 'header-desktop-nav-style-tab-display-style-with-button-1',
     },
     {
         viewMode: 'desktop',
@@ -61,6 +62,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_2,
             isSelected: false,
         },
+        withButtonIconName: 'header-desktop-nav-style-tab-display-style-with-button-2',
     },
     {
         viewMode: 'desktop',
@@ -74,6 +76,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_3,
             isSelected: false,
         },
+        withButtonIconName: 'header-desktop-nav-style-tab-display-style-with-button-3',
     },
     {
         viewMode: 'desktop',
@@ -87,6 +90,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_4,
             isSelected: false,
         },
+        withButtonIconName: 'header-desktop-nav-style-tab-display-style-with-button-4',
     },
     {
         viewMode: 'desktop',
@@ -100,6 +104,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_5,
             isSelected: false,
         },
+        withButtonIconName: 'header-desktop-nav-style-tab-display-style-with-button-5',
     },
     {
         viewMode: 'desktop',
@@ -113,6 +118,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.DESKTOP_TAB_6,
             isSelected: false,
         },
+        withButtonIconName: 'header-desktop-nav-style-tab-display-style-with-button-6',
     },
     // desktop - tab with no logo
     {
@@ -172,6 +178,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
             isSelected: false,
         },
+        withButtonIconName: 'header-desktop-nav-style-hamburger-display-style-with-button-1',
     },
     {
         viewMode: 'desktop',
@@ -190,6 +197,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.DESKTOP_HAMBURGER_2,
             isSelected: false,
         },
+        withButtonIconName: 'header-desktop-nav-style-hamburger-display-style-with-button-2',
     },
     // desktop - hamburger no logo
     {
@@ -259,6 +267,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.MOBILE_TAB_1,
             isSelected: false,
         },
+        withButtonIconName: 'header-mobile-nav-style-tab-display-style-with-button-1',
     },
     {
         viewMode: 'mobile',
@@ -272,6 +281,7 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
             dataAttribute: HEADER_DISPLAY.MOBILE_TAB_2,
             isSelected: false,
         },
+        withButtonIconName: 'header-mobile-nav-style-tab-display-style-with-button-2',
     },
     // mobile - tab with no logo
     {
@@ -416,3 +426,8 @@ export const HEADER_DISPLAY_STYLE_CONFIGS = [
         },
     },
 ];
+/** True when the header row shows the button; mobile hamburger styles put it in the side menu instead (unless the nav is hidden — then there is no side menu). */
+export const headerRowRendersCta = (displayStyle, showNav) => !showNav ||
+    !HEADER_DISPLAY_STYLE_CONFIGS.some((config) => config.option.value === displayStyle &&
+        config.viewMode === 'mobile' &&
+        config.navType === 'hamburger');

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

@@ -36,8 +36,6 @@ export interface AbTestResult {
 }
 export interface AbTest {
     bp_3926_freemium_watermark?: AbTestResult;
-    bp_5873_live_preview_prepurchase?: AbTestResult;
-    bp_5873_live_preview_postpurchase?: AbTestResult;
 }
 export declare const MEDIA_SIZES: {
     readonly size1x: "size1x";

package/lib/src/brand-page/models/brand-page-context.model.js

@@ -24,11 +24,6 @@ export const AB_TEST_FLAG = {
 };
 const AB_TEST_KEYS = {
     BP_3926_FREEMIUM_WATERMARK: 'bc-bp-3926-freemium-cta-in-website-editor',
-    // Two separate live-preview experiments — bc-net sends only the one for the
-    // current purchase state, and a user's value on each side is independent
-    // (BP-5873). Keys must match `CampaignNames.LivePreview*Test` in bc-net.
-    BP_5873_LIVE_PREVIEW_PREPURCHASE: 'bc-bp-5873-live-preview-prepurchase',
-    BP_5873_LIVE_PREVIEW_POSTPURCHASE: 'bc-bp-5873-live-preview-postpurchase',
 };
 export const MEDIA_SIZES = {
     size1x: 'size1x',
@@ -50,12 +45,5 @@ export const getAbTestResults = (abtestKeyValues) => {
     if (abtestKeyValues[AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK]) {
         abTests.bp_3926_freemium_watermark = getValueType(AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK, abtestKeyValues[AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK]);
     }
-    // AB Test for BP-5873 - Live preview (pre- and post-purchase run separately)
-    if (abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_PREPURCHASE]) {
-        abTests.bp_5873_live_preview_prepurchase = getValueType(AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_PREPURCHASE, abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_PREPURCHASE]);
-    }
-    if (abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_POSTPURCHASE]) {
-        abTests.bp_5873_live_preview_postpurchase = getValueType(AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_POSTPURCHASE, abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_POSTPURCHASE]);
-    }
     return abTests;
 };

package/lib/src/brand-page/models/index.d.ts

@@ -501,6 +501,16 @@ export declare class NavModel {
     routes: NavRoute[];
     constructor(options?: Partial<NavModel>);
 }
+export interface HeaderButton {
+    isVisible: boolean;
+    text: string;
+    buttonLinkType: ButtonLinkType;
+    url?: string;
+    buttonPageId?: string;
+    buttonTextStyle?: TextStyleDeclaration;
+    fillColor?: string;
+    borderColor?: string;
+}
 type AbstractPageHeaderStylesType = Partial<AbstractPageHeaderStyles>;
 export declare abstract class AbstractPageHeaderStyles {
     displayStyle: HeaderDisplayStyle;
@@ -525,6 +535,8 @@ export declare abstract class AbstractPageHeaderStyles {
     backgroundStyle: BackgroundColorStyle;
     style: BrandPageCssStyle;
     viewport: ViewportsType;
+    /** Missing = no button. `declare` keeps it off saved data so old migrations still see the same shape. */
+    headerButton?: HeaderButton;
     protected constructor(options?: AbstractPageHeaderStylesType);
 }
 export declare class PageHeaderDesktop extends AbstractPageHeaderStyles {

package/lib/src/brand-page/models/index.js

@@ -257,6 +257,10 @@ export class AbstractPageHeaderStyles {
             ...(options.backgroundStyle || {}),
             backgroundOpacity: options.backgroundStyle?.backgroundOpacity ?? 100,
         };
+        // Only set when given — a missing button must stay missing for old migrations.
+        if (options.headerButton) {
+            this.headerButton = options.headerButton;
+        }
     }
 }
 export class PageHeaderDesktop extends AbstractPageHeaderStyles {

package/lib/src/brand-page/utils/context.util.d.ts

@@ -8,3 +8,4 @@ export declare const getSlugFromContext: (context: BrandPageContext) => string;
  * placeholders) must keep reading `context.isPreview` directly.
  */
 export declare const isPreviewMode: (context: BrandPageContext) => boolean;
+export declare const guardPreviewClick: (event: MouseEvent, context: BrandPageContext) => boolean;

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

@@ -12,3 +12,12 @@ export const getSlugFromContext = (context) => {
  * placeholders) must keep reading `context.isPreview` directly.
  */
 export const isPreviewMode = (context) => !!(context.isPreview || context.isLivePreview);
+// Blocks a click in the maker preview (no link-follow, no bubbling); true when it fired.
+export const guardPreviewClick = (event, context) => {
+    if (!context.isPreview) {
+        return false;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
+};

package/lib/src/brand-page/utils/route.util.d.ts

@@ -33,3 +33,4 @@ export declare const toRouteLocation: (navItem?: NavItemViewModel) => {
 };
 export declare const findNavItemByRelativePath: (navItems: NavItemViewModel[], relativePath: string) => NavItemViewModel | undefined;
 export declare const findNavItemByPageSlug: (navItems: NavItemViewModel[], pageSlug: string) => NavItemViewModel | undefined;
+export declare const hasVisibleNavigation: (navItems: NavItemViewModel[]) => boolean;

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

@@ -136,3 +136,12 @@ export const findNavItemByPageSlug = (navItems, pageSlug) => {
     }
     return undefined;
 };
+// Nav shows when more than one page is visible, or one page has visible subpages.
+// The header row and the side menu both key the button placement off this — one
+// source so the two can never disagree.
+export const hasVisibleNavigation = (navItems) => {
+    const visibleNavItems = navItems.filter((item) => !item.isHidden);
+    return (visibleNavItems.length > 1 ||
+        (visibleNavItems.length === 1 &&
+            visibleNavItems[0].nestedNavItems.some((item) => !item.isHidden)));
+};

package/lib/src/brand-page/utils/view-model.util.js

@@ -1,6 +1,6 @@
 import { reactive } from 'vue';
 import { assertUnreachable } from '../../helpers/ts.helper';
-import { ButtonStyles, VIEWPORTS } from '../models';
+import { ButtonStyles, TEXT_STYLE_TYPES, VIEWPORTS } from '../models';
 import { NavigationMobile, NavigationDesktop, BRAND_PAGE_TYPES, BUTTON_LINK_TYPE, NavigationMenuStyles, } from '../models';
 import { backgroundColorFromStyle, isTransparentColour, mutedTextForBackground, withColorOpacity, } from './color.util';
 import { resolveColorReference } from './color-palette.util';
@@ -691,6 +691,57 @@ export const mapToPageStyleViewModel = (pageStyles, options) => {
         colors: pageStyles.colors ?? [],
     };
 };
+// Maps each link kind to the role Button.vue already understands, so the button needs no new code.
+const HEADER_BUTTON_LINK_ROLES = {
+    [BUTTON_LINK_TYPE.url]: 'general-link',
+    [BUTTON_LINK_TYPE.page]: 'general-link',
+    [BUTTON_LINK_TYPE.mailTo]: 'email',
+    [BUTTON_LINK_TYPE.tel]: 'phone',
+};
+const mapToHeaderButtonViewModel = (headerButton, styles) => {
+    // No label means no button — hidden in preview and on the published site.
+    if (!headerButton?.isVisible || !headerButton.text?.trim()) {
+        return undefined;
+    }
+    const titleStyle = headerButton.buttonTextStyle ?? {
+        textStyleType: TEXT_STYLE_TYPES.buttons,
+    };
+    const viewModel = mapToButtonViewModel({
+        id: 'page-header-button',
+        // Old saved data may have no link kind — treat it as a url.
+        type: HEADER_BUTTON_LINK_ROLES[headerButton.buttonLinkType] ??
+            HEADER_BUTTON_LINK_ROLES[BUTTON_LINK_TYPE.url],
+        iconUrl: '',
+        modalImageUrl: '',
+        colorReplacements: [],
+        title: headerButton.text.trim(),
+        titleStyle,
+        url: headerButton.url ?? '',
+        page: headerButton.buttonPageId ?? '',
+        clickActionField: headerButton.buttonLinkType === BUTTON_LINK_TYPE.page ? 'page' : 'url',
+    }, styles, { titleStyle });
+    return {
+        ...viewModel,
+        // A wrapped label justifies; the last (or only) line stays centered like a short label.
+        titleStyle: {
+            ...viewModel.titleStyle,
+            textAlign: 'justify',
+            textAlignLast: 'center',
+        },
+        styles: {
+            ...viewModel.styles,
+            style: {
+                ...viewModel.styles.style,
+                ...(headerButton.fillColor
+                    ? { backgroundColor: headerButton.fillColor }
+                    : {}),
+                ...(headerButton.borderColor
+                    ? { borderColor: headerButton.borderColor }
+                    : {}),
+            },
+        },
+    };
+};
 export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLogoRenderSize = false) => {
     const viewport = pageHeader.viewport;
     const logoContent = {
@@ -738,6 +789,7 @@ export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLo
             }),
         style: pageHeader.style,
         backgroundStyle: getHeaderBackgroundStyleWithOpacity(pageHeader),
+        headerButtonViewModel: mapToHeaderButtonViewModel(pageHeader.headerButton, pageStyles),
     };
 };
 // Folds backgroundOpacity into backgroundColor's alpha so only the container's paint fades, not its children.

package/lib/src/brand-page/view-models.d.ts

@@ -132,10 +132,12 @@ export interface BookingSectionViewModel extends ContentViewModel, Omit<BookingS
     buttonViewModel: ButtonViewModel;
     isFullWidth: boolean;
 }
-export interface PageHeaderViewModel extends Omit<PageHeaderDesktop | PageHeaderMobile, 'logoImage' | 'logoImageStyle' | 'isLogoOptional' | 'viewport' | 'isLogoVisible' | 'logoTemplateImage' | 'logoImageHeight' | 'logoImageWidth' | 'backgroundStyle'> {
+export interface PageHeaderViewModel extends Omit<PageHeaderDesktop | PageHeaderMobile, 'logoImage' | 'logoImageStyle' | 'isLogoOptional' | 'viewport' | 'isLogoVisible' | 'logoTemplateImage' | 'logoImageHeight' | 'logoImageWidth' | 'headerButton' | 'backgroundStyle'> {
     logo: LogoViewModel;
     pages: PageViewModel[];
     backgroundStyle: BrandPageCssStyle;
+    /** Absent unless the header call-to-action button is configured AND visible. */
+    headerButtonViewModel?: ButtonViewModel;
 }
 export interface PageFooterViewModel extends Omit<PageFooterDesktop | PageFooterMobile, 'logoImage' | 'logoImageStyle' | 'isLogoOptional' | 'viewport' | 'isLogoVisible' | 'logoTemplateImage' | 'logoImageHeight' | 'logoImageWidth'> {
     logo: LogoViewModel;