@designcrowd/library.brand-page 6.0.12 → 6.0.14-5804-1

package/lib/src/{CreatedOnBrandCrowd-de-de-BfQcnhof.js → CreatedOnBrandCrowd-de-de-BYABvnQX.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-B86JfNzV.js → CreatedOnBrandCrowd-en-us-CU6aE_W2.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-Dy70BV7X.js → CreatedOnBrandCrowd-es-es-Pfuc4Nfl.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CQ8UhGRG.js → CreatedOnBrandCrowd-fr-ca-DyQ1RyZN.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CQ8UhGRG.js → CreatedOnBrandCrowd-fr-fr-DyQ1RyZN.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-c257u4q-.js → CreatedOnBrandCrowd-pt-br-DXMSa1wa.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-c257u4q-.js → CreatedOnBrandCrowd-pt-pt-DXMSa1wa.js}

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

package/lib/src/{CreatedOnDcom-de-de-cRZ_Lx3_.js → CreatedOnDcom-de-de-kGnTiAMq.js}

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

package/lib/src/{CreatedOnDcom-en-us-CrfHKR-1.js → CreatedOnDcom-en-us-CKrgHXUY.js}

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

package/lib/src/{CreatedOnDcom-es-es-BFjhMPTR.js → CreatedOnDcom-es-es-CVxOQoOy.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-CZimjPcn.js → CreatedOnDcom-fr-ca-BduB1A0z.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-V1z3-WzE.js → CreatedOnDcom-fr-fr-LGhd51py.js}

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

package/lib/src/{CreatedOnDcom-pt-br-NrmWKrvi.js → CreatedOnDcom-pt-br-BLqHx-RQ.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-CKLASXM9.js → CreatedOnDcom-pt-pt-52goGQ1s.js}

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

package/lib/src/brand-page/components/image-gallery/ImageGallery.stories.js

