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

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

@@ -0,0 +1,43 @@
+import type {
+  BrandPageModel,
+  SupportMeContent,
+} from '../../../brand-page/models';
+import type { BuilderResult } from '../../models';
+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<SupportMeContent> {
+  protected get sectionValidate() {
+    return validateSupportMe;
+  }
+
+  async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
+    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/src/metadata-builder/builders/section-builders/text-section-builder.ts

@@ -240,13 +240,16 @@ export class TextSectionBuilder extends BaseSectionBuilder<TextContent> {
       // Full replacement: discard existing items and rebuild from the payload.
       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)) ||
+      (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.

package/src/metadata-builder/builders/section-field-maps.ts

@@ -23,6 +23,7 @@ import type {
   ImageContent,
   ButtonContent,
   ImageGalleryContent,
+  SupportMeContent,
 } from '../../brand-page/models';
 
 export type SectionFieldMap = Record<string, string>;
@@ -175,9 +176,17 @@ const socialButtonFields = defineFieldMap<ButtonContent>({
   url: 'url',
 });
 
+const supportMeFields = defineFieldMap<SupportMeContent>({
+  title: 'title',
+  description: 'description',
+  success_message: 'successMessage',
+  display_style: 'displayStyle',
+});
+
 export const SECTION_FIELD_MAPS: Record<string, SectionFieldMap> = {
   'banner-section': bannerFields,
   'booking-section': bookingFields,
+  'support-me': supportMeFields,
   'about-section': aboutFields,
   'testimonial-section': testimonialFields,
   'images-section': imagesSectionFields,
@@ -265,6 +274,14 @@ const mailingListStyleFields = defineFieldMap<MailingListContent>({
   button_text_style: 'buttonTextStyle',
 });
 
+const supportMeStyleFields = defineFieldMap<SupportMeContent>({
+  title_style: 'titleStyle',
+  heading_style: 'headingStyle',
+  description_style: 'descriptionStyle',
+  item_text_style: 'itemTextStyle',
+  button_text_style: 'buttonTextStyle',
+});
+
 const socialLinksStyleFields = defineFieldMap<SocialLinksContent>({
   icon_fill_style: 'iconFillStyles',
   icon_background_style: 'iconBackgroundStyles',
@@ -273,6 +290,7 @@ const socialLinksStyleFields = defineFieldMap<SocialLinksContent>({
 export const STYLE_FIELD_MAPS: Record<string, SectionFieldMap> = {
   'banner-section': bannerStyleFields,
   'booking-section': bookingStyleFields,
+  'support-me': supportMeStyleFields,
   'about-section': aboutStyleFields,
   text: textStyleFields,
   'testimonial-section': testimonialStyleFields,

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

@@ -0,0 +1,83 @@
+import { describe, expect, it } from 'vitest';
+import type { Content } from '../../brand-page/models';
+import { applyStyleFields } from './section-field-utils';
+
+/**
+ * Regression tests for the AI QA 2026-07-05 rerun P0: a colour-only *_style
+ * patch left the field's existing inline textStyle marks (old colour) in
+ * place — inline marks override the style layer at render, so recoloured
+ * bands showed invisible old-colour text. applyStyleFields now propagates a
+ * new style colour into the stored RTE HTML when the patch carries no new
+ * text for that field.
+ */
+describe('applyStyleFields inline-colour propagation', () => {
+  const makeContent = (): Content =>
+    ({
+      type: 'about-section',
+      title: '<h3><span style="color: #111111">Fine Grooming</span></h3>',
+      titleStyle: { color: '#111111', fontSize: '2.188em' },
+      paragraph: '<p><span style="color: #111111">Body copy</span></p>',
+      paragraphStyle: { color: '#111111' },
+    }) as unknown as Content;
+
+  const recolour = (html: string, color: string): string =>
+    html.replace(/color: #[0-9a-fA-F]{6}/g, `color: ${color}`);
+
+  it('colour-only patch recolours the existing inline marks', () => {
+    const content = makeContent();
+
+    applyStyleFields(
+      content,
+      { title_style: { color: '#f8f2e9' } },
+      'about-section',
+      undefined,
+      recolour,
+    );
+
+    const record = content as unknown as Record<string, unknown>;
+
+    expect(record.title).toContain('color: #f8f2e9');
+    expect((record.titleStyle as Record<string, unknown>).color).toBe(
+      '#f8f2e9',
+    );
+    // Untouched fields keep their marks.
+    expect(record.paragraph).toContain('color: #111111');
+  });
+
+  it('does NOT rewrite marks when the patch also carries new text for the field', () => {
+    const content = makeContent();
+
+    applyStyleFields(
+      content,
+      {
+        title: { type: 'doc', content: [] },
+        title_style: { color: '#f8f2e9' },
+      },
+      'about-section',
+      undefined,
+      recolour,
+    );
+
+    // The builder's own text path owns the rewrite — HTML left alone here.
+    expect((content as unknown as Record<string, unknown>).title).toContain(
+      'color: #111111',
+    );
+  });
+
+  it('merged style keeps non-colour properties from the current style', () => {
+    const content = makeContent();
+
+    applyStyleFields(
+      content,
+      { title_style: { color: '#f8f2e9' } },
+      'about-section',
+      undefined,
+      recolour,
+    );
+
+    const style = (content as unknown as Record<string, unknown>)
+      .titleStyle as Record<string, unknown>;
+
+    expect(style.fontSize).toBe('2.188em');
+  });
+});

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

@@ -9,6 +9,10 @@ import {
   isTiptapDocument,
   type SectionToolArguments,
 } 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 type { TextStyleDeclaration } from '../../brand-page/models';
 import { getSectionFieldMap, getStyleFieldMap } from './section-field-maps';
 
 /**
@@ -186,36 +190,83 @@ export const applyDetachedStyleOverride = <T extends object>(
     ...updates,
   }) as T;
 
+/**
+ * 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 const applyStyleFields = (
   content: Content,
   args: SectionToolArguments,
   sectionType: string,
   textStyleOptions?: TextStyleOptions,
+  applyColor?: ApplyColorToRTE,
 ): void => {
   const styleMap = getStyleFieldMap(sectionType);
 
   if (!styleMap) return;
 
   const record = content as IndexableContent;
+  let editor:
+    | ReturnType<typeof useExternalRichTextEditor>['externalEditor']
+    | undefined;
+  const applyColorToHtml: ApplyColorToRTE =
+    applyColor ??
+    ((html, color) => {
+      editor = editor ?? useExternalRichTextEditor().externalEditor;
+
+      return applyStyleToRTEText(editor, html, {
+        color,
+      } as TextStyleDeclaration);
+    });
 
-  for (const [aiKey, modelKey] of Object.entries(styleMap)) {
-    if (!(aiKey in args) || !args[aiKey] || typeof args[aiKey] !== 'object')
-      continue;
-
-    const aiStyle = args[aiKey] as Record<string, unknown>;
-    const filtered: Record<string, unknown> = {};
-
-    for (const [k, v] of Object.entries(aiStyle)) {
-      const normalized = normalizeStyleValue(k, v);
-
-      if (normalized !== undefined) filtered[k] = normalized;
+  try {
+    for (const [aiKey, modelKey] of Object.entries(styleMap)) {
+      if (!(aiKey in args) || !args[aiKey] || typeof args[aiKey] !== 'object')
+        continue;
+
+      const aiStyle = args[aiKey] as Record<string, unknown>;
+      const filtered: Record<string, unknown> = {};
+
+      for (const [k, v] of Object.entries(aiStyle)) {
+        const normalized = normalizeStyleValue(k, v);
+
+        if (normalized !== undefined) filtered[k] = normalized;
+      }
+
+      const resolved = resolveGlobalPresetIntoStyle(
+        content[modelKey] as object,
+        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] as string)
+      ) {
+        record[textKey] = applyColorToHtml(record[textKey] as string, newColor);
+      }
     }
-
-    const resolved = resolveGlobalPresetIntoStyle(
-      content[modelKey] as object,
-      textStyleOptions,
-    );
-
-    record[modelKey] = { ...resolved, ...filtered, textStyleType: undefined };
+  } finally {
+    editor?.destroy();
   }
 };

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

@@ -0,0 +1,39 @@
+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,
+  type SectionCheck,
+  type ValidationContext,
+} from '../../sanitizers/section-args-validator';
+
+const CHECKS: SectionCheck[] = [
+  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: Record<string, unknown>,
+  ctx: ValidationContext,
+): string[] {
+  return runChecks(CHECKS, args, ctx);
+}

package/src/metadata-builder/metadata-executor.ts

@@ -13,6 +13,7 @@ import { UpdateContentTextStyleBuilder } from './builders/update-content-text-st
 import {
   BannerSectionBuilder,
   BookingSectionBuilder,
+  SupportMeBuilder,
   AboutSectionBuilder,
   ContactFormBuilder,
   DividerSectionBuilder,
@@ -54,6 +55,7 @@ const getBuilderRegistry = (): Record<BuilderType, BuilderConstructor> => ({
   // 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,
@@ -81,6 +83,7 @@ const getBuilderRegistry = (): Record<BuilderType, BuilderConstructor> => ({
   // 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/src/metadata-builder/models.ts

@@ -32,6 +32,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',
@@ -59,6 +60,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',

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

@@ -43,6 +43,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',
@@ -163,6 +164,9 @@ export const SECTION_TOOL_MAP: Record<string, { sectionType: SectionType }> = {
   [AI_ASSISTANT_TOOL_NAMES.BUILD_BOOKING_SECTION]: {
     sectionType: 'booking-section',
   },
+  [AI_ASSISTANT_TOOL_NAMES.BUILD_SUPPORT_ME_SECTION]: {
+    sectionType: 'support-me',
+  },
 };
 
 export interface DeleteSectionArguments {

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

@@ -17,7 +17,6 @@ type UnsupportedContentType =
   | 'video'
   | 'map'
   | 'request-payment'
-  | 'support-me'
   | 'shop-section';
 
 export type SectionType = Exclude<ContentType, UnsupportedContentType>;
@@ -537,6 +536,19 @@ export interface BookingSectionArguments {
   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;
@@ -574,6 +586,7 @@ export type SectionToolArguments =
   | TestimonialSectionArguments
   | ShapesSectionArguments
   | BookingSectionArguments
+  | SupportMeArguments
   | DividerSectionArguments;
 
 // ---------------------------------------------------------------------------

package/src/utils/minify-brand-page-metadata.test.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest';
+import type { BrandPageModel } from '../brand-page/models';
+import { minifyBrandPageMetadata } from './minify-brand-page-metadata';
+
+/**
+ * The AI builder can now create/update `support-me` sections, so the minified
+ * model it reads on update must surface the fields it can edit — otherwise it
+ * can't see the current `displayStyle` / `successMessage` when deciding what to
+ * change. `request-payment` (not AI-editable) must keep its original shape.
+ */
+
+const makeModel = (contents: unknown[]): BrandPageModel =>
+  ({
+    brandPageType: 'brandSite',
+    v: 1,
+    styles: {},
+    nav: { routes: [{ pageId: 'page-1', pageSlug: 'home' }] },
+    pages: [{ id: 'page-1', title: 'Home', contents }],
+  }) as unknown as BrandPageModel;
+
+const supportMe = {
+  id: 'sm-1',
+  type: 'support-me',
+  title: 'Buy me a coffee',
+  description: 'Support my work',
+  successMessage: 'Thanks so much!',
+  displayStyle: 'collapsed',
+};
+
+const requestPayment = {
+  id: 'rp-1',
+  type: 'request-payment',
+  title: 'Pay now',
+  description: 'Invoice',
+  successMessage: 'Paid',
+  displayStyle: 'preview',
+};
+
+describe('minifyBrandPageMetadata — support-me', () => {
+  it('surfaces title, description, successMessage and displayStyle', () => {
+    const out = minifyBrandPageMetadata(makeModel([supportMe]));
+    const minified = out.pages[0].contents[0];
+
+    expect(minified.type).toBe('support-me');
+    expect(minified.title).toBe('Buy me a coffee');
+    expect(minified.description).toBe('Support my work');
+    expect(minified.successMessage).toBe('Thanks so much!');
+    expect(minified.displayStyle).toBe('collapsed');
+  });
+
+  it('leaves request-payment shape unchanged (no successMessage / displayStyle)', () => {
+    const out = minifyBrandPageMetadata(makeModel([requestPayment]));
+    const minified = out.pages[0].contents[0];
+
+    expect(minified.type).toBe('request-payment');
+    expect(minified.title).toBe('Pay now');
+    expect(minified.description).toBe('Invoice');
+    expect(minified.successMessage).toBeUndefined();
+    expect(minified.displayStyle).toBeUndefined();
+  });
+});

package/src/utils/minify-brand-page-metadata.ts

@@ -507,11 +507,19 @@ const minifyContent = (
       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: