@designcrowd/library.brand-page 6.0.11 → 6.0.13

package/lib/src/{CreatedOnBrandCrowd-de-de-DopPc6g2.js → CreatedOnBrandCrowd-de-de-CBjFFeBP.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-CSHmaAWm.js → CreatedOnBrandCrowd-en-us-NuNXF81K.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-C4vM0p2e.js → CreatedOnBrandCrowd-es-es-BJG8nfug.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-ArpBbnxm.js → CreatedOnBrandCrowd-fr-ca-uX-nL53e.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-ArpBbnxm.js → CreatedOnBrandCrowd-fr-fr-uX-nL53e.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-CGAQLXiX.js → CreatedOnBrandCrowd-pt-br-DTrgFGQV.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-CGAQLXiX.js → CreatedOnBrandCrowd-pt-pt-DTrgFGQV.js}

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

package/lib/src/{CreatedOnDcom-de-de-3WVSgB6t.js → CreatedOnDcom-de-de-DSfpxioT.js}

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

package/lib/src/{CreatedOnDcom-en-us-Dx-RHXrH.js → CreatedOnDcom-en-us-C7G4gKem.js}

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

package/lib/src/{CreatedOnDcom-es-es-CfnEYFMA.js → CreatedOnDcom-es-es-DVckCaji.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-BSHZTiUO.js → CreatedOnDcom-fr-ca-C5GDrm_C.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-DtHssrQb.js → CreatedOnDcom-fr-fr-v5eMm-j2.js}

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

package/lib/src/{CreatedOnDcom-pt-br-CdX1aRI8.js → CreatedOnDcom-pt-br-Dq3-fPUc.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-jy044FNL.js → CreatedOnDcom-pt-pt-DFsncYax.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-Bx7xK4dn.js";
+import { _ as M } from "./lib-BG-pyXi9.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.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/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/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: '',

package/lib/src/brand-page-maker/stores/ai-checkpoint/ai-checkpoint-store.d.ts

@@ -4581,6 +4581,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -4805,6 +4806,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -5029,6 +5031,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -9690,6 +9693,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -9914,6 +9918,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -10138,6 +10143,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -14805,6 +14811,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -15029,6 +15036,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -15253,6 +15261,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -19914,6 +19923,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -20138,6 +20148,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -20362,6 +20373,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -25029,6 +25041,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -25253,6 +25266,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -25477,6 +25491,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -30138,6 +30153,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -30362,6 +30378,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -30586,6 +30603,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;