@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/lib/src/brand-page/utils/text-style.util.js

@@ -1,31 +1,131 @@
 /**
  * The element ↔ global-text-style resolution rules, in ONE place.
  *
- * Deliberately a leaf module with no imports so both the renderer
- * (`view-model.util.ts`) and the maker's Text Style panel can consume it. They
- * resolved colour independently and drifted, so the sidebar contradicted the canvas —
- * import from here rather than restating the chain.
+ * A near-leaf module: its only dependency is the role model (`styles.model`, a lower-level
+ * module with no back-edge to here, so no cycle). Both the renderer (`view-model.util.ts`) and
+ * the maker's Text Style panel consume it — they resolved colour independently and drifted, so
+ * the sidebar contradicted the canvas — import from here rather than restating the chain.
+ *
+ * MIGRATION-22 SNAPSHOT DEPENDENCY: `normalizeTextStyleAgainstRole` is called by its reconnect
+ * path. Do not change normalisation semantics after migration-22 releases without first pinning
+ * that migration's implementation.
  */
+import { CANONICAL_TEXT_STYLE_TYPES, } from '../models/styles.model';
+import { composeTextDecoration, NEUTRAL_TYPOGRAPHY_VALUE, TEXT_STYLE_CASCADE_PROPS, } from '@shared/text-role-typography.util';
+export { composeTextDecoration, NEUTRAL_TYPOGRAPHY_VALUE, rteTextDecorationClassName, TEXT_STYLE_CASCADE_PROPS, } from '@shared/text-role-typography.util';
+export { omitTypography, pickTypography, } from '@shared/text-role-typography.util';
 /**
- * **`color` cascades; typography does not.** A global text style
- * (`textStyleOptions[type]`) is only a *default* for colour: the element's own
- * `color` wins. Every other property still comes from the global style wholesale —
- * that all-or-nothing behaviour is deliberately unchanged, so don't "fix" the
- * inconsistency by reverting this; the resolution is to make every property cascade.
- *
- * The **site-wide default** (`textStyleOptions.paragraphs.style.color`) is
- * deliberately NOT in this chain — it reaches the text by CSS inheritance from the
- * root element (`Page.mixin.ts` → `rootElementStyles`). So `undefined` here validly
- * means "inherit", and mappers must not pre-seed the site default into an element
- * style (it would read as an element override and beat the global text style).
+ * BP-5969 (ADR-0020): **a role no longer contributes colour** — a text role defines
+ * typography only. Colour resolves element-first, then an optional container middle
+ * rung; with neither set it falls to the page base coat by CSS inheritance from the
+ * root element (`Page.mixin.ts` → `rootElementStyles`), so `undefined` here validly
+ * means "inherit" and mappers must not pre-seed a default into an element style.
  *
  * Empty-string is treated as unset (`||`, not `??`) — a cleared colour field falls
- * back to the global style rather than painting an invalid value.
+ * through rather than painting an invalid value.
+ *
+ * `fallbackBeforeGlobal` is the container middle rung: a context-derived default that
+ * wins over the base coat but still yields to an explicit element colour. Only
+ * container-bound blocks supply it (text on the block's own filled surface must
+ * contrast that surface, not the page — see `container-text-color.util.ts`).
+ */
+export const resolveTextColor = (elementStyle, fallbackBeforeGlobal) => elementStyle?.color || fallbackBeforeGlobal;
+/**
+ * BP-5969 — the per-property text-style cascade (ADR-0019). Supersedes the old
+ * all-or-nothing rule (where a linked element took ALL typography from the role and
+ * only colour cascaded). Every typography property now resolves independently:
+ * `element[prop] ?? role[prop]`, so an element can override one property and keep the
+ * rest following its role. Empty-string is treated as unset (`||`, matching
+ * `resolveTextColor`) — a cleared field falls back to the role, and `'0'`
+ * (a valid letter-spacing) stays truthy.
+ *
+ * Colour keeps its own three-rung cascade via `resolveTextColor` (with the optional
+ * container `fallbackBeforeGlobal` middle rung). Alignment is deliberately absent —
+ * it is section-level, never a role property, and must not be resolved here.
+ */
+/**
+ * What the role CSS emits for a prop the role leaves unset. Props a role always defines (family /
+ * size / line-height) have none.
+ */
+const isUnsetTypography = (value) => value === undefined || value === null || value === '';
+// An unset role prop renders as its neutral, so `fontStyle: 'normal'` under a role with no
+// fontStyle is role-equal; under an italic role it is the override that turns italic off.
+const effectiveRoleValue = (prop, value) => isUnsetTypography(value) ? NEUTRAL_TYPOGRAPHY_VALUE[prop] : value;
+const isZeroLetterSpacing = (value) => typeof value === 'string' && /^[+-]?0(?:\.0+)?(?:em|rem|px)?$/.test(value);
+const typographyValuesMatch = (prop, value, roleValue) => value === roleValue ||
+    (prop === 'letterSpacing' &&
+        isZeroLetterSpacing(value) &&
+        isZeroLetterSpacing(roleValue));
+/**
+ * BP-5969 (ADR-0019) — the WRITE-side mirror of `overrideTypographyStyle`: drop any typography
+ * override equal to the block's linked role, so the persisted style stays a sparse diff and a later
+ * role edit repaints the block via the page-scoped role CSS. Colour, alignment and `applyAutoScale`
+ * are untouched. No-op for a non-style value, a legacy/unlinked role (no role class to fall back
+ * on), or an absent role table — the value passes through unchanged.
+ *
+ * Pure: the caller supplies the role table, so the maker store and the AI metadata builder share
+ * one normalization authority instead of drifting.
+ */
+export const normalizeTextStyleAgainstRole = (value, textStyleOptions) => {
+    const style = value;
+    const type = style?.textStyleType;
+    if (!style ||
+        typeof style !== 'object' ||
+        !type ||
+        !CANONICAL_TEXT_STYLE_TYPES.includes(type)) {
+        return value;
+    }
+    const role = textStyleOptions?.[type]?.style;
+    if (!role)
+        return value;
+    const normalized = { ...style };
+    for (const prop of TEXT_STYLE_CASCADE_PROPS) {
+        if (!(prop in normalized))
+            continue;
+        // An empty value is no override either: the resolver falls it through to the role.
+        if (isUnsetTypography(normalized[prop]) ||
+            typographyValuesMatch(prop, effectiveRoleValue(prop, normalized[prop]), effectiveRoleValue(prop, role[prop]))) {
+            delete normalized[prop];
+        }
+    }
+    return normalized;
+};
+export const resolveTextStyle = (elementStyle, roleStyle, fallbackBeforeGlobal) => {
+    const resolved = {};
+    for (const prop of TEXT_STYLE_CASCADE_PROPS) {
+        resolved[prop] =
+            prop === 'textDecoration'
+                ? composeTextDecoration(roleStyle?.[prop], elementStyle?.[prop])
+                : elementStyle?.[prop] || roleStyle?.[prop];
+    }
+    resolved.color = resolveTextColor(elementStyle, fallbackBeforeGlobal);
+    return resolved;
+};
+/**
+ * BP-5969 (ADR-0019, Option B) — the render-time inverse of `resolveTextStyle`.
+ * The role's typography is supplied by a page-scoped CSS class (`text-role-css.util`),
+ * so a linked block must inline ONLY the props that DIFFER from its role — those beat
+ * the class by specificity; the rest fall through to the class, and editing the role
+ * repaints them for free. Colour is deliberately absent (it isn't in the class — it
+ * stays on its own cascade / on RTE marks).
+ *
+ * `roleStyle` undefined (no role in scope, or a non-canonical/unlinked block) returns
+ * every present typography prop — i.e. the caller bakes the full resolved style inline,
+ * exactly as before this change. That is the safe fallback: the render stays
+ * pixel-identical when the role isn't visible to the renderer.
  *
- * `fallbackBeforeGlobal` is an optional middle rung: a context-derived default that
- * wins over the global style but still yields to an explicit element colour. Only
- * container-bound blocks supply it (text sitting on the block's own filled surface
- * must contrast that surface, not the page — see `container-text-color.util.ts`).
- * Omitting it is byte-for-byte the original two-rung cascade.
+ * Empty-string / null are treated as unset (matching the `||` in the resolvers), and
+ * `'0'` (a valid letter-spacing) stays.
  */
