@designcrowd/library.brand-page 6.1.0-websitev2-dev-2 → 6.1.0

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

@@ -1,25 +0,0 @@
-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-rules/support-me.rules.d.ts

@@ -1,2 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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/src/brand-page/utils/context.util.test.ts

@@ -1,43 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import type { BrandPageContext } from '../models';
-import { getSlugFromContext, isPreviewMode } from './context.util';
-
-const baseContext = {
-  isPreview: false,
-  isLivePreview: false,
-  brandPageSlug: 'my-site',
-} as unknown as BrandPageContext;
-
-describe('isPreviewMode', () => {
-  it('is false for a live render (neither preview flag set)', () => {
-    expect(isPreviewMode(baseContext)).toBe(false);
-  });
-
-  it('is true for the editor preview', () => {
-    expect(isPreviewMode({ ...baseContext, isPreview: true })).toBe(true);
-  });
-
-  it('is true for the customer live-preview', () => {
-    expect(isPreviewMode({ ...baseContext, isLivePreview: true })).toBe(true);
-  });
-
-  it('treats a missing isLivePreview as not-preview', () => {
-    const ctx = { isPreview: false } as unknown as BrandPageContext;
-
-    expect(isPreviewMode(ctx)).toBe(false);
-  });
-});
-
-describe('getSlugFromContext', () => {
-  it('returns the literal editor slug for the editor preview only', () => {
-    expect(getSlugFromContext({ ...baseContext, isPreview: true })).toBe(
-      'slug',
-    );
-  });
-
-  it('returns the real slug for a customer preview (renders like live)', () => {
-    expect(getSlugFromContext({ ...baseContext, isLivePreview: true })).toBe(
-      'my-site',
-    );
-  });
-});

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

