@designcrowd/library.brand-page 6.0.26 → 6.0.27-websitev2-dev-1

package/lib/src/metadata-builder/builders/global-font-propagation.d.ts

@@ -0,0 +1,28 @@
+import type { BrandPageModel } from '../../brand-page/models';
+import type { UpdateGlobalStylesArguments } from '../parsers/ai-toolcall-parser';
+/**
+ * Propagation of AI global font-family changes into existing section content.
+ *
+ * A `tool_update_global_styles` call merges new per-category font families into
+ * `styles.textStyles.textStyleOptions` — but only content whose style is still
+ * bound to a preset (`textStyleType`) follows that change. Template-authored
+ * content carries detached `*Style` objects AND inline `font-family` marks in
+ * its RTE HTML, both of which override the preset at render time, so a global
+ * font change was invisible on most templates (BP-5780 ISSUE-01).
+ *
+ * This module walks every page's contents and, for each text field whose
+ * resolved category received a new family, aligns the detached style object and
+ * rewrites the RTE HTML's inline font-family marks. Preset-bound styles are NOT
+ * detached — they already follow the preset; only their RTE inline marks are
+ * rewritten (the marks would otherwise still win over the preset).
+ */
+export type GlobalFontCategory = 'titles' | 'headings' | 'paragraphs' | 'buttons';
+/** Extract the per-category families this AI call actually changes. */
+export declare const collectChangedFontFamilies: (textStyles: UpdateGlobalStylesArguments["textStyles"]) => Partial<Record<GlobalFontCategory, string>>;
+export type ApplyFontToRTE = (text: string, fontFamily: string) => string;
+/**
+ * Walk every page's contents and propagate the changed families.
+ * `applyFont` is injectable for tests; the default rewrites inline marks via
+ * the external Tiptap editor.
+ */
+export declare const propagateFontFamiliesToContents: (model: BrandPageModel, changed: Partial<Record<GlobalFontCategory, string>>, applyFont?: ApplyFontToRTE) => void;

package/lib/src/metadata-builder/builders/global-font-propagation.js

