@designcrowd/library.brand-page 6.1.6 → 6.1.7

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.mixin.d.ts

@@ -6,186 +6,12 @@ interface CategoryTab {
     label: string;
 }
 declare const _default: import("vue").DefineComponent<{}, {
-    mode: import("vue").ComputedRef<"images" | "add" | "pages" | "edit" | "focusedContentItem">;
-    pages: import("vue").ComputedRef<{
-        id: string;
-        title: string;
-        contents: {
-            id: string;
-            type: import("@brand-page").ContentType;
-            settings: {
-                content: {
-                    id: string;
-                    type: import("@brand-page").ContentType;
-                    personalisationRole?: import("@brand-page").PersonalisationRole | undefined;
-                    topPadding?: number | undefined;
-                    bottomPadding?: number | undefined;
-                    imageUrlOverride?: string | undefined;
-                    imageUrlsOverride?: string | undefined;
-                    avatarImageUrlOverride?: string | undefined;
-                    backgroundImageUrlOverride?: string | undefined;
-                    nameOverride?: string | undefined;
-                    titleOverride?: string | undefined;
-                    descriptionOverride?: string | undefined;
-                    buttonTextOverride?: string | undefined;
-                    ctaTitleOverride?: string | undefined;
-                    urlOverride?: string | undefined;
-                    textOverride?: string | undefined;
-                    paragraphOverride?: string | undefined;
-                };
-                fields: Record<string, import("../../models").ContentItemFieldSettings>;
-            };
-        }[];
-    }[]>;
+    mode: import("vue").ComputedRef<"images" | "add" | "edit" | "focusedContentItem">;
     activePageId: import("vue").ComputedRef<string>;
     activeCategoryTab: import("vue").ComputedRef<string>;
-    isBrandSite: import("vue").ComputedRef<boolean>;
     contentSettingsSelectedItemId: import("vue").ComputedRef<string | null>;
     isAdminMaker: import("vue").ComputedRef<boolean>;
     canUseRichTextEditor: import("vue").ComputedRef<boolean>;
-    brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("@brand-page-maker/stores").BrandPageMakerState, {
-        contentErrorCount(): number;
-        brandPageBaseUrl(): string;
-        brandPageContentTypes(): string[];
-        brandPageData(): import("@brand-page").BrandPageModel;
-        brandPageToken(): string | undefined;
-        brandPageDescription(): string;
-        brandPageSlug(): string;
-        brandPageTemplate(): import("@brand-page").BrandPageData;
-        brandPageTitle(): string;
-        brandPageViewModel(): import("@brand-page").BrandPageViewModel;
-        gettyVideoIds(): string[];
-        isInteractivePreviewEnabled(): boolean;
-        isProduction(): boolean;
-        isPublishButtonEnabled(): boolean;
-        isPublished(): boolean;
-        isPublishing(): boolean;
-        isSaving(): boolean;
-        isUserDraft(): boolean;
-        runtimeEnvironment(): string;
-        showBrandCrowdLogo(): boolean;
-    }, {
-        setMode(payload: {
-            mode: import("@brand-page-maker/stores").BrandPageSettingsMode;
-        }): void;
-        setFaviconUrl(payload: {
-            faviconUrl: string | undefined;
-        }): void;
-        setOgImageUrl(payload: {
-            ogImageUrl: string | undefined;
-        }): void;
-        setMeasurementID(payload: {
-            measurementID: string | undefined;
-        }): void;
-        setAdsenseID(payload: {
-            adsenseID: string | undefined;
-        }): void;
-        setOgTitle(payload: {
-            ogTitle: string | undefined;
-        }): void;
-        setOgDescription(payload: {
-            ogDescription: string | undefined;
-        }): void;
-        setCookieEnabled(payload: {
-            isCookieEnabled: boolean;
-        }): void;
-        setSavingEnabled(payload: {
-            isSavingEnabled: boolean;
-        }): void;
-        setHideBranding(payload: {
-            hideBranding: boolean;
-        }): void;
-        setSensitiveContent(payload: {
-            sensitiveContent: string;
-        }): void;
-        setCookiePreviewEnabled(payload: {
-            isCookiePreviewEnabled: boolean;
-        }): void;
-        setFieldSettings(payload: {
-            settings: import("../../models").FieldSettingsBase;
-        }): void;
-        enqueueNotificationMessage({ message, }: {
-            message: import("@brand-page-maker/stores").NotificationMessage;
-        }): void;
-        enqueueContentErrorMessage(): void;
-        dequeueNotificationMessageQueue(): void;
-        setCurrentNotificationMessage(payload: {
-            message: import("@brand-page-maker/stores").NotificationMessage | false;
-        }): void;
-        setIsApplyingTemplate(payload: import("@brand-page-maker/stores").IsApplyingTemplatePayload): void;
-        setIsPageNavigating(isPageNavigating: boolean): void;
-        setIsChangeTemplateConfirmModalVisible(payload: {
-            isVisible: boolean;
-        }): void;
-        setIsInitialising(payload: {
-            isInitialising: boolean;
-        }): void;
-        setIsBrandPageLoaded(isLoaded: boolean): void;
-        setIsModifiedAfterTemplateApplied({ isModified, }?: import("@brand-page-maker/stores").SetIsModifiedPayload): void;
-        setSelectedTemplateId(payload: {
-            templateId: string | false;
-        }): void;
-        recalculateLogoSizes(forceRecalculate?: boolean): Promise<void>;
-        applySelectedTemplate(): Promise<void>;
-        enqueueErrorMessage(): Promise<void>;
-        enqueueSaveSuccessMessage(payload?: {
-            description?: string;
-            isPublished?: boolean;
-            noDescription?: boolean;
-        }): Promise<void>;
-        hideChangeTemplateConfirmModal(): void;
-        onBackgroundChanged(): void;
-        onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): Promise<void>;
-        onContentChanged(): void;
-        onStyleChanged(): 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, logoEditsStr?: string, selectedTemplateId?: string | false): Promise<void>;
-        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string): Promise<void>;
-        _navigateToActivePage(activePageId?: string): void;
-        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;
-        export(): import("@brand-page").BrandPageModel;
-        setBrandPageType({ brandPageType }: {
-            brandPageType: import("@brand-page").BrandPageType;
-        }): void;
-        initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData: _shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
-        initialisePages({ pages, sections, }: {
-            pages: import("@brand-page").PageModel[];
-            sections: import("../../../page-settings/store").PageSettingsStateSections;
-        }): void;
-        initialisePagesForCurrentPage({ pages, sections, }: {
-            pages: import("@brand-page").PageModel[];
-            sections: import("../../../page-settings/store").PageSettingsStateSections;
-        }): void;
-        initialiseAdminMaker(payload: {
-            models: import("../../../../brand-page-maker/stores/admin-logo-settings").AdminPreviewLogoTemplateModel[];
-        }): void;
-        setIsSaving(payload: import("@brand-page-maker/stores").SetIsSavingPayload): Promise<void>;
-        showBrandPageSlugEditModal(): Promise<void>;
-        updateBrandPageSettings(payload: import("@brand-page-maker/stores").UpdateBrandPageSettingsPayload): Promise<void>;
-        updateSensitiveContentSettings(payload: import("@brand-page-maker/stores").UpdateSensitiveContentPayload): Promise<void>;
-        updateAndSaveMeasurementID(payload: {
-            measurementID: string | undefined;
-        }): Promise<void>;
-        updateAndSaveAdsenseID(payload: {
-            adsenseID: string | undefined;
-        }): Promise<void>;
-        validateContentItems(): Promise<void>;
-        validateBrandPageData(): Promise<void>;
-        setViewport(payload: {
-            viewport: import("@brand-page").ViewportsType;
-        }): void;
-        showStripeOnboardingModal(): Promise<void>;
-        selectInitialCategories(payload: import("@brand-page-maker/stores").SelectedCategoryPayload): void;
-    }>;
     contentSettingsStore: import("pinia").Store<"uiContentSettings", import("../../store").ContentSettingsState, {
         contentErrorCount(): number;
         getContent(state: {
@@ -737,6 +563,15 @@ declare const _default: import("vue").DefineComponent<{}, {
         collapseAllSections(): void;
         setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
     }>;
+    sideBarStore: import("pinia").Store<"uiSideBar", import("../../../side-bar/store").SideBarState, {}, {
+        setBrandPageSettingsTabVisibility(payload: {
+            isVisible: boolean;
+        }): void;
+        setSelectedTabName(payload: import("../../../side-bar/models").SetSelectedTabNamePayload): void;
+        setSelectedSettingsSection(payload: {
+            sectionName?: string;
+        }): void;
+    }>;
     styleSettingsStore: import("pinia").Store<"uiStyleSettings", import("../../../style-settings/store").StyleSettingsState, {
         availableTextFontFamilyOptions(): import("../../../style-settings/models").StyleTextFontFamilyOption[];
         buttonBorderColor(): string | undefined;
@@ -928,10 +763,8 @@ declare const _default: import("vue").DefineComponent<{}, {
     externalEditor: import("@tiptap/vue-3").Editor;
 }, {
     categoryTabs: CategoryTab[];
-    isAddPageModalVisible: boolean;
 }, {
     showPageControls(): boolean;
-    isManagePagesButtonVisible(): boolean;
     visibleCategoryTabs(): CategoryTab[];
     visibleContentOptions(): AddContentOption<any>[];
     contentListItems(): ContentItem<Content>[];

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.mixin.js

@@ -1,10 +1,12 @@
 import { defineComponent, computed } from 'vue';
 import { ITEM_CATEGORIES, ITEM_CATEGORY_NAMES } from '@brand-page-maker/models';
 import { UI_EVENT_SOURCES } from '../../../models';
-import { PAGE_SETTINGS_SECTIONS, useUiPageSettingsStore, } from '../../../page-settings/store';
+import { useUiPageSettingsStore } from '../../../page-settings/store';
+import { useUiSideBarStore } from '../../../side-bar/store';
+import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { useUiContentSettingsStore } from '../../store';
 import { CONTENT_SETTINGS_MODES } from '../../store';
-import { useBrandPageMakerStore, useBrandPageMakerUserStore, useBrandPageContainerStore, } from '@brand-page-maker/stores';
+import { useBrandPageMakerUserStore, useBrandPageContainerStore, } from '@brand-page-maker/stores';
 import { SIDE_BAR_CONTENT_ID } from '../../constants';
 import { SELECT_LOCATIONS, useEventTracker, } from '@brand-page-maker/composables/useEventTracker';
 import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
@@ -15,11 +17,11 @@ import { useHistoryStore } from '@brand-page-maker/stores/history/history-store'
 export default defineComponent({
     emits: ['capture-preview-snapshot'],
     setup() {
-        const brandPageMakerStore = useBrandPageMakerStore();
         const contentSettingsStore = useUiContentSettingsStore();
         const pageSettingsStore = useUiPageSettingsStore();
         const pageNavigationStore = usePageNavigationStore();
         const styleSettingsStore = useUiStyleSettingsStore();
+        const sideBarStore = useUiSideBarStore();
         const userStore = useBrandPageMakerUserStore();
         const containerStore = useBrandPageContainerStore();
         const eventTracker = useEventTracker();
@@ -27,17 +29,15 @@ export default defineComponent({
         const { externalEditor } = useExternalRichTextEditor();
         return {
             mode: computed(() => contentSettingsStore.mode),
-            pages: computed(() => pageSettingsStore.pages),
             activePageId: computed(() => pageNavigationStore.activePageId),
             activeCategoryTab: computed(() => contentSettingsStore.activeCategoryTab),
-            isBrandSite: computed(() => brandPageMakerStore.isBrandSite),
             contentSettingsSelectedItemId: computed(() => contentSettingsStore.selectedItemId),
             isAdminMaker: computed(() => containerStore.isAdminMaker),
             canUseRichTextEditor: computed(() => userStore.features.canUseRichTextEditor),
-            brandPageMakerStore,
             contentSettingsStore,
             pageNavigationStore,
             pageSettingsStore,
+            sideBarStore,
             styleSettingsStore,
             eventTracker,
             historyStore,
@@ -52,7 +52,6 @@ export default defineComponent({
                     label: ITEM_CATEGORY_NAMES()[c].displayName,
                 })),
             ],
-            isAddPageModalVisible: false,
         };
     },
     mounted() {
@@ -66,9 +65,6 @@ export default defineComponent({
         showPageControls() {
             return true;
         },
-        isManagePagesButtonVisible() {
-            return this.isBrandSite || this.pageSettingsStore.pages.length > 1;
-        },
         visibleCategoryTabs() {
             return this.categoryTabs.filter((t) => t.category === ITEM_CATEGORY_NAMES().all.key ||
                 this.contentSettingsStore.addContentOptions.some((o) => o.category === t.category && o.isEnabled));
@@ -152,11 +148,8 @@ export default defineComponent({
             this.eventTracker.sendRemoveContentEvent(type, SELECT_LOCATIONS.SIDEBAR, this.contentSettingsStore.getContentCategory(type));
         },
         onManagePageButtonClick() {
-            this.contentSettingsStore.pushMode({
-                mode: CONTENT_SETTINGS_MODES.pages,
-            });
-            this.pageSettingsStore.setSelectedSectionName({
-                sectionName: PAGE_SETTINGS_SECTIONS.pages,
+            this.sideBarStore.setSelectedTabName({
+                tabName: SIDE_BAR_TAB_NAMES.PAGE_SETTINGS,
             });
         },
         onAddPageButtonClick() {

package/lib/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.d.ts

@@ -34,7 +34,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     selectedItemIndex: import("vue").ComputedRef<number | null>;
     selectedItemValue: import("vue").ComputedRef<string | null>;
     contentType: import("vue").ComputedRef<"website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section" | undefined>;
-    mode: import("vue").ComputedRef<"images" | "add" | "pages" | "edit" | "focusedContentItem">;
+    mode: import("vue").ComputedRef<"images" | "add" | "edit" | "focusedContentItem">;
     isAdminMaker: import("vue").ComputedRef<boolean>;
     contentSettingsStore: import("pinia").Store<"uiContentSettings", import("../../store").ContentSettingsState, {
         contentErrorCount(): number;

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

@@ -7,7 +7,6 @@ export declare const CONTENT_SETTINGS_MODES: {
     readonly edit: "edit";
     readonly add: "add";
     readonly images: "images";
-    readonly pages: "pages";
     readonly focusedContentItem: "focusedContentItem";
 };
 export type ContentSettingsMode = keyof typeof CONTENT_SETTINGS_MODES;

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

@@ -44,7 +44,6 @@ export const CONTENT_SETTINGS_MODES = {
     edit: 'edit',
     add: 'add',
     images: 'images',
-    pages: 'pages',
     focusedContentItem: 'focusedContentItem',
 };
 export const DEFAULT_CONSTANT_SETTINGS_MODE = CONTENT_SETTINGS_MODES.edit;

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

@@ -8,11 +8,6 @@ export interface PageField {
     pageTitleError: string | null;
     page: ContentPage;
 }
-declare const PAGE_SETTINGS_PAGES: {
-    readonly page: "page";
-    readonly logo: "logo";
-};
-type PageSettingsPage = keyof typeof PAGE_SETTINGS_PAGES;
 declare const _default: import("vue").DefineComponent<{}, {
     pageFields: import("vue").WritableComputedRef<{
         page: {
@@ -5017,11 +5012,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     isDeleteModalVisible: boolean;
     deleteModalPageId: string | undefined;
     deleteModalPageTitle: string | undefined;
-    currentPageNo: PageSettingsPage;
-    PAGE_SETTINGS_PAGES: {
-        readonly page: "page";
-        readonly logo: "logo";
-    };
     PAGE_SETTINGS_SECTIONS: {
         readonly pages: "pages";
         readonly header: "header";
@@ -5039,6 +5029,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     footerPageSectionStyleOptions(): PageSectionStyleOption[];
     footerFontSettingsOptions(): PageSettingsFontSettingsOption[];
     showFooterSettings(): boolean;
+    isReplacingPageSettingsImage(): boolean;
     hideText(): any;
 }, {
     isRootPage(index: number): boolean;
@@ -5048,9 +5039,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     onDeletePageSelected(pageId: string): void;
     onConfirmDeletePage(pageId: string): void;
     onCancelDeletePage(): void;
-    onLogoVariationSelected(value: string): void;
     onPageTitleInput(pageId: string, title: string): void;
-    onBackButtonClick(): void;
     scrollToPageSettingsSection(sectionName: PageSettingsSection): void;
     onHideBrandPageLogoClickFromFooter(): Promise<void>;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -3,7 +3,8 @@ import {} from '../../models';
 import { getPageTitleError } from '../../utils';
 import { ALIGN_CENTERED, ALIGN_JUSTIFIED, ALIGN_LEFT_ALIGNED, } from '@brand-page';
 import { PAGE_SECTION_STYLE_OPTIONS, } from '@brand-page-maker/models/page-section-style.model';
-import { useUiContentSettingsStore } from '../../../content-settings/store';
+import { CONTENT_SETTINGS_MODES, useUiContentSettingsStore, } from '../../../content-settings/store';
+import { UI_EVENT_SOURCES } from '../../../models';
 import { PAGE_SETTINGS_SECTIONS, useUiPageSettingsStore, } from '../../store';
 import { useUiNavigationStyleSettingsStore } from '../../../navigation-style-settings/store';
 import { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, useBrandPageContainerStore, } from '@brand-page-maker/stores';
@@ -13,10 +14,6 @@ import { pageSettingTr, styleSettingsTr } from '@src/composables/useTranslate';
 import { WEBSITE_UPGRADE_CONTEXT_TYPES } from '@designcrowd/fe-shared-lib';
 import { usePageNavigationStore } from '../../../page-navigation/store/page-navigation-store';
 import { navigateToPageByPageId } from '@brand-page-maker/routing';
-const PAGE_SETTINGS_PAGES = {
-    page: 'page',
-    logo: 'logo',
-};
 const isRouteNestedInOrders = (orders, routeId) => {
     for (const order of orders) {
         if (order.subRoutes.some((subRoute) => subRoute.routeId === routeId)) {
@@ -170,8 +167,6 @@ export default defineComponent({
             isDeleteModalVisible: false,
             deleteModalPageId: undefined,
             deleteModalPageTitle: undefined,
-            currentPageNo: PAGE_SETTINGS_PAGES.page,
-            PAGE_SETTINGS_PAGES,
             PAGE_SETTINGS_SECTIONS,
             ALIGN_LEFT_ALIGNED,
             ALIGN_CENTERED,
@@ -227,6 +222,13 @@ export default defineComponent({
         showFooterSettings() {
             return this.isBrandSite;
         },
+        // Header/footer image-replace intents (e.g. a social link icon) route through the
+        // shared content-settings image picker rather than duplicating it here.
+        isReplacingPageSettingsImage() {
+            return (this.contentSettingsStore.mode === CONTENT_SETTINGS_MODES.images &&
+                this.contentSettingsStore.selectedItemEventSource ===
+                    UI_EVENT_SOURCES.pageSettings);
+        },
         hideText() {
             return this.isDesignCom
                 ? styleSettingsTr(`hideDesignLogo`)
@@ -321,29 +323,12 @@ export default defineComponent({
         onCancelDeletePage() {
             this.isDeleteModalVisible = false;
         },
-        onLogoVariationSelected(value) {
-            if (!this.selectedSectionName) {
-                return;
-            }
-            const sectionName = this.selectedSectionName;
-            this.pageSettingsStore.setPageSettingsSectionValue({
-                sectionName,
-                propName: 'logoImageUrl',
-                value,
-                viewport: this.viewport,
-            });
-            this.currentPageNo = PAGE_SETTINGS_PAGES.page;
-            this.pageSettingsStore.setSelectedSectionName({ sectionName });
-        },
         onPageTitleInput(pageId, title) {
             this.pageSettingsStore.setPageTitle({
                 pageId,
                 pageTitle: title,
             });
         },
-        onBackButtonClick() {
-            this.contentSettingsStore.popMode();
-        },
         scrollToPageSettingsSection(sectionName) {
             this.$nextTick(() => {
                 const $sideBarContent = document.querySelector(`#${SIDE_BAR_CONTENT_ID}`);

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

@@ -422,7 +422,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }[]>;
     selectedTabName: import("vue").ComputedRef<string>;
     isAdminMaker: import("vue").ComputedRef<boolean>;
-    contentSettingsMode: import("vue").ComputedRef<"images" | "add" | "pages" | "edit" | "focusedContentItem">;
+    contentSettingsMode: import("vue").ComputedRef<"images" | "add" | "edit" | "focusedContentItem">;
     contentSettingsSelectedItemId: import("vue").ComputedRef<string | null>;
     sideBarStore: import("pinia").Store<"uiSideBar", import("../store").SideBarState, {}, {
         setBrandPageSettingsTabVisibility(payload: {

package/lib/src/shared/side-bar/components/SideBar.mixin.js

@@ -60,13 +60,13 @@ export default defineComponent({
     methods: {
         update() {
             if (this.isMobileScreenSize === false) {
-                const index = this.brandPageContainerStore.isPublished ||
+                // Land on Content for returning editors, Templates for new sites.
+                // Select by name, not list position — the tab order is not fixed.
+                const tabName = this.brandPageContainerStore.isPublished ||
                     this.brandPageContainerStore.isUserDraft
-                    ? 1
-                    : 0;
-                this.sideBarStore.setSelectedTabName({
-                    tabName: this.tabs.filter((x) => !x.isMobileOnly)[index].name,
-                });
+                    ? SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS
+                    : SIDE_BAR_TAB_NAMES.TEMPLATE_SETTINGS;
+                this.sideBarStore.setSelectedTabName({ tabName });
             }
             else {
                 this.sideBarStore.setSelectedTabName({ tabName: this.mobileTabName });

package/lib/src/shared/side-bar/store/side-bar-store.js

@@ -2,10 +2,11 @@ import { nextTick } from 'vue';
 import { defineStore } from 'pinia';
 import { DEFAULT_SIDE_BAR_TABS, SIDE_BAR_TAB_NAMES, } from '@brand-page-maker/constants';
 import { PAGE_SETTINGS_SECTIONS, useUiPageSettingsStore, } from '../../page-settings/store';
+import { useUiContentSettingsStore } from '../../content-settings/store';
 export const useUiSideBarStore = defineStore('uiSideBar', {
     state: () => ({
         tabs: DEFAULT_SIDE_BAR_TABS(),
-        selectedTabName: DEFAULT_SIDE_BAR_TABS()[1].name,
+        selectedTabName: SIDE_BAR_TAB_NAMES.TEMPLATE_SETTINGS,
         isSwitchingTab: false,
         selectedSettingsSection: undefined,
     }),
@@ -20,8 +21,20 @@ export const useUiSideBarStore = defineStore('uiSideBar', {
         setSelectedTabName(payload) {
             this.isSwitchingTab = true;
             try {
+                const isActualTabChange = this.selectedTabName !== payload.tabName;
                 this.selectedTabName = payload.tabName;
-                if (this.selectedTabName === SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS) {
+                // Only one tab's component is ever mounted at a time (BrandPageMaker.vue
+                // `<component :is="selectedTabName">`), so a mode left on the shared
+                // content-settings store by the tab we're leaving (e.g. an in-flight image
+                // replace) has nowhere to render once we've switched — clear it so every
+                // *actual* tab switch is a clean slate (BP-5855). Gated on a real change:
+                // re-selecting the tab you're already on (e.g. clicking the active sidebar
+                // tab again) must NOT reset an in-progress, same-tab mode such as a focused
+                // content item (SideBarTabButton fires this unconditionally on every click).
+                if (isActualTabChange) {
+                    useUiContentSettingsStore().resetMode();
+                }
+                if (this.selectedTabName === SIDE_BAR_TAB_NAMES.PAGE_SETTINGS) {
                     const pageSettingsStore = useUiPageSettingsStore();
                     pageSettingsStore.setSelectedSectionName({
                         sectionName: PAGE_SETTINGS_SECTIONS.pages,

package/package.json

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

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

@@ -154,7 +154,6 @@ export default defineComponent({
       selectedTabName: computed(() => sideBarStore.selectedTabName),
       isAdminMaker: computed(() => containerStore.isAdminMaker),
       contentErrorCount: computed(() => contentSettingsStore.contentErrorCount),
-      mode: computed(() => contentSettingsStore.mode),
       brandPageMakerStore,
       uiSideBarStore: sideBarStore,
       userStore,
@@ -262,9 +261,7 @@ export default defineComponent({
 
     this.router.afterEach(
       ((to) => {
-        if (this.mode !== 'pages') {
-          this.contentSettingsStore.resetMode();
-        }
+        this.contentSettingsStore.resetMode();
 
         const associatedNavItem = findNavItemByRelativePath(
           this.brandPageViewModel.nav.navItems,

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

@@ -85,10 +85,8 @@ import {
   profileContent,
   textContent,
 } from './__fixtures__/content-settings-items.fixture';
-import {
-  CONTENT_SETTINGS_MODES,
-  useUiContentSettingsStore,
-} from '@shared/content-settings/store';
+import { useUiContentSettingsStore } from '@shared/content-settings/store';
+import { useUiSideBarStore } from '@shared/side-bar/store';
 import { createPinia } from 'pinia';
 import {
   useUiStore,
@@ -347,14 +345,9 @@ export const SampleDesktopManagePages = (): any => {
   const pinia = setupStoryPinia();
   InitialiseMakerStores({});
 
-  const contentSettingsStore = useUiContentSettingsStore();
   const brandPageMakerStore = useBrandPageMakerStore();
   const userStore = useBrandPageMakerUserStore();
 
-  contentSettingsStore.pushMode({
-    mode: CONTENT_SETTINGS_MODES.pages,
-  });
-
   brandPageMakerStore.setViewport({
     viewport: VIEWPORTS.desktop,
   });
@@ -416,7 +409,13 @@ export const SampleDesktopManagePages = (): any => {
         },
       };
     },
-    mounted() {},
+    mounted() {
+      // Set after mount — SideBar's mounted() picks the default tab, so a
+      // pre-mount selection would be overwritten.
+      useUiSideBarStore().setSelectedTabName({
+        tabName: SIDE_BAR_TAB_NAMES.PAGE_SETTINGS,
+      });
+    },
     template: `
       <BrandPageMaker :view-model="viewModel"/>
     `,

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

@@ -167,6 +167,7 @@ import Device from '../device/Device.vue';
 import LayoutSwitcher from '../layout-switcher/LayoutSwitcher.vue';
 import LogoSettings from '@shared/logo-settings/components/LogoSettings.vue';
 import MakerNavigation from '../navigation/Navigation.vue';
+import PageSettings from '@shared/page-settings/components/page-settings/PageSettings.vue';
 import PreviewWithState from '../preview-with-state/PreviewWithState.vue';
 import QuickLinkBar from '../quick-link-bar/QuickLinkBar.vue';
 import SideBar from '@shared/side-bar/components/SideBar.vue';
@@ -208,6 +209,7 @@ export default {
     LogoSettings,
     AdminLogoSettings,
     MakerNavigation,
+    PageSettings,
     PreviewWithState,
     QuickLinkBar,
     SideBar,

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

@@ -3,10 +3,7 @@ import PageMixin from '@brand-page/components/page/Page.mixin';
 import type { Content, ContentViewModel } from '@brand-page';
 import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '@shared/models';
 import type { ContentItem } from '@shared/content-settings/models';
-import {
-  CONTENT_SETTINGS_MODES,
-  useUiContentSettingsStore,
-} from '@shared/content-settings/store';
+import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import {
   useBrandPageContainerStore,
   useBrandPageMakerStore,
@@ -361,15 +358,14 @@ export default defineComponent({
       }
 
       this.sideBarStore.setSelectedTabName({
-        tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+        tabName: SIDE_BAR_TAB_NAMES.PAGE_SETTINGS,
       });
+
+      this.contentSettingsStore.resetMode();
       this.contentSettingsStore._setSelectedItemId({
         id: null,
         eventSource: 'pageSettings',
       });
-      this.contentSettingsStore.pushMode({
-        mode: CONTENT_SETTINGS_MODES.pages,
-      });
 
       this.pageSettingsStore.setSelectedSectionName({
         sectionName: PAGE_SECTIONS.header,
@@ -385,15 +381,15 @@ export default defineComponent({
       }
 
       this.sideBarStore.setSelectedTabName({
-        tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+        tabName: SIDE_BAR_TAB_NAMES.PAGE_SETTINGS,
       });
+      // See onPageHeaderContainerClick — same-tab reselection doesn't reset mode
+      // in setSelectedTabName, but this click is still a real navigation intent.
+      this.contentSettingsStore.resetMode();
       this.contentSettingsStore._setSelectedItemId({
         id: null,
         eventSource: 'pageSettings',
       });
-      this.contentSettingsStore.pushMode({
-        mode: CONTENT_SETTINGS_MODES.pages,
-      });
 
       this.pageSettingsStore.setSelectedSectionName({
         sectionName: PAGE_SECTIONS.footer,