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

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

@@ -1,4 +1,4 @@
-import { ref, computed, watch, nextTick, onUnmounted } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import { getInstance as getAiAssistantClient, AI_ASSISTANT_AGENT_TYPES, } from '../../../clients/ai-assistant-client';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { parseLogoThemeToCssStyles } from '../../../brand-page/utils/style.util';

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.d.ts

@@ -71,7 +71,7 @@ export declare const useRichTextEditor: (model: ModelRef<any>, props: {
     textItemIndex: number;
     item: TextItem;
     contentType: string;
-}, emit: (event: 'focus' | 'blur' | 'update:modelValue', ...args: any[]) => void, fontSettings: {
+}, emit: (event: "focus" | "blur" | "update:modelValue", ...args: any[]) => void, fontSettings: {
     selectedTextStyle: string;
     selectedFont: string;
     selectedFontSize: string;

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.js

@@ -368,13 +368,13 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             fontSettings.selectedFontSizePx = Math.ceil(parseFloat(emToPx(globalStyles?.fontSize ?? '2.25em')));
             fontSettings.selectedTextColor = hasLogoColorVar(globalStyles.color ?? '')
                 ? '#000000'
-                : globalStyles?.color ?? '#000000';
+                : (globalStyles?.color ?? '#000000');
             fontSettings.selectedBackgroundColor = hasLogoColorVar(globalStyles?.backgroundColor ?? '')
                 ? 'transparent'
-                : globalStyles?.backgroundColor ?? 'transparent';
+                : (globalStyles?.backgroundColor ?? 'transparent');
             lineHeight.value = globalStyles?.lineHeight?.includes('em')
                 ? emToPx(globalStyles?.lineHeight ?? '1em')
-                : globalStyles?.lineHeight ?? '1';
+                : (globalStyles?.lineHeight ?? '1');
             letterSpacing.value = letterSpacingValueConvertor.convert(globalStyles ?? {});
             if (props.styles?.textAlign &&
                 currentAlignment?.textAlign !== props.styles.textAlign) {
@@ -388,13 +388,13 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
             fontSettings.selectedFontSizePx = Math.ceil(parseFloat(emToPx(props.styles?.fontSize ?? '2.25em')));
             fontSettings.selectedTextColor = hasLogoColorVar(props.styles?.color ?? '#000000')
                 ? '#000000'
-                : props.styles?.color ?? '#000000';
+                : (props.styles?.color ?? '#000000');
             fontSettings.selectedBackgroundColor = hasLogoColorVar(props.styles?.backgroundColor ?? '')
                 ? 'transparent'
-                : props.styles?.backgroundColor ?? 'transparent';
+                : (props.styles?.backgroundColor ?? 'transparent');
             lineHeight.value = props.styles?.lineHeight?.includes('em')
                 ? emToPx(props.styles?.lineHeight ?? '1em')
-                : props.styles?.lineHeight ?? '1';
+                : (props.styles?.lineHeight ?? '1');
             letterSpacing.value = letterSpacingValueConvertor.convert(props.styles ?? {});
             if (props.styles?.textAlign &&
                 currentAlignment?.textAlign !== props.styles.textAlign) {

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

@@ -129,12 +129,12 @@ declare const useEventTracker: () => {
     }) => void;
     sendSaveContactEvent: () => void;
     sendStartForFreeEvent: () => void;
-    sendFooterLinkClickEvent: (linkType: 'watermark_logo' | 'create_your_website') => void;
+    sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;
     sendGettyVideoAddEvent: () => void;
     sendGettyVideoReplaceEvent: () => void;
     sendGettyVideoRemoveEvent: () => void;
     sendExperimentStartedEvent: (abTestKey: string, abTestValue: string) => void;
-    setGlobalEventProps: (props: Omit<BpGlobalEventProps, 'template_category'>) => void;
+    setGlobalEventProps: (props: Omit<BpGlobalEventProps, "template_category">) => void;
     setCustomGlobalEventProps: (props: any) => void;
     setUpsellBridgeState: (props: BpUpsellEventProps) => void;
     setDomainUpsellBridgeState: (props: BpUpsellEventProps) => void;

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

@@ -1,15 +1,15 @@
 import type { LogoContent, FacebookContent, GeneralLinkContent, PhoneContent, EmailContent, ImageContent, InstagramContent, LinkedInContent, PinterestContent, ProfileContent, TextContent, TiktokContent, TwitchContent, XContent, VideoContent, WebsiteContent, YoutubeContent, ContentType, MapContent, ImageGalleryContent, MailingListContent, RequestPaymentContent, SupportMeContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ShopContent, BookingSectionContent } from '@brand-page';
 import type { ContentSettingsConfig, ContentSettingsField, ContentSettingsMultiField } from '../models';
-export declare const LOGO_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<LogoContent, 'version' | 'logoVariation' | 'logoImageHeight' | 'logoImageWidth' | 'logoLastUpdate' | 'logoImageBase64Url'>>;
+export declare const LOGO_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<LogoContent, "version" | "logoVariation" | "logoImageHeight" | "logoImageWidth" | "logoLastUpdate" | "logoImageBase64Url">>;
 export declare const GENERAL_LINK_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<GeneralLinkContent>;
-export declare const PROFILE_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<ProfileContent, 'iconUrl'>>;
+export declare const PROFILE_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<ProfileContent, "iconUrl">>;
 export declare const WEBSITE_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<WebsiteContent>;
 export declare const EMAIL_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<EmailContent>;
-export declare const IMAGE_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<ImageContent, 'iconUrl'>>;
-export declare const IMAGE_GALLERY_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<ImageGalleryContent, 'iconUrl'>>;
-export declare const VIDEO_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<VideoContent, 'iconUrl'>>;
+export declare const IMAGE_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<ImageContent, "iconUrl">>;
+export declare const IMAGE_GALLERY_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<ImageGalleryContent, "iconUrl">>;
+export declare const VIDEO_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<VideoContent, "iconUrl">>;
 export declare const PHONE_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<PhoneContent>;
-export declare const TEXT_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<TextContent, 'iconUrl'>>;
+export declare const TEXT_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<TextContent, "iconUrl">>;
 export declare const FACEBOOK_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<FacebookContent>;
 export declare const X_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<XContent>;
 export declare const INSTAGRAM_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<InstagramContent>;

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

@@ -42,6 +42,28 @@ const SETTINGS_STYLE_FIElD_GROUPS = () => {
         },
     ];
 };
+/**
+ * Shared Top/Bottom padding sliders (BP-5687). Reuses the same `slider` control
+ * as the Divider block (track + editable number box), range 0–100, continuous.
+ * Spread into a block's `fields` to expose the Padding Control on that block.
+ * Pass the Style field-group id for blocks that use grouped panels.
+ */
+const PADDING_CONTROL_FIELDS = (groupId) => ({
+    topPadding: {
+        type: 'slider',
+        title: contentSettingsTr(`topPaddingTitle`),
+        minLength: 0,
+        maxLength: 100,
+        groupId,
+    },
+    bottomPadding: {
+        type: 'slider',
+        title: contentSettingsTr(`bottomPaddingTitle`),
+        minLength: 0,
+        maxLength: 100,
+        groupId,
+    },
+});
 const DEFAULT_TITLE_STYLE_SETTINGS_FILED = () => ({
     type: 'text-style',
     defaultValue: {},
@@ -217,7 +239,7 @@ const shopReplaceImageSettings = () => ({
     titleAdd: contentSettingsTr(`addImageHeaderTitle`),
     titleReplace: contentSettingsTr(`imageReplaceTitle`),
     contentMediaFieldName: MediaFieldNames.requestPaymentConfig,
-    setContentMedia: (content, value, index) => '',
+    setContentMedia: (_content, _value, _index) => '',
     openByDefault: false,
     mediaType: null,
     maxFilesize: undefined,
@@ -799,6 +821,7 @@ export const IMAGE_GALLERY_CONTENT_SETTINGS_CONFIG = () => ({
             defaultValue: false,
             visibilityAssessor: imageGalleryFieldVisibilityAssessor,
         },
+        ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddImageContents,
@@ -835,6 +858,7 @@ export const VIDEO_CONTENT_SETTINGS_CONFIG = () => ({
             label: contentSettingsTr(`muteLabel`),
             valueConvertor: videoContentStateConvertor,
         },
+        ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddVideoContents,
@@ -968,6 +992,7 @@ export const TEXT_CONTENT_SETTINGS_CONFIG = () => ({
             variant: 'icon',
             visibilityAssessor: brandSiteTypeVisibilityAssessor,
         },
+        ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
         backgroundColor: {
             type: 'color',
             defaultValue: {},
@@ -1384,6 +1409,7 @@ export const MAP_CONTENT_SETTINGS_CONFIG = () => ({
             type: 'address',
             title: contentSettingsTr(`addressTitle`),
         },
+        ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddMapContents,
@@ -1432,6 +1458,7 @@ export const MAILING_LIST_CONTENT_SETTINGS_CONFIG = () => ({
         },
         titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
         buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
+        ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -1602,6 +1629,7 @@ export const REQUEST_PAYMENT_CONTENT_SETTINGS_CONFIG = () => ({
             defaultValue: {},
             label: contentSettingsTr(`buttonTextStyleLabel`),
         },
+        ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -1666,6 +1694,7 @@ export const SUPPORT_ME_CONTENT_SETTINGS_CONFIG = () => ({
             label: contentSettingsTr(`itemStyleLabel`),
         },
         buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
+        ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -1791,6 +1820,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
             variant: 'icon',
             visibilityAssessor: brandSiteTypeVisibilityAssessor,
         },
+        ...PADDING_CONTROL_FIELDS(CONTACT_FORM_GROUPS.style),
         titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
         descriptionStyle: DEFAULT_DESCRIPTION_STYLE_FILED(),
         buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
@@ -1848,6 +1878,7 @@ export const BANNER_SECTION_SETTINGS_CONFIG = () => ({
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
             variant: 'icon',
         },
+        ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
         overlayColor: {
             type: 'color',
             title: contentSettingsTr(`overlayColorTitle`),
@@ -2063,6 +2094,7 @@ export const ABOUT_SECTION_SETTINGS_CONFIG = () => ({
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
             variant: 'icon',
         },
+        ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
         titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
         paragraphStyle: {
             type: 'text-style',
@@ -2145,6 +2177,7 @@ export const IMAGES_SECTION_SETTINGS_CONFIG = () => ({
     ],
     fields: {
         displayStyle: TEXT_MEDIA_DISPLAY_STYLE_FIELD(MEDIA_TYPES.image),
+        ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
         aspectRatio: {
             type: 'radio',
             role: 'multi',
@@ -2227,6 +2260,7 @@ export const TESTIMONIALS_SECTION_SETTINGS_CONFIG = () => ({
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
             variant: 'icon',
         },
+        ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
         title: {
             type: 'text',
             placeholder: contentSettingsTr(`titlePlaceholder`),
@@ -2334,6 +2368,7 @@ export const SOCIAL_LINKS_SETTINGS_CONFIG = () => ({
             optionsConvertor: socialLinksIconDisplayStyleConvertor,
             variant: 'icon',
         },
+        ...PADDING_CONTROL_FIELDS(SOCIAL_LINKS_GROUPS.style),
         titleStyle: {
             type: 'text-style',
             groupId: SOCIAL_LINKS_GROUPS.style,
@@ -2442,6 +2477,7 @@ export const SHAPES_SECTION_SETTINGS_CONFIG = () => ({
     ],
     fields: {
         displayStyle: TEXT_MEDIA_DISPLAY_STYLE_FIELD(MEDIA_TYPES.shape),
+        ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
         size: IMAGE_SIZE_FIELD(),
         title: TEXT_MEDIA_TITLE_FIELD(),
         description: TEXT_MEDIA_DESCRIPTION_FIELD(),
@@ -2477,6 +2513,7 @@ export const SHAPES_SECTION_SETTINGS_CONFIG = () => ({
                 ? MAX_BS_MEDIA_AND_IMAGE_ITEMS
                 : MAX_BP_MEDIA_AND_IMAGE_ITEMS,
         },
+        ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -2530,6 +2567,7 @@ export const SHOP_SECTION_SETTINGS_CONFIG = () => ({
             optionsConvertor: shopAspectRatioConvertor,
             visibilityAssessor: shopImageOptionVisibilityAssessor,
         },
+        ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
         title: {
             type: 'title',
             groupId: REQUEST_PAYMENT_GROUPS.settings,
@@ -2688,6 +2726,7 @@ export const BOOKING_SECTION_SETTINGS_CONFIG = () => ({
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
             visibilityAssessor: (c, b) => personalisationOverrideVisibility(c, b, 'buttonText'),
         },
+        ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
         backgroundStyle: {
             type: 'color',
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,

package/lib/src/brand-page-maker/convertors/about-display-style.convertor.js

@@ -1,4 +1,4 @@
-import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_ALIGNED, ALIGN_RIGHT_FULL_IMAGE, TEXT_ONLY, } from '@brand-page/constants';
+import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_ALIGNED, ALIGN_RIGHT_FULL_IMAGE, TEXT_ONLY, ABOUT_DEFAULT_PADDING, } from '@brand-page/constants';
 export const aboutDisplayStyleConvertor = {
     convertBackToMultipleValues: true,
     convert(value) {
@@ -58,10 +58,16 @@ export const aboutDisplayStyleConvertor = {
     },
     convertBack(config) {
         const selectedOption = config.options.find((v) => v.isSelected);
+        // Switching display style adopts that style's canonical look — like the
+        // textAlign reset below — including its default block padding (a flat 32
+        // for every About style).
+        const padding = ABOUT_DEFAULT_PADDING;
         if (!selectedOption || selectedOption.value === ALIGN_CENTERED) {
             const textAlign = 'center';
             return {
                 displayStyle: selectedOption?.value,
+                topPadding: padding,
+                bottomPadding: padding,
                 titleStyle: {
                     textAlign,
                 },
@@ -73,6 +79,8 @@ export const aboutDisplayStyleConvertor = {
         const textAlign = 'left';
         return {
             displayStyle: selectedOption?.value,
+            topPadding: padding,
+            bottomPadding: padding,
             titleStyle: {
                 textAlign,
             },

package/lib/src/brand-page-maker/convertors/banner-align-display-style.convertor.js

@@ -1,4 +1,4 @@
-import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, BIG_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, ALIGN_TOP_CARD_IMAGE, ALIGN_BOTTOM_CARD_IMAGE, ALIGN_MIDDLE_CARD_IMAGE, ALIGN_TOP_FULL_IMAGE, ALIGN_BOTTOM_FULL_IMAGE, ALIGN_MIDDLE_FULL_IMAGE, } from '@brand-page/constants';
+import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, BIG_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, ALIGN_TOP_CARD_IMAGE, ALIGN_BOTTOM_CARD_IMAGE, ALIGN_MIDDLE_CARD_IMAGE, ALIGN_TOP_FULL_IMAGE, ALIGN_BOTTOM_FULL_IMAGE, ALIGN_MIDDLE_FULL_IMAGE, bannerDisplayStyleDefaultPadding, } from '@brand-page/constants';
 export const bannerAlignDisplayStyleConvertor = {
     convertBackToMultipleValues: true,
     convert(value) {
@@ -143,8 +143,14 @@ export const bannerAlignDisplayStyleConvertor = {
             selectedOption.value === ALIGN_MIDDLE_FULL_IMAGE) {
             textAlign = 'center';
         }
+        // Switching display style adopts that style's canonical look — like the
+        // textAlign resets above — including its default block padding. Full-bleed
+        // image styles default to 0 (image flush to the edges); the rest to 32.
+        const padding = bannerDisplayStyleDefaultPadding(selectedOption?.value);
         return {
             displayStyle: selectedOption?.value,
+            topPadding: padding,
+            bottomPadding: padding,
             titleStyle: {
                 textAlign,
             },

package/lib/src/brand-page-maker/convertors/contact-layout-style.convertor.js

@@ -1,4 +1,4 @@
-import { ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_CARD_CENTER_IMAGE, TEXT_ONLY, ALIGN_CARD_CENTER, } from '@brand-page/constants';
+import { ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_CARD_CENTER_IMAGE, TEXT_ONLY, ALIGN_CARD_CENTER, CONTACT_FORM_LAYOUT_DEFAULT_PADDING, } from '@brand-page/constants';
 export const contactLayoutStyleConvertor = {
     convertBackToMultipleValues: true,
     convert(value) {
@@ -64,8 +64,13 @@ export const contactLayoutStyleConvertor = {
             selectedOption?.value === ALIGN_RIGHT_FULL_IMAGE) {
             textAlign = 'left';
         }
+        // Switching layout adopts that layout's canonical look — same as the
+        // textAlign resets below — including its default block padding.
+        const padding = CONTACT_FORM_LAYOUT_DEFAULT_PADDING[selectedOption?.value ?? ''] ?? 0;
         return {
             layoutStyle: selectedOption?.value,
+            topPadding: padding,
+            bottomPadding: padding,
             titleStyle: {
                 textAlign,
             },

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

@@ -1,3 +1,3 @@
 import type { ButtonGroupConfig, ValueConvertor } from '../models';
 import type { ImagesSectionContent, MediaType } from '@brand-page';
-export declare const getTextMediaOptionsConverterByMediaType: (mediaType: MediaType) => ValueConvertor<string | null, ButtonGroupConfig, Partial<ImagesSectionContent>>;
+export declare const getTextMediaOptionsConverterByMediaType: (_mediaType: MediaType) => ValueConvertor<string | null, ButtonGroupConfig, Partial<ImagesSectionContent>>;

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

@@ -1,5 +1,5 @@
 import { ALIGN_CARD_CENTER_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, ALTERNATE_IMAGE, MEDIA_ONLY, } from '@brand-page/constants';
-export const getTextMediaOptionsConverterByMediaType = (mediaType) => {
+export const getTextMediaOptionsConverterByMediaType = (_mediaType) => {
     const textImageDisplayStyleConvertor = {
         convertBackToMultipleValues: true,
         convert(value) {

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

@@ -8,7 +8,7 @@ export declare const createInitialImageContent: () => ImageContent;
 export declare const createInitialImageGalleryContent: () => ImageGalleryContent;
 export declare const createInitialVideoContent: () => VideoContent;
 export declare const createInitialProfileContent: (options?: CreateInitialContentOptions) => ProfileContent;
-export declare const createInitialTextContent: (options?: Pick<CreateInitialContentOptions, 'brandPageType'>) => TextContent;
+export declare const createInitialTextContent: (options?: Pick<CreateInitialContentOptions, "brandPageType">) => TextContent;
 export declare const createInitialLogoContent: () => LogoContent;
 export declare const createInitialMapContent: () => MapContent;
 export declare const createInitialMailingListContent: (options?: CreateInitialContentOptions) => MailingListContent;

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

@@ -1,4 +1,4 @@
-import { BrandPageModel, PageStyles, FORM_FIELD_IDS, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, MEDIA_TYPES, BUTTON_LINK_TYPE, DISPLAY_STYLE_PREVIEW, SUPPORT_ME_CUSTOM_PRODUCT_NAME, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, FONT_SIZE_BODY, LINE_HEIGHT_BODY, TEXT_STYLE_TYPES, TEXT_COLUMNS, DEFAULT_LOGO_BACKGROUND_COLOR_RGB, DEFAULT_LOGO_TEXT_COLOR_RGB, EMPTY_LOGO_IMAGE_MODEL, BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, } from '@brand-page';
+import { BrandPageModel, PageStyles, FORM_FIELD_IDS, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, MEDIA_TYPES, BUTTON_LINK_TYPE, DISPLAY_STYLE_PREVIEW, SUPPORT_ME_CUSTOM_PRODUCT_NAME, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, FONT_SIZE_BODY, LINE_HEIGHT_BODY, TEXT_STYLE_TYPES, TEXT_COLUMNS, DEFAULT_LOGO_BACKGROUND_COLOR_RGB, DEFAULT_LOGO_TEXT_COLOR_RGB, EMPTY_LOGO_IMAGE_MODEL, BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, CONTACT_FORM_LAYOUT_DEFAULT_PADDING, TESTIMONIAL_DEFAULT_PADDING, } from '@brand-page';
 import * as uuid from 'uuid';
 import { getColorShades } from '@brand-page/utils';
 import { contentSettingsTr } from '@src/composables/useTranslate';
@@ -101,6 +101,8 @@ export const createInitialImageGalleryContent = () => {
         galleryStyles: {
             galleryType: 'grid',
         },
+        topPadding: 0,
+        bottomPadding: 0,
     };
 };
 export const createInitialVideoContent = () => {
@@ -111,6 +113,8 @@ export const createInitialVideoContent = () => {
         displayStyle: DISPLAY_STYLE_PREVIEW,
         mute: false,
         videoUrl: '',
+        topPadding: 0,
+        bottomPadding: 0,
     };
 };
 export const createInitialProfileContent = (options) => {
@@ -160,6 +164,9 @@ export const createInitialTextContent = (options) => {
             ]
             : 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,
@@ -201,12 +208,16 @@ export const createInitialMapContent = () => {
             formattedAddress: '',
             placeId: '',
         },
+        topPadding: 0,
+        bottomPadding: 0,
     };
 };
 export const createInitialMailingListContent = (options) => {
     return {
         id: uuid.v4(),
         type: 'mailing-list',
+        topPadding: 0,
+        bottomPadding: 0,
         title: contentSettingsTr(`mailingListTitle`),
         buttonText: contentSettingsTr(`subscribePlaceholder`),
         acceptedFields: 'emailOnly',
@@ -237,6 +248,8 @@ export const createInitialRequestPaymentContent = (options) => {
         successMessage: '',
         title: contentSettingsTr(`buyNowTitle`),
         type: 'request-payment',
+        topPadding: 0,
+        bottomPadding: 0,
         fillColor: {},
         defaultBorderColor: {},
         selectedBorderColor: {},
@@ -266,6 +279,8 @@ export const createInitialShopContent = (options) => {
     return {
         id: uuid.v4(),
         description: '',
+        topPadding: 16,
+        bottomPadding: 16,
         products: [],
         displayStyle: PAYMENT_OPTION_DISPLAY_TYPES.thumbnail,
         aspectRatio: PAYMENT_OPTION_IMAGE_TYPES.auto,
@@ -322,6 +337,8 @@ export const createInitialSupportMeContent = (options) => {
         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,
@@ -354,13 +371,19 @@ export const createInitialContactFormContent = (options) => {
         typeof options?.userState.emailAddress === 'undefined') {
         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: [
             {
@@ -450,6 +473,8 @@ export const createInitialContactFormContent = (options) => {
 export const createInitialBannerSectionContent = (options) => {
     return {
         id: uuid.v4(),
+        topPadding: 32,
+        bottomPadding: 32,
         imageUrl: '',
         title: contentSettingsTr(`thisIsABannerTitle`),
         description: '',
@@ -493,6 +518,8 @@ export const createInitialBookingSectionContent = (options) => {
         buttonText: contentSettingsTr(`bookNowLabel`),
         url: '',
         type: 'booking-section',
+        topPadding: 32,
+        bottomPadding: 32,
         descriptionStyle: {
             applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
             textStyleType: TEXT_STYLE_TYPES.paragraphs,
@@ -519,6 +546,8 @@ export const createInitialImagesSectionContent = (options) => {
         title: contentSettingsTr(`imagesTitle`),
         description: '',
         type: 'images-section',
+        topPadding: 32,
+        bottomPadding: 32,
         displayStyle: 'centered',
         aspectRatio: 'Default',
         areImagesFullWidth: false,
@@ -571,6 +600,8 @@ export const createInitialTestimonialSectionContent = (options) => {
         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,
@@ -616,6 +647,8 @@ export const createInitialAboutSectionContent = (options) => {
             textAlign: 'center',
         },
         backgroundStyle: {},
+        topPadding: 32,
+        bottomPadding: 32,
     };
 };
 export const createInitialDividerSectionContent = () => {
@@ -668,6 +701,8 @@ export const createInitialSocialLinksContent = (options) => {
     return {
         id: uuid.v4(),
         type: 'social-links',
+        topPadding: 32,
+        bottomPadding: 32,
         title: contentSettingsTr(`followUsOnTitle`),
         links: [
             {
@@ -718,6 +753,8 @@ export const createInitialShapesSectionContent = (options) => {
         title: contentSettingsTr(`shapesTitle`),
         description: '',
         type: 'shapes-section',
+        topPadding: 32,
+        bottomPadding: 32,
         displayStyle: 'centered',
         items: [
             {

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

@@ -1,6 +1,6 @@
 import { defaultHamburgerNavigation, NAVIGATION_DISPLAY, FONT_FAMILY_CONFIGS, DEFAULT_FONT_FAMILY_KEY, FONT_SIZE_BODY, DEFAULT_TEXT_ALIGN, } from '@brand-page';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
-import { tr, commonTr, modelsTr } from '@src/composables/useTranslate';
+import { commonTr, modelsTr } from '@src/composables/useTranslate';
 export const NavigationStyleConfigOptions = {
     defaultBorderColor: 'defaultBorderColor',
     defaultTextStyle: 'defaultTextStyle',

package/lib/src/brand-page-maker/routing/brand-page-maker-router.d.ts

@@ -1,5 +1,4 @@
-import { type Router } from 'vue-router';
 export declare const navigateToPageByPageId: (pageId: string) => void;
 export declare const setRouterInstance: (router: any) => void;
 export declare const attachRouterHooks: () => void;
-export declare const createBrandPageMakerRouter: () => Router;
+export declare const createBrandPageMakerRouter: () => import("vue-router")._RouterClassic;