@@ -0,0 +1,125 @@
+import { hasRTEContent } from '../../brand-page-maker/utils';
+import { useExternalRichTextEditor } from '../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
+import { applyStyleToRTEText } from '../helpers/rte.helpers';
+/**
+ * Default category per text field when its style is detached (no `textStyleType`).
+ * Mirrors the AI service's slot→category stamping (titles←h1, headings←h2-h4,
+ * paragraphs←body, buttons←button). `title` upgrades to `titles` on banner
+ * sections (the hero headline) via `resolveFieldCategory`.
+ */
+const FIELD_DEFAULT_CATEGORY = {
+    title: 'headings',
+    heading: 'headings',
+    name: 'headings',
+    description: 'paragraphs',
+    paragraph: 'paragraphs',
+    text: 'paragraphs',
+    testimonial: 'paragraphs',
+    position: 'paragraphs',
+    question: 'headings',
+    answer: 'paragraphs',
+    buttonText: 'buttons',
+    successMessage: 'paragraphs',
+};
+const CATEGORIES = [
+    'titles',
+    'headings',
+    'paragraphs',
+    'buttons',
+];
+const isPlainObject = (v) => !!v && typeof v === 'object' && !Array.isArray(v);
+/** Extract the per-category families this AI call actually changes. */
+export const collectChangedFontFamilies = (textStyles) => {
+    const changed = {};
+    if (!textStyles)
+        return changed;
+    for (const category of CATEGORIES) {
+        const family = textStyles.textStyleOptions?.[category]?.style?.fontFamily;
+        if (typeof family === 'string' && family.trim()) {
+            changed[category] = family;
+        }
+    }
+    // Base text family covers paragraphs when no explicit paragraphs entry came in.
+    if (!changed.paragraphs &&
+        typeof textStyles.textFontFamily === 'string' &&
+        textStyles.textFontFamily.trim()) {
+        changed.paragraphs = textStyles.textFontFamily;
+    }
+    return changed;
+};
+const resolveFieldCategory = (fieldName, style, content) => {
+    const preset = isPlainObject(style)
+        ? style.textStyleType
+        : undefined;
+    if (preset && CATEGORIES.includes(preset))
+        return preset;
+    if (fieldName === 'title' && content.type === 'banner-section') {
+        return 'titles';
+    }
+    return FIELD_DEFAULT_CATEGORY[fieldName];
+};
+/** `testimonialsStyle` → `testimonial`, `titleStyle` → `title`. */
+const styleKeyToFieldName = (styleKey) => {
+    const base = styleKey.slice(0, -'Style'.length);
+    return base.endsWith('s') && !(base in FIELD_DEFAULT_CATEGORY)
+        ? base.slice(0, -1)
+        : base;
+};
+const walkRecord = (record, content, changed, applyFont) => {
+    for (const [key, value] of Object.entries(record)) {
+        if (key.endsWith('Style') && isPlainObject(value)) {
+            // Detached style objects carry their own fontFamily override — align it.
+            // Preset-bound styles keep following the preset (never detach here).
+            const category = resolveFieldCategory(styleKeyToFieldName(key), value, content);
+            const family = category ? changed[category] : undefined;
+            if (family && !value.textStyleType) {
+                value.fontFamily =
+                    family;
+            }
+        }
+        else if (key in FIELD_DEFAULT_CATEGORY &&
+            typeof value === 'string' &&
+            hasRTEContent(value)) {
+            // Inline RTE marks override every style layer at render — rewrite them.
+            const category = resolveFieldCategory(key, record[`${key}Style`], content);
+            const family = category ? changed[category] : undefined;
+            if (family) {
+                record[key] = applyFont(value, family);
+            }
+        }
+        else if (Array.isArray(value)) {
+            for (const item of value) {
+                if (isPlainObject(item)) {
+                    walkRecord(item, content, changed, applyFont);
+                }
+            }
+        }
+    }
+};
+/**
+ * Walk every page's contents and propagate the changed families.
+ * `applyFont` is injectable for tests; the default rewrites inline marks via
+ * the external Tiptap editor.
+ */
+export const propagateFontFamiliesToContents = (model, changed, applyFont) => {
+    if (!Object.keys(changed).length)
+        return;
+    let editor;
+    const apply = applyFont ??
+        ((text, fontFamily) => {
+            editor = editor ?? useExternalRichTextEditor().externalEditor;
+            return applyStyleToRTEText(editor, text, {
+                fontFamily,
+            });
+        });
+    try {
+        for (const page of model.pages) {
+            for (const content of page.contents) {
+                walkRecord(content, content, changed, apply);
+            }
+        }
+    }
+    finally {
+        editor?.destroy();
+    }
+};

package/lib/src/metadata-builder/builders/global-styles-builder.js

@@ -1,6 +1,7 @@
 import {} from '../../brand-page/models';
 import { BaseMetadataBuilder, } from '../models';
 import { GLOBAL_STYLE_CHECKS, TEXT_STYLE_OPTION_KEYS, } from './section-rules/global-styles.rules';
+import { collectChangedFontFamilies, propagateFontFamiliesToContents, } from './global-font-propagation';
 export class GlobalStylesBuilder extends BaseMetadataBuilder {
     constructor(request, logger) {
         super(request, logger);
@@ -30,6 +31,21 @@ export class GlobalStylesBuilder extends BaseMetadataBuilder {
         }
         if (args.textStyles) {
             this.applyTextStyles(model, args.textStyles);
+            // A category font change only reaches preset-bound content by itself;
+            // detached section styles and inline RTE font marks would still render
+            // the old family. Propagate so the change is actually visible (BP-5780).
+            const changedFamilies = collectChangedFontFamilies(args.textStyles);
+            if (Object.keys(changedFamilies).length) {
+                try {
+                    propagateFontFamiliesToContents(model, changedFamilies);
+                }
+                catch (error) {
+                    this.log({
+                        message: 'Global font propagation to existing contents failed — presets still updated',
+                        error,
+                    });
+                }
+            }
         }
         if (args.buttonStyles) {
             this.applyButtonStyles(model, args.buttonStyles);

package/lib/src/metadata-builder/builders/section-builders/index.d.ts

@@ -1,6 +1,7 @@
 export { BaseSectionBuilder, type SectionBuilderPayload, } from './base-section-builder';
 export { BannerSectionBuilder } from './banner-section-builder';
 export { BookingSectionBuilder } from './booking-section-builder';
+export { SupportMeBuilder } from './support-me-builder';
 export { AboutSectionBuilder } from './about-section-builder';
 export { ContactFormBuilder } from './contact-form-builder';
 export { DividerSectionBuilder } from './divider-section-builder';

package/lib/src/metadata-builder/builders/section-builders/index.js

@@ -1,6 +1,7 @@
 export { BaseSectionBuilder, } from './base-section-builder';
 export { BannerSectionBuilder } from './banner-section-builder';
 export { BookingSectionBuilder } from './booking-section-builder';
+export { SupportMeBuilder } from './support-me-builder';
 export { AboutSectionBuilder } from './about-section-builder';
 export { ContactFormBuilder } from './contact-form-builder';
 export { DividerSectionBuilder } from './divider-section-builder';

package/lib/src/metadata-builder/builders/section-builders/support-me-builder.d.ts

@@ -0,0 +1,8 @@
+import type { BrandPageModel, SupportMeContent } from '../../../brand-page/models';
+import type { BuilderResult } from '../../models';
+import { BaseSectionBuilder } from './base-section-builder';
+import { validateSupportMe } from '../section-rules/support-me.rules';
+export declare class SupportMeBuilder extends BaseSectionBuilder<SupportMeContent> {
+    protected get sectionValidate(): typeof validateSupportMe;
+    buildAsync(model: BrandPageModel): Promise<BuilderResult>;
+}

package/lib/src/metadata-builder/builders/section-builders/support-me-builder.js

@@ -0,0 +1,25 @@
+import { applyScalarFields, applyStyleFields } from '../section-field-utils';
+import { BaseSectionBuilder } from './base-section-builder';
+import { validateSupportMe } from '../section-rules/support-me.rules';
+export class SupportMeBuilder extends BaseSectionBuilder {
+    get sectionValidate() {
+        return validateSupportMe;
+    }
+    async buildAsync(model) {
+        this.log('Build called');
+        const validation = await this.validateAsync();
+        if (validation.errors.length) {
+            return { request: this.request, model, errors: validation.errors };
+        }
+        const resolved = this.resolveAndRepositionContent(model);
+        if ('error' in resolved)
+            return resolved.error;
+        const content = resolved.content;
+        // title/description/success_message are plain-text fields (no RTE support),
+        // so scalar application covers all content fields. supportMeConfig (payment
+        // options) is intentionally not AI-editable — it comes from the factory.
+        applyScalarFields(content, this.args, this.sectionType);
+        applyStyleFields(content, this.args, this.sectionType, this.getGlobalTextStyles(model));
+        return { request: this.request, model };
+    }
+}

package/lib/src/metadata-builder/builders/section-builders/text-section-builder.js

@@ -131,14 +131,17 @@ export class TextSectionBuilder extends BaseSectionBuilder {
             applyTextItems(content, args.items, textStyleOptions);
         }
         else if (this.mode === 'create') {
-            if (args.items && Array.isArray(args.items)) {
+            // An EMPTY items array must not shadow the single text field — the AI emits
+            // `items: []` alongside `text` and the section rendered blank (QA 2026-07-05,
+            // T06: items=[] set textItems=[] and `text` was silently discarded).
+            if (args.items && Array.isArray(args.items) && args.items.length > 0) {
                 applyTextItems(content, args.items, textStyleOptions);
             }
             else {
                 applySingleTextField(content, args, textStyleOptions);
             }
         }
-        else if ((args.items && Array.isArray(args.items)) ||
+        else if ((args.items && Array.isArray(args.items) && args.items.length > 0) ||
             args._remove_item_ids?.length) {
             // Update: id-based add / edit / move / remove in a single pass.
             mergeTextItems(content, args.items ?? [], args._remove_item_ids, textStyleOptions);

package/lib/src/metadata-builder/builders/section-field-maps.js

@@ -131,9 +131,16 @@ const socialButtonFields = defineFieldMap({
     title: 'title',
     url: 'url',
 });
+const supportMeFields = defineFieldMap({
+    title: 'title',
+    description: 'description',
+    success_message: 'successMessage',
+    display_style: 'displayStyle',
+});
 export const SECTION_FIELD_MAPS = {
     'banner-section': bannerFields,
     'booking-section': bookingFields,
+    'support-me': supportMeFields,
     'about-section': aboutFields,
     'testimonial-section': testimonialFields,
     'images-section': imagesSectionFields,
@@ -208,6 +215,13 @@ const mailingListStyleFields = defineFieldMap({
     title_style: 'titleStyle',
     button_text_style: 'buttonTextStyle',
 });
+const supportMeStyleFields = defineFieldMap({
+    title_style: 'titleStyle',
+    heading_style: 'headingStyle',
+    description_style: 'descriptionStyle',
+    item_text_style: 'itemTextStyle',
+    button_text_style: 'buttonTextStyle',
+});
 const socialLinksStyleFields = defineFieldMap({
     icon_fill_style: 'iconFillStyles',
     icon_background_style: 'iconBackgroundStyles',
@@ -215,6 +229,7 @@ const socialLinksStyleFields = defineFieldMap({
 export const STYLE_FIELD_MAPS = {
     'banner-section': bannerStyleFields,
     'booking-section': bookingStyleFields,
+    'support-me': supportMeStyleFields,
     'about-section': aboutStyleFields,
     text: textStyleFields,
     'testimonial-section': testimonialStyleFields,

package/lib/src/metadata-builder/builders/section-field-utils.d.ts

@@ -53,5 +53,10 @@ export declare const resolveGlobalPresetIntoStyle: (style: object | undefined, t
  * updates without re-resolving a preset.
  */
 export declare const applyDetachedStyleOverride: <T extends object>(current: T | undefined, updates: Partial<T>, textStyleOptions: TextStyleOptions | undefined) => T;
-export declare const applyStyleFields: (content: Content, args: SectionToolArguments, sectionType: string, textStyleOptions?: TextStyleOptions) => void;
+/**
+ * Rewrites the stored RTE HTML's inline colour marks. Injectable for tests;
+ * the default uses the external Tiptap editor (font-propagation precedent).
+ */
+export type ApplyColorToRTE = (html: string, color: string) => string;
+export declare const applyStyleFields: (content: Content, args: SectionToolArguments, sectionType: string, textStyleOptions?: TextStyleOptions, applyColor?: ApplyColorToRTE) => void;
 export {};

package/lib/src/metadata-builder/builders/section-field-utils.js

@@ -1,5 +1,8 @@
 import { BUTTON_LINK_TYPE } from '../../brand-page/models';
 import { isTiptapDocument, } from '../parsers/section-tool-arguments';
+import { hasRTEContent } from '../../brand-page-maker/utils';
+import { useExternalRichTextEditor } from '../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
+import { applyStyleToRTEText } from '../helpers/rte.helpers';
 import { getSectionFieldMap, getStyleFieldMap } from './section-field-maps';
 const isUrlField = (aiKey) => aiKey.endsWith('_url');
 export const isValidUrl = (value) => {
@@ -117,22 +120,55 @@ export const applyDetachedStyleOverride = (current, updates, textStyleOptions) =
     ...resolveGlobalPresetIntoStyle(current, textStyleOptions),
     ...updates,
 });
-export const applyStyleFields = (content, args, sectionType, textStyleOptions) => {
+export const applyStyleFields = (content, args, sectionType, textStyleOptions, applyColor) => {
     const styleMap = getStyleFieldMap(sectionType);
     if (!styleMap)
         return;
     const record = content;
-    for (const [aiKey, modelKey] of Object.entries(styleMap)) {
-        if (!(aiKey in args) || !args[aiKey] || typeof args[aiKey] !== 'object')
-            continue;
-        const aiStyle = args[aiKey];
-        const filtered = {};
-        for (const [k, v] of Object.entries(aiStyle)) {
-            const normalized = normalizeStyleValue(k, v);
-            if (normalized !== undefined)
-                filtered[k] = normalized;
+    let editor;
+    const applyColorToHtml = applyColor ??
+        ((html, color) => {
+            editor = editor ?? useExternalRichTextEditor().externalEditor;
+            return applyStyleToRTEText(editor, html, {
+                color,
+            });
+        });
+    try {
+        for (const [aiKey, modelKey] of Object.entries(styleMap)) {
+            if (!(aiKey in args) || !args[aiKey] || typeof args[aiKey] !== 'object')
+                continue;
+            const aiStyle = args[aiKey];
+            const filtered = {};
+            for (const [k, v] of Object.entries(aiStyle)) {
+                const normalized = normalizeStyleValue(k, v);
+                if (normalized !== undefined)
+                    filtered[k] = normalized;
+            }
+            const resolved = resolveGlobalPresetIntoStyle(content[modelKey], textStyleOptions);
+            record[modelKey] = { ...resolved, ...filtered, textStyleType: undefined };
+            // A colour patch without new text leaves the field's EXISTING inline
+            // textStyle marks in place — and inline marks override every style layer
+            // at render, so the old colour survives on a recoloured band (invisible
+            // text, AI QA 2026-07-05 rerun). Propagate the new colour into the
+            // stored HTML, mirroring global-font-propagation for font families.
+            const textKey = modelKey.endsWith('Style')
+                ? modelKey.slice(0, -'Style'.length)
+                : undefined;
+            const textAiKey = aiKey.endsWith('_style')
+                ? aiKey.slice(0, -'_style'.length)
+                : undefined;
+            const newColor = filtered.color;
+            if (textKey &&
+                typeof newColor === 'string' &&
+                newColor &&
+                !(textAiKey && textAiKey in args) &&
+                typeof record[textKey] === 'string' &&
+                hasRTEContent(record[textKey])) {
+                record[textKey] = applyColorToHtml(record[textKey], newColor);
+            }
         }
-        const resolved = resolveGlobalPresetIntoStyle(content[modelKey], textStyleOptions);
-        record[modelKey] = { ...resolved, ...filtered, textStyleType: undefined };
+    }
+    finally {
+        editor?.destroy();
     }
 };

package/lib/src/metadata-builder/builders/section-rules/support-me.rules.d.ts

@@ -0,0 +1,2 @@
+import { type ValidationContext } from '../../sanitizers/section-args-validator';
+export declare function validateSupportMe(args: Record<string, unknown>, ctx: ValidationContext): string[];

package/lib/src/metadata-builder/builders/section-rules/support-me.rules.js

@@ -0,0 +1,17 @@
+import { MAX_TITLE_LENGTH, MAX_DESCRIPTION_LENGTH, } from '../../../brand-page/constants/font.constants';
+import { DISPLAY_STYLE_PREVIEW, DISPLAY_STYLE_COLLAPSED, } from '../../../brand-page/constants';
+import { enumCheck, runChecks, styleCheck, textCheck, } from '../../sanitizers/section-args-validator';
+const CHECKS = [
+    textCheck('title', MAX_TITLE_LENGTH),
+    textCheck('description', MAX_DESCRIPTION_LENGTH),
+    textCheck('success_message', MAX_DESCRIPTION_LENGTH),
+    styleCheck('title_style'),
+    styleCheck('heading_style'),
+    styleCheck('description_style'),
+    styleCheck('item_text_style'),
+    styleCheck('button_text_style'),
+    enumCheck('display_style', [DISPLAY_STYLE_PREVIEW, DISPLAY_STYLE_COLLAPSED], 'support-me'),
+];
+export function validateSupportMe(args, ctx) {
+    return runChecks(CHECKS, args, ctx);
+}

package/lib/src/metadata-builder/metadata-executor.js

@@ -3,7 +3,7 @@ import {} from '../brand-page/models';
 import { BUILDER_TYPES, } from './models';
 import { UpdateContentTextBuilder } from './builders/update-content-text-builder';
 import { UpdateContentTextStyleBuilder } from './builders/update-content-text-style-builder';
-import { BannerSectionBuilder, BookingSectionBuilder, AboutSectionBuilder, ContactFormBuilder, DividerSectionBuilder, TextSectionBuilder, TestimonialSectionBuilder, ImagesSectionBuilder, ShapesSectionBuilder, SocialLinksBuilder, ImageGalleryBuilder, ProfileSectionBuilder, MailingListSectionBuilder, ButtonSectionBuilder, DeleteSectionBuilder, MoveSectionBuilder, } from './builders/section-builders';
+import { BannerSectionBuilder, BookingSectionBuilder, SupportMeBuilder, AboutSectionBuilder, ContactFormBuilder, DividerSectionBuilder, TextSectionBuilder, TestimonialSectionBuilder, ImagesSectionBuilder, ShapesSectionBuilder, SocialLinksBuilder, ImageGalleryBuilder, ProfileSectionBuilder, MailingListSectionBuilder, ButtonSectionBuilder, DeleteSectionBuilder, MoveSectionBuilder, } from './builders/section-builders';
 import { AddPageBuilder } from './builders/add-page-builder';
 import { RemovePageBuilder } from './builders/remove-page-builder';
 import { RenamePageBuilder } from './builders/rename-page-builder';
@@ -20,6 +20,7 @@ const getBuilderRegistry = () => ({
     // Section builders (create)
     [BUILDER_TYPES.CREATE_BANNER_SECTION]: BannerSectionBuilder,
     [BUILDER_TYPES.CREATE_BOOKING_SECTION]: BookingSectionBuilder,
+    [BUILDER_TYPES.CREATE_SUPPORT_ME]: SupportMeBuilder,
     [BUILDER_TYPES.CREATE_ABOUT_SECTION]: AboutSectionBuilder,
     [BUILDER_TYPES.CREATE_CONTACT_FORM]: ContactFormBuilder,
     [BUILDER_TYPES.CREATE_DIVIDER_SECTION]: DividerSectionBuilder,
@@ -46,6 +47,7 @@ const getBuilderRegistry = () => ({
     // Section builders (update)
     [BUILDER_TYPES.UPDATE_BANNER_SECTION]: BannerSectionBuilder,
     [BUILDER_TYPES.UPDATE_BOOKING_SECTION]: BookingSectionBuilder,
+    [BUILDER_TYPES.UPDATE_SUPPORT_ME]: SupportMeBuilder,
     [BUILDER_TYPES.UPDATE_ABOUT_SECTION]: AboutSectionBuilder,
     [BUILDER_TYPES.UPDATE_CONTACT_FORM]: ContactFormBuilder,
     [BUILDER_TYPES.UPDATE_DIVIDER_SECTION]: DividerSectionBuilder,

package/lib/src/metadata-builder/models.d.ts

@@ -29,6 +29,7 @@ export declare const BUILDER_TYPES: {
     readonly CREATE_TWITCH: "create-twitch";
     readonly CREATE_TIKTOK: "create-tiktok";
     readonly CREATE_BOOKING_SECTION: "create-booking-section";
+    readonly CREATE_SUPPORT_ME: "create-support-me";
     readonly UPDATE_BANNER_SECTION: "update-banner-section";
     readonly UPDATE_ABOUT_SECTION: "update-about-section";
     readonly UPDATE_CONTACT_FORM: "update-contact-form";
@@ -54,6 +55,7 @@ export declare const BUILDER_TYPES: {
     readonly UPDATE_TWITCH: "update-twitch";
     readonly UPDATE_TIKTOK: "update-tiktok";
     readonly UPDATE_BOOKING_SECTION: "update-booking-section";
+    readonly UPDATE_SUPPORT_ME: "update-support-me";
     readonly DELETE_SECTION: "delete-section";
     readonly MOVE_SECTION: "move-section";
     readonly ADD_PAGE: "add-page";

package/lib/src/metadata-builder/models.js

@@ -28,6 +28,7 @@ export const BUILDER_TYPES = {
     CREATE_TWITCH: 'create-twitch',
     CREATE_TIKTOK: 'create-tiktok',
     CREATE_BOOKING_SECTION: 'create-booking-section',
+    CREATE_SUPPORT_ME: 'create-support-me',
     // Per-section builder types (update)
     UPDATE_BANNER_SECTION: 'update-banner-section',
     UPDATE_ABOUT_SECTION: 'update-about-section',
@@ -54,6 +55,7 @@ export const BUILDER_TYPES = {
     UPDATE_TWITCH: 'update-twitch',
     UPDATE_TIKTOK: 'update-tiktok',
     UPDATE_BOOKING_SECTION: 'update-booking-section',
+    UPDATE_SUPPORT_ME: 'update-support-me',
     // Section-level operations
     DELETE_SECTION: 'delete-section',
     MOVE_SECTION: 'move-section',

package/lib/src/metadata-builder/parsers/ai-toolcall-parser.d.ts

@@ -30,6 +30,7 @@ export declare const AI_ASSISTANT_TOOL_NAMES: {
     readonly BUILD_TESTIMONIAL_SECTION: "build_testimonial-section_section";
     readonly BUILD_DIVIDER_SECTION: "build_divider-section_section";
     readonly BUILD_BOOKING_SECTION: "build_booking-section_section";
+    readonly BUILD_SUPPORT_ME_SECTION: "build_support-me_section";
     readonly DELETE_SECTION: "delete_section";
     readonly MOVE_SECTION: "move_section";
     readonly ADD_PAGE: "add_page";

package/lib/src/metadata-builder/parsers/ai-toolcall-parser.js

@@ -34,6 +34,7 @@ export const AI_ASSISTANT_TOOL_NAMES = {
     BUILD_TESTIMONIAL_SECTION: 'build_testimonial-section_section',
     BUILD_DIVIDER_SECTION: 'build_divider-section_section',
     BUILD_BOOKING_SECTION: 'build_booking-section_section',
+    BUILD_SUPPORT_ME_SECTION: 'build_support-me_section',
     // Section-level operation tools
     DELETE_SECTION: 'delete_section',
     MOVE_SECTION: 'move_section',
@@ -113,6 +114,9 @@ export const SECTION_TOOL_MAP = {
     [AI_ASSISTANT_TOOL_NAMES.BUILD_BOOKING_SECTION]: {
         sectionType: 'booking-section',
     },
+    [AI_ASSISTANT_TOOL_NAMES.BUILD_SUPPORT_ME_SECTION]: {
+        sectionType: 'support-me',
+    },
 };
 export const parseToolCalls = (toolCalls) => {
     if (!toolCalls || toolCalls.length === 0) {

package/lib/src/metadata-builder/parsers/section-tool-arguments.d.ts

@@ -6,7 +6,7 @@
  */
 import type { ContentType } from '../../brand-page/models';
 /** Content types not supported by the AI builder. */
-type UnsupportedContentType = 'logo' | 'video' | 'map' | 'request-payment' | 'support-me' | 'shop-section';
+type UnsupportedContentType = 'logo' | 'video' | 'map' | 'request-payment' | 'shop-section';
 export type SectionType = Exclude<ContentType, UnsupportedContentType>;
 export interface TiptapMark {
     type: 'bold' | 'italic' | 'underline' | 'strike' | 'link' | 'textStyle' | 'highlight';
@@ -407,13 +407,25 @@ export interface BookingSectionArguments {
     padding_top?: number;
     padding_bottom?: number;
 }
+export interface SupportMeArguments {
+    title?: string;
+    description?: string;
+    success_message?: string;
+    /** Matches DISPLAY_STYLE_PREVIEW / DISPLAY_STYLE_COLLAPSED. */
+    display_style?: 'preview' | 'collapsed';
+    title_style?: TextStyleArguments;
+    heading_style?: TextStyleArguments;
+    description_style?: TextStyleArguments;
+    item_text_style?: TextStyleArguments;
+    button_text_style?: ButtonTextStyleArguments;
+}
 export interface DividerSectionArguments {
     divider_style?: 'none' | 'thin' | 'thick';
     divider_color?: string | null;
     background_color?: string | null;
     padding?: number;
 }
-export type SectionToolArguments = ProfileSectionArguments | TextSectionArguments | ImageSectionArguments | ImageGallerySectionArguments | GeneralLinkSectionArguments | WebsiteSectionArguments | EmailSectionArguments | PhoneSectionArguments | FacebookSectionArguments | XSectionArguments | InstagramSectionArguments | YoutubeSectionArguments | LinkedinSectionArguments | PinterestSectionArguments | TwitchSectionArguments | TiktokSectionArguments | SocialLinksSectionArguments | MailingListSectionArguments | ContactFormSectionArguments | BannerSectionArguments | AboutSectionArguments | ImagesSectionArguments | TestimonialSectionArguments | ShapesSectionArguments | BookingSectionArguments | DividerSectionArguments;
+export type SectionToolArguments = ProfileSectionArguments | TextSectionArguments | ImageSectionArguments | ImageGallerySectionArguments | GeneralLinkSectionArguments | WebsiteSectionArguments | EmailSectionArguments | PhoneSectionArguments | FacebookSectionArguments | XSectionArguments | InstagramSectionArguments | YoutubeSectionArguments | LinkedinSectionArguments | PinterestSectionArguments | TwitchSectionArguments | TiktokSectionArguments | SocialLinksSectionArguments | MailingListSectionArguments | ContactFormSectionArguments | BannerSectionArguments | AboutSectionArguments | ImagesSectionArguments | TestimonialSectionArguments | ShapesSectionArguments | BookingSectionArguments | SupportMeArguments | DividerSectionArguments;
 export interface SectionToolCallShape {
     mode: 'create' | 'update';
     type: string;

package/lib/src/utils/minify-brand-page-metadata.js

@@ -355,11 +355,18 @@ const minifyContent = (content, editor, assets) => {
         case 'logo':
             return base;
         case 'request-payment':
+            return {
+                ...base,
+                ...st('title', c.title, editor),
+                ...st('description', c.description, editor),
+            };
         case 'support-me':
             return {
                 ...base,
                 ...st('title', c.title, editor),
                 ...st('description', c.description, editor),
+                ...st('successMessage', c.successMessage, editor),
+                ...(includeString(c.displayStyle) && { displayStyle: c.displayStyle }),
             };
         default:
             return base;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.0.26",
+  "version": "6.0.27-websitev2-dev-1",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page-maker/components/ai-website-builder/AiWebsiteBuilder.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ai-container">
+  <div data-component="ai-website-builder" class="ai-container">
     <div class="tw-px-5">
       <SideBarSettingsHeader
         title="AI Website Builder"

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

@@ -513,7 +513,7 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
           message,
           websiteContext,
           websiteSnapshot: snapshotStore.snapshotBase64 || undefined,
-          agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
+          agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER_V2,
           userPlan,
           connectionId,
         });
@@ -524,7 +524,7 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
             message,
             websiteContext,
             websiteSnapshot: snapshotStore.snapshotBase64 || undefined,
-            agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
+            agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER_V2,
             userPlan,
             connectionId,
           },
@@ -727,11 +727,15 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
               retryCount,
             });
 
+            // Tool submissions must go to the SAME agent that ran the thread
+            // (AI QA 2026-07-05 T19: a mismatched agentType routes tool results
+            // to a service with no state for the thread and fails the build).
+            // brandSite AI is V2-only; every call site sends WEBSITE_BUILDER_V2.
             const submitResult = await client.submitToolResultsBuildAsync(
               aiThreadStore.threadId!,
               {
                 toolCalls: toolResults,
-                agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER,
+                agentType: AI_ASSISTANT_AGENT_TYPES.WEBSITE_BUILDER_V2,
                 connectionId,
                 retryCount,
                 userPlan,

package/src/clients/ai-assistant-client.ts

@@ -30,6 +30,7 @@ export interface WebsiteContext {
 // Agent types
 export const AI_ASSISTANT_AGENT_TYPES = {
   WEBSITE_BUILDER: 'website_builder',
+  WEBSITE_BUILDER_V2: 'website_builder_v2',
 } as const;
 
 export type AiAssistantAgentType =