@designcrowd/library.brand-page 5.17.28 → 5.18.0

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

@@ -9,6 +9,7 @@
 import type {
   Content,
   BannerSectionContent,
+  BookingSectionContent,
   AboutSectionContent,
   TestimonialSectionContent,
   ImagesSectionContent,
@@ -42,13 +43,22 @@ const bannerFields = defineFieldMap<BannerSectionContent>({
   button_text: 'buttonText',
   button_url: 'url',
   background_image_url: 'imageUrl',
+  background_shape_url: 'imageUrl',
   display_style: 'displayStyle',
 });
 
+const bookingFields = defineFieldMap<BookingSectionContent>({
+  title: 'title',
+  description: 'description',
+  button_text: 'buttonText',
+  button_url: 'url',
+});
+
 const aboutFields = defineFieldMap<AboutSectionContent>({
   title: 'title',
   paragraph: 'paragraph',
   about_image_url: 'imageUrl',
+  about_shape_url: 'imageUrl',
   display_style: 'displayStyle',
 });
 
@@ -99,8 +109,8 @@ const contactFormFields = defineFieldMap<ContactFormContent>({
 });
 
 const mailingListFields = defineFieldMap<MailingListContent>({
-  title: 'title',
   button_text: 'buttonText',
+  accepted_fields: 'acceptedFields',
 });
 
 const socialLinksFields = defineFieldMap<SocialLinksContent>({
@@ -111,6 +121,7 @@ const socialLinksFields = defineFieldMap<SocialLinksContent>({
 
 const dividerFields = defineFieldMap<DividerSectionContent>({
   divider_style: 'dividerStyle',
+  padding: 'paddingStyle',
 });
 
 const imageFields = defineFieldMap<ImageContent>({
@@ -119,6 +130,7 @@ const imageFields = defineFieldMap<ImageContent>({
 });
 
 const imageGalleryFields = defineFieldMap<ImageGalleryContent>({
+  is_full_width: 'isFullWidth',
   // images handled separately
 });
 
@@ -147,6 +159,7 @@ const socialButtonFields = defineFieldMap<ButtonContent>({
 
 export const SECTION_FIELD_MAPS: Record<string, SectionFieldMap> = {
   'banner-section': bannerFields,
+  'booking-section': bookingFields,
   'about-section': aboutFields,
   'testimonial-section': testimonialFields,
   'images-section': imagesSectionFields,
@@ -213,6 +226,7 @@ const imagesSectionStyleFields = defineFieldMap<ImagesSectionContent>({
   description_style: 'descriptionStyle',
   heading_style: 'headingStyle',
   paragraph_style: 'paragraphStyle',
+  button_text_style: 'buttonTextStyle',
 });
 
 const shapesSectionStyleFields = defineFieldMap<ShapesSectionContent>({
@@ -222,14 +236,33 @@ const shapesSectionStyleFields = defineFieldMap<ShapesSectionContent>({
   paragraph_style: 'paragraphStyle',
 });
 
+const bookingStyleFields = defineFieldMap<BookingSectionContent>({
+  title_style: 'titleStyle',
+  description_style: 'descriptionStyle',
+  button_text_style: 'buttonTextStyle',
+});
+
+const mailingListStyleFields = defineFieldMap<MailingListContent>({
+  title_style: 'titleStyle',
+  button_text_style: 'buttonTextStyle',
+});
+
+const socialLinksStyleFields = defineFieldMap<SocialLinksContent>({
+  icon_fill_style: 'iconFillStyles',
+  icon_background_style: 'iconBackgroundStyles',
+});
+
 export const STYLE_FIELD_MAPS: Record<string, SectionFieldMap> = {
   'banner-section': bannerStyleFields,
+  'booking-section': bookingStyleFields,
   'about-section': aboutStyleFields,
   text: textStyleFields,
   'testimonial-section': testimonialStyleFields,
   'contact-form': contactFormStyleFields,
   'images-section': imagesSectionStyleFields,
   'shapes-section': shapesSectionStyleFields,
+  'mailing-list': mailingListStyleFields,
+  'social-links': socialLinksStyleFields,
 };
 
 export const getStyleFieldMap = (

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

@@ -1,7 +1,14 @@
-import type { Content, TextStyleDeclaration } from '../../brand-page/models';
-import { RTE_ALLOWED_SECTION_TYPES } from '../../brand-page-maker/utils';
-import { updateRTEText } from '../helpers/rte.helpers';
-import type { SectionToolArguments } from '../parsers/section-tool-arguments';
+import type { Content } from '../../brand-page/models';
+import { BUTTON_LINK_TYPE } from '../../brand-page/models';
+import type { ButtonLinkType } from '../../brand-page/models';
+import type {
+  TextStyleOptions,
+  TextStyleType,
+} from '../../brand-page/models/styles.model';
+import {
+  isTiptapDocument,
+  type SectionToolArguments,
+} from '../parsers/section-tool-arguments';
 import { getSectionFieldMap, getStyleFieldMap } from './section-field-maps';
 
 /**
@@ -18,7 +25,7 @@ type IndexableContent = Content & Record<string, unknown>;
 
 const isUrlField = (aiKey: string): boolean => aiKey.endsWith('_url');
 
-const isValidUrl = (value: unknown): boolean => {
+export const isValidUrl = (value: unknown): boolean => {
   if (typeof value !== 'string' || !value) return false;
 
   try {
@@ -30,6 +37,46 @@ const isValidUrl = (value: unknown): boolean => {
   }
 };
 
+interface ButtonLinkContent {
+  url: string;
+  email?: string;
+  tel?: string;
+  buttonPageId: string;
+  buttonLinkType: ButtonLinkType;
+}
+
+interface ButtonLinkArgs {
+  button_link_type?: 'url' | 'page' | 'mailTo' | 'tel';
+  button_url?: string;
+}
+
+/**
+ * Sets buttonLinkType and the corresponding link value field (url/email/tel/buttonPageId)
+ * on any section content that supports multiple button link types.
+ * Must be called after applyScalarFields() since that sets content.url as a baseline.
+ */
+export const applyButtonLink = (
+  content: ButtonLinkContent,
+  args: ButtonLinkArgs,
+): void => {
+  const { button_link_type: linkType, button_url: buttonUrl } = args;
+
+  if (!linkType || !buttonUrl) return;
+
+  content.buttonLinkType = linkType;
+
+  switch (linkType) {
+    case BUTTON_LINK_TYPE.url:
+    case BUTTON_LINK_TYPE.mailTo:
+    case BUTTON_LINK_TYPE.tel:
+      content.url = buttonUrl;
+      break;
+    case BUTTON_LINK_TYPE.page:
+      content.buttonPageId = buttonUrl.replace('pageid:', '');
+      break;
+  }
+};
+
 export const applyScalarFields = (
   content: Content,
   args: SectionToolArguments,
@@ -43,10 +90,15 @@ export const applyScalarFields = (
 
   for (const [aiKey, modelKey] of Object.entries(fieldMap)) {
     if (aiKey in args) {
+      const value = args[aiKey];
+
       // Skip invalid URLs — don't overwrite model with malformed values
-      if (isUrlField(aiKey) && !isValidUrl(args[aiKey])) continue;
+      if (isUrlField(aiKey) && !isValidUrl(value)) continue;
+
+      // Skip Tiptap JSON documents — each builder handles its own RTE fields
+      if (isTiptapDocument(value)) continue;
 
-      record[modelKey] = args[aiKey];
+      record[modelKey] = value;
     }
   }
 };
@@ -66,97 +118,104 @@ const normalizeStyleValue = (key: string, value: unknown): unknown => {
     return `${value / 100}em`;
   }
 
-  if (key === 'lineHeight' && typeof value === 'number') {
-    return String(value);
+  if (key === 'lineHeight') {
+    // Snap to 0.1 increments to match the UI slider step
+    const num = typeof value === 'number' ? value : parseFloat(String(value));
+
+    if (!isNaN(num)) return String(Math.floor(num * 10) / 10);
   }
 
   return value;
 };
 
-export const applyStyleFields = (
-  content: Content,
-  args: SectionToolArguments,
-  sectionType: string,
-): void => {
-  const styleMap = getStyleFieldMap(sectionType);
-
-  if (!styleMap) return;
-
-  const record = content as IndexableContent;
+/**
+ * When an executor is about to mark a content-level text style "custom" by
+ * clearing `textStyleType`, the resolved preset values (font, size, spacing,
+ * etc.) must first be copied onto the style — otherwise the renderer falls
+ * back to browser defaults because `textStyleType` no longer points at a
+ * preset.
+ *
+ * The category is read from the existing `style.textStyleType`, which is the
+ * authoritative per-section + per-field reference set by the content factory.
+ * Existing style values win over preset defaults (the content may already
+ * carry user overrides on top of the preset).
+ */
+export const resolveGlobalPresetIntoStyle = (
+  style: object | undefined,
+  textStyleOptions: TextStyleOptions | undefined,
+): Record<string, unknown> => {
+  const base = { ...((style as Record<string, unknown>) ?? {}) };
+  const currentTextStyleType = base.textStyleType as TextStyleType | undefined;
 
-  for (const [aiKey, modelKey] of Object.entries(styleMap)) {
-    if (aiKey in args && args[aiKey] && typeof args[aiKey] === 'object') {
-      const existing = (content[modelKey] as Record<string, unknown>) || {};
-      const aiStyle = args[aiKey] as Record<string, unknown>;
+  if (!currentTextStyleType || !textStyleOptions?.[currentTextStyleType]) {
+    base.textStyleType = undefined;
 
-      const filtered: Record<string, unknown> = {};
+    return base;
+  }
 
-      for (const [k, v] of Object.entries(aiStyle)) {
-        const normalized = normalizeStyleValue(k, v);
+  const presetStyle = textStyleOptions[currentTextStyleType].style;
+  const presetDefaults: Record<string, unknown> = {};
 
-        if (normalized !== undefined) filtered[k] = normalized;
-      }
+  for (const [k, v] of Object.entries(presetStyle)) {
+    if (k === 'textStyleType' || v === undefined) continue;
 
-      record[modelKey] = {
-        ...existing,
-        ...filtered,
-        textStyleType: undefined,
-      };
-    }
+    presetDefaults[k] = v;
   }
+
+  return { ...presetDefaults, ...base, textStyleType: undefined };
 };
 
 /**
- * RTE field → style field pairs for fields that support rich text editing.
- * Matches the RTE_ALLOWED_FIELDS constant from rich-text-editor.util.ts:
- * ['title', 'description', 'text', 'textItems']
+ * Applies per-element style overrides while detaching the element from any
+ * global text-style preset. When a style is bound to a `textStyleType` preset,
+ * the renderer (`getCopyrightTextStyle` / `getTextStyleByContentTextStyle`)
+ * replaces the whole style with that preset and discards per-element values such
+ * as `fontFamily`. Resolving the preset in and clearing `textStyleType` makes the
+ * override stick — the same disconnect rule section content follows.
  *
- * textItems is excluded here because it requires per-item handling
- * (each TextItem has its own textStyle) — handled by TextSectionBuilder.
+ * Idempotent: once `textStyleType` is cleared, subsequent calls just merge the
+ * updates without re-resolving a preset.
  */
-const RTE_FIELD_STYLE_PAIRS: {
-  textField: string;
-  styleField: string;
-  argKey: string;
-}[] = [
-  { textField: 'title', styleField: 'titleStyle', argKey: 'title_style' },
-  {
-    textField: 'description',
-    styleField: 'descriptionStyle',
-    argKey: 'description_style',
-  },
-  { textField: 'text', styleField: 'textStyle', argKey: 'text_style' },
-  {
-    textField: 'paragraph',
-    styleField: 'paragraphStyle',
-    argKey: 'paragraph_style',
-  },
-];
+export const applyDetachedStyleOverride = <T extends object>(
+  current: T | undefined,
+  updates: Partial<T>,
+  textStyleOptions: TextStyleOptions | undefined,
+): T =>
+  ({
+    ...resolveGlobalPresetIntoStyle(current, textStyleOptions),
+    ...updates,
+  }) as T;
 
-/**
- * Re-applies merged styles to RTE content fields after applyStyleFields has
- * updated the style objects. Only runs for section types that support RTE
- * (defined by RTE_ALLOWED_SECTION_TYPES) and only touches fields in the
- * RTE_ALLOWED_FIELDS list.
- */
-export const applyRTEStyles = (
+export const applyStyleFields = (
   content: Content,
   args: SectionToolArguments,
   sectionType: string,
+  textStyleOptions?: TextStyleOptions,
 ): void => {
-  if (!RTE_ALLOWED_SECTION_TYPES.includes(sectionType)) return;
+  const styleMap = getStyleFieldMap(sectionType);
+
+  if (!styleMap) return;
 
   const record = content as IndexableContent;
-  const argsRecord = args as Record<string, unknown>;
 
-  for (const { textField, styleField, argKey } of RTE_FIELD_STYLE_PAIRS) {
-    if (!argsRecord[argKey]) continue;
+  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> = {};
 
-    const text = record[textField];
-    const style = record[styleField];
+    for (const [k, v] of Object.entries(aiStyle)) {
+      const normalized = normalizeStyleValue(k, v);
 
-    if (typeof text === 'string' && style) {
-      record[textField] = updateRTEText(text, style as TextStyleDeclaration);
+      if (normalized !== undefined) filtered[k] = normalized;
     }
+
+    const resolved = resolveGlobalPresetIntoStyle(
+      content[modelKey] as object,
+      textStyleOptions,
+    );
+
+    record[modelKey] = { ...resolved, ...filtered, textStyleType: undefined };
   }
 };

package/src/metadata-builder/builders/section-rules/about-section.rules.ts

@@ -0,0 +1,38 @@
+import {
+  MAX_TITLE_LENGTH,
+  MAX_DESCRIPTION_LENGTH,
+} from '../../../brand-page/constants/font.constants';
+import {
+  enumCheck,
+  runChecks,
+  styleCheck,
+  type SectionCheck,
+  type ValidationContext,
+} from '../../sanitizers/section-args-validator';
+import { textAndRteChecks } from '../../sanitizers/rte-schema-check';
+
+const CHECKS: SectionCheck[] = [
+  ...textAndRteChecks('title', MAX_TITLE_LENGTH),
+  ...textAndRteChecks('paragraph', MAX_DESCRIPTION_LENGTH),
+  styleCheck('title_style'),
+  styleCheck('paragraph_style'),
+  enumCheck(
+    'display_style',
+    [
+      'left-aligned',
+      'right-aligned',
+      'centered',
+      'text-only',
+      'left-aligned-full-image',
+      'right-aligned-full-image',
+    ],
+    'about-section',
+  ),
+];
+
+export function validateAboutSection(
+  args: Record<string, unknown>,
+  ctx: ValidationContext,
+): string[] {
+  return runChecks(CHECKS, args, ctx);
+}

package/src/metadata-builder/builders/section-rules/add-page.rules.ts

@@ -0,0 +1,17 @@
+import { PAGE_RULES } from '../../sanitizers/sanitizer-rules';
+
+export interface AddPagePayload {
+  pageId: string;
+  pageName: string;
+}
+
+type PageCheck = (payload: AddPagePayload | undefined) => string | null;
+
+export const ADD_PAGE_CHECKS: PageCheck[] = [
+  (p) => (!p?.pageId ? 'page_id is required for add_page' : null),
+  (p) => (!p?.pageName ? 'page_name is required for add_page' : null),
+  (p) =>
+    p?.pageName && p.pageName.length > PAGE_RULES.pageName
+      ? `page_name exceeds the maximum length of ${PAGE_RULES.pageName} characters (got ${p.pageName.length})`
+      : null,
+];

package/src/metadata-builder/builders/section-rules/banner-section.rules.ts

@@ -0,0 +1,49 @@
+import {
+  MAX_TITLE_LENGTH,
+  MAX_DESCRIPTION_LENGTH,
+} from '../../../brand-page/constants/font.constants';
+import { BUTTON_LINK_TYPE } from '../../../brand-page/models';
+import {
+  enumCheck,
+  runChecks,
+  styleCheck,
+  type SectionCheck,
+  type ValidationContext,
+} from '../../sanitizers/section-args-validator';
+import { textAndRteChecks } from '../../sanitizers/rte-schema-check';
+
+const CHECKS: SectionCheck[] = [
+  ...textAndRteChecks('title', MAX_TITLE_LENGTH),
+  ...textAndRteChecks('description', MAX_DESCRIPTION_LENGTH),
+  ...textAndRteChecks('button_text', MAX_TITLE_LENGTH),
+  styleCheck('title_style'),
+  styleCheck('description_style'),
+  styleCheck('button_text_style'),
+  enumCheck(
+    'display_style',
+    [
+      'left-aligned',
+      'right-aligned',
+      'centered',
+      'big-image',
+      'left-aligned-big-image',
+      'right-aligned-full-image',
+      'left-aligned-full-image',
+      'center-card-aligned-image',
+      'left-card-aligned-image',
+    ],
+    'banner-section',
+  ),
+  enumCheck(
+    'button_link_type',
+    Object.keys(BUTTON_LINK_TYPE),
+    'banner-section',
+  ),
+];
+
+export function validateBannerSection(
+  args: Record<string, unknown>,
+  ctx: ValidationContext,
+): string[] {
+  return runChecks(CHECKS, args, ctx);
+}

package/src/metadata-builder/builders/section-rules/booking-section.rules.ts

@@ -0,0 +1,34 @@
+import {
+  MAX_TITLE_LENGTH,
+  MAX_DESCRIPTION_LENGTH,
+} from '../../../brand-page/constants/font.constants';
+import { BUTTON_LINK_TYPE } from '../../../brand-page/models';
+import {
+  enumCheck,
+  runChecks,
+  styleCheck,
+  type SectionCheck,
+  type ValidationContext,
+} from '../../sanitizers/section-args-validator';
+import { textAndRteChecks } from '../../sanitizers/rte-schema-check';
+
+const CHECKS: SectionCheck[] = [
+  ...textAndRteChecks('title', MAX_TITLE_LENGTH),
+  ...textAndRteChecks('description', MAX_DESCRIPTION_LENGTH),
+  ...textAndRteChecks('button_text', MAX_TITLE_LENGTH),
+  styleCheck('title_style'),
+  styleCheck('description_style'),
+  styleCheck('button_text_style'),
+  enumCheck(
+    'button_link_type',
+    Object.keys(BUTTON_LINK_TYPE),
+    'booking-section',
+  ),
+];
+
+export function validateBookingSection(
+  args: Record<string, unknown>,
+  ctx: ValidationContext,
+): string[] {
+  return runChecks(CHECKS, args, ctx);
+}

package/src/metadata-builder/builders/section-rules/button-section.rules.ts

@@ -0,0 +1,22 @@
+import { MAX_TITLE_LENGTH } from '../../../brand-page/constants/font.constants';
+import {
+  runChecks,
+  type SectionCheck,
+  type ValidationContext,
+} from '../../sanitizers/section-args-validator';
+import { textAndRteChecks } from '../../sanitizers/rte-schema-check';
+
+/**
+ * Shared validation for all link/button section types:
+ * website, email, phone, general-link, facebook, x, instagram,
+ * youtube, linkedin, pinterest, twitch, tiktok.
+ * All use ButtonSectionBuilder and share the same title constraint.
+ */
+const CHECKS: SectionCheck[] = [...textAndRteChecks('title', MAX_TITLE_LENGTH)];
+
+export function validateButtonSection(
+  args: Record<string, unknown>,
+  ctx: ValidationContext,
+): string[] {
+  return runChecks(CHECKS, args, ctx);
+}

package/src/metadata-builder/builders/section-rules/contact-form.rules.ts

@@ -0,0 +1,30 @@
+import {
+  MAX_TITLE_LENGTH,
+  MAX_DESCRIPTION_LENGTH,
+} from '../../../brand-page/constants/font.constants';
+import {
+  enumCheck,
+  runChecks,
+  styleCheck,
+  type SectionCheck,
+  type ValidationContext,
+} from '../../sanitizers/section-args-validator';
+import { textAndRteChecks } from '../../sanitizers/rte-schema-check';
+
+const CHECKS: SectionCheck[] = [
+  ...textAndRteChecks('title', MAX_TITLE_LENGTH),
+  ...textAndRteChecks('description', MAX_DESCRIPTION_LENGTH),
+  ...textAndRteChecks('button_text', MAX_TITLE_LENGTH),
+  ...textAndRteChecks('success_message', MAX_TITLE_LENGTH),
+  styleCheck('title_style'),
+  styleCheck('description_style'),
+  styleCheck('button_text_style'),
+  enumCheck('display_style', ['preview', 'collapsed'], 'contact-form'),
+];
+
+export function validateContactForm(
+  args: Record<string, unknown>,
+  ctx: ValidationContext,
+): string[] {
+  return runChecks(CHECKS, args, ctx);
+}

package/src/metadata-builder/builders/section-rules/divider-section.rules.ts

@@ -0,0 +1,17 @@
+import {
+  enumCheck,
+  runChecks,
+  type SectionCheck,
+  type ValidationContext,
+} from '../../sanitizers/section-args-validator';
+
+const CHECKS: SectionCheck[] = [
+  enumCheck('divider_style', ['none', 'thin', 'thick'], 'divider-section'),
+];
+
+export function validateDividerSection(
+  args: Record<string, unknown>,
+  ctx: ValidationContext,
+): string[] {
+  return runChecks(CHECKS, args, ctx);
+}

package/src/metadata-builder/builders/section-rules/footer.rules.ts

@@ -0,0 +1,21 @@
+import type { UpdateFooterArguments } from '../../parsers/ai-toolcall-parser';
+import { validateLogoSize } from '../../sanitizers/section-args-validator';
+
+type FooterCheck = (args: UpdateFooterArguments) => string | null;
+
+export const FOOTER_CHECKS: FooterCheck[] = (
+  ['desktop', 'mobile'] as const
+).flatMap((viewport) => [
+  (args: UpdateFooterArguments) =>
+    validateLogoSize(
+      `${viewport}.logo_image_height`,
+      args[viewport]?.logo_image_height,
+      viewport,
+    ),
+  (args: UpdateFooterArguments) =>
+    validateLogoSize(
+      `${viewport}.logo_image_width`,
+      args[viewport]?.logo_image_width,
+      viewport,
+    ),
+]);

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

@@ -0,0 +1,44 @@
+import type {
+  UpdateGlobalStylesArguments,
+  TextStyleOptionStyle,
+} from '../../parsers/ai-toolcall-parser';
+import type { TextStyleType } from '../../../brand-page/models/styles.model';
+import { STYLE_RULES } from '../../sanitizers/sanitizer-rules';
+import { validateStringStyleAttrs } from '../../sanitizers/section-args-validator';
+
+export const TEXT_STYLE_OPTION_KEYS: TextStyleType[] = [
+  'titles',
+  'headings',
+  'paragraphs',
+  'buttons',
+];
+
+type GlobalStyleCheck = (args: UpdateGlobalStylesArguments) => string | null;
+
+export const GLOBAL_STYLE_CHECKS: GlobalStyleCheck[] = [
+  // textFontFamily: must be a recognized camelCase font key (e.g. 'playfairDisplay')
+  (args) => {
+    const font = args.textStyles?.textFontFamily;
+
+    if (font == null) return null;
+
+    return !STYLE_RULES.fontFamilyKeys.has(font)
+      ? `"textFontFamily" "${font}" is not a recognized font family key`
+      : null;
+  },
+
+  // textStyleOptions[category].style — fontSize, fontFamily, lineHeight, letterSpacing
+  ...TEXT_STYLE_OPTION_KEYS.map(
+    (category): GlobalStyleCheck =>
+      (args) => {
+        const style = args.textStyles?.textStyleOptions?.[category]?.style;
+
+        if (!style) return null;
+
+        return validateStringStyleAttrs(
+          `textStyleOptions.${category}.style`,
+          style as TextStyleOptionStyle,
+        );
+      },
+  ),
+];