-export const resolveTextColor = (elementStyle, globalStyle, fallbackBeforeGlobal) => elementStyle?.color || fallbackBeforeGlobal || globalStyle?.color;
+export const overrideTypographyStyle = (resolvedStyle, roleStyle) => {
+    const overrides = {};
+    for (const prop of TEXT_STYLE_CASCADE_PROPS) {
+        const value = resolvedStyle?.[prop];
+        if (value === undefined || value === null || value === '')
+            continue;
+        if (roleStyle && value === roleStyle[prop])
+            continue; // the class supplies it
+        overrides[prop] = value;
+    }
+    return overrides;
+};

package/lib/src/brand-page/utils/view-model.util.d.ts

@@ -1,4 +1,4 @@
-import type { ImageContent, ProfileContent, TextContent, PageStyles, Content, BrandPageModel, ImageGalleryContent, GalleryStyles, MailingListContent, ContactFormContent, BannerSectionContent, ImagesSectionContent, BrandPageType, PageHeaderDesktop, PageFooterDesktop, PageFooterMobile, PageHeaderMobile, LogoImageModel, LogoTemplateImageModel, BookingSectionContent, NavModel } from '../models';
+import type { ImageContent, ProfileContent, TextContent, PageStyles, Content, BrandPageModel, ImageGalleryContent, GalleryStyles, MailingListContent, ContactFormContent, BannerSectionContent, ImagesSectionContent, BrandPageType, TextStyleDeclaration, TextStyles, PageHeaderDesktop, PageFooterDesktop, PageFooterMobile, PageHeaderMobile, LogoImageModel, LogoTemplateImageModel, BookingSectionContent, NavModel } from '../models';
 import type { ImageViewModel, LogoViewModel, ProfileViewModel, TextViewModel, ContentViewModel, BrandPageViewModel, ImageGalleryViewModel, MailingListViewModel, ContactFormViewModel, PageViewModel, BannerSectionViewModel, PageHeaderViewModel, PageFooterViewModel, TextImageSectionViewModel, BookingSectionViewModel, PageStylesViewModel, NavViewModel } from '../view-models';
 import type { ContentTextStylePropertyKey } from '../constants';
 export declare const applyViewModelTextStyles: <T extends ContentViewModel>(content: T, styles: PageStyles, containerDefaults?: Partial<Record<ContentTextStylePropertyKey, string>>) => T;