@@ -44,6 +44,7 @@ export const Carousel = () => {
             content.galleryStyles = undefined;
             content.images = new Array(10).fill(0).map((_, i) => {
                 return {
+                    id: `gallery-carousel-item-${i}`,
                     imageUrl: `https://picsum.photos/${300 * ((i + 1) / 4)}/${300 * ((i + 1) / 4)}?random=${i}`,
                     width: 300,
                     height: 300,
@@ -71,6 +72,7 @@ export const Masonry = () => {
             const content = createInitialImageGalleryContent();
             content.images = new Array(10).fill(0).map((_, i) => {
                 return {
+                    id: `gallery-masonry-item-${i}`,
                     imageUrl: `https://picsum.photos/${300 * ((i + 1) / 4)}/${300 * ((i + 1) / 4)}?random=${i}`,
                     width: 564,
                     height: 416,
@@ -98,6 +100,7 @@ export const Grid = () => {
             const content = createInitialImageGalleryContent();
             content.images = new Array(10).fill(0).map((_, i) => {
                 return {
+                    id: `gallery-grid-item-${i}`,
                     imageUrl: `https://picsum.photos/${300 * ((i + 1) / 4)}/${300 * ((i + 1) / 4)}?random=${i}`,
                     width: 564,
                     height: 416,

package/lib/src/brand-page/components/image-gallery/masonry/MasonryGallery.mixin.d.ts

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 import type { ImageGalleryViewModel } from '../../../view-models';
 import type { DebounceHandle } from 'lodash.debounce';
 import type { BrandPageContext, ImageGalleryItem } from '../../../models';
-interface IndexedImageGalleryItem extends ImageGalleryItem {
+interface IndexedImageGalleryItem extends Omit<ImageGalleryItem, 'id'> {
     id: number;
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/lib/src/brand-page/components/images-section/ImagesSection.stories.js

@@ -41,8 +41,9 @@ export const Images = () => {
         },
         data() {
             const content = createInitialImagesSectionContent();
-            content.items = new Array(2).fill(0).map(() => {
+            content.items = new Array(2).fill(0).map((_, i) => {
                 return {
+                    id: `images-section-item-${i}`,
                     imageUrl: 'https://bc-user-uploads.brandcrowd.com/public/media-int/6b3a4d19-e95c-4d59-aa22-ac033a2cec2f/1116870a-c672-4306-b515-32f8d5d6e10c',
                     width: 564,
                     height: 416,

package/lib/src/brand-page/components/social-links/SocialLinks.stories.js

@@ -11,6 +11,7 @@ const viewModel = {
     title: 'Follow us on',
     links: [
         {
+            id: 'social-link-facebook',
             imageUrl: 'facebook',
             url: '',
             imageTitle: '',
@@ -21,6 +22,7 @@ const viewModel = {
             imageLink: '',
         },
         {
+            id: 'social-link-instagram',
             imageUrl: 'instagram',
             url: 'https://www.instagram.com',
             imageTitle: '',
@@ -31,6 +33,7 @@ const viewModel = {
             imageLink: '',
         },
         {
+            id: 'social-link-empty',
             imageUrl: '',
             url: '',
             imageTitle: '',

package/lib/src/brand-page/components/testimonial-section/__fixtures__/data.js

@@ -9,6 +9,7 @@ export const viewModel = {
     displayStyle: 'centered',
     items: [
         {
+            id: 'testimonial-1',
             testimonials: faker.lorem.paragraphs(1),
             imageUrl: unsplashImage,
             name: '1',
@@ -17,6 +18,7 @@ export const viewModel = {
             colorReplacements: [],
         },
         {
+            id: 'testimonial-2',
             testimonials: faker.lorem.paragraphs(3),
             imageUrl: unsplashImage,
             name: '2',
@@ -25,6 +27,7 @@ export const viewModel = {
             colorReplacements: [],
         },
         {
+            id: 'testimonial-3',
             testimonials: faker.lorem.paragraphs(5),
             imageUrl: 'https://source.unsplash.com/random/200x200?3',
             name: '3',

package/lib/src/brand-page/components/text/Text.stories.js

@@ -31,6 +31,7 @@ const BSviewModel = {
     text: 'asdasjdlkasjmdlkmsad',
     textItems: [
         {
+            id: 'text-item-1',
             text: 'lorem ipsum',
             textStyle: {
                 fontSize: '1rem',
@@ -39,6 +40,7 @@ const BSviewModel = {
             },
         },
         {
+            id: 'text-item-2',
             text: 'lorem ipsum',
             textStyle: {
                 fontSize: '1rem',

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

@@ -110,6 +110,13 @@ export interface ImageContent extends Content {
     height?: number;
 }
 export interface ImageItem {
+    /**
+     * Stable per-item identifier. Mirrors the section-level `Content.id` one
+     * level deeper so AI tool calls can reference items by id rather than by
+     * positional index. Backfilled on load for persisted data that predates
+     * item ids (see ensureItemIds), so it is always present at runtime.
+     */
+    id: string;
     imageUrl: string;
     imageTitle: string;
     width: number;
@@ -311,6 +318,8 @@ export interface ShapeItem extends ImageItem {
     paragraphOverride?: string;
 }
 export interface TestimonialItems {
+    /** Stable per-item identifier. See ImageItem.id. */
+    id: string;
     imageUrl: string;
     name: string;
     position: string;
@@ -325,6 +334,8 @@ export interface TestimonialItems {
     positionOverride?: string;
 }
 export interface TextItem {
+    /** Stable per-item identifier. See ImageItem.id. */
+    id: string;
     text: string;
     textStyle: TextStyleDeclaration;
     textOverride?: string;
@@ -385,6 +396,8 @@ export interface AboutSectionContent extends Content {
     size?: string;
 }
 export interface LinksItem {
+    /** Stable per-item identifier. See ImageItem.id. */
+    id: string;
     imageUrl: string;
     url: string;
     size?: string;

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

@@ -11,6 +11,7 @@ import { NavigationDesktop, NavigationMobile } from './navigation-styles.model';
 import { TEXT_STYLE_TYPES, TextStyles } from './styles.model';
 import { EMPTY_LOGO_IMAGE_MODEL, LogoStyles } from './logo.model';
 import cloneDeep from 'lodash.clonedeep';
+import * as uuid from 'uuid';
 export * from './brand-page-context.model';
 export * from './payment.model';
 export * from './content.model';
@@ -331,6 +332,7 @@ export class AbstractPageFooterStyles {
         this.logoImageWidth = options.logoImageWidth || DEFAULT_LOGO_WIDTH;
         this.socialLinks = options.socialLinks || [
             {
+                id: uuid.v4(),
                 width: 0,
                 height: 0,
                 imageUrl: 'facebook',
@@ -340,6 +342,7 @@ export class AbstractPageFooterStyles {
                 imageLink: '',
             },
             {
+                id: uuid.v4(),
                 width: 0,
                 height: 0,
                 imageUrl: 'instagram',
@@ -349,6 +352,7 @@ export class AbstractPageFooterStyles {
                 imageLink: '',
             },
             {
+                id: uuid.v4(),
                 width: 0,
                 height: 0,
                 imageUrl: 'x',

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

@@ -1,3 +1,4 @@
+import * as uuid from 'uuid';
 import { getLogoVariationIndexFromLogoImageUrl, getLogoDraftTokenFromLogoImageUrl, safeGetLogoImageFromLogoImageUrl, } from '../logo.util';
 import { DEFAULT_LETTER_SPACING, FOOTER_DISPLAY, NavigationDesktop, NavigationMobile, PageFooterDesktop, PageFooterMobile, PageHeaderDesktop, PageHeaderMobile, } from '../../';
 import { ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_BIG_IMAGE, BIG_IMAGE, BRAND_PAGE_TYPES, DEFAULT_FONT_FAMILY_KEY, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, DEFAULT_TEXT_ALIGN, FONT_FAMILY_CONFIGS, HEADER_DISPLAY, NAVIGATION_DISPLAY, LINE_HEIGHT_BODY, LINE_HEIGHT_HEADINGS, LINE_HEIGHT_TITLE, PAYMENT_OPTION_DISPLAY_TYPES, } from '../../';
@@ -25,6 +26,7 @@ export const applyTextContentTextToTextItemsMigration = (brandPageModel) => {
                     };
                 }
                 const textItem = {
+                    id: uuid.v4(),
                     text: item.text,
                     textStyle,
                 };

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

@@ -0,0 +1,14 @@
+import type { MigrationData } from '../migration.util';
+/**
+ * BP-5603: backfill a stable uuid `id` onto every nested item (gallery images,
+ * images/shapes/testimonial items, text items, section + footer social links)
+ * that predates the id-based edit model.
+ *
+ * The item `id` field is now non-nullable in the model, so every load path must
+ * guarantee it — not just the AI chat flow, which already stamps ids before
+ * minifying (see ensureBrandPageItemIds in useAiWebsiteBuilderChat). This
+ * migration is that guarantee for persisted data. Idempotent — existing ids are
+ * preserved, so re-running (e.g. render-only sites that never re-save) is a
+ * no-op beyond generating ids for items that still lack one.
+ */
+export declare const migration18: (migrationResult: MigrationData) => Promise<MigrationData>;

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

@@ -0,0 +1,17 @@
+import { ensureBrandPageItemIds } from '../../../metadata-builder/builders/item-id-utils';
+/**
+ * BP-5603: backfill a stable uuid `id` onto every nested item (gallery images,
+ * images/shapes/testimonial items, text items, section + footer social links)
+ * that predates the id-based edit model.
+ *
+ * The item `id` field is now non-nullable in the model, so every load path must
+ * guarantee it — not just the AI chat flow, which already stamps ids before
+ * minifying (see ensureBrandPageItemIds in useAiWebsiteBuilderChat). This
+ * migration is that guarantee for persisted data. Idempotent — existing ids are
+ * preserved, so re-running (e.g. render-only sites that never re-save) is a
+ * no-op beyond generating ids for items that still lack one.
+ */
+export const migration18 = async (migrationResult) => {
+    ensureBrandPageItemIds(migrationResult.brandPageModel);
+    return migrationResult;
+};

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

@@ -20,6 +20,7 @@ import { migration14 } from './migration/migration-14';
 import { migration15 } from './migration/migration-15';
 import { migration16 } from './migration/migration-16';
 import { migration17 } from './migration/migration-17';
+import { migration18 } from './migration/migration-18';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -132,6 +133,11 @@ const MIGRATION_TABLE = [
         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)',
     },
+    {
+        version: 18,
+        migrateFn: migration18,
+        description: 'BP-5603: backfill stable item ids on all nested items (gallery/section/testimonial/text items, section + footer social links) — the item id is now non-nullable',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

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

@@ -50,6 +50,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isSaving: import("vue").ComputedRef<boolean>;
     isPublishing: import("vue").ComputedRef<boolean>;
     isPublished: import("vue").ComputedRef<boolean>;
+    shouldShowQuickLinkBar: import("vue").ComputedRef<boolean>;
     isBrandPageOrIsBrandContact: import("vue").ComputedRef<boolean>;
     brandPageViewModel: import("vue").ComputedRef<import("@brand-page").BrandPageViewModel>;
     backUrl: import("vue").ComputedRef<string>;

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

@@ -13,6 +13,7 @@ import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES, } from '@shared/models';
 import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useUiStore, useSnapshotStore, useVideoStore, } from '@brand-page-maker/stores';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
+import { useQuickLinkBarVisibility } from '@brand-page-maker/composables/useQuickLinkBarVisibility';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
@@ -73,6 +74,10 @@ export default defineComponent({
             isSaving: computed(() => brandPageMakerStore.isSaving),
             isPublishing: computed(() => brandPageMakerStore.isPublishing),
             isPublished: computed(() => brandPageMakerStore.isPublished),
+            // Whether the QuickLinkBar renders — used to offset the preview (Device)
+            // and SideBar clear of the fixed bar on mobile. Must match the bar's own
+            // render condition, so it shares the same predicate.
+            shouldShowQuickLinkBar: useQuickLinkBarVisibility(),
             isBrandPageOrIsBrandContact: computed(() => brandPageMakerStore.isBrandPageOrIsBrandContact),
             brandPageViewModel: computed(() => brandPageMakerStore.brandPageViewModel),
             backUrl: computed(() => localisedRouteStore.backToWebsiteManageUrlPath),

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

@@ -1281,6 +1281,7 @@ export const SampleImageGallery = () => {
         const width = 300;
         const height = 300;
         imageGalleryContent.images.push({
+            id: `gallery-item-${i}`,
             width,
             height,
             imageUrl: `https://images.unsplash.com/photo-1659535915214-e7cbac112038?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjQzOTV8MXwxfHNlYXJjaHw4fHxnYW1pbmd8ZW58MHx8fHwxNjY5MDc4ODE1&ixlib=rb-4.0.3&q=80&w=1080`,

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

@@ -2212,6 +2212,7 @@ export const BRAND_PAGE_PERSONALISED = {
                     displayStyle: 'centered',
                     items: [
                         {
+                            id: 'shapes-section-item-1',
                             colorReplacements: [],
                             height: -1,
                             imageUrl: 'https://bcassetcdn.com/shapes/prod/00019160-9144-4bb3-af48-394a52845c37.svg',

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

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

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

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import { CUSTOM_DOMAIN_STATUSES } from '@brand-page-maker/constants';
 import { useBrandPageContainerStore, useEventManagerStore, } from '@brand-page-maker/stores';
 import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
+import { useQuickLinkBarVisibility } from '@brand-page-maker/composables/useQuickLinkBarVisibility';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 export default defineComponent({
     props: {
@@ -19,6 +20,9 @@ export default defineComponent({
             brandPageContainerStore: useBrandPageContainerStore(),
             eventManagerStore: useEventManagerStore(),
             undoRedoEnabled: useUndoRedoFlag(),
+            // Single source of truth for whether the bar renders — shared with the
+            // layout components (Device, SideBar) that offset content clear of it.
+            shouldShowBar: useQuickLinkBarVisibility(),
         };
     },
     data() {
@@ -30,12 +34,6 @@ export default defineComponent({
         isPublished() {
             return this.brandPageContainerStore.isPublished;
         },
-        // Only render the bar when at least one inner cluster has something to
-        // show. Otherwise we'd render an empty white strip — e.g. on an
-        // unpublished page with the undo flag off.
-        shouldShowBar() {
-            return Boolean(this.undoRedoEnabled) || this.isPublished;
-        },
         brandPageUrl() {
             if (this.brandPageContainerStore.isCustomDomainEnabled &&
                 this.brandPageContainerStore.customDomain &&

package/lib/src/brand-page-maker/composables/ai-chat/useAiWebsiteBuilderChat.js

@@ -5,6 +5,7 @@ import { parseLogoThemeToCssStyles } from '../../../brand-page/utils/style.util'
 import { AI_ASSISTANT_TOOL_NAMES } from '../../../metadata-builder/parsers/ai-toolcall-parser';
 import { WebSocketGatewayClient, } from '../../../clients/websocket-gateway-client';
 import { minifyBrandPageMetadata } from '../../../utils/minify-brand-page-metadata';
+import { ensureBrandPageItemIds } from '../../../metadata-builder/builders/item-id-utils';
 import { buildAssetManifest } from '../../../utils/build-asset-manifest';
 import cloneDeep from 'lodash.clonedeep';
 import { usePageNavigationStore } from '../../../shared/page-navigation/store/page-navigation-store';
@@ -179,6 +180,10 @@ export function useAiWebsiteBuilderChat() {
     };
     const buildMessagePayload = async (userPrompt) => {
         const brandPageData = brandPageMakerStore.brandPageData;
+        // BP-5603: stamp stable uuid ids onto every nested item BEFORE minifying,
+        // so the id the AI is shown (and returns as `item_id`) is the exact id the
+        // executor matches when applying tool calls to this same live model.
+        ensureBrandPageItemIds(brandPageData);
         const headerLogoDraftToken = brandPageData.pageHeaderDesktop?.logoImage?.logoDraftToken ??
             uiStore.logoDraftToken;
         const [assets, logoContext] = await Promise.all([

package/lib/src/brand-page-maker/composables/useQuickLinkBarVisibility.d.ts

@@ -0,0 +1,17 @@
+import { type ComputedRef } from 'vue';
+/**
+ * Whether the QuickLinkBar is rendered in the maker.
+ *
+ * The bar shows when at least one of its inner clusters has something to
+ * display: the undo/redo controls (flag on, non-admin — see
+ * {@link useUndoRedoFlag}) OR the published-URL cluster (page published).
+ *
+ * This is the single source of truth shared by the bar itself
+ * (`QuickLinkBar`) and the layout components that offset their content to sit
+ * clear of the fixed bar on mobile (`Device`, `SideBar`). Keeping the offset
+ * bound to the same predicate the bar renders on prevents the two from
+ * drifting — a drift where the bar showed for the undo/redo reason but the
+ * offset only accounted for the published reason caused the bar to overlap
+ * the mobile preview.
+ */
+export declare function useQuickLinkBarVisibility(): ComputedRef<boolean>;

package/lib/src/brand-page-maker/composables/useQuickLinkBarVisibility.js

@@ -0,0 +1,23 @@
+import { computed } from 'vue';
+import { useBrandPageContainerStore } from '@brand-page-maker/stores';
+import { useUndoRedoFlag } from './useUndoRedoFlag';
+/**
+ * Whether the QuickLinkBar is rendered in the maker.
+ *
+ * The bar shows when at least one of its inner clusters has something to
+ * display: the undo/redo controls (flag on, non-admin — see
+ * {@link useUndoRedoFlag}) OR the published-URL cluster (page published).
+ *
+ * This is the single source of truth shared by the bar itself
+ * (`QuickLinkBar`) and the layout components that offset their content to sit
+ * clear of the fixed bar on mobile (`Device`, `SideBar`). Keeping the offset
+ * bound to the same predicate the bar renders on prevents the two from
+ * drifting — a drift where the bar showed for the undo/redo reason but the
+ * offset only accounted for the published reason caused the bar to overlap
+ * the mobile preview.
+ */
+export function useQuickLinkBarVisibility() {
+    const containerStore = useBrandPageContainerStore();
+    const undoRedoEnabled = useUndoRedoFlag();
+    return computed(() => undoRedoEnabled.value || containerStore.isPublished);
+}

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -1,5 +1,6 @@
 import { SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, GettyVideoMedia, } from '@brand-page';
 import { createInitialButtonContent, createInitialImageContent, createInitialProfileContent, createInitialTextContent, createInitialVideoContent, createInitialLogoContent, createInitialMapContent, createInitialImageGalleryContent, createInitialGeneralLinkContent, createInitialMailingListContent, createInitialRequestPaymentContent, createInitialSupportMeContent, createInitialContactFormContent, CONTENT_SETTINGS_DISPLAY_MODES, createInitialBannerSectionContent, createInitialSocialLinksContent, createInitialImagesSectionContent, createInitialTestimonialSectionContent, createInitialAboutSectionContent, createInitialDividerSectionContent, createInitialShapesSectionContent, VARIANT_DISPLAY_MODES, createInitialShopContent, createInitialBookingSectionContent, } from '../models';
+import * as uuid from 'uuid';
 import { colorConvertor, backgroundColorConvertor, borderColorConvertor, displayStyleConvertor, galleryTypeConvertor, imageAspectRatioConvertor, textAlignmentOptionsConvertor, videoContentStateConvertor, fillColorConvertor, bannerAlignDisplayStyleConvertor, aboutDisplayStyleConvertor, dividerStyleConvertor, shapeSizeOptionsConvertor, buttonLinkStyleConvertor, textSizeValueConvertor, textColumnStyleConvertor, contactLayoutStyleConvertor, paymentLinkDisplayStyleConvertor, shopDisplayConvertor, shopAspectRatioConvertor, } from '../convertors';
 import { ALIGN_CENTERED, DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, } from '@brand-page';
 import { imageFieldVisibilityAssessor, imageOptionVisibilityAssessor, imageGalleryFieldVisibilityAssessor, cardFillVisibilityAssessor, mediaSectionItemsFieldTypeAssessor, dividerToggleFieldVisibilityAssessor, shapeSectionItemsFieldTypeAssessor, colorReplacementVisibilityTypeAssessor, colorReplacementProfileVisibilityTypeAssessor, colorReplacementIconVisibilityTypeAssessor, imagesSectionCardStyleVisibilityAssessor, contactCardDisplayTypeVisibilityAssessor, imageUrlVisibilityAssessor, displayTypeVisibilityAssessor, logoFieldVisibilityAssessor, shapesSectionCardStyleVisibilityAssessor, shopImageOptionVisibilityAssessor, shopItemColorVisibility, personalisationOverrideVisibility, } from '../assessors';
@@ -167,6 +168,7 @@ const imageGalleryReplaceImageSettings = () => ({
                 content.images = [];
             }
             content.images.push({
+                id: uuid.v4(),
                 imageUrl: value.imageUrl,
                 imageTitle: value.imageTitle,
                 height: value.height,
@@ -372,6 +374,7 @@ const shapesImageReplaceImageSettings = () => ({
     setContentMedia: (content, value, index) => {
         if (index === undefined || index === null) {
             content.items?.push({
+                id: uuid.v4(),
                 imageUrl: value.imageUrl,
                 imageTitle: '',
                 paragraph: '',
@@ -402,6 +405,7 @@ const textImageReplaceImageSettings = () => ({
     setContentMedia: (content, value, index) => {
         if (index === undefined || index === null) {
             content.items?.push({
+                id: uuid.v4(),
                 imageUrl: value.imageUrl,
                 imageTitle: value.imageTitle,
                 paragraph: '',

package/lib/src/brand-page-maker/models/content-settings.js

@@ -153,6 +153,7 @@ export const createInitialTextContent = (options) => {
         textItems: options?.brandPageType === 'brandSite'
             ? [
                 {
+                    id: uuid.v4(),
                     text: contentSettingsTr(`defaultTextValue`),
                     textStyle: {
                         applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
@@ -706,6 +707,7 @@ export const createInitialSocialLinksContent = (options) => {
         title: contentSettingsTr(`followUsOnTitle`),
         links: [
             {
+                id: uuid.v4(),
                 imageUrl: 'facebook',
                 url: 'https://www.facebook.com',
                 imageTitle: '',
@@ -716,6 +718,7 @@ export const createInitialSocialLinksContent = (options) => {
                 imageLink: '',
             },
             {
+                id: uuid.v4(),
                 imageUrl: 'instagram',
                 url: 'https://www.instagram.com',
                 imageTitle: '',
@@ -726,6 +729,7 @@ export const createInitialSocialLinksContent = (options) => {
                 imageLink: '',
             },
             {
+                id: uuid.v4(),
                 imageUrl: 'x',
                 url: 'https://www.x.com',
                 imageTitle: '',