@@ -1,269 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import type { BrandPageModel, Content } from '../../brand-page/models';
-import type { UpdateGlobalStylesArguments } from '../parsers/ai-toolcall-parser';
-import { BUILDER_TYPES } from '../models';
-import { GlobalStylesBuilder } from './global-styles-builder';
-import {
-  collectChangedFontFamilies,
-  propagateFontFamiliesToContents,
-} from './global-font-propagation';
-
-/**
- * BP-5780 ISSUE-01: an AI global font change only reached preset-bound content.
- * Template-authored sections carry detached `*Style` objects and inline RTE
- * `font-family` marks that override the preset at render, so "use a serif font"
- * produced a confident reply and a pixel-identical page. Propagation must align
- * detached styles and rewrite inline marks for every changed category.
- */
-
-const RTE_TITLE =
-  '<p><span style="font-family: Playfair Display">Bloom</span></p>';
-
-// Injectable stand-in for the Tiptap rewrite — tags the string so tests can
-// assert exactly which fields were rewritten and with which family.
-const fakeApplyFont = (text: string, fontFamily: string) =>
-  `${text}::rewritten(${fontFamily})`;
-
-const makeModel = (contents: Partial<Content>[]): BrandPageModel =>
-  ({
-    styles: { textStyles: { textStyleOptions: {} } },
-    pages: [{ id: 'p1', contents }],
-  }) as unknown as BrandPageModel;
-
-describe('collectChangedFontFamilies', () => {
-  it('extracts per-category families from textStyleOptions', () => {
-    const changed = collectChangedFontFamilies({
-      textStyleOptions: {
-        titles: { style: { fontFamily: 'EB Garamond' } },
-        headings: { style: { fontFamily: 'EB Garamond' } },
-        buttons: { style: { fontFamily: 'Inter' } },
-      },
-    } as UpdateGlobalStylesArguments['textStyles']);
-
-    expect(changed).toEqual({
-      titles: 'EB Garamond',
-      headings: 'EB Garamond',
-      buttons: 'Inter',
-    });
-  });
-
-  it('falls back textFontFamily → paragraphs when no explicit paragraphs entry', () => {
-    const changed = collectChangedFontFamilies({
-      textFontFamily: 'Inter',
-    } as UpdateGlobalStylesArguments['textStyles']);
-
-    expect(changed).toEqual({ paragraphs: 'Inter' });
-  });
-
-  it('returns empty for calls that change no fonts', () => {
-    expect(collectChangedFontFamilies(undefined)).toEqual({});
-    expect(
-      collectChangedFontFamilies({
-        style: { color: '#111111' },
-      } as UpdateGlobalStylesArguments['textStyles']),
-    ).toEqual({});
-  });
-});
-
-describe('propagateFontFamiliesToContents', () => {
-  it('aligns detached styles and rewrites RTE marks for the changed category', () => {
-    const content = {
-      id: 'c1',
-      type: 'about-section',
-      title: RTE_TITLE,
-      titleStyle: { fontFamily: 'Playfair Display' },
-    } as unknown as Content;
-    const model = makeModel([content]);
-
-    propagateFontFamiliesToContents(
-      model,
-      { headings: 'EB Garamond' },
-      fakeApplyFont,
-    );
-
-    const c = model.pages[0].contents[0] as unknown as Record<string, unknown>;
-
-    expect((c.titleStyle as Record<string, unknown>).fontFamily).toBe(
-      'EB Garamond',
-    );
-    expect(c.title).toBe(`${RTE_TITLE}::rewritten(EB Garamond)`);
-  });
-
-  it('banner-section titles follow the titles category, not headings', () => {
-    const content = {
-      id: 'c1',
-      type: 'banner-section',
-      title: RTE_TITLE,
-      titleStyle: { fontFamily: 'Playfair Display' },
-    } as unknown as Content;
-    const model = makeModel([content]);
-
-    propagateFontFamiliesToContents(
-      model,
-      { titles: 'Lexend Deca', headings: 'EB Garamond' },
-      fakeApplyFont,
-    );
-
-    const c = model.pages[0].contents[0] as unknown as Record<string, unknown>;
-
-    expect((c.titleStyle as Record<string, unknown>).fontFamily).toBe(
-      'Lexend Deca',
-    );
-    expect(c.title).toBe(`${RTE_TITLE}::rewritten(Lexend Deca)`);
-  });
-
-  it('preset-bound styles stay preset-bound; only their RTE marks are rewritten', () => {
-    const content = {
-      id: 'c1',
-      type: 'about-section',
-      title: RTE_TITLE,
-      titleStyle: { textStyleType: 'headings' },
-    } as unknown as Content;
-    const model = makeModel([content]);
-
-    propagateFontFamiliesToContents(
-      model,
-      { headings: 'EB Garamond' },
-      fakeApplyFont,
-    );
-
-    const c = model.pages[0].contents[0] as unknown as Record<string, unknown>;
-    const style = c.titleStyle as unknown as Record<string, unknown>;
-
-    expect(style.textStyleType).toBe('headings');
-    expect(style.fontFamily).toBeUndefined();
-    expect(c.title).toBe(`${RTE_TITLE}::rewritten(EB Garamond)`);
-  });
-
-  it('walks items arrays (per-item text fields and styles)', () => {
-    const itemText = '<p>Live music</p>';
-    const content = {
-      id: 'c1',
-      type: 'shapes-section',
-      items: [
-        {
-          heading: itemText,
-          headingStyle: { fontFamily: 'Playfair Display' },
-          text: itemText,
-        },
-      ],
-    } as unknown as Content;
-    const model = makeModel([content]);
-
-    propagateFontFamiliesToContents(
-      model,
-      { headings: 'EB Garamond', paragraphs: 'Inter' },
-      fakeApplyFont,
-    );
-
-    const item = (
-      model.pages[0].contents[0] as unknown as Record<string, unknown>
-    ).items as Record<string, unknown>[];
-
-    expect((item[0].headingStyle as Record<string, unknown>).fontFamily).toBe(
-      'EB Garamond',
-    );
-    expect(item[0].heading).toBe(`${itemText}::rewritten(EB Garamond)`);
-    expect(item[0].text).toBe(`${itemText}::rewritten(Inter)`);
-  });
-
-  it('leaves fields alone when their category did not change', () => {
-    const content = {
-      id: 'c1',
-      type: 'about-section',
-      title: RTE_TITLE,
-      titleStyle: { fontFamily: 'Playfair Display' },
-      description: RTE_TITLE,
-      descriptionStyle: { fontFamily: 'Lato' },
-    } as unknown as Content;
-    const model = makeModel([content]);
-
-    propagateFontFamiliesToContents(
-      model,
-      { paragraphs: 'Inter' },
-      fakeApplyFont,
-    );
-
-    const c = model.pages[0].contents[0] as unknown as Record<string, unknown>;
-
-    expect((c.titleStyle as Record<string, unknown>).fontFamily).toBe(
-      'Playfair Display',
-    );
-    expect(c.title).toBe(RTE_TITLE);
-    expect((c.descriptionStyle as Record<string, unknown>).fontFamily).toBe(
-      'Inter',
-    );
-    expect(c.description).toBe(`${RTE_TITLE}::rewritten(Inter)`);
-  });
-
-  it('non-RTE plain text fields are not rewritten (style still aligned)', () => {
-    const content = {
-      id: 'c1',
-      type: 'about-section',
-      title: 'Plain title',
-      titleStyle: { fontFamily: 'Playfair Display' },
-    } as unknown as Content;
-    const model = makeModel([content]);
-
-    propagateFontFamiliesToContents(
-      model,
-      { headings: 'EB Garamond' },
-      fakeApplyFont,
-    );
-
-    const c = model.pages[0].contents[0] as unknown as Record<string, unknown>;
-
-    expect(c.title).toBe('Plain title');
-    expect((c.titleStyle as Record<string, unknown>).fontFamily).toBe(
-      'EB Garamond',
-    );
-  });
-});
-
-describe('GlobalStylesBuilder font propagation wiring', () => {
-  it('buildAsync propagates changed category families into existing detached styles', async () => {
-    const content = {
-      id: 'c1',
-      type: 'about-section',
-      title: 'Plain title', // plain text — the builder path must not need the RTE editor here
-      titleStyle: { fontFamily: 'Playfair Display' },
-    } as unknown as Content;
-    const model = {
-      styles: {
-        textStyles: {
-          textStyleOptions: {
-            headings: { style: { fontFamily: 'Lato' }, isModified: false },
-          },
-        },
-        buttonStyles: { style: {} },
-        backgroundStyles: { style: {} },
-      },
-      pages: [{ id: 'p1', contents: [content] }],
-    } as unknown as BrandPageModel;
-
-    const builder = new GlobalStylesBuilder({
-      id: 'g1',
-      type: BUILDER_TYPES.UPDATE_GLOBAL_STYLES,
-      payload: {
-        textStyles: {
-          textStyleOptions: {
-            headings: { style: { fontFamily: 'EB Garamond' } },
-          },
-        },
-      } as UpdateGlobalStylesArguments,
-    });
-
-    const result = await builder.buildAsync(model);
-
-    expect(result.errors).toBeUndefined();
-    // Preset updated (pre-existing behaviour)…
-    expect(
-      model.styles.textStyles.textStyleOptions.headings.style.fontFamily,
-    ).toBe('EB Garamond');
-    // …AND the detached section style now follows (the fix).
-    expect(
-      (model.pages[0].contents[0] as unknown as Record<string, unknown>)
-        .titleStyle,
-    ).toMatchObject({ fontFamily: 'EB Garamond' });
-  });
-});

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

@@ -1,205 +0,0 @@
-import type { BrandPageModel, Content } from '../../brand-page/models';
-import type { TextStyleDeclaration } from '../../brand-page/models';
-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 { 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';
-
-/**
- * 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: Record<string, GlobalFontCategory> = {
-  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: readonly GlobalFontCategory[] = [
-  'titles',
-  'headings',
-  'paragraphs',
-  'buttons',
-];
-
-const isPlainObject = (v: unknown): v is Record<string, unknown> =>
-  !!v && typeof v === 'object' && !Array.isArray(v);
-
-/** Extract the per-category families this AI call actually changes. */
-export const collectChangedFontFamilies = (
-  textStyles: UpdateGlobalStylesArguments['textStyles'],
-): Partial<Record<GlobalFontCategory, string>> => {
-  const changed: Partial<Record<GlobalFontCategory, string>> = {};
-
-  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: string,
-  style: unknown,
-  content: Content,
-): GlobalFontCategory | undefined => {
-  const preset = isPlainObject(style)
-    ? (style.textStyleType as GlobalFontCategory | undefined)
-    : 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: string): string => {
-  const base = styleKey.slice(0, -'Style'.length);
-
-  return base.endsWith('s') && !(base in FIELD_DEFAULT_CATEGORY)
-    ? base.slice(0, -1)
-    : base;
-};
-
-export type ApplyFontToRTE = (text: string, fontFamily: string) => string;
-
-const walkRecord = (
-  record: Record<string, unknown>,
-  content: Content,
-  changed: Partial<Record<GlobalFontCategory, string>>,
-  applyFont: ApplyFontToRTE,
-): void => {
-  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 as TextStyleDeclaration).fontFamily =
-          family as TextStyleDeclaration['fontFamily'];
-      }
-    } 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: BrandPageModel,
-  changed: Partial<Record<GlobalFontCategory, string>>,
-  applyFont?: ApplyFontToRTE,
-): void => {
-  if (!Object.keys(changed).length) return;
-
-  let editor:
-    | ReturnType<typeof useExternalRichTextEditor>['externalEditor']
-    | undefined;
-  const apply: ApplyFontToRTE =
-    applyFont ??
-    ((text, fontFamily) => {
-      editor = editor ?? useExternalRichTextEditor().externalEditor;
-
-      return applyStyleToRTEText(editor, text, {
-        fontFamily,
-      } as TextStyleDeclaration);
-    });
-
-  try {
-    for (const page of model.pages) {
-      for (const content of page.contents) {
-        walkRecord(
-          content as unknown as Record<string, unknown>,
-          content,
-          changed,
-          apply,
-        );
-      }
-    }
-  } finally {
-    editor?.destroy();
-  }
-};