@@ -13,6 +13,13 @@ export declare const mapToImagesSectionViewModel: (content: ImagesSectionContent
 export declare const mapToBookingSectionViewModel: (content: BookingSectionContent, styles: PageStyles) => BookingSectionViewModel;
 export declare const mapToNavViewModel: (nav: NavModel, brandPageSlug?: string, isCustomDomain?: boolean) => NavViewModel;
 export declare const mapToPageStyleViewModel: (pageStyles: PageStyles, options: ViewModelMappingOptions) => PageStylesViewModel;
+/**
+ * The Save Contact label's typography: only its own field, plus its role. Save Contact only ever
+ * draws through Button text (S8) — whatever role the stored field names, canonical or retired,
+ * is normalised to it, so a stray role never reaches this label. `TextWrapper` then references
+ * the role for the rest, the same as any other role-linked text.
+ */
+export declare const resolveSaveContactTitleStyle: (buttonTextStyle: TextStyleDeclaration | undefined, textStyles: TextStyles | undefined) => TextStyleDeclaration;
 export declare const mapToPageHeaderViewModel: (pageHeader: PageHeaderDesktop | PageHeaderMobile, pageStyles: PageStyles, pages: PageViewModel[], useOldLogoRenderSize?: boolean) => PageHeaderViewModel;
 export declare const mapToPageFooterViewModel: (pageFooter: PageFooterDesktop | PageFooterMobile, pageStyles: PageStyles, useOldLogoRenderSize?: boolean) => PageFooterViewModel;
 export declare const mapToViewModel: (styles: PageStyles, brandPageType: BrandPageType, options: ViewModelMappingOptions) => (content: Content) => ContentViewModel | undefined;
@@ -40,6 +47,7 @@ export declare const applyLogoImageToBrandPageModel: (model: BrandPageModel, log
 export declare const applyLogoTemplateImageToBrandPageViewModel: (viewModel: BrandPageViewModel, logoTemplateImage: LogoTemplateImageModel) => BrandPageViewModel;
 export interface CriticalResourceURLs {
     images: string[];
+    /** Always empty: the renderer layout preloads every font (`0036-retire-text-font-family.md`). */
     fonts: string[];
     shapes: string[];
 }

package/lib/src/brand-page/utils/view-model.util.js

@@ -1,20 +1,22 @@
 import { reactive } from 'vue';
+import { collectRteTextColors } from '@shared/color-strategies/rte-color';
 import { assertUnreachable } from '../../helpers/ts.helper';
-import { ButtonStyles, TEXT_STYLE_TYPES, VIEWPORTS } from '../models';
+import { ButtonStyles, TEXT_STYLE_TYPES, VIEWPORTS, isLegacyTextStyleType, isCanonicalTextStyleType, } from '../models';
 import { NavigationMobile, NavigationDesktop, BRAND_PAGE_TYPES, BUTTON_LINK_TYPE, NavigationMenuStyles, } from '../models';
 import { backgroundColorFromStyle, isTransparentColour, mutedTextForBackground, withColorOpacity, } from './color.util';
 import { resolveColorReference } from './color-palette.util';
-import { containerTextColorDefaults, containerSurfaceForContent, } from './container-text-color.util';
-import { CONTENT_TEXT_STYLE_PROPERTY_KEYS, FALLBACK_DEFAULT_LINK_COLOR, FONT_SIZE_BODY, LINE_HEIGHT_BODY, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH, FONT_FAMILY_CONFIGS, isGoogleType, LINE_HEIGHT_HEADINGS, FONT_SIZE_HEADINGS, DEFAULT_TEXT_ALIGN, IMAGE_RESOLUTION_PRESETS, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, } from '../constants';
+import { containerTextColorDefaults, containerSurfaceForContent, titleSurfaceContrastFill, } from './container-text-color.util';
+import { CONTENT_TEXT_STYLE_PROPERTY_KEYS, FALLBACK_DEFAULT_LINK_COLOR, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH, DEFAULT_TEXT_ALIGN, IMAGE_RESOLUTION_PRESETS, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, } from '../constants';
 import uniq from 'lodash/uniq';
-import { generateGoogleFontUrl } from './font-loader.util';
 import { isValidSvgUrl } from './image.util';
 import { isLogoContent } from './model.util';
-import { resolveTextColor } from './text-style.util';
+import { resolveTextColor, pickTypography } from './text-style.util';
+import { contentFieldReconnectSpec, computeLegacyTargets, bestFitRole, } from './text-role-reconnect.util';
 import { getBoxShadowValue, sectionFrameStyle } from './button.util';
 import { findNavItemByPageId, getRouteNameByPageIndex, getRouteParamsByPage, } from './route.util';
 import { hasRTEContent, isTiptapDocument } from '../../brand-page-maker/utils';
-import { getPageIdFromHref, isHrefPageId, } from '../../brand-page-maker/composables/rich-text-editor/hyperlink';
+import { getPageIdFromHref } from '../../brand-page-maker/composables/rich-text-editor/hyperlink';
+import { isHrefPageId } from '@shared/rte-link.util';
 const BUTTON_BORDER_RADIUS = '9999px';
 const CONTENT_BORDER_RADIUS = '48px';
 const PROFILE_PADDING_TOP = '1rem';
@@ -33,53 +35,66 @@ const applyDefaultViewModelTextStyle = (textStyle) => {
         wordBreak: 'normal',
     });
 };
