@designcrowd/library.brand-page 5.19.1-id-based-items-2 → 5.19.2

package/lib/src/{CreatedOnBrandCrowd-de-de-Ruu5Az32.js → CreatedOnBrandCrowd-de-de-Ekmn0O3s.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-DGUJtvld.js → CreatedOnBrandCrowd-en-us-BjeXlKTS.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-Dg-1uOfV.js → CreatedOnBrandCrowd-es-es-rpNINAMY.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CRKraZl8.js → CreatedOnBrandCrowd-fr-ca-BL4nSaLj.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CRKraZl8.js → CreatedOnBrandCrowd-fr-fr-BL4nSaLj.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-bZ9VlEAu.js → CreatedOnBrandCrowd-pt-br-K0r4FyYq.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-bZ9VlEAu.js → CreatedOnBrandCrowd-pt-pt-K0r4FyYq.js}

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

package/lib/src/{CreatedOnDcom-de-de-CJYfwZx8.js → CreatedOnDcom-de-de-0XYyEKYc.js}

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

package/lib/src/{CreatedOnDcom-en-us-rzA1lVxH.js → CreatedOnDcom-en-us-E8hvwiMd.js}

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

package/lib/src/{CreatedOnDcom-es-es-CNwGPjik.js → CreatedOnDcom-es-es-pRuCd7xX.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-DKw7OGIz.js → CreatedOnDcom-fr-ca-Bu4V3jpn.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-WzOEaAZG.js → CreatedOnDcom-fr-fr-CCcrGNz2.js}

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

package/lib/src/{CreatedOnDcom-pt-br-DkualVhm.js → CreatedOnDcom-pt-br-1GTvaLKd.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-w4Nnsdzq.js → CreatedOnDcom-pt-pt-CTIYW10X.js}

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

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

@@ -3,7 +3,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 Omit<ImageGalleryItem, 'id'> {
+interface IndexedImageGalleryItem extends ImageGalleryItem {
     id: number;
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -110,13 +110,6 @@ 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. Optional for backward compatibility with persisted data
-     * that predates item ids — backfilled on load (see ensureItemIds).
-     */
-    id?: string;
     imageUrl: string;
     imageTitle: string;
     width: number;
@@ -318,8 +311,6 @@ 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;
@@ -334,8 +325,6 @@ export interface TestimonialItems {
     positionOverride?: string;
 }
 export interface TextItem {
-    /** Stable per-item identifier. See ImageItem.id. */
-    id?: string;
     text: string;
     textStyle: TextStyleDeclaration;
     textOverride?: string;
@@ -396,7 +385,6 @@ export interface AboutSectionContent extends Content {
     size?: string;
 }
 export interface LinksItem {
-    id?: string;
     imageUrl: string;
     url: string;
     size?: string;
@@ -559,6 +547,7 @@ export interface SaveContactOptions {
 }
 export declare class BrandPageModel {
     v: number;
+    userPromptContentKey?: string;
     styles: PageStyles;
     /** @deprecated */
     headerStyles?: AbstractPageHeaderStyles;

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

@@ -400,6 +400,9 @@ export class PageFooterMobile extends AbstractPageFooterStyles {
 export class BrandPageModel {
     // Model version
     v;
+    // AI personalisation key persisted with the draft so previews survive login/checkout-back/
+    // refresh - content is retrieved by this token (user-agnostic), not regenerated (bp-5742).
+    userPromptContentKey;
     styles;
     /** @deprecated */
     headerStyles;

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

@@ -206,15 +206,59 @@ const getPersonalisationValueAsync = async (section, property) => {
     }
     return { value: propertyValue, section };
 };
+// The userPrompt AI content generation only populates these content-bearing sections
+// (see GenerateAiDesignMakerContentService / GenerateWebsiteContentService - About,
+// Information, Profile, Media). Sections like email/website/phone are never generated, so
+// blocks whose role points at an ungenerated section fall back to this pool.
+const PERSONALISATION_FALLBACK_ROLES = [
+    'profile',
+    'about',
+    'information',
+    'media',
+];
+// "Effectively empty" = no renderable content (ungenerated userPrompt sections like
+// email/website/phone). A section that has data but lacks one property is NOT empty - it
+// intentionally keeps its original content.
+const isSectionEffectivelyEmpty = (section) => {
+    if (!section) {
+        return true;
+    }
+    return (!section.title &&
+        !section.name &&
+        !section.url &&
+        !section.description &&
+        !section.descriptionShort &&
+        !section.ctaTitle &&
+        !section.imageUrls?.length &&
+        !section.shapes?.length &&
+        !section.items?.length &&
+        !section.mainShapesCollection?.tall?.length &&
+        !section.mainShapesCollection?.square?.length &&
+        !section.mainShapesCollection?.wide?.length);
+};
+// Resolve a property from a specific role's section. Returns null when that section is
+// ungenerated (effectively empty) or cannot supply the property, so the caller can try the
+// next role.
+const resolvePersonalisationValueForRoleAsync = async (role, property, personalisation) => {
+    const key = `${role}Section`;
+    const section = personalisation[key];
+    if (isSectionEffectivelyEmpty(section)) {
+        return null;
+    }
+    const { value, section: updatedSection, valuesToUpdate, } = await getPersonalisationValueAsync(section, property);
+    if (value === undefined || value === null) {
+        return null;
+    }
+    return {
+        value,
+        personalisation: { ...personalisation, [key]: updatedSection },
+        valuesToUpdate,
+    };
+};
 const getPersonalisationValueFromPropertyAsync = async (propertyKey, propertyValue, personalisationRole, personalisationOverride, personalisation, contentType) => {
     if (!personalisationRole || personalisationOverride === 'none') {
         return { value: undefined, personalisation };
     }
-    const matchingValue = Object.entries(personalisation).find(([key]) => key === `${personalisationRole}Section`);
-    if (!matchingValue) {
-        return { value: undefined, personalisation };
-    }
-    const section = matchingValue[1];
     const mapping = getPersonalisationMappingForContentType(contentType);
     const matchingProperty = Object.entries(mapping).find(([, value]) => value.includes(propertyKey));
     if (!matchingProperty) {
@@ -225,15 +269,29 @@ const getPersonalisationValueFromPropertyAsync = async (propertyKey, propertyVal
         brandPageType: personalisation.type,
         isSvgShape: typeof propertyValue === 'string' && propertyValue.endsWith('.svg'),
     });
-    const { value, section: updatedSection, valuesToUpdate, } = await getPersonalisationValueAsync(section, property);
-    return {
-        value,
-        personalisation: {
-            ...personalisation,
-            [`${personalisationRole}Section`]: updatedSection,
-        },
-        valuesToUpdate,
-    };
+    const primaryKey = `${personalisationRole}Section`;
+    const primarySection = personalisation[primaryKey];
+    // When the block's own section has content, use it as-is - this preserves existing
+    // behaviour, including legitimately keeping the original when that section lacks a
+    // specific property (e.g. no items, or an invalid shape).
+    if (!isSectionEffectivelyEmpty(primarySection)) {
+        const { value, section: updatedSection, valuesToUpdate, } = await getPersonalisationValueAsync(primarySection, property);
+        return {
+            value,
+            personalisation: { ...personalisation, [primaryKey]: updatedSection },
+            valuesToUpdate,
+        };
+    }
+    // The block's section was never generated - fall back to the first populated section that
+    // can supply this property, so it doesn't render the "should be AI generated" placeholder.
+    // Never reached when the section exists (above) or all are populated (AI Website Builder).
+    for (const role of PERSONALISATION_FALLBACK_ROLES) {
+        const resolved = await resolvePersonalisationValueForRoleAsync(role, property, personalisation);
+        if (resolved) {
+            return resolved;
+        }
+    }
+    return { value: undefined, personalisation };
 };
 const applyPersonalisationToBrandPageContentsRecursiveAsync = async (personalisation, mappingType, content, personalisationRole) => {
     let isApplied = false;

package/lib/src/brand-page-maker/components/action-bar/ActionBar.mixin.d.ts

@@ -127,7 +127,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page/models").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page/models").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.mixin.d.ts

@@ -251,6 +251,12 @@ declare const _default: import("vue").DefineComponent<{}, {
         setUserPersonalisationData({ personalisationData, }: {
             personalisationData: import("../../../brand-page").UserPersonalisationContent[];
         }): void;
+        setUserPromptContentKey({ userPromptContentKey, }: {
+            userPromptContentKey: string | undefined;
+        }): void;
+        setShowAiTemplatesTab({ showAiTemplatesTab, }: {
+            showAiTemplatesTab: boolean;
+        }): void;
         onBackgroundChanged(): void;
         onContentChanged(): void;
         onStyleChanged(): void;

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

@@ -20,6 +20,8 @@ export interface BrandPageMakerViewModel {
     initialCategories: InitialCategories;
     personalisation?: UserPersonalisationContent[];
     isPersonalisationEnabled?: boolean;
+    userPromptContentKey?: string;
+    showAiTemplatesTab?: boolean;
     brandPageType?: BrandPageType;
     businessName?: string;
     industry?: string;
@@ -172,7 +174,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("@shared/page-settings/store").PageSettingsStateSections;
@@ -953,6 +955,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setUserPersonalisationData({ personalisationData, }: {
             personalisationData: UserPersonalisationContent[];
         }): void;
+        setUserPromptContentKey({ userPromptContentKey, }: {
+            userPromptContentKey: string | undefined;
+        }): void;
+        setShowAiTemplatesTab({ showAiTemplatesTab, }: {
+            showAiTemplatesTab: boolean;
+        }): void;
         onBackgroundChanged(): void;
         onContentChanged(): void;
         onStyleChanged(): void;
@@ -1099,6 +1107,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             initialSearchTerm: string;
             onSearchTermChanged?: import("@shared/template-settings/store").OnSearchTermChangedCallback | undefined;
         }): void;
+        setAiTemplateKeywords(payload: {
+            aiTemplateKeywords: string;
+        }): void;
         notifySearchTermChanged(searchTerm: string | undefined): void;
         clearTemplates(): void;
         getTemplateByTemplateId(id: string): import("@shared/template-settings/models").TemplateSettingsTemplate | undefined;

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

@@ -150,6 +150,8 @@ export default defineComponent({
             templateCategories: this.viewModel.templateCategories,
             personalisationData: this.viewModel.personalisation,
             isPersonalisationEnabled: this.viewModel.isPersonalisationEnabled || false,
+            userPromptContentKey: this.viewModel.userPromptContentKey,
+            showAiTemplatesTab: this.viewModel.showAiTemplatesTab || false,
             brandPageType: this.viewModel.brandPageType,
             businessName: this.viewModel.businessName,
             industry: this.viewModel.industry,

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

@@ -179,6 +179,7 @@ const InitialiseMakerStores = (options) => {
         isContextualUpgradeModalVisible: false,
         gettyVideos: [],
         templateSearchTerm: undefined,
+        aiTemplateKeywords: undefined,
     });
     userStore.setUserState({
         isAdmin: options.isAdmin,

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

@@ -116,7 +116,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../../lib").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("../../stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("../../stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("../../../lib").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

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

@@ -636,7 +636,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("@shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/brandpage-settings/ReplaceImageSettingsForBrandPageSettings.mixin.d.ts

@@ -122,7 +122,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../../brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("../../../brand-page").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/seo-settings/SeoPageSettings.mixin.d.ts

@@ -400,7 +400,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../../brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("../../../brand-page").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/seo-settings/UrlSettings.mixin.d.ts

@@ -401,7 +401,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../../brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("../../../brand-page").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/social-share/SocialShare.mixin.d.ts

@@ -132,7 +132,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../../brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("../../../brand-page").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="types/lodash-shims" />
 import type { PropType } from 'vue';
 import type { BrandPageContext, BrandPageViewModel, LogoImageModel, LogoTemplateImageModel, LogoTheme, UserPersonalisation } from '@brand-page';
-import { type TemplateSettingsTemplate } from '@shared/template-settings/models';
+import type { TemplateSettingsTemplate } from '@shared/template-settings/models';
 import type { DebounceHandle } from 'lodash.debounce';
 interface TemplatePreviewData {
     containerStyle: BrandPageCssStyle;
@@ -68,7 +68,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isAdmin: import("vue").ComputedRef<boolean>;
     userToken: import("vue").ComputedRef<string | undefined>;
     isBrandSite: import("vue").ComputedRef<boolean>;
-    selectedTab: import("vue").ComputedRef<string>;
     renderAsImage: import("vue").ComputedRef<boolean>;
     brandPageMakerUserStore: import("pinia").Store<"brandPageMakerUser", import("@brand-page-maker/stores").UserState, {}, {
         setUserState(payload: {
@@ -452,7 +451,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.js

@@ -2,7 +2,6 @@ import { computed, defineComponent } from 'vue';
 import { BRAND_PAGE_TYPES, MEDIA_SIZES, VIEWPORTS } from '@brand-page';
 import { applyLogoThemeToBrandPageModel, applyUserPersonalisationToBrandPageModelAsync, getBrandPageViewModelFromBrandPageModel, } from '@brand-page/utils';
 import { STYLE_THEME_KEYS } from '@brand-page/constants';
-import { TEMPLATE_TABS, } from '@shared/template-settings/models';
 import debounce from 'lodash.debounce';
 import { MOBILE_HEIGHT, MOBILE_WIDTH } from '@brand-page-maker/constants';
 import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, } from '@brand-page-maker/stores';
@@ -24,7 +23,6 @@ export default defineComponent({
             isAdmin: computed(() => brandPageMakerUserStore.isAdmin),
             userToken: computed(() => brandPageMakerUserStore.userToken),
             isBrandSite: computed(() => brandPageMakerStore.brandPageType === BRAND_PAGE_TYPES.brandSite),
-            selectedTab: computed(() => templateSettingsStore.selectedTab.key),
             renderAsImage: computed(() => templateSettingsStore.renderAsImage),
             brandPageMakerUserStore,
             brandPageContainerStore,
@@ -171,11 +169,24 @@ export default defineComponent({
             if (!previewImageUrl) {
                 return '';
             }
-            if (this.selectedTab === TEMPLATE_TABS.AI && this.template.contentKey) {
-                if (this.userToken) {
-                    previewImageUrl += `&contentKey=${this.template.contentKey}&userToken=${this.userToken}`;
+            const isAlreadyPersonalised = previewImageUrl.includes('contentKey=') ||
+                previewImageUrl.includes('userPromptContentKey=');
+            if (this.isPersonalisable &&
+                this.template.contentKey &&
+                !isAlreadyPersonalised) {
+                if (this.userToken && !this.template.usesUserPromptContentKey) {
+                    previewImageUrl += `&contentKey=${this.template.contentKey}`;
+                    // The backend already bakes userToken into brand-site preview URLs. Only add
+                    // it when missing - two userToken params parse as an array and the preview
+                    // renderer rejects it ("userToken must be a string type") (bp-5765).
+                    if (!previewImageUrl.includes('userToken=')) {
+                        previewImageUrl += `&userToken=${this.userToken}`;
+                    }
                 }
                 else {
+                    // userPromptContentKey resolves from the userPrompt S3 bucket (real AI images).
+                    // Post-purchase designs with a userPrompt key route here too, NOT through the
+                    // userToken/regular-bucket branch above which holds placeholders (bp-5454).
                     previewImageUrl += `&userPromptContentKey=${this.template.contentKey}`;
                 }
             }

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

@@ -5,7 +5,6 @@ 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 { usePageNavigationStore } from '../../../shared/page-navigation/store/page-navigation-store';
 import { navigateToPageByPageId } from '../../routing';
@@ -178,10 +177,6 @@ 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([