@designcrowd/library.brand-page 5.17.28 → 5.18.0

package/src/metadata-builder/builders/section-builders/shapes-section-builder.ts

@@ -1,100 +1,148 @@
 import type {
+  ColorReplacement,
   ShapesSectionContent,
   BrandPageModel,
+  TextShapeItem,
+  TextStyleDeclaration,
 } from '../../../brand-page/models';
-import type {
-  ShapesSectionArguments,
-  ShapesSectionItem,
-} from '../../parsers/section-tool-arguments';
+import { tiptapJsonToHtml } from '../../helpers/rte.helpers';
 import type { BuilderResult } from '../../models';
+import {
+  isTiptapDocument,
+  type ShapesSectionArguments,
+  type ShapesSectionItem,
+} from '../../parsers/section-tool-arguments';
 import {
   applyScalarFields,
   applyStyleFields,
-  applyRTEStyles,
+  resolveGlobalPresetIntoStyle,
 } from '../section-field-utils';
+import {
+  applyColorThemeToReplacements,
+  resolveShapeColorReplacementsAsync,
+} from '../shape-color-utils';
 import { BaseSectionBuilder } from './base-section-builder';
+import { validateShapesSection } from '../section-rules/shapes-section.rules';
+
+const resolveItemColorsAsync = async (
+  item: ShapesSectionItem,
+  existing: ColorReplacement[] | undefined,
+  prevImageUrl: string | undefined,
+): Promise<ColorReplacement[]> => {
+  let colors = existing ?? [];
+  const newUrl = item.shape_url ?? item.icon_image_url;
+
+  if (newUrl && newUrl !== prevImageUrl) {
+    colors = await resolveShapeColorReplacementsAsync(newUrl);
+  }
+
+  if (item.color_theme) {
+    colors = applyColorThemeToReplacements(colors, item.color_theme);
+  }
 
-const applyShapeItems = (
+  return colors;
+};
+
+const applyShapeItemsAsync = async (
   content: ShapesSectionContent,
   items: ShapesSectionItem[],
-): void => {
-  content.items = items.map((item, index) => ({
-    imageUrl: item.shape_url || item.icon_image_url || '',
-    imageTitle: '',
-    width: 0,
-    height: 0,
-    mediaType: 'shape',
-    imageLink: '',
-    title: item.heading || '',
-    paragraph: item.text || '',
-    itemsId: index,
-    colorReplacements: [],
-    keepColor: item.keep_color ?? false,
-  }));
+): Promise<void> => {
+  content.items = await Promise.all(
+    items.map(async (item, index) => ({
+      imageUrl: item.shape_url || item.icon_image_url || '',
+      imageTitle: '',
+      width: 0,
+      height: 0,
+      mediaType: 'shape',
+      imageLink: '',
+      title: item.heading || '',
+      paragraph: item.text || '',
+      itemsId: index,
+      colorReplacements: await resolveItemColorsAsync(item, [], undefined),
+    })),
+  );
 };
 
-const mergeShapeItems = (
+const mergeShapeItemsAsync = async (
   content: ShapesSectionContent,
   items: ShapesSectionItem[],
   replaceAll: boolean,
-): void => {
+): Promise<void> => {
   const hasIndexedItems = items.some((item) => item.item_index !== undefined);
 
   if (hasIndexedItems) {
-    for (const item of items) {
-      const targetIndex = item.item_index;
-
-      if (
-        targetIndex === undefined ||
-        targetIndex < 0 ||
-        !content.items?.[targetIndex]
-      )
-        continue;
-
-      const existing = content.items[targetIndex];
-
-      if (item.shape_url !== undefined || item.icon_image_url !== undefined) {
-        existing.imageUrl =
-          item.shape_url ?? item.icon_image_url ?? existing.imageUrl;
-      }
+    await Promise.all(
+      items.map(async (item) => {
+        const targetIndex = item.item_index;
+
+        if (
+          targetIndex === undefined ||
+          targetIndex < 0 ||
+          !content.items?.[targetIndex]
+        )
+          return;
+
+        const existing = content.items[targetIndex] as TextShapeItem;
+        const prevImageUrl = existing.imageUrl;
+
+        if (item.shape_url !== undefined || item.icon_image_url !== undefined) {
+          existing.imageUrl =
+            item.shape_url ?? item.icon_image_url ?? existing.imageUrl;
+        }
 
-      if (item.heading !== undefined) existing.title = item.heading;
+        if (item.heading !== undefined) existing.title = item.heading;
 
-      if (item.text !== undefined) existing.paragraph = item.text;
+        if (item.text !== undefined) existing.paragraph = item.text;
 
-      if (item.keep_color !== undefined) {
-        (existing as any).keepColor = item.keep_color;
-      }
-    }
+        if (item.shape_url !== undefined || item.color_theme !== undefined) {
+          existing.colorReplacements = await resolveItemColorsAsync(
+            item,
+            existing.colorReplacements,
+            prevImageUrl,
+          );
+        }
+      }),
+    );
 
     return;
   }
 
-  const updatedItems = items.map((item, index) => {
-    const existing = content.items?.[index];
-    const imageUrl =
-      item.shape_url ?? item.icon_image_url ?? existing?.imageUrl ?? '';
-
-    return {
-      ...(existing || {}),
-      imageUrl,
-      imageTitle: existing?.imageTitle ?? '',
-      width: existing?.width ?? 0,
-      height: existing?.height ?? 0,
-      mediaType: existing?.mediaType ?? 'shape',
-      imageLink: existing?.imageLink ?? '',
-      title: item.heading ?? existing?.title ?? '',
-      paragraph: item.text ?? existing?.paragraph ?? '',
-      itemsId: existing?.itemsId ?? index,
-      colorReplacements: existing?.colorReplacements ?? [],
-      keepColor:
-        item.keep_color ??
-        (existing && 'keepColor' in existing ? existing.keepColor : false),
-    };
-  });
-
-  if (!replaceAll && content.items && content.items.length > items.length) {
-    const remaining = content.items.slice(items.length) as typeof updatedItems;
+  const itemsToMerge = items.filter((item) => item.insert_at === undefined);
+
+  const updatedItems = await Promise.all(
+    itemsToMerge.map(async (item, index) => {
+      const existing = content.items?.[index];
+      const imageUrl =
+        item.shape_url ?? item.icon_image_url ?? existing?.imageUrl ?? '';
+
+      return {
+        ...(existing || {}),
+        imageUrl,
+        imageTitle: existing?.imageTitle ?? '',
+        width: existing?.width ?? 0,
+        height: existing?.height ?? 0,
+        mediaType: existing?.mediaType ?? 'shape',
+        imageLink: existing?.imageLink ?? '',
+        title: item.heading ?? existing?.title ?? '',
+        paragraph: item.text ?? existing?.paragraph ?? '',
+        itemsId: existing?.itemsId ?? index,
+        colorReplacements: await resolveItemColorsAsync(
+          item,
+          existing?.colorReplacements,
+          existing?.imageUrl,
+        ),
+      };
+    }),
+  );
+
+  if (
+    !replaceAll &&
+    content.items &&
+    content.items.length > itemsToMerge.length
+  ) {
+    const remaining = content.items.slice(
+      itemsToMerge.length,
+    ) as typeof updatedItems;
 
     updatedItems.push(...remaining);
   }
@@ -103,6 +151,10 @@ const mergeShapeItems = (
 };
 
 export class ShapesSectionBuilder extends BaseSectionBuilder<ShapesSectionContent> {
+  protected get sectionValidate() {
+    return validateShapesSection;
+  }
+
   async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
     this.log('Build called');
 
@@ -112,17 +164,46 @@ export class ShapesSectionBuilder extends BaseSectionBuilder<ShapesSectionConten
       return { request: this.request, model, errors: validation.errors };
     }
 
-    const resolved = this.resolveContent(model);
+    const resolved = this.resolveAndRepositionContent(model);
 
     if ('error' in resolved) return resolved.error;
 
     const content = resolved.content;
 
     applyScalarFields(content, this.args, this.sectionType);
-    applyStyleFields(content, this.args, this.sectionType);
-    applyRTEStyles(content, this.args, this.sectionType);
+    applyStyleFields(
+      content,
+      this.args,
+      this.sectionType,
+      this.getGlobalTextStyles(model),
+    );
 
     const args = this.args as ShapesSectionArguments;
+    const textStyleOptions = model.styles?.textStyles?.textStyleOptions;
+
+    if (args.title !== undefined) {
+      if (isTiptapDocument(args.title)) {
+        content.title = tiptapJsonToHtml(args.title);
+        content.titleStyle = resolveGlobalPresetIntoStyle(
+          content.titleStyle,
+          textStyleOptions,
+        ) as TextStyleDeclaration;
+      } else {
+        content.title = args.title;
+      }
+    }
+
+    if (args.description !== undefined) {
+      if (isTiptapDocument(args.description)) {
+        content.description = tiptapJsonToHtml(args.description);
+        content.descriptionStyle = resolveGlobalPresetIntoStyle(
+          content.descriptionStyle,
+          textStyleOptions,
+        ) as TextStyleDeclaration;
+      } else {
+        content.description = args.description;
+      }
+    }
 
     if (args.background_style && typeof args.background_style === 'object') {
       const existing = content.backgroundStyle || {};
@@ -154,9 +235,9 @@ export class ShapesSectionBuilder extends BaseSectionBuilder<ShapesSectionConten
 
     if (args.items && Array.isArray(args.items)) {
       if (this.mode === 'create') {
-        applyShapeItems(content, args.items);
+        await applyShapeItemsAsync(content, args.items);
       } else {
-        mergeShapeItems(content, args.items, !!args._replace_items);
+        await mergeShapeItemsAsync(content, args.items, !!args._replace_items);
       }
     }
 
@@ -181,12 +262,25 @@ export class ShapesSectionBuilder extends BaseSectionBuilder<ShapesSectionConten
       );
 
       for (const item of sortedInserts) {
+        const insertUrl = item.shape_url ?? item.icon_image_url ?? '';
+
+        // Skip if this shape/icon already exists — defensive against duplicate
+        // tool call application
+        if (
+          insertUrl &&
+          content.items?.some(
+            (existing: any) => existing.imageUrl === insertUrl,
+          )
+        ) {
+          continue;
+        }
+
         const pos = Math.max(
           0,
           Math.min(item.insert_at ?? 0, content.items?.length ?? 0),
         );
         const newItem = {
-          imageUrl: item.shape_url ?? item.icon_image_url ?? '',
+          imageUrl: insertUrl,
           imageTitle: '',
           width: 0,
           height: 0,
@@ -195,8 +289,7 @@ export class ShapesSectionBuilder extends BaseSectionBuilder<ShapesSectionConten
           title: item.heading ?? '',
           paragraph: item.text ?? '',
           itemsId: pos,
-          colorReplacements: [],
-          keepColor: item.keep_color ?? false,
+          colorReplacements: await resolveItemColorsAsync(item, [], undefined),
         };
 
         content.items = content.items ?? [];

package/src/metadata-builder/builders/section-builders/social-links-builder.test.ts

@@ -0,0 +1,119 @@
+import { describe, it, expect } from 'vitest';
+import type { SocialLinksContent } from '../../../brand-page/models';
+import { applyStyleFields, applyScalarFields } from '../section-field-utils';
+import { STYLE_FIELD_MAPS, getStyleFieldMap } from '../section-field-maps';
+import type { SocialLinksSectionArguments } from '../../parsers/section-tool-arguments';
+
+/**
+ * Focused unit tests for the social-links style-field mapping.
+ *
+ * The bug: social-links sections were created without colour fields because
+ * (a) the AI pipeline never emitted any, and (b) STYLE_FIELD_MAPS had no
+ * 'social-links' entry, so even if the AI did emit them they wouldn't land
+ * on saved content. These tests cover the brand-page half of the fix:
+ * `STYLE_FIELD_MAPS['social-links']` is registered and `applyStyleFields`
+ * copies the two style objects onto the SocialLinksContent at the expected
+ * model keys.
+ */
+
+const makeEmptyContent = (): SocialLinksContent => ({
+  id: 'sl-1',
+  type: 'social-links',
+  title: '',
+  links: [],
+  iconDisplayStyle: 'circle',
+  iconFillStyles: {},
+  iconBackgroundStyles: {},
+  backgroundStyles: {},
+  titleStyle: {},
+});
+
+describe('social-links style field map', () => {
+  it('is registered in STYLE_FIELD_MAPS', () => {
+    expect(STYLE_FIELD_MAPS['social-links']).toBeDefined();
+    expect(getStyleFieldMap('social-links')).toBeDefined();
+  });
+
+  it('maps icon_fill_style → iconFillStyles', () => {
+    const map = getStyleFieldMap('social-links');
+
+    expect(map?.icon_fill_style).toBe('iconFillStyles');
+  });
+
+  it('maps icon_background_style → iconBackgroundStyles', () => {
+    const map = getStyleFieldMap('social-links');
+
+    expect(map?.icon_background_style).toBe('iconBackgroundStyles');
+  });
+
+  it('does NOT map a title_style entry (out of scope this turn)', () => {
+    const map = getStyleFieldMap('social-links');
+
+    expect(map?.title_style).toBeUndefined();
+  });
+});
+
+describe('applyStyleFields on social-links', () => {
+  it('writes icon_fill_style.fill onto content.iconFillStyles.fill', () => {
+    const content = makeEmptyContent();
+    const args: SocialLinksSectionArguments = {
+      icon_fill_style: { fill: '#fff4e0' } as Record<string, string>,
+    };
+
+    applyStyleFields(content, args, 'social-links');
+
+    expect(content.iconFillStyles).toMatchObject({ fill: '#fff4e0' });
+  });
+
+  it('writes icon_background_style.backgroundColor onto content.iconBackgroundStyles', () => {
+    const content = makeEmptyContent();
+    const args: SocialLinksSectionArguments = {
+      icon_background_style: { backgroundColor: '#6c1845' },
+    };
+
+    applyStyleFields(content, args, 'social-links');
+
+    expect(content.iconBackgroundStyles).toMatchObject({
+      backgroundColor: '#6c1845',
+    });
+  });
+
+  it('writes both style objects in a single call (the AI-pipeline shape)', () => {
+    const content = makeEmptyContent();
+    const args: SocialLinksSectionArguments = {
+      icon_fill_style: { fill: '#fff4e0' } as Record<string, string>,
+      icon_background_style: { backgroundColor: '#6c1845' },
+    };
+
+    applyStyleFields(content, args, 'social-links');
+
+    expect(content.iconFillStyles).toMatchObject({ fill: '#fff4e0' });
+    expect(content.iconBackgroundStyles).toMatchObject({
+      backgroundColor: '#6c1845',
+    });
+  });
+
+  it('preserves existing scalar fields when style args are applied', () => {
+    const content = makeEmptyContent();
+    const args: SocialLinksSectionArguments = {
+      icon_style: 'circle',
+      icon_fill_style: { fill: '#fff4e0' } as Record<string, string>,
+    };
+
+    applyScalarFields(content, args, 'social-links');
+    applyStyleFields(content, args, 'social-links');
+
+    expect(content.iconDisplayStyle).toBe('circle');
+    expect(content.iconFillStyles).toMatchObject({ fill: '#fff4e0' });
+  });
+
+  it('skips style fields when args are absent (no-op)', () => {
+    const content = makeEmptyContent();
+    const args: SocialLinksSectionArguments = { icon_style: 'none' };
+
+    applyStyleFields(content, args, 'social-links');
+
+    expect(content.iconFillStyles).toEqual({});
+    expect(content.iconBackgroundStyles).toEqual({});
+  });
+});

package/src/metadata-builder/builders/section-builders/social-links-builder.ts

@@ -7,8 +7,9 @@ import type {
   SocialLinksSectionArguments,
 } from '../../parsers/section-tool-arguments';
 import type { BuilderResult } from '../../models';
-import { applyScalarFields } from '../section-field-utils';
+import { applyScalarFields, applyStyleFields } from '../section-field-utils';
 import { BaseSectionBuilder } from './base-section-builder';
+import { validateSocialLinks } from '../section-rules/social-links.rules';
 
 const applySocialLinks = (
   content: SocialLinksContent,
@@ -47,6 +48,10 @@ const mergeSocialLinks = (
 };
 
 export class SocialLinksBuilder extends BaseSectionBuilder<SocialLinksContent> {
+  protected get sectionValidate() {
+    return validateSocialLinks;
+  }
+
   async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
     this.log('Build called');
 
@@ -56,13 +61,19 @@ export class SocialLinksBuilder extends BaseSectionBuilder<SocialLinksContent> {
       return { request: this.request, model, errors: validation.errors };
     }
 
-    const resolved = this.resolveContent(model);
+    const resolved = this.resolveAndRepositionContent(model);
 
     if ('error' in resolved) return resolved.error;
 
     const content = resolved.content;
 
     applyScalarFields(content, this.args, this.sectionType);
+    applyStyleFields(
+      content,
+      this.args,
+      this.sectionType,
+      this.getGlobalTextStyles(model),
+    );
 
     const args = this.args as SocialLinksSectionArguments;