-const getTextStyleByContentTextStyle = (contentTextStyle, textStyleOptions) => {
+const getTextStyleByContentTextStyle = (contentTextStyle, textStyleOptions, startingRole) => {
     if (!contentTextStyle) {
         return undefined;
     }
-    if (contentTextStyle.textStyleType) {
-        const textStyle = textStyleOptions[contentTextStyle.textStyleType].style;
-        return Object.assign({}, textStyle, {
-            // Links keep a concrete last resort — they must never inherit.
-            color: resolveTextColor(contentTextStyle, textStyle) ||
-                FALLBACK_DEFAULT_LINK_COLOR,
-            fontWeight: textStyle.fontWeight || undefined,
-            fontStyle: textStyle.fontStyle || undefined,
-            letterSpacing: textStyle.letterSpacing || undefined,
-            lineHeight: textStyle.lineHeight || undefined,
-            textDecoration: textStyle.textDecoration || undefined,
-            textStyleType: textStyle.textStyleType || undefined,
-        });
-    }
-    return contentTextStyle;
+    // Page data keeps only what the field itself sets; the painter references the role for the
+    // rest (`roleTypographyStyle`). Links keep a concrete colour last resort — they must never
+    // inherit.
+    return Object.assign({}, pickTypography(contentTextStyle), {
+        color: resolveTextColor(contentTextStyle) || FALLBACK_DEFAULT_LINK_COLOR,
+        textStyleType: fallbackTextRole(undefined, 
+        // Both call sites always pass a startingRole, which fallbackTextRole returns before it
+        // ever consults key — so no key value reaches contentFieldReconnectSpec here.
+        '', contentTextStyle, textStyleOptions, startingRole),
+    });
 };
-const getCopyrightTextStyle = (contentTextStyle, textStyleOptions) => {
-    if (contentTextStyle.textStyleType) {
-        const textStyleOption = textStyleOptions[contentTextStyle.textStyleType].style;
-        if (textStyleOption) {
-            return applyDefaultViewModelTextStyle(Object.assign({}, textStyleOption, {
-                applyAutoScale: contentTextStyle.applyAutoScale,
-                textAlign: contentTextStyle.textAlign || DEFAULT_TEXT_ALIGN,
-                color: resolveTextColor(contentTextStyle, textStyleOption),
-            }));
-        }
+const getCopyrightTextStyle = (contentTextStyle, textStyleOptions) => applyDefaultViewModelTextStyle(Object.assign({}, pickTypography(contentTextStyle), {
+    color: resolveTextColor(contentTextStyle),
+    applyAutoScale: contentTextStyle.applyAutoScale,
+    textAlign: contentTextStyle.textAlign || DEFAULT_TEXT_ALIGN,
+    textStyleType: fallbackTextRole(undefined, 'copyrightStyle', contentTextStyle, textStyleOptions),
+}));
+/**
+ * BP-5969 (R3) — the role a field draws through once it has no built-in default to fall back
+ * on: its own role when that's one of the ten; else an explicit `startingRole`, when the caller
+ * already knows it (S3: nav tabs and the hamburger reshape their key/content-type past what
+ * `contentFieldReconnectSpec` recognises, and `mapToButtonViewModel`'s callers reuse the
+ * SECTION's content type, not a button one — passing the role the upgrade actually assigns
+ * removes the dependency on either matching); else the field's starting role
+ * (`contentFieldReconnectSpec`, e.g. every button label is on Button text); else a retired
+ * role's successor (`computeLegacyTargets`); else the role nearest its own size, or Paragraph 1
+ * (`bestFitRole`). The same rule the upgrade and the AI boundary use (ADR 0021) — a field never
+ * reaches the page with no role, so a painter always has one to reference.
+ */
+const fallbackTextRole = (contentType, key, ownStyle, textStyleOptions, startingRole) => {
+    const type = ownStyle?.textStyleType;
+    if (isCanonicalTextStyleType(type))
+        return type;
+    if (startingRole)
+        return startingRole;
+    const spec = contentFieldReconnectSpec(contentType, key);
+    if (spec.startingRole)
+        return spec.startingRole;
+    if (isLegacyTextStyleType(type)) {
+        return computeLegacyTargets(textStyleOptions)[type];
     }
-    return applyDefaultViewModelTextStyle(contentTextStyle);
+    return bestFitRole(ownStyle, spec.family);
 };
 const getTextStyleByContentTextStyleProperty = (content, contentPropKey, textStyleOptions, containerDefault) => {
     const contentTextStyle = content[contentPropKey];
-    if (contentTextStyle.textStyleType) {
-        const textStyleOption = textStyleOptions[contentTextStyle.textStyleType];
-        if (textStyleOption) {
-            return applyDefaultViewModelTextStyle(Object.assign({}, textStyleOption.style, {
-                applyAutoScale: contentTextStyle.applyAutoScale,
-                textAlign: contentTextStyle.textAlign || DEFAULT_TEXT_ALIGN,
-                textStyleType: contentTextStyle.textStyleType,
-                color: resolveTextColor(contentTextStyle, textStyleOption.style, containerDefault),
-            }));
-        }
-    }
-    return applyDefaultViewModelTextStyle(contentTextStyle);
+    // BP-5969 (R1): page data keeps only what the field sets itself. Typography no longer
+    // merges the role's values in — the painter references the role for the rest
+    // (`roleTypographyStyle`/`fillRteRunTypography`). Colour keeps its own cascade (element,
+    // else the container default). Every field draws through a canonical role, real or a
+    // fallback (R3), so `textStyleType` is never legacy or missing in page data.
+    return applyDefaultViewModelTextStyle(Object.assign({}, pickTypography(contentTextStyle), {
+        color: resolveTextColor(contentTextStyle, containerDefault),
+        applyAutoScale: contentTextStyle.applyAutoScale,
+        textAlign: contentTextStyle.textAlign || DEFAULT_TEXT_ALIGN,
+        textStyleType: fallbackTextRole(content.type, contentPropKey, contentTextStyle, textStyleOptions),
+    }));
 };
 export const applyViewModelTextStyles = (content, styles, containerDefaults = {}) => {
     Object.keys(CONTENT_TEXT_STYLE_PROPERTY_KEYS)
@@ -91,17 +106,19 @@ export const applyViewModelTextStyles = (content, styles, containerDefaults = {}
 };
 const applyViewModelTextItemTextStyles = (textItems, styles) => {
     return textItems.map((item) => {
-        let itemTextStyle = item.textStyle;
-        if (item.textStyle?.textStyleType) {
-            const textStyleOption = styles.textStyles?.textStyleOptions?.[item.textStyle.textStyleType];
-            itemTextStyle = {
-                ...textStyleOption?.style,
-                applyAutoScale: itemTextStyle.applyAutoScale,
-                textAlign: itemTextStyle.textAlign || DEFAULT_TEXT_ALIGN,
-                textStyleType: itemTextStyle.textStyleType || undefined,
-                color: resolveTextColor(itemTextStyle, textStyleOption?.style),
-            };
-        }
+        // S6 — an item with no textStyle at all (no `?.` on the old code's own reads) threw in
+        // pickTypography/bestFitRole; falling back to `{}` gives every read below the same optional
+        // chaining an own textStyle already has.
+        const ownStyle = item.textStyle ?? {};
+        // BP-5969 (ADR-0020, R1): the item's style object is a slim role link (`RteTextRole`) that
+        // keeps only its own typography — the role is a reference the RTE run resolves at render
+        // (`fillRteRunTypography`). Colour rides the RTE mark, alignment the doc node.
+        const itemTextStyle = {
+            ...pickTypography(ownStyle),
+            applyAutoScale: ownStyle.applyAutoScale,
+            textAlign: ownStyle.textAlign || DEFAULT_TEXT_ALIGN,
+            textStyleType: fallbackTextRole(undefined, 'textItems', ownStyle, styles.textStyles?.textStyleOptions),
+        };
         return {
             ...item,
             textStyle: itemTextStyle,
@@ -201,7 +218,12 @@ const mapToButtonViewModel = (content, styles, options) => {
         },
         selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
     };
-    // Extract only text-related properties from titleStyle, excluding button styling properties
+    // Extract only text-related properties from titleStyle, excluding button styling properties.
+    // No built-in line-height default (R3): an unset label follows its role, real or a fallback.
+    // Every `mapToButtonViewModel` label starts on Button text (S3): some callers (the banner/
+    // booking/images section CTA) reuse the SECTION's own content type here, which
+    // `contentFieldReconnectSpec` doesn't recognise as button content, so an explicit
+    // `startingRole` is passed rather than relying on that match.
     const textOnlyProperties = {
         color: options.titleStyle?.color,
         fontFamily: options.titleStyle?.fontFamily,
@@ -209,8 +231,8 @@ const mapToButtonViewModel = (content, styles, options) => {
         fontWeight: options.titleStyle?.fontWeight,
         textAlign: options.titleStyle?.textAlign,
         letterSpacing: options.titleStyle?.letterSpacing,
-        lineHeight: options.titleStyle?.lineHeight || LINE_HEIGHT_HEADINGS,
-        textStyleType: options.titleStyle?.textStyleType,
+        lineHeight: options.titleStyle?.lineHeight,
+        textStyleType: fallbackTextRole(content.type, 'titleStyle', options.titleStyle ?? {}, styles.textStyles?.textStyleOptions, 'button'),
         applyAutoScale: options.titleStyle?.applyAutoScale,
         textDecoration: options.titleStyle?.textDecoration,
         fontStyle: options.titleStyle?.fontStyle,
@@ -245,21 +267,13 @@ export const mapToProfileViewModel = (content, styles) => {
         }
         : undefined;
     containerStyle = applyContentBorderRadius(containerStyle);
-    const titleStyle = {
-        ...content.titleStyle,
-        fontSize: content.titleStyle?.fontSize || FONT_SIZE_BODY,
-        lineHeight: content.titleStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
+    // R3: no built-in size or line height. An unset field draws through its role — real, or a
+    // fallback nearest its own size (`fallbackTextRole`, dispatched generically below).
+    const titleStyle = { ...content.titleStyle };
     const descriptionStyle = {
         ...content.descriptionStyle,
-        fontSize: content.descriptionStyle?.fontSize || FONT_SIZE_BODY,
-        lineHeight: content.descriptionStyle?.lineHeight || LINE_HEIGHT_BODY,
-    };
-    const nameStyle = {
-        ...content.nameStyle,
-        fontSize: content.nameStyle?.fontSize || FONT_SIZE_HEADINGS,
-        lineHeight: content.nameStyle?.lineHeight || LINE_HEIGHT_HEADINGS,
     };
+    const nameStyle = { ...content.nameStyle };
     return applyViewModelTextStyles({
         ...content,
         role: content.type,
@@ -280,12 +294,9 @@ export const mapToTextViewModel = (content, styles, brandPageType) => {
         }
         : undefined;
     containerStyle = applyContentBorderRadius(containerStyle);
-    /* For text content text style backward compatibility */
+    // Migration-22 folds legacy textSize/alignment/colour into textStyle. Rendering only reads the
+    // canonical field, so a post-migration page has no runtime legacy-style fallback.
     const contentTextStyle = {
-        lineHeight: LINE_HEIGHT_BODY,
-        ...content.textSize,
-        ...content.textAlignment,
-        ...content.textColor,
         ...content.textStyle,
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -337,11 +348,8 @@ export const mapToMailingListViewModel = (content, styles) => {
         },
         selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
     };
-    const titleStyle = {
-        fontSize: FONT_SIZE_BODY,
-        fontWeight: 'bold',
-        ...content.titleStyle,
-    };
+    // R3: no built-in size or bold. An unset title draws through its role, real or a fallback.
+    const titleStyle = { ...content.titleStyle };
     const viewModel = applyViewModelTextStyles({
         ...content,
         role: content.type,
@@ -352,14 +360,14 @@ export const mapToMailingListViewModel = (content, styles) => {
     // The disclosure sits on the block's card, not the button. The card can differ from
     // the button fill (it defaults to the neutral-light role), so anchor the muted colour
     // to the same surface the title uses (the block's own fill, else the button fill).
-    viewModel.disclosureColor = disclosureColorFor(containerSurfaceForContent(content, styles) ?? viewModel.styles?.style, viewModel.titleStyle?.color, styles.colors);
+    viewModel.disclosureColor = disclosureColorFor(containerSurfaceForContent(content, styles) ?? viewModel.styles?.style, 
+    // BP-5969 (ADR-0020): the RTE title's colour lives in its mark, not the style object.
+    collectRteTextColors(content.title)?.colors[0], styles.colors);
     return viewModel;
 };
 const mapToSupportMeViewModel = (content, styles) => {
-    const titleStyle = {
-        fontWeight: 'bold',
-        ...content.titleStyle,
-    };
+    // R3: no built-in bold. An unset title draws through its role, real or a fallback.
+    const titleStyle = { ...content.titleStyle };
     return applyViewModelTextStyles({
         ...content,
         role: content.type,
@@ -439,7 +447,9 @@ export const mapToContactFormViewModel = (content, styles, brandPageType) => {
         isFullWidth: brandPageType === BRAND_PAGE_TYPES.brandSite &&
             content.layoutStyle !== '',
     }, styles, containerTextColorDefaults(content, styles, brandPageType));
-    viewModel.disclosureColor = disclosureColorFor(contactFormDisclosureSurface(viewModel, brandPageType), viewModel.titleStyle?.color, styles.colors);
+    viewModel.disclosureColor = disclosureColorFor(contactFormDisclosureSurface(viewModel, brandPageType), 
+    // BP-5969 (ADR-0020): the RTE title's colour lives in its mark, not the style object.
+    collectRteTextColors(content.title)?.colors[0], styles.colors);
     return viewModel;
 };
 const mapGettyVideoToGettyVideoViewModel = (media, options) => {
@@ -572,7 +582,7 @@ const mapToShapesSectionViewModel = (content, styles, brandPageType) => {
         items: processedItems,
     }, styles);
 };
-const mapToShopViewModel = (content, styles) => {
+const mapToShopViewModel = (content, styles, brandPageType) => {
     const buttonStyles = new ButtonStyles({
         selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
         style: {
@@ -594,6 +604,11 @@ const mapToShopViewModel = (content, styles) => {
         },
         isFullWidth: true,
         isShippingEnabled: content.shopPaymentConfig?.isShippingEnabled ?? false,
+        // No page base coat to inherit (ADR-0020): the "no products" label is a fixed
+        // string, not a text field, so it takes the title's own colour when the title has
+        // one, else the same contrast colour the title itself would fall back to.
+        noProductsColor: collectRteTextColors(content.title)?.colors[0] ??
+            titleSurfaceContrastFill(content, styles, brandPageType),
     }, styles);
 };
 const mapToTestimonialSectionViewModel = (content, styles) => {
@@ -616,14 +631,9 @@ const mapToSocialLinksViewModel = (content, styles, brandPageType) => {
         ...content,
         role: content.type,
         type: 'social-links',
-        // `titleStyle` takes no `color` pre-seed (see the testimonial mapper), but
-        // `iconFillStyles` KEEPS its seed: it is not a CONTENT_TEXT_STYLE_PROPERTY_KEYS
-        // entry, so no resolver touches it and nothing else supplies the icon colour.
+        // No `color` pre-seed (see the testimonial mapper). The icon fill is stored — baked at
+        // birth and by migration-22 — so it takes no seed either.
         titleStyle: { ...content.titleStyle },
-        iconFillStyles: {
-            fill: styles.textStyles?.textStyleOptions?.paragraphs?.style?.color,
-            ...content.iconFillStyles,
-        },
         isFullWidth: brandPageType === BRAND_PAGE_TYPES.brandSite,
     }, styles);
 };
@@ -704,7 +714,7 @@ const mapToHeaderButtonViewModel = (headerButton, styles) => {
         return undefined;
     }
     const titleStyle = headerButton.buttonTextStyle ?? {
-        textStyleType: TEXT_STYLE_TYPES.buttons,
+        textStyleType: TEXT_STYLE_TYPES.button,
     };
     const viewModel = mapToButtonViewModel({
         id: 'page-header-button',
@@ -742,6 +752,19 @@ const mapToHeaderButtonViewModel = (headerButton, styles) => {
         },
     };
 };
+/**
+ * The Save Contact label's typography: only its own field, plus its role. Save Contact only ever
+ * draws through Button text (S8) — whatever role the stored field names, canonical or retired,
+ * is normalised to it, so a stray role never reaches this label. `TextWrapper` then references
+ * the role for the rest, the same as any other role-linked text.
+ */
+export const resolveSaveContactTitleStyle = (buttonTextStyle, 
+// Unused: the label is always Button text (S8), so no role lookup is needed here — kept so
+// SaveContactWidget.vue's existing call site (`props.textStyles`) doesn't need to change.
+textStyles) => Object.assign({}, pickTypography(buttonTextStyle ?? {}), {
+    color: resolveTextColor(buttonTextStyle),
+    textStyleType: 'button',
+});
 export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLogoRenderSize = false) => {
     const viewport = pageHeader.viewport;
     const logoContent = {
@@ -758,11 +781,11 @@ export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLo
     const logoStyles = {
         imageStyle: pageStyles.logoStyles.imageStyle,
     };
-    const navDefaultButtonTextStyle = getTextStyleByContentTextStyle(pageHeader.navigation.defaultButtonStyle, pageStyles.textStyles.textStyleOptions);
+    const navDefaultButtonTextStyle = getTextStyleByContentTextStyle(pageHeader.navigation.defaultButtonStyle, pageStyles.textStyles.textStyleOptions, 'paragraph1');
     const navDefaultButtonStyle = Object.assign({}, pageHeader.navigation.defaultButtonStyle, navDefaultButtonTextStyle);
     const { backgroundColor: _defaultBg, ...navDefaultTextStyleWithoutBg } = navDefaultButtonTextStyle || {};
     const navSelectedButtonStyle = Object.assign({}, navDefaultTextStyleWithoutBg, pageHeader.navigation.selectedButtonStyle);
-    const hamburgerButtonTextStyle = getTextStyleByContentTextStyle(pageHeader.navigation.hamburgerMenuStyle.defaultButtonStyle, pageStyles.textStyles.textStyleOptions);
+    const hamburgerButtonTextStyle = getTextStyleByContentTextStyle(pageHeader.navigation.hamburgerMenuStyle.defaultButtonStyle, pageStyles.textStyles.textStyleOptions, 'button');
     const hamburgerButtonStyle = Object.assign({}, pageHeader.navigation.hamburgerMenuStyle.defaultButtonStyle, hamburgerButtonTextStyle);
     const { backgroundColor: _hamburgerDefaultBg, ...hamburgerTextStyleWithoutBg } = hamburgerButtonTextStyle || {};
     const hamburgerSelectedButtonStyle = Object.assign({}, hamburgerTextStyleWithoutBg, pageHeader.navigation.hamburgerMenuStyle.selectedButtonStyle);
@@ -833,7 +856,6 @@ export const mapToPageFooterViewModel = (pageFooter, pageStyles, useOldLogoRende
         iconStyle: { ...pageFooter.iconStyle },
         logo: mapToLogoViewModel(logoContent, logoStyles, useOldLogoRenderSize),
         socialLinks: pageFooter.socialLinks,
-        textFontFamily: pageFooter.textFontFamily,
     };
 };
 export const mapToViewModel = (styles, brandPageType, options) => (content) => {
@@ -859,7 +881,7 @@ export const mapToViewModel = (styles, brandPageType, options) => (content) => {
         case 'request-payment':
             return mapToRequestPaymentViewModel(content, styles);
         case 'shop-section':
-            return mapToShopViewModel(content, styles);
+            return mapToShopViewModel(content, styles, brandPageType);
         case 'profile':
             return mapToProfileViewModel(content, styles);
         case 'text':
@@ -959,6 +981,7 @@ export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, s
             ? {
                 isSavingEnabled: model.saveContactSettings.isSavingEnabled ?? true,
                 hideBranding: model.saveContactSettings.hideBranding ?? false,
+                buttonTextStyle: model.saveContactSettings.buttonTextStyle,
             }
             : { isSavingEnabled: true, hideBranding: false },
     };
@@ -1113,17 +1136,8 @@ export const applyLogoTemplateImageToBrandPageViewModel = (viewModel, logoTempla
  */
 export const getCriticalResourceURLs = (viewModel) => {
     let images = [];
-    let fonts = [];
     let shapes = [];
     try {
-        // fonts
-        const fontFamily = viewModel.styles?.textStyles?.textFontFamily;
-        if (typeof fontFamily !== 'undefined' && fontFamily.length) {
-            const fontConfig = FONT_FAMILY_CONFIGS[fontFamily];
-            if (isGoogleType(fontConfig)) {
-                fonts.push(generateGoogleFontUrl([fontConfig]));
-            }
-        }
         // shapes
         const bgShapeFullBg = viewModel.styles?.backgroundStylesViewModel.backgroundImageUrl;
         if (typeof bgShapeFullBg !== 'undefined' && isValidSvgUrl(bgShapeFullBg)) {
@@ -1139,7 +1153,6 @@ export const getCriticalResourceURLs = (viewModel) => {
         //     }
         //   });
         // }
-        fonts = uniq(fonts);
         images = uniq(images);
         shapes = uniq(shapes);
     }
@@ -1148,7 +1161,7 @@ export const getCriticalResourceURLs = (viewModel) => {
     }
     return {
         images,
-        fonts,
+        fonts: [],
         shapes,
     };
 };

package/lib/src/brand-page/view-models.d.ts

@@ -65,6 +65,7 @@ export interface ShopViewModel extends ContentViewModel, Omit<ShopContent, 'type
     buttonStyles: ButtonStyles;
     isFullWidth: boolean;
     isShippingEnabled: boolean;
+    noProductsColor?: string;
 }
 export interface ContactFormViewModel extends ContentViewModel, Omit<ContactFormContent, 'type'> {
     buttonStyles: ButtonStyles;

package/lib/src/brand-page-maker/components/action-bar/ActionBar.mixin.d.ts

@@ -66,6 +66,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         setHideBranding(payload: {
             hideBranding: boolean;
         }): void;
+        setSaveContactButtonTextStyle(payload: {
+            buttonTextStyle: import("@brand-page/models").SaveContactOptions["buttonTextStyle"];
+        }): void;
         setSensitiveContent(payload: {
             sensitiveContent: string;
         }): void;
@@ -128,7 +131,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: import("@brand-page/models").BrandPageType;
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page/models").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData: _shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData: _shopConfigData, isServerRenderOverride, isBlankSite, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page/models").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;