@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/metadata-builder/sanitizers/__tests__/section-args-validator.test.ts

@@ -6,6 +6,8 @@ import { validateTestimonialSection } from '../../builders/section-rules/testimo
 import { validateSocialLinks } from '../../builders/section-rules/social-links.rules';
 import { validateTextSection } from '../../builders/section-rules/text-section.rules';
 import { validateMailingList } from '../../builders/section-rules/mailing-list.rules';
+import { getSchema } from '@tiptap/core';
+import { getRteExtensions } from '@shared/rte-extensions.util';
 
 // ─── helpers ─────────────────────────────────────────────────────────────────
 
@@ -683,6 +685,68 @@ describe('RTE inline mark style validation', () => {
     });
   });
 
+  describe('textDecoration in textStyle mark', () => {
+    // The maker's strike + underline toggles compose text-decoration (formatting.ts's
+    // decorationSet/composeDecoration), and the role-lift migration of a legacy <u><s> run does the
+    // same (rte-role-lift.util.ts) — a mark echoed back by the AI must accept that combined value,
+    // not just a single keyword, the same as a role definition does.
+    it('accepts a combined text-decoration value ("underline line-through")', () => {
+      const errors = validateBannerSection(
+        {
+          title: rteDoc([
+            textStyleMark({ textDecoration: 'underline line-through' }),
+          ]),
+        } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+
+    it('accepts the compatible reset marker used to remove a role underline', () => {
+      const errors = validateBannerSection(
+        {
+          title: rteDoc([
+            textStyleMark({
+              textDecoration: 'line-through',
+              textDecorationReset: true,
+            }),
+          ]),
+        } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+
+    it('continues accepting the legacy reset-plus-strike representation', () => {
+      const errors = validateBannerSection(
+        {
+          title: rteDoc([
+            textStyleMark({ textDecoration: 'none line-through' }),
+          ]),
+        } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+
+    it('rejects a repeated textDecoration keyword ("underline underline")', () => {
+      const errors = validateBannerSection(
+        {
+          title: rteDoc([
+            textStyleMark({ textDecoration: 'underline underline' }),
+          ]),
+        } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/textDecoration/);
+    });
+  });
+
   it('errors when an item array text field contains an invalid textStyle mark', () => {
     const errors = validateImagesSection(
       {
@@ -696,4 +760,155 @@ describe('RTE inline mark style validation', () => {
     expect(errors[0]).toMatch(/fontSize/);
     expect(errors[0]).toMatch(/out of bounds/);
   });
+
+  // BP-5969 R17 — a role var ref on its own baked attr passes; any other var(...) still fails.
+  describe('role var refs', () => {
+    it('passes a banner title and a text-section item whose marks carry the four role refs', () => {
+      const roleMarks = textStyleMark({
+        fontFamily: 'var(--role-font-family)',
+        fontSize: 'var(--role-font-size)',
+        lineHeight: 'var(--role-line-height)',
+        letterSpacing: 'var(--role-letter-spacing)',
+      });
+
+      expect(
+        validateBannerSection({ title: rteDoc([roleMarks]) } as any, {}),
+      ).toHaveLength(0);
+      expect(
+        validateTextSection(
+          { items: [{ text: rteDoc([roleMarks]) }] } as any,
+          {},
+        ),
+      ).toHaveLength(0);
+    });
+
+    // F1 (regression from B5, 2026-10-01) — B5's fontWeight/fontStyle/textDecoration enum checks
+    // ran on RTE marks too, but the role-ref exemption only listed the original 4 attrs. The
+    // maker's relink (relinkTypographyChain, relinkDocToRole) bakes all 7 as refs, so an AI call
+    // echoing a stored doc that carries them was rejected.
+    it('passes a mark carrying all 7 baked attrs as their own role ref', () => {
+      const roleMarks = textStyleMark({
+        fontFamily: 'var(--role-font-family)',
+        fontSize: 'var(--role-font-size)',
+        lineHeight: 'var(--role-line-height)',
+        letterSpacing: 'var(--role-letter-spacing)',
+        fontWeight: 'var(--role-font-weight)',
+        fontStyle: 'var(--role-font-style)',
+        textDecoration: 'var(--role-text-decoration)',
+      });
+
+      expect(
+        validateBannerSection({ title: rteDoc([roleMarks]) } as any, {}),
+      ).toHaveLength(0);
+    });
+
+    it('rejects a fontWeight/fontStyle/textDecoration ref on the wrong attr', () => {
+      const wrongAttr = validateBannerSection(
+        {
+          title: rteDoc([
+            textStyleMark({ fontWeight: 'var(--role-font-style)' }),
+          ]),
+        } as any,
+        {},
+      );
+
+      expect(wrongAttr).toHaveLength(1);
+      expect(wrongAttr[0]).toMatch(/fontWeight/);
+    });
+
+    it('rejects a var(...) that names the wrong attr, wrong role property, or a palette ref', () => {
+      const wrongAttr = validateBannerSection(
+        {
+          title: rteDoc([
+            textStyleMark({ fontFamily: 'var(--role-font-size)' }),
+          ]),
+        } as any,
+        {},
+      );
+      const wrongVar = validateBannerSection(
+        {
+          title: rteDoc([textStyleMark({ fontSize: 'var(--role-size)' })]),
+        } as any,
+        {},
+      );
+      const paletteRef = validateBannerSection(
+        {
+          title: rteDoc([textStyleMark({ fontSize: 'var(--palette-1)' })]),
+        } as any,
+        {},
+      );
+      const extraText = validateBannerSection(
+        {
+          title: rteDoc([
+            textStyleMark({ fontSize: 'var(--role-font-size) 2em' }),
+          ]),
+        } as any,
+        {},
+      );
+
+      expect(wrongAttr).toHaveLength(1);
+      expect(wrongAttr[0]).toMatch(/fontFamily/);
+      expect(wrongVar).toHaveLength(1);
+      expect(wrongVar[0]).toMatch(/fontSize/);
+      expect(paletteRef).toHaveLength(1);
+      expect(extraText).toHaveLength(1);
+    });
+
+    it('existing literal cases are unchanged', () => {
+      expect(
+        validateBannerSection(
+          { title: rteDoc([textStyleMark({ fontSize: '16px' })]) } as any,
+          {},
+        )[0],
+      ).toMatch(/must use "em" units/);
+      expect(
+        validateBannerSection(
+          {
+            title: rteDoc([textStyleMark({ fontFamily: 'Playfair Display' })]),
+          } as any,
+          {},
+        ),
+      ).toHaveLength(0);
+    });
+
+    it('a role-ref doc passes rteSchemaCheck and keeps the four attrs through the real ProseMirror schema', () => {
+      const errors = validateBannerSection(
+        {
+          title: rteDoc([
+            textStyleMark({
+              fontFamily: 'var(--role-font-family)',
+              fontSize: 'var(--role-font-size)',
+              lineHeight: 'var(--role-line-height)',
+              letterSpacing: 'var(--role-letter-spacing)',
+            }),
+          ]),
+        } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+
+      const schema = getSchema(getRteExtensions());
+      const node = schema.nodeFromJSON(
+        rteDoc([
+          textStyleMark({
+            fontFamily: 'var(--role-font-family)',
+            fontSize: 'var(--role-font-size)',
+            lineHeight: 'var(--role-line-height)',
+            letterSpacing: 'var(--role-letter-spacing)',
+          }),
+        ]),
+      );
+      const mark = node.content.firstChild?.firstChild?.marks.find(
+        (m) => m.type.name === 'textStyle',
+      );
+
+      expect(mark?.attrs).toMatchObject({
+        fontFamily: 'var(--role-font-family)',
+        fontSize: 'var(--role-font-size)',
+        lineHeight: 'var(--role-line-height)',
+        letterSpacing: 'var(--role-letter-spacing)',
+      });
+    });
+  });
 });

package/src/metadata-builder/sanitizers/rte-schema-check.ts

@@ -1,6 +1,6 @@
 import { getSchema } from '@tiptap/core';
 import type { Schema } from '@tiptap/pm/model';
-import { getRteExtensions } from '../../brand-page-maker/composables/rich-text-editor/getRteExtensions';
+import { getRteExtensions } from '@shared/rte-extensions.util';
 import { isTiptapDocument } from '../parsers/section-tool-arguments';
 import {
   rteStyleCheck,

package/src/metadata-builder/sanitizers/sanitizer-rules.ts

@@ -13,7 +13,6 @@ import {
   MIN_LETTER_SPACING_PERCENT,
   MAX_LETTER_SPACING_PERCENT,
   FONT_FAMILY_CONFIGS,
-  FONT_FAMILY_KEYS,
 } from '../../brand-page/constants/font.constants';
 import {
   MAX_PAGE_TITLE_LENGTH,
@@ -31,9 +30,9 @@ import { pxToEm } from '../../brand-page-maker/utils/text.util';
 // Applies to any TextStyleArguments object (section styles, global styles,
 // header/footer viewport overrides).
 //
-// fontFamilyNames / fontFamilyKeys use Set (not readonly arrays) because both
-// are derived dynamically from FONT_FAMILY_CONFIGS at runtime — as const
-// literal narrowing is not possible. Consumers call .has(value).
+// fontFamilyNames uses a Set (not a readonly array) because it is derived
+// dynamically from FONT_FAMILY_CONFIGS at runtime — as const literal narrowing
+// is not possible. Consumers call .has(value).
 
 export const STYLE_RULES = {
   // fontSize bounds are in px (natural unit for clamping).
@@ -53,9 +52,7 @@ export const STYLE_RULES = {
     min: MIN_LETTER_SPACING_PERCENT,
     max: MAX_LETTER_SPACING_PERCENT,
   },
-  // Two separate sets because the format differs by context:
-  //   TextStyleArguments.fontFamily             → display name (e.g. 'Playfair Display')
-  //   UpdateGlobalStylesArguments.textFontFamily → camelCase key (e.g. 'playfairDisplay')
+  // Every font the AI sends is a display name (e.g. 'Playfair Display').
   fontFamilyNames: new Set(
     Object.values(FONT_FAMILY_CONFIGS).map((c) =>
       // Some font names are stored with surrounding single-quotes (e.g. "'Exo 2'").
@@ -63,7 +60,6 @@ export const STYLE_RULES = {
       c.name.replace(/^'(.*)'$/, '$1'),
     ),
   ),
-  fontFamilyKeys: new Set(Object.keys(FONT_FAMILY_KEYS)),
 } as const;
 
 // ─── 2. Logo size rules ───────────────────────────────────────────────────────

package/src/metadata-builder/sanitizers/section-args-validator.ts

@@ -11,7 +11,16 @@ import {
   type ItemCapRule,
 } from './sanitizer-rules';
 
-// ─── Helpers ──────────────────────────────────────────────────────────────────
+// Kept local to avoid the validator/schema import cycle.
+const ROLE_VAR_REF: Readonly<Record<string, string>> = {
+  fontFamily: 'var(--role-font-family)',
+  fontSize: 'var(--role-font-size)',
+  lineHeight: 'var(--role-line-height)',
+  letterSpacing: 'var(--role-letter-spacing)',
+  fontWeight: 'var(--role-font-weight)',
+  fontStyle: 'var(--role-font-style)',
+  textDecoration: 'var(--role-text-decoration)',
+};
 
 function extractPlainText(value: string | TiptapDocument): string {
   if (typeof value === 'string') return value;
@@ -23,14 +32,6 @@ function extractPlainText(value: string | TiptapDocument): string {
     .join('');
 }
 
-// ─── Style property checks (compiled from STYLE_RULES at module init) ─────────
-//
-// Each check takes (fieldLabel, style) → string | null.
-// STYLE_RULES is the base — no if-conditions in validateStyleArgs itself.
-//
-// TiptapDocument inline mark styles (textStyle marks within RTE content) are
-// validated by validateRteMarkStyle / validateRteDocument below.
-
 type StylePropertyCheck = (
   fieldLabel: string,
   style: TextStyleArguments,
@@ -102,23 +103,77 @@ function validateStyleArgs(
   });
 }
 
-// ─── RTE mark style validation ───────────────────────────────────────────────
-//
-// Mark attrs are all strings, unlike TextStyleArguments which uses numbers for
-// lineHeight and letterSpacing. Key format differences:
-//   lineHeight    → unitless string "1.5"  (not a number)
-//   letterSpacing → em string "0.05em"     (percent / 100; range: [0em, 1em])
+interface ValidatableStyleAttrs {
+  fontSize?: string | null;
+  fontFamily?: string | null;
+  lineHeight?: string | null;
+  letterSpacing?: string | null;
+  fontWeight?: string | null;
+  fontStyle?: string | null;
+  textDecoration?: string | null;
+}
 
 type RteMarkCheck = (
   path: string,
-  attrs: NonNullable<TiptapMark['attrs']>,
+  attrs: ValidatableStyleAttrs,
 ) => string | null;
 
+const isNoValue = (value: string | null | undefined): boolean =>
+  value == null || value === '';
+
+const FONT_WEIGHT_VALUES = new Set([
+  'normal',
+  'bold',
+  'bolder',
+  'lighter',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+]);
+const FONT_STYLE_VALUES = new Set(['normal', 'italic', 'oblique']);
+
+const TEXT_DECORATION_KEYWORDS = new Set([
+  'underline',
+  'line-through',
+  'overline',
+]);
+
+const isValidTextDecoration = (
+  value: string,
+  allowRoleReset = false,
+): boolean => {
+  const flags = value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+
+  if (flags.length === 0) return false;
+
+  if (flags[0] === 'none') {
+    return (
+      (flags.length === 1 ||
+        (allowRoleReset &&
+          flags
+            .slice(1)
+            .every((flag) => TEXT_DECORATION_KEYWORDS.has(flag)))) &&
+      new Set(flags).size === flags.length
+    );
+  }
+
+  return (
+    flags.every((flag) => TEXT_DECORATION_KEYWORDS.has(flag)) &&
+    new Set(flags).size === flags.length
+  );
+};
+
 const RTE_MARK_PROPERTY_CHECKS: RteMarkCheck[] = [
   (path, attrs) => {
-    if (attrs.fontSize == null) return null;
+    if (isNoValue(attrs.fontSize)) return null;
 
-    const raw = attrs.fontSize.trim().toLowerCase();
+    const raw = String(attrs.fontSize).trim().toLowerCase();
     const unit = fontUnit.allowedUnits[0];
     const match = raw.match(new RegExp(`^(\\d+(?:\\.\\d+)?)${unit}$`));
 
@@ -136,18 +191,19 @@ const RTE_MARK_PROPERTY_CHECKS: RteMarkCheck[] = [
   },
 
   (path, attrs) => {
-    if (attrs.fontFamily == null) return null;
+    if (isNoValue(attrs.fontFamily)) return null;
 
-    return !fontFamilyNames.has(attrs.fontFamily)
+    return !fontFamilyNames.has(attrs.fontFamily!)
       ? `"${path}.fontFamily" "${attrs.fontFamily}" is not a recognized font family`
       : null;
   },
 
   (path, attrs) => {
-    if (attrs.lineHeight == null) return null;
+    if (isNoValue(attrs.lineHeight)) return null;
 
-    const val = parseFloat(attrs.lineHeight);
-    const isUnitless = !isNaN(val) && attrs.lineHeight.trim() === String(val);
+    const val = parseFloat(attrs.lineHeight!);
+    const isUnitless =
+      !isNaN(val) && String(attrs.lineHeight).trim() === String(val);
 
     if (!isUnitless) {
       return `"${path}.lineHeight" must be a unitless number (got "${attrs.lineHeight}")`;
@@ -159,12 +215,11 @@ const RTE_MARK_PROPERTY_CHECKS: RteMarkCheck[] = [
   },
 
   (path, attrs) => {
-    if (attrs.letterSpacing == null) return null;
+    if (isNoValue(attrs.letterSpacing)) return null;
 
-    const raw = attrs.letterSpacing.trim().toLowerCase();
+    const raw = String(attrs.letterSpacing).trim().toLowerCase();
 
-    // "0" is valid CSS without units — treat as 0em.
-    if (raw === '0') return null;
+    if (raw === '0' || raw === 'normal') return null;
 
     const match = raw.match(/^(\d+(?:\.\d+)?)em$/);
 
@@ -180,25 +235,40 @@ const RTE_MARK_PROPERTY_CHECKS: RteMarkCheck[] = [
       ? `"${path}.letterSpacing" ${attrs.letterSpacing} is out of bounds (${minEm}em–${maxEm}em)`
       : null;
   },
+
+  (path, attrs) => {
+    if (isNoValue(attrs.fontWeight)) return null;
+
+    return !FONT_WEIGHT_VALUES.has(
+      String(attrs.fontWeight).trim().toLowerCase(),
+    )
+      ? `"${path}.fontWeight" "${attrs.fontWeight}" is not a recognized value`
+      : null;
+  },
+
+  (path, attrs) => {
+    if (isNoValue(attrs.fontStyle)) return null;
+
+    return !FONT_STYLE_VALUES.has(String(attrs.fontStyle).trim().toLowerCase())
+      ? `"${path}.fontStyle" "${attrs.fontStyle}" is not a recognized value`
+      : null;
+  },
+
+  (path, attrs) => {
+    if (isNoValue(attrs.textDecoration)) return null;
+
+    return !isValidTextDecoration(String(attrs.textDecoration))
+      ? `"${path}.textDecoration" "${attrs.textDecoration}" is not a recognized value`
+      : null;
+  },
 ];
 
-/**
- * Validates CSS string-format style attrs (fontSize em, fontFamily name,
- * lineHeight unitless, letterSpacing em) against STYLE_RULES bounds.
- * Used for both RTE textStyle mark attrs and GlobalStyles textStyleOptions.
- * Returns the first error string, or null if all attrs are valid / absent.
- */
 export function validateStringStyleAttrs(
   path: string,
-  attrs: {
-    fontSize?: string | null;
-    fontFamily?: string | null;
-    lineHeight?: string | null;
-    letterSpacing?: string | null;
-  },
+  attrs: ValidatableStyleAttrs,
 ): string | null {
   for (const check of RTE_MARK_PROPERTY_CHECKS) {
-    const err = check(path, attrs as NonNullable<TiptapMark['attrs']>);
+    const err = check(path, attrs);
 
     if (err) return err;
   }
@@ -210,7 +280,32 @@ function validateRteMarkStyle(
   path: string,
   attrs: NonNullable<TiptapMark['attrs']>,
 ): string | null {
-  return validateStringStyleAttrs(path, attrs);
+  const literalOnly: ValidatableStyleAttrs = {};
+
+  for (const [attr, value] of Object.entries(attrs)) {
+    if (attr === 'textDecorationReset') {
+      if (value !== true && value !== false && value != null) {
+        return `"${path}.textDecorationReset" must be a boolean`;
+      }
+
+      continue;
+    }
+
+    if (
+      attr === 'textDecoration' &&
+      typeof value === 'string' &&
+      value.trim().startsWith('none ') &&
+      isValidTextDecoration(value, true)
+    ) {
+      continue;
+    }
+
+    if (value !== ROLE_VAR_REF[attr]) {
+      literalOnly[attr as keyof ValidatableStyleAttrs] = value as string | null;
+    }
+  }
+
+  return validateStringStyleAttrs(path, literalOnly);
 }
 
 function validateRteDocument(
@@ -234,24 +329,16 @@ function validateRteDocument(
   return null;
 }
 
-// ─── Public check API ─────────────────────────────────────────────────────────
-
 export interface ValidationContext {
   brandPageType?: string;
   mode?: 'create' | 'update';
 }
 
-/**
- * A pure validation check: record + context → one error string or null.
- * All checks operate on Record<string, unknown> — no concrete section type casting.
- */
 export type SectionCheck = (
   record: Record<string, unknown>,
   ctx: ValidationContext,
 ) => string | null;
 
-// ─── Check factories ──────────────────────────────────────────────────────────
-
 export const textCheck =
   (field: string, max: number): SectionCheck =>
   (record) => {
@@ -393,10 +480,6 @@ export const itemCapCheck =
       : null;
   };
 
-/**
- * Runs an array of SectionChecks against the given args and context.
- * Returns all non-null error strings.
- */
 export function runChecks(
   checks: SectionCheck[],
   args: Record<string, unknown>,

package/src/shared/color-palette/section-color-matches.test.ts

@@ -276,17 +276,21 @@ describe('collectSectionColorMatches — text styles', () => {
     });
   });
 
-  test('with no colour of its own it reports the linked style’s colour and role', () => {
+  test('with no colour of its own it reports what it inherits — the role colour is ignored (ADR-0020)', () => {
     const [match] = collectSectionColorMatches(
       config,
       { titleStyle: { textStyleType: 'titles' } },
       { textStyleOptions },
     );
 
-    expect(match.entries[0]).toMatchObject({
-      value: OTHER_ROLE,
-      state: { kind: 'brand', roleId: 'palette-0' },
+    // The role's colour (OTHER_ROLE) no longer flows; with no site default given the
+    // field simply inherits, naming its link.
+    expect(match.entries[0].state).toEqual({
+      kind: 'inherits',
+      styleType: 'titles',
+      inheritedRoleId: undefined,
     });
+    expect(match.origin).toBe('site-default');
   });
 
   test('when neither carries a colour it reports what it inherits', () => {
@@ -665,9 +669,7 @@ describe('collectSectionColorMatches — the text cascade is reported, not flatt
     expect(match.entries[0].value).toBe(ROLE);
   });
 
-  test('a colour handed down by the global style is origin `global-style`', () => {
-    // The information the panel used to lose: it showed the resolved colour with
-    // no hint that changing it means changing every Title on the site.
+  test('a role colour is ignored — a link-only field falls to the site default even when its role has a colour (ADR-0020)', () => {
     const [match] = collectSectionColorMatches(
       config,
       { titleStyle: { textStyleType: 'titles' } },
@@ -677,11 +679,13 @@ describe('collectSectionColorMatches — the text cascade is reported, not flatt
       },
     );
 
+    // Role colour no longer cascades, so this reads exactly like a role with no colour:
+    // the field renders the site base coat, named through its link.
     expect(match).toMatchObject({
-      origin: 'global-style',
+      origin: 'site-default',
       originStyleType: 'titles',
     });
-    expect(match.entries[0].value).toBe(OTHER_ROLE);
+    expect(match.entries[0].value).toBe(SITE_DEFAULT);
   });
 
   test('a linked style with no colour of its own falls to the site default', () => {
@@ -738,7 +742,7 @@ describe('collectSectionColorMatches — the text cascade is reported, not flatt
     expect(collectSectionColorMatches(config, { titleStyle: {} })).toEqual([]);
   });
 
-  test('a button label follows the same cascade as any other text', () => {
+  test('a button label follows the same cascade as any other text (its role colour is ignored too)', () => {
     const [match] = collectSectionColorMatches(
       {
         type: 'about-section',
@@ -749,7 +753,7 @@ describe('collectSectionColorMatches — the text cascade is reported, not flatt
     );
 
     expect(match).toMatchObject({
-      origin: 'global-style',
+      origin: 'site-default',
       originStyleType: 'buttons',
     });
   });