@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -0,0 +1,907 @@
+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 {
+  collectChangedRoleProps,
+  propagateRolePropsToContents,
+  relinkRoleChangedMarks,
+  type ChangedRoleProps,
+} from './global-role-propagation';
+
+/**
+ * BP-5969 R12/R16 — a site-wide role change relinks every literal of the changed property to its
+ * `var(--role-…)` ref, accent words included, across page contents, the header and the footer;
+ * `keepRuns` is the one named exception. Reworked from BP-5780's global-font-propagation.test.ts,
+ * whose category-based (titles/headings/paragraphs/buttons) fixtures no longer apply — resolution
+ * is now solely by each field's own `textStyleType` (the 10 canonical roles).
+ */
+
+const roleMark = (attrs: Record<string, unknown>) => ({
+  type: 'textStyle',
+  attrs,
+});
+
+const rteDoc = (runs: { text: string; marks?: unknown[] }[]) => ({
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: runs.map((r) => ({
+        type: 'text',
+        text: r.text,
+        ...(r.marks ? { marks: r.marks } : {}),
+      })),
+    },
+  ],
+});
+
+// First run's textStyle mark attrs, for terse assertions.
+const firstMarkAttrs = (
+  doc: unknown,
+  runIndex = 0,
+): Record<string, unknown> | undefined =>
+  (
+    (
+      doc as {
+        content: {
+          content: {
+            marks?: { type: string; attrs?: Record<string, unknown> }[];
+          }[];
+        }[];
+      }
+    ).content[0].content[runIndex]?.marks ?? []
+  ).find((m) => m.type === 'textStyle')?.attrs;
+
+const makeModel = (
+  contents: Partial<Content>[],
+  extra: Partial<BrandPageModel> = {},
+): BrandPageModel =>
+  ({
+    styles: { textStyles: { textStyleOptions: {} } },
+    pages: [{ id: 'p1', contents }],
+    ...extra,
+  }) as unknown as BrandPageModel;
+
+describe('collectChangedRoleProps', () => {
+  it('extracts the 4 baked properties per changed canonical role', () => {
+    const changed = collectChangedRoleProps({
+      heading3: { style: { fontFamily: 'Oswald', fontSize: '3em' } },
+      paragraph1: { style: { color: '#ff0000' } }, // colour is not propagated (out of scope)
+    });
+
+    expect(changed).toEqual({
+      heading3: { fontFamily: 'Oswald', fontSize: '3em' },
+    });
+  });
+
+  it('returns empty for no textStyleOptions, or none of the 4 properties set', () => {
+    expect(collectChangedRoleProps(undefined)).toEqual({});
+    expect(
+      collectChangedRoleProps({ heading3: { style: { color: '#000' } } }),
+    ).toEqual({});
+  });
+
+  it('does not treat a full-patch value equal to the stored role as changed', () => {
+    const changed = collectChangedRoleProps(
+      {
+        heading3: {
+          style: { fontFamily: 'Lato', fontSize: '3em', lineHeight: '1.5' },
+        },
+      },
+      {
+        heading3: {
+          style: { fontFamily: 'Lato', fontSize: '3em', lineHeight: '1.4' },
+        },
+      } as any,
+    );
+
+    expect(changed).toEqual({ heading3: { lineHeight: '1.5' } });
+  });
+
+  it('normalizes whitespace and neutral empty values before comparing', () => {
+    expect(
+      collectChangedRoleProps(
+        { heading3: { style: { fontFamily: ' Lato ' } } },
+        { heading3: { style: { fontFamily: 'Lato' } } } as any,
+      ),
+    ).toEqual({});
+
+    expect(
+      collectChangedRoleProps({ heading3: { style: { letterSpacing: '' } } }, {
+        heading3: { style: { letterSpacing: 'normal' } },
+      } as any),
+    ).toEqual({});
+  });
+
+  it('treats the same value written differently as unchanged', () => {
+    expect(
+      collectChangedRoleProps(
+        {
+          heading3: {
+            style: {
+              fontFamily: '"Exo 2"',
+              fontSize: '3.0em',
+              lineHeight: '1.50',
+              letterSpacing: '.1EM',
+            },
+          },
+        },
+        {
+          heading3: {
+            style: {
+              fontFamily: 'Exo 2',
+              fontSize: '3em',
+              lineHeight: '1.5',
+              letterSpacing: '0.1em',
+            },
+          },
+        } as any,
+      ),
+    ).toEqual({});
+
+    expect(
+      collectChangedRoleProps({ heading3: { style: { fontSize: '3.5em' } } }, {
+        heading3: { style: { fontSize: '3em' } },
+      } as any),
+    ).toEqual({ heading3: { fontSize: '3.5em' } });
+  });
+});
+
+describe('propagateRolePropsToContents', () => {
+  it('relinks literals: a family literal becomes the ref; an existing ref is untouched; a different role is left alone', () => {
+    const titleA = rteDoc([
+      { text: 'Title A', marks: [roleMark({ fontFamily: 'Georgia' })] },
+    ]);
+    const titleB = rteDoc([
+      {
+        text: 'Title B',
+        marks: [roleMark({ fontFamily: 'var(--role-font-family)' })],
+      },
+    ]);
+    const contentA = {
+      id: 'c1',
+      type: 'banner-section',
+      title: titleA,
+      titleStyle: { textStyleType: 'heading3' },
+    } as unknown as Content;
+    const contentB = {
+      id: 'c2',
+      type: 'banner-section',
+      title: titleB,
+      titleStyle: { textStyleType: 'heading3' },
+    } as unknown as Content;
+    const contentPara = {
+      id: 'c3',
+      type: 'about-section',
+      description: rteDoc([
+        { text: 'Body copy', marks: [roleMark({ fontFamily: 'Georgia' })] },
+      ]),
+      descriptionStyle: { textStyleType: 'paragraph1' },
+    } as unknown as Content;
+    const model = makeModel([contentA, contentB, contentPara]);
+
+    propagateRolePropsToContents(model, { heading3: { fontFamily: 'Oswald' } });
+
+    const [a, b, p] = model.pages[0].contents as unknown as Record<
+      string,
+      unknown
+    >[];
+
+    expect(firstMarkAttrs(a.title)?.fontFamily).toBe('var(--role-font-family)');
+    expect(firstMarkAttrs(b.title)?.fontFamily).toBe('var(--role-font-family)');
+    expect(firstMarkAttrs(p.description)?.fontFamily).toBe('Georgia');
+  });
+
+  it('any property: a fontSize change relinks RTE literals and drops a non-RTE style override', () => {
+    const title = rteDoc([
+      { text: 'Big Heading', marks: [roleMark({ fontSize: '3em' })] },
+    ]);
+    const rteContent = {
+      id: 'c1',
+      type: 'banner-section',
+      title,
+      titleStyle: { textStyleType: 'heading3' },
+    } as unknown as Content;
+    const plainContent = {
+      id: 'c2',
+      type: 'testimonial-section',
+      name: 'Jane Doe',
+      nameStyle: { textStyleType: 'heading3', fontSize: '3em' },
+    } as unknown as Content;
+    const model = makeModel([rteContent, plainContent]);
+
+    propagateRolePropsToContents(model, { heading3: { fontSize: '4em' } });
+
+    const [rte, plain] = model.pages[0].contents as unknown as Record<
+      string,
+      unknown
+    >[];
+
+    expect(firstMarkAttrs(rte.title)?.fontSize).toBe('var(--role-font-size)');
+    expect(
+      (plain.nameStyle as Record<string, unknown>).fontSize,
+    ).toBeUndefined();
+  });
+
+  it('accent rewritten: an accent word carrying a deliberately different literal family also relinks', () => {
+    const title = rteDoc([
+      { text: 'Welcome to ', marks: [roleMark({ fontFamily: 'Oswald' })] },
+      { text: 'Bloom', marks: [roleMark({ fontFamily: 'Pacifico' })] },
+    ]);
+    const content = {
+      id: 'c1',
+      type: 'banner-section',
+      title,
+      titleStyle: { textStyleType: 'heading3' },
+    } as unknown as Content;
+    const model = makeModel([content]);
+
+    propagateRolePropsToContents(model, { heading3: { fontFamily: 'Oswald' } });
+
+    const runs = (
+      model.pages[0].contents[0] as unknown as Record<string, unknown>
+    ).title;
+
+    expect(firstMarkAttrs(runs, 0)?.fontFamily).toBe('var(--role-font-family)');
+    expect(firstMarkAttrs(runs, 1)?.fontFamily).toBe('var(--role-font-family)');
+  });
+
+  it('keepRuns: a named run keeps its literal; every other run of the changed role/property still relinks', () => {
+    const title = rteDoc([
+      { text: 'The best ', marks: [roleMark({ fontFamily: 'Georgia' })] },
+      { text: 'Taste', marks: [roleMark({ fontFamily: 'Pacifico' })] },
+      { text: ' in town', marks: [roleMark({ fontFamily: 'Georgia' })] },
+    ]);
+    const content = {
+      id: 'c1',
+      type: 'banner-section',
+      title,
+      titleStyle: { textStyleType: 'heading3' },
+    } as unknown as Content;
+    const model = makeModel([content]);
+
+    propagateRolePropsToContents(
+      model,
+      { heading3: { fontFamily: 'Oswald' } },
+      ['Taste'],
+    );
+
+    const runs = (
+      model.pages[0].contents[0] as unknown as Record<string, unknown>
+    ).title;
+
+    expect(firstMarkAttrs(runs, 0)?.fontFamily).toBe('var(--role-font-family)');
+    expect(firstMarkAttrs(runs, 1)?.fontFamily).toBe('Pacifico');
+    expect(firstMarkAttrs(runs, 2)?.fontFamily).toBe('var(--role-font-family)');
+  });
+
+  it('header footer: a paragraph1 family change relinks desktop/mobile nav and footer copyright', () => {
+    const pageHeaderDesktop = {
+      navigation: {
+        defaultButtonStyle: {
+          textStyleType: 'paragraph1',
+          fontFamily: 'Georgia',
+        },
+      },
+    };
+    const pageHeaderMobile = {
+      navigation: {
+        defaultButtonStyle: {
+          textStyleType: 'paragraph1',
+          fontFamily: 'Georgia',
+        },
+      },
+    };
+    const pageFooterDesktop = {
+      copyrightText: 'All rights reserved',
+      copyrightStyle: { textStyleType: 'paragraph1', fontFamily: 'Georgia' },
+    };
+    const pageFooterMobile = {
+      copyrightText: 'All rights reserved',
+      copyrightStyle: { textStyleType: 'paragraph1', fontFamily: 'Georgia' },
+    };
+    const model = makeModel([], {
+      pageHeaderDesktop,
+      pageHeaderMobile,
+      pageFooterDesktop,
+      pageFooterMobile,
+    } as unknown as Partial<BrandPageModel>);
+
+    propagateRolePropsToContents(model, {
+      paragraph1: { fontFamily: 'Inter' },
+    });
+
+    const buttonStyle = (header: unknown): Record<string, unknown> =>
+      (
+        header as {
+          navigation: { defaultButtonStyle: Record<string, unknown> };
+        }
+      ).navigation.defaultButtonStyle;
+    const copyrightStyle = (footer: unknown): Record<string, unknown> =>
+      (footer as { copyrightStyle: Record<string, unknown> }).copyrightStyle;
+
+    expect(buttonStyle(model.pageHeaderDesktop).fontFamily).toBeUndefined();
+    expect(buttonStyle(model.pageHeaderMobile).fontFamily).toBeUndefined();
+    expect(copyrightStyle(model.pageFooterDesktop).fontFamily).toBeUndefined();
+    expect(copyrightStyle(model.pageFooterMobile).fontFamily).toBeUndefined();
+  });
+
+  it('hamburger selected link follows its default sibling: a button role change drops the family override on both (T12.6)', () => {
+    // The selected style carries NO role of its own (the plan's fixture, B4): no maker path sets
+    // one, no migration adds one, so stored data looks exactly like this — the sibling-drop in
+    // walkRecord is what has to reach it, not a `textStyleType` match of its own.
+    const pageHeaderDesktop = {
+      navigation: {
+        hamburgerMenuStyle: {
+          defaultButtonStyle: { textStyleType: 'button', fontFamily: 'Oswald' },
+          selectedButtonStyle: { fontFamily: 'Oswald' },
+        },
+      },
+    };
+    const model = makeModel([], {
+      pageHeaderDesktop,
+    } as unknown as Partial<BrandPageModel>);
+
+    propagateRolePropsToContents(model, { button: { fontFamily: 'Inter' } });
+
+    const menu = (
+      model.pageHeaderDesktop as unknown as {
+        navigation: { hamburgerMenuStyle: Record<string, unknown> };
+      }
+    ).navigation.hamburgerMenuStyle as Record<string, Record<string, unknown>>;
+
+    expect(menu.defaultButtonStyle.fontFamily).toBeUndefined();
+    expect(menu.selectedButtonStyle.fontFamily).toBeUndefined();
+  });
+
+  it('walks item arrays', () => {
+    const content = {
+      id: 'c1',
+      type: 'testimonial-section',
+      items: [
+        {
+          testimonial: rteDoc([
+            {
+              text: 'Great service',
+              marks: [roleMark({ fontFamily: 'Georgia' })],
+            },
+          ]),
+          testimonialStyle: { textStyleType: 'paragraph2' },
+        },
+      ],
+    } as unknown as Content;
+    const model = makeModel([content]);
+
+    propagateRolePropsToContents(model, {
+      paragraph2: { fontFamily: 'Inter' },
+    });
+
+    const item = (
+      model.pages[0].contents[0] as unknown as Record<string, unknown>
+    ).items as Record<string, unknown>[];
+
+    expect(firstMarkAttrs(item[0].testimonial)?.fontFamily).toBe(
+      'var(--role-font-family)',
+    );
+  });
+
+  it('legacy HTML string fields still relink via the injected editor rewrite', () => {
+    const html = '<p><span style="font-family: Georgia">Bloom</span></p>';
+    const content = {
+      id: 'c1',
+      type: 'about-section',
+      title: html,
+      titleStyle: { textStyleType: 'heading3' },
+    } as unknown as Content;
+    const model = makeModel([content]);
+    const calls: [
+      string,
+      Record<string, unknown>,
+      readonly string[] | undefined,
+    ][] = [];
+
+    propagateRolePropsToContents(
+      model,
+      { heading3: { fontFamily: 'Oswald' } },
+      undefined,
+      (text, refs, keepRuns) => {
+        calls.push([text, refs, keepRuns]);
+
+        return `${text}::relinked`;
+      },
+    );
+
+    expect(calls).toEqual([
+      [html, { fontFamily: 'var(--role-font-family)' }, undefined],
+    ]);
+    expect(
+      (model.pages[0].contents[0] as unknown as Record<string, unknown>).title,
+    ).toBe(`${html}::relinked`);
+  });
+
+  it('passes a kept word inside a legacy HTML field to the HTML rewriter', () => {
+    const html = '<p>Keep this <span>Taste</span> but restyle the rest</p>';
+    const content = {
+      id: 'c1',
+      type: 'about-section',
+      title: html,
+      titleStyle: { textStyleType: 'heading3' },
+    } as unknown as Content;
+    const model = makeModel([content]);
+    const calls: { keepRuns?: readonly string[] }[] = [];
+
+    propagateRolePropsToContents(
+      model,
+      { heading3: { fontFamily: 'Oswald' } },
+      ['Taste'],
+      (_text, _refs, keepRuns) => {
+        calls.push({ keepRuns });
+
+        return html;
+      },
+    );
+
+    expect(calls).toEqual([{ keepRuns: ['Taste'] }]);
+  });
+
+  it('does nothing when no role/property changed', () => {
+    const content = {
+      id: 'c1',
+      type: 'banner-section',
+      title: rteDoc([
+        { text: 'X', marks: [roleMark({ fontFamily: 'Georgia' })] },
+      ]),
+      titleStyle: { textStyleType: 'heading3' },
+    } as unknown as Content;
+    const model = makeModel([content]);
+    const before = JSON.stringify(model);
+
+    propagateRolePropsToContents(model, {} as ChangedRoleProps);
+
+    expect(JSON.stringify(model)).toBe(before);
+  });
+});
+
+// A representative style-options fixture: every canonical + legacy role present, needed by
+// GlobalStylesBuilder.buildAsync's merge guard (`if (!existing) continue`).
+const fullRoleOptionsFixture = (): Record<
+  string,
+  { style: Record<string, unknown>; isModified: boolean }
+> =>
+  Object.fromEntries(
+    [
+      'heading1',
+      'heading2',
+      'heading3',
+      'heading4',
+      'heading5',
+      'heading6',
+      'paragraph1',
+      'paragraph2',
+      'paragraph3',
+      'button',
+      'titles',
+      'headings',
+      'paragraphs',
+      'buttons',
+    ].map((role) => [
+      role,
+      { style: { fontFamily: 'Lato' }, isModified: false },
+    ]),
+  );
+
+describe('GlobalStylesBuilder — role propagation wiring (retired successor, T12.5)', () => {
+  it('keeps an accent override when a colour-only call re-sends its role font size unchanged', async () => {
+    const model = {
+      styles: {
+        textStyles: {
+          textStyleOptions: {
+            heading3: { style: { fontSize: '3em' }, isModified: false },
+          },
+        },
+        buttonStyles: { style: {} },
+        backgroundStyles: { style: {} },
+      },
+      pages: [
+        {
+          id: 'p1',
+          contents: [
+            {
+              id: 'c1',
+              type: 'banner-section',
+              title: rteDoc([
+                { text: 'Accent', marks: [roleMark({ fontSize: '4em' })] },
+              ]),
+              titleStyle: { textStyleType: 'heading3' },
+            },
+          ],
+        },
+      ],
+    } as unknown as BrandPageModel;
+
+    const builder = new GlobalStylesBuilder({
+      id: 'g1',
+      type: BUILDER_TYPES.UPDATE_GLOBAL_STYLES,
+      payload: {
+        buttonStyles: { style: { backgroundColor: '#222222' } },
+        textStyles: {
+          textStyleOptions: { heading3: { style: { fontSize: '3em' } } },
+        },
+      },
+    });
+
+    const { model: result } = await builder.buildAsync(model);
+    const content = result.pages[0].contents[0] as unknown as Record<
+      string,
+      unknown
+    >;
+
+    expect(firstMarkAttrs(content.title)?.fontSize).toBe('4em');
+    expect(result.styles.buttonStyles.style.backgroundColor).toBe('#222222');
+  });
+
+  it('a retired "headings" family change propagates to every heading2–heading6-linked field', async () => {
+    const content2 = {
+      id: 'c2',
+      type: 'banner-section',
+      title: rteDoc([
+        { text: 'H2', marks: [roleMark({ fontFamily: 'Georgia' })] },
+      ]),
+      titleStyle: { textStyleType: 'heading2' },
+    } as unknown as Content;
+    const content5 = {
+      id: 'c5',
+      type: 'banner-section',
+      title: rteDoc([
+        { text: 'H5', marks: [roleMark({ fontFamily: 'Georgia' })] },
+      ]),
+      titleStyle: { textStyleType: 'heading5' },
+    } as unknown as Content;
+    const model = {
+      styles: {
+        textStyles: { textStyleOptions: fullRoleOptionsFixture() },
+        buttonStyles: { style: {} },
+        backgroundStyles: { style: {} },
+      },
+      pages: [{ id: 'p1', contents: [content2, content5] }],
+    } as unknown as BrandPageModel;
+
+    const builder = new GlobalStylesBuilder({
+      id: 'g1',
+      type: BUILDER_TYPES.UPDATE_GLOBAL_STYLES,
+      payload: {
+        textStyles: {
+          textStyleOptions: { headings: { style: { fontFamily: 'Oswald' } } },
+        },
+      } as UpdateGlobalStylesArguments,
+    });
+
+    const { model: result } = await builder.buildAsync(model);
+    const [c2, c5] = result.pages[0].contents as unknown as Record<
+      string,
+      unknown
+    >[];
+
+    expect(firstMarkAttrs(c2.title)?.fontFamily).toBe(
+      'var(--role-font-family)',
+    );
+    expect(firstMarkAttrs(c5.title)?.fontFamily).toBe(
+      'var(--role-font-family)',
+    );
+  });
+});
+
+type TestRun = {
+  text: string;
+  marks?: { type: string; attrs?: Record<string, unknown> }[];
+};
+
+const runsOf = (doc: unknown): TestRun[] =>
+  (doc as { content: { content: TestRun[] }[] }).content[0].content;
+
+const markTypes = (run: TestRun): string[] =>
+  (run.marks ?? []).map((mark) => mark.type);
+
+const textStyleOf = (run: TestRun): Record<string, unknown> | undefined =>
+  run.marks?.find((mark) => mark.type === 'textStyle')?.attrs;
+
+const LINK = { type: 'link', attrs: { href: 'https://example.com' } };
+
+describe('emphasis propagation — weight, style and decoration (BP-5969)', () => {
+  it('collects weight, style and decoration', () => {
+    expect(
+      collectChangedRoleProps({
+        heading2: {
+          style: {
+            fontWeight: 'bold',
+            fontStyle: 'italic',
+            textDecoration: 'underline',
+          },
+        },
+      }),
+    ).toEqual({
+      heading2: {
+        fontWeight: 'bold',
+        fontStyle: 'italic',
+        textDecoration: 'underline',
+      },
+    });
+  });
+
+  it('an emphasis value equal to the stored role still counts; an unchanged fontSize in the same call does not', () => {
+    expect(
+      collectChangedRoleProps(
+        {
+          heading1: {
+            style: { fontWeight: 'bold', fontStyle: 'normal', fontSize: '3em' },
+          },
+        },
+        {
+          heading1: {
+            style: { fontWeight: 'bold', fontStyle: 'normal', fontSize: '3em' },
+          },
+        } as any,
+      ),
+    ).toEqual({ heading1: { fontWeight: 'bold', fontStyle: 'normal' } });
+  });
+
+  it('a null or empty emphasis value counts as its neutral value', () => {
+    expect(
+      collectChangedRoleProps(
+        {
+          paragraph1: {
+            style: {
+              fontWeight: null,
+              fontStyle: '',
+              textDecoration: null,
+            } as any,
+          },
+        },
+        {
+          paragraph1: {
+            style: {
+              fontWeight: 'normal',
+              fontStyle: 'normal',
+              textDecoration: 'none',
+            },
+          },
+        } as any,
+      ),
+    ).toEqual({
+      paragraph1: {
+        fontWeight: 'normal',
+        fontStyle: 'normal',
+        textDecoration: 'none',
+      },
+    });
+  });
+
+  it('weight: a pinned normal literal becomes the ref and a bold mark is dropped', () => {
+    const doc = rteDoc([
+      { text: 'Pinned ', marks: [roleMark({ fontWeight: 'normal' })] },
+      { text: 'Legacy', marks: [{ type: 'bold' }] },
+    ]);
+
+    const [pinned, legacy] = runsOf(
+      relinkRoleChangedMarks(doc as any, ['fontWeight'], undefined),
+    );
+
+    expect(textStyleOf(pinned)?.fontWeight).toBe('var(--role-font-weight)');
+    expect(markTypes(legacy)).toEqual([]);
+  });
+
+  it('style: italic marks go; colour, highlight and link marks stay', () => {
+    const doc = rteDoc([
+      {
+        text: 'Accent',
+        marks: [
+          roleMark({ fontStyle: 'normal', color: '#ff0000' }),
+          { type: 'italic' },
+          { type: 'highlight', attrs: { color: '#ffff00' } },
+          LINK,
+        ],
+      },
+    ]);
+
+    const [run] = runsOf(
+      relinkRoleChangedMarks(doc as any, ['fontStyle'], undefined),
+    );
+
+    expect(textStyleOf(run)).toEqual({
+      fontStyle: 'var(--role-font-style)',
+      color: '#ff0000',
+    });
+    expect(markTypes(run)).toEqual(['textStyle', 'highlight', 'link']);
+  });
+
+  it('decoration: underline, strike and the reset marker go; a link keeps its underline', () => {
+    const doc = rteDoc([
+      {
+        text: 'Plain ',
+        marks: [
+          roleMark({ textDecoration: 'underline', textDecorationReset: true }),
+          { type: 'underline' },
+          { type: 'strike' },
+        ],
+      },
+      { text: 'marked link', marks: [LINK, { type: 'underline' }] },
+      {
+        text: 'migrated link',
+        marks: [roleMark({ textDecoration: 'underline' }), LINK],
+      },
+    ]);
+
+    const [plain, markedLink, migratedLink] = runsOf(
+      relinkRoleChangedMarks(doc as any, ['textDecoration'], undefined),
+    );
+
+    expect(textStyleOf(plain)).toEqual({
+      textDecoration: 'var(--role-text-decoration)',
+    });
+    expect(markTypes(plain)).toEqual(['textStyle']);
+    expect(markTypes(markedLink)).toEqual(['link', 'underline']);
+    expect(textStyleOf(migratedLink)?.textDecoration).toBe(
+      'var(--role-text-decoration)',
+    );
+    expect(markTypes(migratedLink)).toContain('underline');
+  });
+
+  it('keepRuns: a named run keeps every literal and mark', () => {
+    const kept = {
+      text: 'Taste',
+      marks: [roleMark({ fontWeight: '700' }), { type: 'bold' }],
+    };
+    const doc = rteDoc([
+      kept,
+      { text: ' rest', marks: [roleMark({ fontWeight: '700' })] },
+    ]);
+
+    const [keptRun, rest] = runsOf(
+      relinkRoleChangedMarks(doc as any, ['fontWeight'], ['Taste']),
+    );
+
+    expect(keptRun).toEqual({ type: 'text', ...kept });
+    expect(textStyleOf(rest)?.fontWeight).toBe('var(--role-font-weight)');
+  });
+
+  it('a family-only change leaves bold, italic, underline and strike alone', () => {
+    const doc = rteDoc([
+      {
+        text: 'Styled',
+        marks: [
+          roleMark({ fontFamily: 'Georgia', textDecoration: 'underline' }),
+          { type: 'bold' },
+          { type: 'italic' },
+          { type: 'underline' },
+          { type: 'strike' },
+        ],
+      },
+    ]);
+
+    const [run] = runsOf(
+      relinkRoleChangedMarks(doc as any, ['fontFamily'], undefined),
+    );
+
+    expect(textStyleOf(run)).toEqual({
+      fontFamily: 'var(--role-font-family)',
+      textDecoration: 'underline',
+    });
+    expect(markTypes(run)).toEqual([
+      'textStyle',
+      'bold',
+      'italic',
+      'underline',
+      'strike',
+    ]);
+  });
+
+  it('plain fields drop their emphasis literal: button label, nav default + selected, footer copyright', () => {
+    const content = {
+      id: 'c1',
+      type: 'mailing-list',
+      buttonText: 'Subscribe',
+      buttonTextStyle: { textStyleType: 'button', fontWeight: 'bold' },
+    } as unknown as Content;
+    const pageHeaderDesktop = {
+      navigation: {
+        defaultButtonStyle: {
+          textStyleType: 'paragraph1',
+          fontStyle: 'italic',
+        },
+        selectedButtonStyle: { fontStyle: 'italic', color: '#111111' },
+      },
+    };
+    const pageFooterDesktop = {
+      copyrightText: 'All rights reserved',
+      copyrightStyle: {
+        textStyleType: 'paragraph1',
+        textDecoration: 'underline',
+      },
+    };
+    const model = makeModel([content], {
+      pageHeaderDesktop,
+      pageFooterDesktop,
+    } as unknown as Partial<BrandPageModel>);
+
+    propagateRolePropsToContents(model, {
+      button: { fontWeight: 'normal' },
+      paragraph1: { fontStyle: 'normal', textDecoration: 'none' },
+    });
+
+    const button = (
+      model.pages[0].contents[0] as unknown as Record<
+        string,
+        Record<string, unknown>
+      >
+    ).buttonTextStyle;
+    const navigation = (
+      model.pageHeaderDesktop as unknown as {
+        navigation: Record<string, Record<string, unknown>>;
+      }
+    ).navigation;
+    const copyright = (
+      model.pageFooterDesktop as unknown as {
+        copyrightStyle: Record<string, unknown>;
+      }
+    ).copyrightStyle;
+
+    expect(button).toEqual({ textStyleType: 'button' });
+    expect(navigation.defaultButtonStyle.fontStyle).toBeUndefined();
+    expect(navigation.selectedButtonStyle).toEqual({ color: '#111111' });
+    expect(copyright).toEqual({ textStyleType: 'paragraph1' });
+  });
+
+  it('GlobalStylesBuilder: heading1 bold when heading1 is already bold relinks migration-pinned normal runs and the titleStyle', async () => {
+    const model = {
+      styles: {
+        textStyles: {
+          textStyleOptions: {
+            heading1: { style: { fontWeight: 'bold' }, isModified: false },
+          },
+        },
+        buttonStyles: { style: {} },
+        backgroundStyles: { style: {} },
+      },
+      pages: [
+        {
+          id: 'p1',
+          contents: [
+            {
+              id: 'c1',
+              type: 'banner-section',
+              title: rteDoc([
+                {
+                  text: 'Grand Opening',
+                  marks: [roleMark({ fontWeight: 'normal' })],
+                },
+              ]),
+              titleStyle: { textStyleType: 'heading1', fontWeight: 'normal' },
+            },
+          ],
+        },
+      ],
+    } as unknown as BrandPageModel;
+
+    const { model: result, errors } = await new GlobalStylesBuilder({
+      id: 'g1',
+      type: BUILDER_TYPES.UPDATE_GLOBAL_STYLES,
+      payload: {
+        textStyles: {
+          textStyleOptions: { heading1: { style: { fontWeight: 'bold' } } },
+        },
+      },
+    }).buildAsync(model);
+    const content = result.pages[0].contents[0] as unknown as Record<
+      string,
+      unknown
+    >;
+
+    expect(errors ?? []).toEqual([]);
+    expect(firstMarkAttrs(content.title)?.fontWeight).toBe(
+      'var(--role-font-weight)',
+    );
+    expect(content.titleStyle).toEqual({ textStyleType: 'heading1' });
+  });
+});