@designcrowd/library.brand-page 6.2.3 → 6.2.4

package/src/metadata-builder/builders/global-styles-builder.test.ts

@@ -0,0 +1,107 @@
+import { describe, it, expect } from 'vitest';
+import type { BrandPageModel } from '../../brand-page/models';
+import type { UpdateGlobalStylesArguments } from '../parsers/ai-toolcall-parser';
+import { BUILDER_TYPES } from '../models';
+import { GlobalStylesBuilder } from './global-styles-builder';
+
+/**
+ * BP-6082: for a button shape change the AI's update_global_styles carries only
+ * `selectedButtonStyleId` (the tool schema hands shape to the preset). The builder
+ * used to store the id and leave `buttonStyles.style` untouched, so the site — which
+ * renders buttons from `style` — showed no change while the assistant reported
+ * rounded corners.
+ */
+
+const makeModel = () =>
+  ({
+    styles: {
+      buttonStyles: {
+        style: {
+          color: 'var(--palette-1)',
+          boxShadow: '',
+          borderColor: 'var(--palette-0)',
+          borderStyle: 'solid',
+          borderWidth: '2px',
+          borderRadius: '0',
+          backgroundColor: 'var(--palette-1)',
+        },
+        iconStyle: { fill: 'var(--palette-custom-pfeg22)' },
+        selectedButtonStyleId: 'BUTTON_STYLE_4',
+      },
+    },
+  }) as unknown as BrandPageModel;
+
+const run = (args: UpdateGlobalStylesArguments, model: BrandPageModel) =>
+  new GlobalStylesBuilder({
+    id: 'g1',
+    type: BUILDER_TYPES.UPDATE_GLOBAL_STYLES,
+    payload: args,
+  }).buildAsync(model);
+
+describe('GlobalStylesBuilder — button preset shape (BP-6082)', () => {
+  it('applies the chosen preset shape to the style the site renders from', async () => {
+    const { model } = await run(
+      {
+        buttonStyles: {
+          style: {},
+          iconStyle: {},
+          selectedButtonStyleId: 'BUTTON_STYLE_5',
+        },
+      },
+      makeModel(),
+    );
+    const bs = model.styles.buttonStyles;
+
+    expect(bs.selectedButtonStyleId).toBe('BUTTON_STYLE_5');
+    expect(bs.style.borderRadius).toBe('8px');
+    expect(bs.style.borderStyle).toBe('solid');
+    expect(bs.style.borderWidth).toBe('2px');
+    expect(bs.style.boxShadow).toBe('');
+    // colours are not the preset's to change
+    expect(bs.style.color).toBe('var(--palette-1)');
+    expect(bs.style.backgroundColor).toBe('var(--palette-1)');
+    expect(bs.iconStyle.fill).toBe('var(--palette-custom-pfeg22)');
+  });
+
+  it('keeps explicit colours from the same call while the preset owns the shape', async () => {
+    const { model } = await run(
+      {
+        buttonStyles: {
+          style: { backgroundColor: '#ff0000' },
+          selectedButtonStyleId: 'BUTTON_STYLE_5',
+        },
+      },
+      makeModel(),
+    );
+
+    expect(model.styles.buttonStyles.style.backgroundColor).toBe('#ff0000');
+    expect(model.styles.buttonStyles.style.borderRadius).toBe('8px');
+  });
+
+  it('stores an unknown id and leaves the shape alone', async () => {
+    const { model } = await run(
+      { buttonStyles: { selectedButtonStyleId: 'BUTTON_STYLE_999' } },
+      makeModel(),
+    );
+
+    expect(model.styles.buttonStyles.selectedButtonStyleId).toBe(
+      'BUTTON_STYLE_999',
+    );
+    expect(model.styles.buttonStyles.style).toEqual(
+      makeModel().styles.buttonStyles.style,
+    );
+  });
+
+  it('a style-only call still merges without touching the shape', async () => {
+    const { model } = await run(
+      { buttonStyles: { style: { color: '#000000' } } },
+      makeModel(),
+    );
+
+    expect(model.styles.buttonStyles.style.color).toBe('#000000');
+    expect(model.styles.buttonStyles.style.borderRadius).toBe('0');
+    expect(model.styles.buttonStyles.selectedButtonStyleId).toBe(
+      'BUTTON_STYLE_4',
+    );
+  });
+});

package/src/metadata-builder/builders/global-styles-builder.ts

