@designcrowd/library.brand-page 5.19.0 → 5.19.1-error-html2canvas-2

package/src/brand-page-maker/convertors/text-image-display-style.convertor.ts

@@ -11,7 +11,7 @@ import {
 import type { ImagesSectionContent, MediaType } from '@brand-page';
 
 export const getTextMediaOptionsConverterByMediaType = (
-  mediaType: MediaType,
+  _mediaType: MediaType,
 ): ValueConvertor<
   string | null,
   ButtonGroupConfig,

package/src/brand-page-maker/models/button-styles-config.ts

@@ -15,8 +15,10 @@ export const ButtonStyleConfigOptions = [
 
 export type ButtonStyleConfigOption = (typeof ButtonStyleConfigOptions)[number];
 
-export interface ButtonStyleConfig
-  extends Omit<ButtonStyles, 'style' | 'template' | 'selectedButtonStyleId'> {
+export interface ButtonStyleConfig extends Omit<
+  ButtonStyles,
+  'style' | 'template' | 'selectedButtonStyleId'
+> {
   readonly id: string;
   readonly hasShadow: boolean;
   readonly hasSoftShadow?: boolean;

package/src/brand-page-maker/models/content-settings-configs.ts

@@ -156,8 +156,10 @@ export interface ContentSettingsField<TContent> {
   styleName?: string;
 }
 
-export interface ContentSettingsMultiField<TContent, TField>
-  extends Omit<ContentSettingsField<TContent>, 'type' | 'role'> {
+export interface ContentSettingsMultiField<TContent, TField> extends Omit<
+  ContentSettingsField<TContent>,
+  'type' | 'role'
+> {
   type: ItemMultiFieldType;
   role: 'multi';
   fields?: {

package/src/brand-page-maker/models/content-settings.ts

@@ -24,6 +24,8 @@ import {
   EMPTY_LOGO_IMAGE_MODEL,
   BRAND_PAGE_TYPES,
   SENSITIVE_CONTENT_TYPES,
+  CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
+  TESTIMONIAL_DEFAULT_PADDING,
 } from '@brand-page';
 import type {
   ButtonContent,
@@ -171,6 +173,8 @@ export const createInitialImageGalleryContent = (): ImageGalleryContent => {
     galleryStyles: {
       galleryType: 'grid',
     },
+    topPadding: 0,
+    bottomPadding: 0,
   };
 };
 
@@ -182,6 +186,8 @@ export const createInitialVideoContent = (): VideoContent => {
     displayStyle: DISPLAY_STYLE_PREVIEW,
     mute: false,
     videoUrl: '',
+    topPadding: 0,
+    bottomPadding: 0,
   };
 };
 
@@ -239,6 +245,10 @@ export const createInitialTextContent = (
           ]
         : undefined,
     type: 'text',
+    // Brand Site text blocks sit in a 12px outer padding; Brand Page / Brand Contact use 0.
+    topPadding: options?.brandPageType === BRAND_PAGE_TYPES.brandSite ? 12 : 0,
+    bottomPadding:
+      options?.brandPageType === BRAND_PAGE_TYPES.brandSite ? 12 : 0,
     textSize: {
       fontSize: FONT_SIZE_BODY,
       lineHeight: LINE_HEIGHT_BODY,
@@ -282,6 +292,8 @@ export const createInitialMapContent = (): MapContent => {
       formattedAddress: '',
       placeId: '',
     },
+    topPadding: 0,
+    bottomPadding: 0,
   };
 };
 
@@ -291,6 +303,8 @@ export const createInitialMailingListContent = (
   return {
     id: uuid.v4(),
     type: 'mailing-list',
+    topPadding: 0,
+    bottomPadding: 0,
     title: contentSettingsTr(`mailingListTitle`),
     buttonText: contentSettingsTr(`subscribePlaceholder`),
     acceptedFields: 'emailOnly',
@@ -324,6 +338,8 @@ export const createInitialRequestPaymentContent = (
     successMessage: '',
     title: contentSettingsTr(`buyNowTitle`),
     type: 'request-payment',
+    topPadding: 0,
+    bottomPadding: 0,
     fillColor: {},
     defaultBorderColor: {},
     selectedBorderColor: {},
@@ -356,6 +372,8 @@ export const createInitialShopContent = (
   return {
     id: uuid.v4(),
     description: '',
+    topPadding: 16,
+    bottomPadding: 16,
     products: [],
     displayStyle: PAYMENT_OPTION_DISPLAY_TYPES.thumbnail,
     aspectRatio: PAYMENT_OPTION_IMAGE_TYPES.auto,
@@ -415,6 +433,8 @@ export const createInitialSupportMeContent = (
     successMessage: contentSettingsTr(`successSupportPlaceholder`),
     description: contentSettingsTr(`makeADonationDescription`),
     type: 'support-me',
+    topPadding: 0,
+    bottomPadding: 0,
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.headings,
@@ -453,14 +473,21 @@ export const createInitialContactFormContent: CreateInitialContentFunction<
     console.error('userState.emailAddress should not be undefined');
   }
 
+  // New blocks inherit the padding their initial layout previously had
+  // hard-coded — same source as the migration backfill for existing pages.
+  const layoutStyle =
+    options?.brandPageType === 'brandSite' ? 'center-card-aligned' : '';
+  const padding = CONTACT_FORM_LAYOUT_DEFAULT_PADDING[layoutStyle] ?? 0;
+
   return {
     id: uuid.v4(),
     title: contentSettingsTr(`contactUsTitle`),
     description: '',
     buttonText: contentSettingsTr(`sendPlaceholder`),
     displayStyle: DISPLAY_STYLE_PREVIEW,
-    layoutStyle:
-      options?.brandPageType === 'brandSite' ? 'center-card-aligned' : '',
+    layoutStyle,
+    topPadding: padding,
+    bottomPadding: padding,
     imageUrl: '',
     fields: [
       {
@@ -553,6 +580,8 @@ export const createInitialBannerSectionContent: CreateInitialContentFunction<
 > = (options?: CreateInitialContentOptions) => {
   return {
     id: uuid.v4(),
+    topPadding: 32,
+    bottomPadding: 32,
     imageUrl: '',
     title: contentSettingsTr(`thisIsABannerTitle`),
     description: '',
@@ -599,6 +628,8 @@ export const createInitialBookingSectionContent: CreateInitialContentFunction<
     buttonText: contentSettingsTr(`bookNowLabel`),
     url: '',
     type: 'booking-section',
+    topPadding: 32,
+    bottomPadding: 32,
     descriptionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.paragraphs,
@@ -628,6 +659,8 @@ export const createInitialImagesSectionContent: CreateInitialContentFunction<
     title: contentSettingsTr(`imagesTitle`),
     description: '',
     type: 'images-section',
+    topPadding: 32,
+    bottomPadding: 32,
     displayStyle: 'centered',
     aspectRatio: 'Default',
     areImagesFullWidth: false,
@@ -683,6 +716,8 @@ export const createInitialTestimonialSectionContent: CreateInitialContentFunctio
     title: contentSettingsTr(`testimonialsTitle`),
     type: 'testimonial-section',
     displayStyle: 'centered',
+    topPadding: TESTIMONIAL_DEFAULT_PADDING,
+    bottomPadding: TESTIMONIAL_DEFAULT_PADDING,
     items: [],
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
@@ -731,6 +766,8 @@ export const createInitialAboutSectionContent: CreateInitialContentFunction<
       textAlign: 'center',
     },
     backgroundStyle: {},
+    topPadding: 32,
+    bottomPadding: 32,
   };
 };
 
@@ -793,6 +830,8 @@ export const createInitialSocialLinksContent = (
   return {
     id: uuid.v4(),
     type: 'social-links',
+    topPadding: 32,
+    bottomPadding: 32,
     title: contentSettingsTr(`followUsOnTitle`),
     links: [
       {
@@ -846,6 +885,8 @@ export const createInitialShapesSectionContent: CreateInitialContentFunction<
     title: contentSettingsTr(`shapesTitle`),
     description: '',
     type: 'shapes-section',
+    topPadding: 32,
+    bottomPadding: 32,
     displayStyle: 'centered',
     items: [
       {

package/src/brand-page-maker/models/navigation-style-configs.ts

@@ -14,7 +14,7 @@ import type {
 import type { PageSection } from '@shared/page-settings/models';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import type { ButtonGroupOption } from './button-group.model';
-import { tr, commonTr, modelsTr } from '@src/composables/useTranslate';
+import { commonTr, modelsTr } from '@src/composables/useTranslate';
 
 export const NavigationStyleConfigOptions = {
   defaultBorderColor: 'defaultBorderColor',
@@ -46,11 +46,10 @@ export const NAVIGATION_STYLE_CONFIG_OPTION_TITLES = (): Record<
   subNavBackgroundColor: modelsTr('subNavBackgroundColor'),
 });
 
-export interface NavigationStyleConfig
-  extends Omit<
-    NavigationDesktop | NavigationMobile,
-    'isLogoVisible' | 'hamburgerMenuStyle' | 'viewport'
-  > {
+export interface NavigationStyleConfig extends Omit<
+  NavigationDesktop | NavigationMobile,
+  'isLogoVisible' | 'hamburgerMenuStyle' | 'viewport'
+> {
   buttonGroupOption: ButtonGroupOption;
   options: NavigationStyleConfigOption[];
 }

package/src/brand-page-maker/stores/admin-logo-settings/admin-logo-settings-store.ts

@@ -2,7 +2,6 @@ import {
   EMPTY_LOGO_IMAGE_MODEL,
   type FabricLogoTheme,
   type LogoContent,
-  type LogoImageModel,
   type LogoTemplateImageModel,
   type LogoTheme,
 } from '@brand-page';

package/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.ts

@@ -21,7 +21,6 @@ import {
   BRAND_PAGE_TYPES,
   SENSITIVE_CONTENT_TYPES,
   getAbTestResults,
-  getValueType,
   type AbTest,
   type LogoContent,
 } from '@brand-page';
@@ -34,7 +33,6 @@ import {
   TRIGGER_TYPE,
   UPGRADE_CTA_LOCATIONS,
   useEventTracker,
-  EVENTS,
 } from '@brand-page-maker/composables/useEventTracker';
 import { navigationTr } from '@src/composables/useTranslate';
 import type { WebsiteSlugCheckResponse } from '@brand-page-maker/models/api.model';
@@ -123,6 +121,7 @@ export type InitialisePayload = Omit<
   logoDraftAssets: LogoDraftAsset[];
   gettyVideos: GettyVideoEditorViewModelResponse[];
   templateSearchTerm: string | undefined;
+  aiTemplateKeywords: string | undefined;
   onSearchTermChanged?: OnSearchTermChangedCallback;
 };
 
@@ -266,6 +265,10 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         onSearchTermChanged: payload.onSearchTermChanged,
       });
 
+      templateSettingsStore.setAiTemplateKeywords({
+        aiTemplateKeywords: payload.aiTemplateKeywords ?? '',
+      });
+
       brandPageMakerStore.setSelectedTemplateId({
         templateId: this.designTemplateToken,
       });
@@ -446,7 +449,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
 
     async publishBrandPage({ shouldPublish, slug }) {
       const brandPageMakerStore = useBrandPageMakerStore();
-      const eventTracker = useEventTracker();
+      const _eventTracker = useEventTracker();
 
       if (!this.designDraftToken) {
         throw new Error(
@@ -553,7 +556,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       isPurchasedDomain,
     }) {
       const brandPageMakerStore = useBrandPageMakerStore();
-      const eventTracker = useEventTracker();
+      const _eventTracker = useEventTracker();
 
       if (!this.designDraftToken) {
         throw new Error(
@@ -887,7 +890,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
     ) {
       const userStore = useBrandPageMakerUserStore();
       const brandPageMakerStore = useBrandPageMakerStore();
-      const eventTracker = useEventTracker();
+      const _eventTracker = useEventTracker();
 
       if (userStore.isAdmin) {
         throw new Error('save brand page is not allowed in admin mode');

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.test.ts

@@ -2,7 +2,6 @@ import { vi } from 'vitest';
 import {
   BRAND_PAGE,
   INITIALISE_PAYLOAD,
-  USER_FEATURES,
   userFeatures,
 } from '../../components/brand-page-maker/__fixtures__';
 import {
@@ -44,6 +43,7 @@ import { useUiBackgroundSettingsStore } from '@shared/background-settings/store'
 import { useBrandPageMakerUserStore } from '../user';
 import { useBrandPageContainerStore } from '../brandpage-container';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
+import { usePageNavigationStore } from '@shared/page-navigation/store/page-navigation-store';
 import {
   CONTENT_SETTINGS_MODES,
   useUiContentSettingsStore,
@@ -54,8 +54,6 @@ import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { setLocaleAsync } from '@src/composables/useTranslate';
-import { usePageNavigationStore } from '@shared/page-navigation/store/page-navigation-store';
-import type { NavModel } from '@brand-page/models';
 
 const createInitialisePayload = () => {
   const initialisePayload = {

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -23,14 +23,12 @@ import {
   CONTENT_TYPES,
   NavigationDesktop,
   NavigationMobile,
-  NavModel,
 } from '@brand-page';
 import type {
   DesignTemplateType,
   InitialCategories,
   TemplateCategory,
 } from '@shared/template-settings/models';
-import type { UserFeatures } from '../user';
 import { useBrandPageMakerUserStore } from '../user';
 import { defineStore } from 'pinia';
 import { toRaw } from 'vue';
@@ -125,6 +123,8 @@ export interface InitialisePayload {
   templateCategories: TemplateCategory[];
   personalisationData?: UserPersonalisationContent[];
   isPersonalisationEnabled: boolean;
+  userPromptContentKey?: string;
+  showAiTemplatesTab?: boolean;
   businessName: string | undefined;
   industry: string | undefined;
   layout?: string;
@@ -1230,11 +1230,13 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       templateCategories,
       personalisationData,
       isPersonalisationEnabled,
+      userPromptContentKey,
+      showAiTemplatesTab = false,
       businessName,
       industry,
       layout,
       logoVariationImageUrls,
-      shopConfigData,
+      shopConfigData: _shopConfigData,
       isServerRenderOverride = false,
     }: InitialisePayload) {
       const brandPageContainerStore = useBrandPageContainerStore();
@@ -1246,7 +1248,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const backgroundSettingsStore = useUiBackgroundSettingsStore();
       const styleSettingsStore = useUiStyleSettingsStore();
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
-      const sideBarStore = useUiSideBarStore();
+      const _sideBarStore = useUiSideBarStore();
 
       navigationStyleSettingsStore.initialise({ reset: false });
 
@@ -1353,6 +1355,10 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           });
         }
 
+        uiStore.setUserPromptContentKey({ userPromptContentKey });
+
+        uiStore.setShowAiTemplatesTab({ showAiTemplatesTab });
+
         templateSettingsStore.setTemplateCategories({
           categories: templateCategories,
         });
@@ -1800,6 +1806,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
       const shopStore = useShopConfigStore();
       const pageNavigationStore = usePageNavigationStore();
+      const uiStore = useUiStore();
 
       const pages = pageSettingsStore.pages.map((p) => ({
         ...p,
@@ -1817,6 +1824,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
       return {
         v: GetLatestModelVersion(),
+        userPromptContentKey: uiStore.userPromptContentKey,
         pages,
         styles: {
           logoStyles,

package/src/brand-page-maker/stores/ui/ui-store.ts

@@ -48,6 +48,8 @@ export const useUiStore = defineStore('ui', {
     },
     personalisationData: undefined,
     isPersonalisationEnabled: false,
+    userPromptContentKey: undefined,
+    showAiTemplatesTab: false,
   }),
   actions: {
     setLogoTheme(payload: { logoTheme: LogoTheme }) {
@@ -78,6 +80,20 @@ export const useUiStore = defineStore('ui', {
     }) {
       this.personalisationData = personalisationData;
     },
+    setUserPromptContentKey({
+      userPromptContentKey,
+    }: {
+      userPromptContentKey: string | undefined;
+    }) {
+      this.userPromptContentKey = userPromptContentKey;
+    },
+    setShowAiTemplatesTab({
+      showAiTemplatesTab,
+    }: {
+      showAiTemplatesTab: boolean;
+    }) {
+      this.showAiTemplatesTab = showAiTemplatesTab;
+    },
     onBackgroundChanged() {
       const brandPageMakerStore = useBrandPageMakerStore();
 

package/src/brand-page-maker/utils/content-settings.util.ts

@@ -7,7 +7,7 @@ import type {
   ContentSettingsConfig,
   CreateInitialContentOptions,
 } from '../models';
-import { SENSITIVE_CONTENT_TYPES, type Content } from '@brand-page';
+import { type Content } from '@brand-page';
 import { RESERVED_FIELD_NAMES } from '@shared/content-settings/constants';
 import { CONTENT_SETTINGS_CONFIGS } from '../constants';
 import type { UIUserFeatures } from '@src/constants/ui';

package/src/brand-page-maker/utils/rich-text-editor.util.ts

@@ -431,7 +431,7 @@ const transformRTEField = (
   if (textStyleType && (textStyleType === type || uiStyleSettingsStore)) {
     let globalContentStyle = uiStyleSettingsStore
       ? uiStyleSettingsStore.textStyles.textStyleOptions[textStyleType].style
-      : newStyle ?? ({} as TextStyleDeclaration);
+      : (newStyle ?? ({} as TextStyleDeclaration));
 
     globalContentStyle = {
       ...globalContentStyle,
@@ -549,7 +549,7 @@ export const transformToRTE = (
                 ? uiStyleSettingsStore.textStyles.textStyleOptions[
                     textItemStyleType
                   ].style
-                : newStyle ?? ({} as TextStyleDeclaration);
+                : (newStyle ?? ({} as TextStyleDeclaration));
 
               globalContentStyle = {
                 ...globalContentStyle,
@@ -593,7 +593,7 @@ export const transformToRTE = (
             let globalContentStyle = uiStyleSettingsStore
               ? uiStyleSettingsStore.textStyles.textStyleOptions[textStyleType]
                   .style
-              : newStyle ?? ({} as TextStyleDeclaration);
+              : (newStyle ?? ({} as TextStyleDeclaration));
 
             globalContentStyle = {
               ...globalContentStyle,
@@ -647,7 +647,7 @@ export const switchAllContentToRTE = (
 
         if (textContent.textItems && textContent.textItems.length > 0) {
           for (const [
-            itemIndex,
+            _itemIndex,
             textItemContent,
           ] of textContent.textItems.entries()) {
             const textItemStyleType = textItemContent.textStyle.textStyleType;

package/src/bundles/bundled-translations.de-DE.json

@@ -1529,6 +1529,8 @@
     "iconFillColorTitle": "Farbe der Symbolfüllung",
     "iconBackgroundColorTitle": "Symbolhintergrundfarbe",
     "paddingTitle": "Polsterung",
+    "topPaddingTitle": "Polsterung oben",
+    "bottomPaddingTitle": "Polsterung unten",
     "dividerStyleTitle": "Trennlinienstil",
     "dividerColorTitle": "Trennlinienfarbe",
     "addItemTitle": "Artikel hinzufügen",

package/src/bundles/bundled-translations.es-ES.json

@@ -1529,6 +1529,8 @@
     "iconFillColorTitle": "Color de relleno del icono",
     "iconBackgroundColorTitle": "Color de fondo del icono",
     "paddingTitle": "Relleno",
+    "topPaddingTitle": "Relleno superior",
+    "bottomPaddingTitle": "Relleno inferior",
     "dividerStyleTitle": "Estilo del divisor",
     "dividerColorTitle": "Color del separador",
     "addItemTitle": "Añadir artículo",

package/src/bundles/bundled-translations.fr-CA.json

@@ -1529,6 +1529,8 @@
     "iconFillColorTitle": "Couleur de remplissage de l’icône",
     "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
     "paddingTitle": "Marges intérieures",
+    "topPaddingTitle": "Marge intérieure supérieure",
+    "bottomPaddingTitle": "Marges intérieures inférieures",
     "dividerStyleTitle": "Style de séparateur",
     "dividerColorTitle": "Couleur du séparateur",
     "addItemTitle": "Ajouter un article",

package/src/bundles/bundled-translations.fr-FR.json

@@ -1529,6 +1529,8 @@
     "iconFillColorTitle": "Couleur de remplissage de l’icône",
     "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
     "paddingTitle": "Marges intérieures",
+    "topPaddingTitle": "Marges intérieures supérieures",
+    "bottomPaddingTitle": "Marges intérieures inférieures",
     "dividerStyleTitle": "Style de séparateur",
     "dividerColorTitle": "Couleur du séparateur",
     "addItemTitle": "Ajouter un article",

package/src/bundles/bundled-translations.json

@@ -1529,6 +1529,8 @@
     "iconFillColorTitle": "Icon fill color",
     "iconBackgroundColorTitle": "Icon background color",
     "paddingTitle": "Padding",
+    "topPaddingTitle": "Top padding",
+    "bottomPaddingTitle": "Bottom padding",
     "dividerStyleTitle": "Divider Style",
     "dividerColorTitle": "Divider color",
     "addItemTitle": "Add Item",

package/src/bundles/bundled-translations.pt-BR.json

@@ -1529,6 +1529,8 @@
     "iconFillColorTitle": "Cor de preenchimento do ícone",
     "iconBackgroundColorTitle": "Cor de fundo do ícone",
     "paddingTitle": "Preenchimento",
+    "topPaddingTitle": "Preenchimento superior",
+    "bottomPaddingTitle": "Preenchimento inferior",
     "dividerStyleTitle": "Estilo do separador",
     "dividerColorTitle": "Cor do separador",
     "addItemTitle": "Adicionar item",

package/src/bundles/bundled-translations.pt-PT.json

@@ -1529,6 +1529,8 @@
     "iconFillColorTitle": "Cor de preenchimento do ícone",
     "iconBackgroundColorTitle": "Cor de fundo do ícone",
     "paddingTitle": "Preenchimento",
+    "topPaddingTitle": "Preenchimento superior",
+    "bottomPaddingTitle": "Preenchimento inferior",
     "dividerStyleTitle": "Estilo do separador",
     "dividerColorTitle": "Cor do separador",
     "addItemTitle": "Adicionar Item",

package/src/clients/design-template-client.ts

@@ -11,6 +11,7 @@ interface DesignTemplateClientOptions {}
 interface GetTemplatesAsyncOptions {
   categoryName?: string;
   searchTerm?: string;
+  keywords?: string;
   side?: string;
   logoDraftToken?: string;
   logoVariation?: number;
@@ -22,6 +23,8 @@ interface GetTemplatesAsyncOptions {
   locale?: string;
   logoS3Token?: string;
   logoTemplateToken?: string;
+  pageSection?: string;
+  pageName?: string;
 }
 
 export const getTemplatesEndpoint = (templateTypeName: string) =>

package/src/clients/models.ts

@@ -4,6 +4,7 @@ export interface Paginated<T> {
   pageSize: number;
   pageCount: number;
   totalResultCount: number;
+  abTestValuesToBePushed?: Record<string, string>;
 }
 
 export interface DesignTemplate {
@@ -14,6 +15,7 @@ export interface DesignTemplate {
 
 export interface PaginatedDesignTemplateItem {
   designTemplateToken: string;
+  isPersonalisable?: boolean;
   previewImageUrl?: string;
 }
 

package/src/composables/useSnapshot.ts

@@ -180,15 +180,19 @@ export function useSnapshot() {
       const captureWidth = target.clientWidth || target.offsetWidth || 1;
       const scale = Math.min(1, SNAPSHOT_TARGET_WIDTH / captureWidth);
 
-      // Pre-fetch blob-backed SVGs from content shape <object> elements so they
-      // can be rendered as <img> in the clone (html2canvas can't reach into the
-      // isolated DOM inside <object>). Background-shape blob <img>s are NOT
-      // converted: html2canvas renders them no differently with or without the
-      // conversion, so it'd just be wasted fetches.
+      // Inline every shape's blob-backed SVG as a data: URI up front. Shapes
+      // (content + background) render their coloured SVG via an <img> whose src
+      // is a `blob:` URL from URL.createObjectURL. The owning component revokes
+      // that blob on re-render (colour/size/imageUrl change) and on unmount —
+      // exactly what an AI "change all my contents" run triggers right before we
+      // capture. html2canvas fetches each <img> src ASYNCHRONOUSLY while
+      // rendering, so a concurrent revoke leaves it fetching a dead blob URL →
+      // the shape 404s and snapshots blank. A data: URI can't be revoked, so
+      // swapping the blob for one in the clone removes the race.
       const blobSvgUris = new Map<string, string>();
       const blobSources = Array.from(
-        element.querySelectorAll<HTMLObjectElement>('.c-shape-object object'),
-      ).map((o) => o.getAttribute('data'));
+        element.querySelectorAll<HTMLImageElement>('.c-shape-object img'),
+      ).map((img) => img.getAttribute('src'));
 
       for (const src of blobSources) {
         if (src && src.startsWith('blob:') && !blobSvgUris.has(src)) {
@@ -340,23 +344,16 @@ export function useSnapshot() {
             overflow: 'visible',
           });
 
-          // Swap content shape <object>s for <img> using the pre-fetched data
-          // URIs (html2canvas can't render <object> SVGs directly).
+          // Repoint each shape <img> from its (revocable) blob: src to the
+          // pre-fetched data: URI so html2canvas never fetches a blob that may
+          // have been revoked mid-capture.
           _doc
-            .querySelectorAll<HTMLObjectElement>('.c-shape-object object')
-            .forEach((obj) => {
-              const dataUrl = obj.getAttribute('data');
+            .querySelectorAll<HTMLImageElement>('.c-shape-object img')
+            .forEach((img) => {
+              const src = img.getAttribute('src');
 
-              if (dataUrl && blobSvgUris.has(dataUrl)) {
-                const img = _doc.createElement('img');
-
-                img.src = blobSvgUris.get(dataUrl)!;
-
-                const style = obj.getAttribute('style');
-
-                if (style) img.setAttribute('style', style);
-
-                obj.parentNode?.replaceChild(img, obj);
+              if (src && blobSvgUris.has(src)) {
+                img.src = blobSvgUris.get(src)!;
               }
             });
 

package/src/lib.ts

@@ -96,6 +96,7 @@ export {
   useEventManagerStore,
   useLocalisedRouteStore,
   useVideoStore,
+  useRouteStore,
 } from './brand-page-maker/stores';
 export { useShopConfigStore } from './shared/ecommerce-settings/store/shop-settings-store';