@designcrowd/library.brand-page 6.2.3 → 6.2.4

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

@@ -0,0 +1,41 @@
+import type { JSONContent } from '@tiptap/vue-3';
+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 field'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).
+ *
+ * RTE fields come in two shapes: legacy inline HTML strings (rewritten through
+ * the headless Tiptap editor) and the migrated Tiptap JSON document (rewritten
+ * in place — `textStyle` mark attrs). Missing the JSON shape left every mark on
+ * the old family while the `*Style` objects moved (BP-6079).
+ */
+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;
+/**
+ * Rewrite the `fontFamily` attr of every `textStyle` mark in a Tiptap document.
+ * Only marks that already carry a family are touched: a run without one inherits
+ * the (already updated) `*Style` / preset at render, so adding a mark would pin
+ * it needlessly.
+ */
+export declare const applyFontToTiptapDoc: (doc: JSONContent, fontFamily: string) => JSONContent;
+/**
+ * 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,146 @@
+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 { isTiptapDocument } from '../parsers/section-tool-arguments';
+/**
+ * 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;
+};
+/**
+ * Rewrite the `fontFamily` attr of every `textStyle` mark in a Tiptap document.
+ * Only marks that already carry a family are touched: a run without one inherits
+ * the (already updated) `*Style` / preset at render, so adding a mark would pin
+ * it needlessly.
+ */
+export const applyFontToTiptapDoc = (doc, fontFamily) => {
+    const visit = (node) => {
+        const marks = node.marks?.map((mark) => mark.type === 'textStyle' && mark.attrs?.fontFamily
+            ? { ...mark, attrs: { ...mark.attrs, fontFamily } }
+            : mark);
+        const content = node.content?.map(visit);
+        return {
+            ...node,
+            ...(marks ? { marks } : {}),
+            ...(content ? { content } : {}),
+        };
+    };
+    return visit(doc);
+};
+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 && 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] = isTiptapDocument(value)
+                    ? applyFontToTiptapDoc(value, family)
+                    : 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,8 @@
 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';