@@ -14,6 +14,11 @@ 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<UpdateGlobalStylesArguments> {
   constructor(
@@ -54,6 +59,23 @@ export class GlobalStylesBuilder extends BaseMetadataBuilder<UpdateGlobalStylesA
 
     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) {
@@ -117,9 +139,24 @@ export class GlobalStylesBuilder extends BaseMetadataBuilder<UpdateGlobalStylesA
       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`,
+        });
+      }
     }
   }
 

package/src/metadata-builder/builders/header-builder.test.ts

@@ -104,3 +104,48 @@ describe('HeaderBuilder — nav menu font vs global style', () => {
     ).toBe('buttons');
   });
 });
+
+describe('HeaderBuilder — nav menu font reaches the hamburger overlay (BP-6079)', () => {
+  it('applies link_text_font to the hamburger default and selected button styles', async () => {
+    const model = makeModel({ textStyleType: 'buttons' });
+    const nav = model.pageHeaderMobile!.navigation as unknown as Record<
+      string,
+      unknown
+    >;
+
+    nav.hamburgerMenuStyle = {
+      defaultButtonStyle: { fontFamily: 'Lato', color: '#111111' },
+      selectedButtonStyle: { textStyleType: 'buttons' },
+    };
+
+    const { model: out, errors } = await run(
+      { mobile: { link_text_font: 'Oswald' } },
+      model,
+    );
+
+    const menu = (
+      out.pageHeaderMobile!.navigation as unknown as Record<string, unknown>
+    ).hamburgerMenuStyle as Record<string, Record<string, unknown>>;
+
+    expect(errors ?? []).toEqual([]);
+    expect(menu.defaultButtonStyle.fontFamily).toBe('Oswald');
+    expect(menu.defaultButtonStyle.color).toBe('#111111');
+    expect(menu.selectedButtonStyle.fontFamily).toBe('Oswald');
+    expect(menu.selectedButtonStyle.textStyleType).toBeUndefined();
+  });
+
+  it('a header without a hamburger menu style is left alone', async () => {
+    const model = makeModel({ textStyleType: 'buttons' });
+
+    const { model: out, errors } = await run(
+      { desktop: { link_text_font: 'Oswald' } },
+      model,
+    );
+
+    expect(errors ?? []).toEqual([]);
+    expect(
+      (out.pageHeaderDesktop!.navigation as unknown as Record<string, unknown>)
+        .hamburgerMenuStyle,
+    ).toBeUndefined();
+  });
+});

package/src/metadata-builder/builders/header-builder.ts

@@ -65,6 +65,26 @@ const applyViewportHeaderChanges = (
     );
   }
 
+  // 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/src/metadata-builder/builders/reorder-pages-builder.ts

@@ -0,0 +1,80 @@
+import type { BrandPageModel, NavOrder } from '../../brand-page/models';
+import {
+  BaseMetadataBuilder,
+  type BuilderResult,
+  type MetadataBuilderRequest,
+} from '../models';
+import type { Logger } from '../logger';
+
+export interface ReorderPagesPayload {
+  pageOrder: string[];
+}
+
+export class ReorderPagesBuilder extends BaseMetadataBuilder<ReorderPagesPayload> {
+  constructor(
+    request: MetadataBuilderRequest<ReorderPagesPayload>,
+    logger?: Logger,
+  ) {
+    super(request, logger);
+  }
+
+  async validateAsync(): Promise<{ errors: string[] }> {
+    const errors: string[] = [];
+    const payload = this.request.payload;
+
+    if (!payload?.pageOrder?.length) {
+      errors.push('page_order is required for reorder_pages');
+    }
+
+    return { errors };
+  }
+
+  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 { pageOrder } = this.request.payload!;
+
+    // Build pageId → routeId lookup from nav.routes
+    const pageIdToRouteId = new Map<string, string>();
+
+    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: NavOrder[] = [];
+    const seenRouteIds = new Set<string>();
+
+    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/src/metadata-builder/builders/section-builders/index.ts

@@ -5,6 +5,7 @@ export {
 
 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/src/metadata-builder/builders/section-builders/support-me-builder.test.ts

@@ -0,0 +1,177 @@
+import { describe, it, expect } from 'vitest';
+import type {
+  BrandPageModel,
+  SupportMeContent,
+} from '../../../brand-page/models';
+import { BUILDER_TYPES } from '../../models';
+import type { SupportMeArguments } from '../../parsers/section-tool-arguments';
+import { SupportMeBuilder } from './support-me-builder';
+
+const makeModel = (contents: SupportMeContent[] = []): BrandPageModel =>
+  ({
+    brandPageType: 'brandSite',
+    styles: { textStyles: { textStyleOptions: {} } },
+    pages: [{ id: 'page-1', contents }],
+  }) as unknown as BrandPageModel;
+
+const seedContent = (): SupportMeContent =>
+  ({
+    id: 'sm-1',
+    type: 'support-me',
+    title: 'Existing title',
+    description: 'Existing description',
+    successMessage: 'Existing success',
+    displayStyle: 'preview',
+    supportMeConfig: {
+      paymentOptions: [{ amount: '0', id: 'po-1', name: 'Custom' }],
+      isCustomerMessageEnabled: true,
+    },
+    titleStyle: {},
+    headingStyle: {},
+    descriptionStyle: {},
+    buttonTextStyle: {},
+    itemTextStyle: {},
+  }) as unknown as SupportMeContent;
+
+const create = (args: SupportMeArguments, model: BrandPageModel) =>
+  new SupportMeBuilder({
+    id: 't-create',
+    type: BUILDER_TYPES.CREATE_SUPPORT_ME,
+    payload: { sectionType: 'support-me', arguments: args, pageId: 'page-1' },
+  }).buildAsync(model);
+
+const update = (
+  args: SupportMeArguments,
+  model: BrandPageModel,
+  contentId = 'sm-1',
+) =>
+  new SupportMeBuilder({
+    id: 't-update',
+    type: BUILDER_TYPES.UPDATE_SUPPORT_ME,
+    payload: { sectionType: 'support-me', arguments: args, contentId },
+  }).buildAsync(model);
+
+describe('SupportMeBuilder — create', () => {
+  it('creates a support-me section with factory defaults', async () => {
+    const model = makeModel();
+
+    const { model: out, errors } = await create({}, model);
+
+    expect(errors ?? []).toEqual([]);
+
+    const created = out.pages[0].contents[0] as SupportMeContent;
+
+    expect(created.type).toBe('support-me');
+    // display style default comes from the factory
+    expect(created.displayStyle).toBe('preview');
+    // supportMeConfig (payment options) comes free from the factory, never the AI
+    expect(created.supportMeConfig.paymentOptions.length).toBeGreaterThan(0);
+  });
+
+  it('applies AI-provided scalar fields over the defaults', async () => {
+    const model = makeModel();
+
+    const { model: out, errors } = await create(
+      {
+        title: 'Buy me a coffee',
+        description: 'Support my work',
+        success_message: 'Thanks!',
+        display_style: 'collapsed',
+      },
+      model,
+    );
+
+    expect(errors ?? []).toEqual([]);
+
+    const created = out.pages[0].contents[0] as SupportMeContent;
+
+    expect(created.title).toBe('Buy me a coffee');
+    expect(created.description).toBe('Support my work');
+    expect(created.successMessage).toBe('Thanks!');
+    expect(created.displayStyle).toBe('collapsed');
+  });
+});
+
+describe('SupportMeBuilder — update', () => {
+  it('updates scalar fields on an existing section', async () => {
+    const model = makeModel([seedContent()]);
+
+    const { model: out, errors } = await update(
+      {
+        title: 'New title',
+        success_message: 'New success',
+        display_style: 'collapsed',
+      },
+      model,
+    );
+
+    expect(errors ?? []).toEqual([]);
+
+    const updated = out.pages[0].contents[0] as SupportMeContent;
+
+    expect(updated.title).toBe('New title');
+    expect(updated.successMessage).toBe('New success');
+    expect(updated.displayStyle).toBe('collapsed');
+    // untouched fields survive
+    expect(updated.description).toBe('Existing description');
+    // supportMeConfig is never AI-editable
+    expect(updated.supportMeConfig.paymentOptions.length).toBe(1);
+  });
+
+  it('applies the five style fields to their model keys', async () => {
+    const model = makeModel([seedContent()]);
+
+    const { model: out, errors } = await update(
+      {
+        title_style: { textAlign: 'left' },
+        heading_style: { textAlign: 'right' },
+        description_style: { textAlign: 'center' },
+        item_text_style: { textAlign: 'justify' },
+        button_text_style: { color: '#123456' },
+      },
+      model,
+    );
+
+    expect(errors ?? []).toEqual([]);
+
+    const updated = out.pages[0].contents[0] as SupportMeContent;
+
+    expect(updated.titleStyle).toMatchObject({ textAlign: 'left' });
+    expect(updated.headingStyle).toMatchObject({ textAlign: 'right' });
+    expect(updated.descriptionStyle).toMatchObject({ textAlign: 'center' });
+    expect(updated.itemTextStyle).toMatchObject({ textAlign: 'justify' });
+    expect(updated.buttonTextStyle).toMatchObject({ color: '#123456' });
+  });
+});
+
+describe('SupportMeBuilder — validation', () => {
+  it('rejects an invalid display_style enum value', async () => {
+    const model = makeModel([seedContent()]);
+
+    const { errors } = await update({ display_style: 'fancy' as never }, model);
+
+    expect(errors?.length).toBeGreaterThan(0);
+    expect(errors!.join(' ')).toContain('display_style');
+  });
+
+  it('rejects an over-length title', async () => {
+    const model = makeModel([seedContent()]);
+
+    const { errors } = await update({ title: 'x'.repeat(201) }, model);
+
+    expect(errors?.length).toBeGreaterThan(0);
+    expect(errors!.join(' ')).toContain('title');
+  });
+
+  it('rejects an over-length success_message', async () => {
+    const model = makeModel([seedContent()]);
+
+    const { errors } = await update(
+      { success_message: 'x'.repeat(1001) },
+      model,
+    );
+
+    expect(errors?.length).toBeGreaterThan(0);
+    expect(errors!.join(' ')).toContain('success_message');
+  });
+});

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

@@ -246,13 +246,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,