+import { buttonStylePresetCss } from '../../shared/style-settings/button-style-preset';
 export class GlobalStylesBuilder extends BaseMetadataBuilder {
     constructor(request, logger) {
         super(request, logger);
@@ -30,6 +32,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);
@@ -74,9 +91,20 @@ export class GlobalStylesBuilder extends BaseMetadataBuilder {
         if (buttonStyles.iconStyle) {
             bs.iconStyle = { ...bs.iconStyle, ...buttonStyles.iconStyle };
         }
-        // Merge selectedButtonStyleId
+        // Merge selectedButtonStyleId and apply that preset's shape and shadow the way the
+        // editor's picker does: the site renders buttons from `style`, so the id alone is
+        // invisible (BP-6082). The preset owns the shape keys; colours from `style` stay.
         if (buttonStyles.selectedButtonStyleId !== undefined) {
             bs.selectedButtonStyleId = buttonStyles.selectedButtonStyleId;
+            const presetCss = buttonStylePresetCss(buttonStyles.selectedButtonStyleId, bs.style);
+            if (presetCss) {
+                bs.style = { ...bs.style, ...presetCss };
+            }
+            else {
+                this.log({
+                    message: `Unknown selectedButtonStyleId ${buttonStyles.selectedButtonStyleId} — id stored, button shape unchanged`,
+                });
+            }
         }
     }
     applyBackgroundStyles(model, backgroundStyles) {

package/lib/src/metadata-builder/builders/header-builder.js

@@ -34,6 +34,14 @@ const applyViewportHeaderChanges = (header, overrides, textStyleOptions) => {
     if (overrides.link_text_font !== undefined && header.navigation) {
         header.navigation.defaultButtonStyle = applyDetachedStyleOverride(header.navigation.defaultButtonStyle, { fontFamily: overrides.link_text_font }, textStyleOptions);
     }
+    // The hamburger overlay renders the same nav links from its own styles, so the
+    // menu font has to reach them too or the overlay keeps the old family (BP-6079).
+    if (overrides.link_text_font !== undefined &&
+        header.navigation?.hamburgerMenuStyle) {
+        const menu = header.navigation.hamburgerMenuStyle;
+        menu.defaultButtonStyle = applyDetachedStyleOverride(menu.defaultButtonStyle, { fontFamily: overrides.link_text_font }, textStyleOptions);
+        menu.selectedButtonStyle = applyDetachedStyleOverride(menu.selectedButtonStyle, { fontFamily: overrides.link_text_font }, textStyleOptions);
+    }
     if (overrides.link_bg_color !== undefined && header.navigation) {
         header.navigation.defaultButtonStyle = {
             ...header.navigation.defaultButtonStyle,

package/lib/src/metadata-builder/builders/reorder-pages-builder.d.ts

@@ -0,0 +1,13 @@
+import type { BrandPageModel } from '../../brand-page/models';
+import { BaseMetadataBuilder, type BuilderResult, type MetadataBuilderRequest } from '../models';
+import type { Logger } from '../logger';
+export interface ReorderPagesPayload {
+    pageOrder: string[];
+}
+export declare class ReorderPagesBuilder extends BaseMetadataBuilder<ReorderPagesPayload> {
+    constructor(request: MetadataBuilderRequest<ReorderPagesPayload>, logger?: Logger);
+    validateAsync(): Promise<{
+        errors: string[];
+    }>;
+    buildAsync(model: BrandPageModel): Promise<BuilderResult>;
+}

package/lib/src/metadata-builder/builders/reorder-pages-builder.js

@@ -0,0 +1,49 @@
+import { BaseMetadataBuilder, } from '../models';
+export class ReorderPagesBuilder extends BaseMetadataBuilder {
+    constructor(request, logger) {
+        super(request, logger);
+    }
+    async validateAsync() {
+        const errors = [];
+        const payload = this.request.payload;
+        if (!payload?.pageOrder?.length) {
+            errors.push('page_order is required for reorder_pages');
+        }
+        return { errors };
+    }
+    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 { pageOrder } = this.request.payload;
+        // Build pageId → routeId lookup from nav.routes
+        const pageIdToRouteId = new Map();
+        for (const route of model.nav.routes) {
+            pageIdToRouteId.set(route.pageId, route.id);
+        }
+        // Build new nav.orders from the flat page_order (array of pageIds)
+        const newOrders = [];
+        const seenRouteIds = new Set();
+        for (const pageId of pageOrder) {
+            const routeId = pageIdToRouteId.get(pageId);
+            if (!routeId)
+                continue;
+            newOrders.push({ routeId, subRoutes: [] });
+            seenRouteIds.add(routeId);
+        }
+        // Safety: append any routes not mentioned (don't lose pages)
+        for (const route of model.nav.routes) {
+            const routeId = pageIdToRouteId.get(route.pageId);
+            if (routeId && !seenRouteIds.has(routeId)) {
+                newOrders.push({ routeId, subRoutes: [] });
+            }
+        }
+        model.nav.orders = newOrders;
+        this.log({
+            message: `Reordered pages: ${pageOrder.join(', ')}`,
+        });
+        return { request: this.request, model };
+    }
+}

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

@@ -135,14 +135,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/helpers/rte.helpers.d.ts

@@ -1,3 +1,12 @@
+import type { TextStyleDeclaration } from '../../brand-page/models/styles.model';
+import type { Editor } from '@tiptap/vue-3';
+/**
+ * Applies a TextStyleDeclaration to RTE HTML by loading it into the given
+ * (external/headless) Tiptap editor and rewriting inline marks via command
+ * chains. DOM-bound — client-only callers (font propagation, section style
+ * fields).
+ */
+export declare const applyStyleToRTEText: (externalEditor: Editor, contentText: string, newContentStyle: TextStyleDeclaration) => string;
 /**
  * Converts a Tiptap JSON document (ProseMirror document model) to an HTML
  * string via Tiptap's schema-driven static renderer (renderRteToHtml →

package/lib/src/metadata-builder/helpers/rte.helpers.js

@@ -1,5 +1,64 @@
-import { renderRteToHtml } from '../../brand-page-maker/utils';
+import { renderRteToHtml, getRTEColor } from '../../brand-page-maker/utils';
+import { getRenderText } from '../../brand-page/utils';
+import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
 import { isTiptapDocument } from '../parsers/section-tool-arguments';
+/**
+ * Applies a TextStyleDeclaration to RTE HTML by loading it into the given
+ * (external/headless) Tiptap editor and rewriting inline marks via command
+ * chains. DOM-bound — client-only callers (font propagation, section style
+ * fields).
+ */
+export const applyStyleToRTEText = (externalEditor, contentText, newContentStyle) => {
+    if (!contentText) {
+        return contentText;
+    }
+    const content = contentText.includes(ESCAPED_NEWLINE_CHARACTER)
+        ? getRenderText(contentText)
+        : contentText;
+    externalEditor.commands.setContent(content);
+    let chain = externalEditor.chain().selectAll();
+    if (newContentStyle?.fontFamily) {
+        chain = chain.setFontFamily(newContentStyle.fontFamily);
+    }
+    if (newContentStyle?.fontSize) {
+        chain = chain.setFontSize(newContentStyle.fontSize);
+    }
+    if (newContentStyle?.letterSpacing) {
+        chain = chain.setLetterSpacing(newContentStyle.letterSpacing);
+    }
+    if (newContentStyle?.lineHeight) {
+        chain = chain.setLineHeight(newContentStyle.lineHeight);
+    }
+    if (newContentStyle?.color) {
+        chain = chain.setMark('textStyle', {
+            color: getRTEColor(newContentStyle.color, 'text'),
+        });
+    }
+    if ('backgroundColor' in (newContentStyle || {})) {
+        chain = newContentStyle.backgroundColor
+            ? chain.setMark('highlight', {
+                color: getRTEColor(newContentStyle.backgroundColor, 'background'),
+            })
+            : chain.unsetHighlight();
+    }
+    if (newContentStyle?.textAlign) {
+        chain = chain.setTextAlign(newContentStyle.textAlign);
+    }
+    const hasStrike = newContentStyle?.textDecoration?.includes('line-through');
+    const hasUnderline = newContentStyle?.textDecoration?.includes('underline');
+    chain = hasStrike ? chain.setStrike() : chain.unsetStrike();
+    chain = hasUnderline ? chain.setUnderline() : chain.unsetUnderline();
+    chain =
+        newContentStyle?.fontWeight === 'bold'
+            ? chain.setBold()
+            : chain.unsetBold();
+    chain =
+        newContentStyle?.fontStyle === 'italic'
+            ? chain.setItalic()
+            : chain.unsetItalic();
+    chain.run();
+    return externalEditor.getHTML();
+};
 /**
  * Converts a Tiptap JSON document (ProseMirror document model) to an HTML
  * string via Tiptap's schema-driven static renderer (renderRteToHtml →

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

@@ -2,7 +2,7 @@ import cloneDeep from 'lodash.clonedeep';
 import {} from '../brand-page/models';
 import { referencifyModelColors } from '../brand-page/utils/color-palette-referencify.util';
 import { BUILDER_TYPES, } from './models';
-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';
@@ -17,6 +17,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,
@@ -43,6 +44,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,