@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -1,4 +1,5 @@
 import { reactive } from 'vue';
+import { collectRteTextColors } from '@shared/color-strategies/rte-color';
 import { assertUnreachable } from '../../helpers/ts.helper';
 import type {
   ImageContent,
@@ -28,6 +29,7 @@ import type {
   ShapesSectionContent,
   TextStyleOptions,
   TextStyleDeclaration,
+  TextStyles,
   PageHeaderDesktop,
   PageFooterDesktop,
   PageFooterMobile,
@@ -47,8 +49,16 @@ import type {
   HeaderButton,
   ButtonLinkType,
   ContentType,
+  RteTextRole,
+} from '../models';
+import {
+  ButtonStyles,
+  TEXT_STYLE_TYPES,
+  VIEWPORTS,
+  isLegacyTextStyleType,
+  isCanonicalTextStyleType,
+  type CanonicalTextStyleType,
 } from '../models';
-import { ButtonStyles, TEXT_STYLE_TYPES, VIEWPORTS } from '../models';
 import {
   NavigationMobile,
   NavigationDesktop,
@@ -100,22 +110,17 @@ import { resolveColorReference } from './color-palette.util';
 import {
   containerTextColorDefaults,
   containerSurfaceForContent,
+  titleSurfaceContrastFill,
 } from './container-text-color.util';
 import type { ContentTextStylePropertyKey } from '../constants';
 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,
@@ -127,10 +132,14 @@ import {
   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,
@@ -138,10 +147,8 @@ import {
   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';
@@ -168,52 +175,82 @@ const applyDefaultViewModelTextStyle = (textStyle: TextStyleDeclaration) => {
 
 const getTextStyleByContentTextStyle = (
   contentTextStyle: TextStyleDeclaration | undefined,
-  textStyleOptions: TextStyleOptions,
+  textStyleOptions: Partial<TextStyleOptions> | undefined,
+  startingRole: CanonicalTextStyleType,
 ): Partial<TextStyleDeclaration> | undefined => {
   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: TextStyleDeclaration,
-  textStyleOptions: TextStyleOptions,
-): TextStyleDeclaration => {
-  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),
-        }),
-      );
-    }
+  textStyleOptions: Partial<TextStyleOptions> | undefined,
+): TextStyleDeclaration =>
+  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: string | undefined,
+  key: string,
+  ownStyle: TextStyleDeclaration | RteTextRole,
+  textStyleOptions: Partial<TextStyleOptions> | undefined,
+  startingRole?: CanonicalTextStyleType,
+): CanonicalTextStyleType => {
+  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 = (
@@ -224,26 +261,24 @@ const getTextStyleByContentTextStyleProperty = (
 ): TextStyleDeclaration => {
   const contentTextStyle = content[contentPropKey] as TextStyleDeclaration;
 
-  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 = <T extends ContentViewModel>(
@@ -274,20 +309,25 @@ const applyViewModelTextItemTextStyles = (
   styles: PageStyles,
 ): TextItem[] => {
   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: RteTextRole = {
+      ...pickTypography(ownStyle),
+      applyAutoScale: ownStyle.applyAutoScale,
+      textAlign: ownStyle.textAlign || DEFAULT_TEXT_ALIGN,
+      textStyleType: fallbackTextRole(
+        undefined,
+        'textItems',
+        ownStyle,
+        styles.textStyles?.textStyleOptions,
+      ),
+    };
 
     return {
       ...item,
@@ -429,7 +469,12 @@ const mapToButtonViewModel = (
     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,
@@ -437,8 +482,14 @@ const mapToButtonViewModel = (
     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,
@@ -487,23 +538,13 @@ export const mapToProfileViewModel = (
 
   containerStyle = applyContentBorderRadius(containerStyle);
 
-  const titleStyle: TextStyleDeclaration = {
-    ...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: TextStyleDeclaration = { ...content.titleStyle };
   const descriptionStyle: TextStyleDeclaration = {
     ...content.descriptionStyle,
-    fontSize: content.descriptionStyle?.fontSize || FONT_SIZE_BODY,
-    lineHeight: content.descriptionStyle?.lineHeight || LINE_HEIGHT_BODY,
-  };
-
-  const nameStyle: TextStyleDeclaration = {
-    ...content.nameStyle,
-    fontSize: content.nameStyle?.fontSize || FONT_SIZE_HEADINGS,
-    lineHeight: content.nameStyle?.lineHeight || LINE_HEIGHT_HEADINGS,
   };
+  const nameStyle: TextStyleDeclaration = { ...content.nameStyle };
 
   return applyViewModelTextStyles(
     {
@@ -538,12 +579,9 @@ export const mapToTextViewModel = (
 
   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: TextStyleDeclaration = {
-    lineHeight: LINE_HEIGHT_BODY,
-    ...content.textSize,
-    ...content.textAlignment,
-    ...content.textColor,
     ...content.textStyle,
   };
 
@@ -616,11 +654,8 @@ export const mapToMailingListViewModel = (
     selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
   };
 
-  const titleStyle: TextStyleDeclaration = {
-    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: TextStyleDeclaration = { ...content.titleStyle };
 
   const viewModel: MailingListViewModel = applyViewModelTextStyles(
     {
@@ -639,7 +674,8 @@ export const mapToMailingListViewModel = (
   // 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,
+    // BP-5969 (ADR-0020): the RTE title's colour lives in its mark, not the style object.
+    collectRteTextColors(content.title)?.colors[0],
     styles.colors,
   );
 
@@ -650,10 +686,8 @@ const mapToSupportMeViewModel = (
   content: SupportMeContent,
   styles: PageStyles,
 ): SupportMeViewModel => {
-  const titleStyle: TextStyleDeclaration = {
-    fontWeight: 'bold',
-    ...content.titleStyle,
-  };
+  // R3: no built-in bold. An unset title draws through its role, real or a fallback.
+  const titleStyle: TextStyleDeclaration = { ...content.titleStyle };
 
   return applyViewModelTextStyles(
     {
@@ -773,7 +807,8 @@ export const mapToContactFormViewModel = (
 
   viewModel.disclosureColor = disclosureColorFor(
     contactFormDisclosureSurface(viewModel, brandPageType),
-    viewModel.titleStyle?.color,
+    // BP-5969 (ADR-0020): the RTE title's colour lives in its mark, not the style object.
+    collectRteTextColors(content.title)?.colors[0],
     styles.colors,
   );
 
@@ -986,6 +1021,7 @@ const mapToShapesSectionViewModel = (
 const mapToShopViewModel = (
   content: ShopContent,
   styles: PageStyles,
+  brandPageType?: BrandPageType,
 ): ShopViewModel => {
   const buttonStyles = new ButtonStyles({
     selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
@@ -1011,6 +1047,12 @@ const mapToShopViewModel = (
       },
       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,
   );
@@ -1048,14 +1090,9 @@ const mapToSocialLinksViewModel = (
       ...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,
@@ -1210,7 +1247,7 @@ const mapToHeaderButtonViewModel = (
   }
 
   const titleStyle: TextStyleDeclaration = headerButton.buttonTextStyle ?? {
-    textStyleType: TEXT_STYLE_TYPES.buttons,
+    textStyleType: TEXT_STYLE_TYPES.button,
   };
 
   const viewModel = mapToButtonViewModel(
@@ -1257,6 +1294,23 @@ const mapToHeaderButtonViewModel = (
   };
 };
 
+/**
+ * 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: TextStyleDeclaration | undefined,
+  // 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: TextStyles | undefined,
+): TextStyleDeclaration =>
+  Object.assign({}, pickTypography(buttonTextStyle ?? {}), {
+    color: resolveTextColor(buttonTextStyle),
+    textStyleType: 'button' as const,
+  }) as TextStyleDeclaration;
+
 export const mapToPageHeaderViewModel = (
   pageHeader: PageHeaderDesktop | PageHeaderMobile,
   pageStyles: PageStyles,
@@ -1284,6 +1338,7 @@ export const mapToPageHeaderViewModel = (
   const navDefaultButtonTextStyle = getTextStyleByContentTextStyle(
     pageHeader.navigation.defaultButtonStyle,
     pageStyles.textStyles.textStyleOptions,
+    'paragraph1',
   );
 
   const navDefaultButtonStyle = Object.assign(
@@ -1304,6 +1359,7 @@ export const mapToPageHeaderViewModel = (
   const hamburgerButtonTextStyle = getTextStyleByContentTextStyle(
     pageHeader.navigation.hamburgerMenuStyle.defaultButtonStyle,
     pageStyles.textStyles.textStyleOptions,
+    'button',
   );
 
   const hamburgerButtonStyle = Object.assign(
@@ -1425,7 +1481,6 @@ export const mapToPageFooterViewModel = (
     iconStyle: { ...pageFooter.iconStyle },
     logo: mapToLogoViewModel(logoContent, logoStyles, useOldLogoRenderSize),
     socialLinks: pageFooter.socialLinks,
-    textFontFamily: pageFooter.textFontFamily,
   };
 };
 
@@ -1476,7 +1531,11 @@ export const mapToViewModel =
           styles,
         );
       case 'shop-section':
-        return mapToShopViewModel(content as ShopContent, styles);
+        return mapToShopViewModel(
+          content as ShopContent,
+          styles,
+          brandPageType,
+        );
 
       case 'profile':
         return mapToProfileViewModel(content as ProfileContent, styles);
@@ -1686,6 +1745,7 @@ export const getBrandPageViewModelFromBrandPageModel = (
       ? {
           isSavingEnabled: model.saveContactSettings.isSavingEnabled ?? true,
           hideBranding: model.saveContactSettings.hideBranding ?? false,
+          buttonTextStyle: model.saveContactSettings.buttonTextStyle,
         }
       : { isSavingEnabled: true, hideBranding: false },
   };
@@ -1908,6 +1968,7 @@ export const applyLogoTemplateImageToBrandPageViewModel = (
 
 export interface CriticalResourceURLs {
   images: string[];
+  /** Always empty: the renderer layout preloads every font (`0036-retire-text-font-family.md`). */
   fonts: string[];
   shapes: string[];
 }
@@ -1919,21 +1980,9 @@ export const getCriticalResourceURLs = (
   viewModel: BrandPageViewModel,
 ): CriticalResourceURLs => {
   let images: CriticalResourceURLs['images'] = [];
-  let fonts: CriticalResourceURLs['fonts'] = [];
   let shapes: CriticalResourceURLs['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;
@@ -1953,7 +2002,6 @@ export const getCriticalResourceURLs = (
     //   });
     // }
 
-    fonts = uniq(fonts);
     images = uniq(images);
     shapes = uniq(shapes);
   } catch (err) {
@@ -1962,7 +2010,7 @@ export const getCriticalResourceURLs = (
 
   return {
     images,
-    fonts,
+    fonts: [],
     shapes,
   };
 };

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

@@ -161,6 +161,10 @@ export interface ShopViewModel
   buttonStyles: ButtonStyles;
   isFullWidth: boolean;
   isShippingEnabled: boolean;
+  // The "no products" fixed label's colour (ADR-0020: no page base coat to inherit) — the
+  // title's own colour, else the title's contrast colour. Always computed, whether or not
+  // there are products; Shop.vue itself gates the label's render on `products.length`.
+  noProductsColor?: string;
 }
 
 export interface ContactFormViewModel

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.blank-site.test.ts

@@ -0,0 +1,57 @@
+import { describe, test, expect, vi } from 'vitest';
+import BrandPageMakerMixin from './BrandPageMaker.mixin';
+import { BRAND_PAGE_TYPES } from '@brand-page';
+import type { InitialisePayload } from '@brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
+
+// Only the payload `created` hands the store is under test, so the store stops the hook there.
+const mixin = BrandPageMakerMixin as unknown as {
+  created(this: unknown): Promise<void>;
+  methods: { getBrandPageFromFallback: (viewModel: unknown) => unknown };
+};
+const STOP = new Error('stop after initialise');
+
+const initialisePayload = async (
+  viewModel: Record<string, unknown>,
+): Promise<InitialisePayload> => {
+  let payload: InitialisePayload | undefined;
+
+  const context = {
+    viewModel: {
+      logoDraftDesignAttributes: { logoTheme: {} },
+      brandPageType: BRAND_PAGE_TYPES.brandSite,
+      ...viewModel,
+    },
+    containerStore: { baseFabricRenderUrl: 'https://localhost:6006/' },
+    brandPageMakerStore: {
+      initialise: vi.fn(async (value: InitialisePayload) => {
+        payload = value;
+        throw STOP;
+      }),
+    },
+    getBrandPageFromFallback: mixin.methods.getBrandPageFromFallback,
+  };
+
+  await expect(mixin.created.call(context)).rejects.toBe(STOP);
+
+  return payload!;
+};
+
+describe('BrandPageMaker created — blank site', () => {
+  test('with no saved data it builds a blank site and says so', async () => {
+    const payload = await initialisePayload({});
+
+    expect(payload.isBlankSite).toBe(true);
+    expect(payload.brandPage).toMatchObject({
+      brandPageType: BRAND_PAGE_TYPES.brandSite,
+    });
+  });
+
+  test('saved data is not a blank site', async () => {
+    const payload = await initialisePayload({
+      brandPageData: JSON.stringify({ pages: [] }),
+    });
+
+    expect(payload.isBlankSite).toBe(false);
+    expect(payload.brandPage).toEqual({ pages: [] });
+  });
+});

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.ts

@@ -199,7 +199,7 @@ export default defineComponent({
       console.error('logo theme is missing');
     }
 
-    let brandPage: BrandPageData;
+    let brandPage: BrandPageData | undefined;
 
     if (this.viewModel?.brandPageMetadataS3Url) {
       const assetClient = new AssetLibraryClient({
@@ -218,6 +218,8 @@ export default defineComponent({
       brandPage = this.getBrandPageFromFallback(this.viewModel);
     }
 
+    const isBlankSite = !brandPage;
+
     const shopConfigData = this.viewModel?.shopConfigData?.trim()
       ? (JSON.parse(this.viewModel.shopConfigData) as ShopConfigData)
       : null;
@@ -231,7 +233,9 @@ export default defineComponent({
     });
 
     await this.brandPageMakerStore.initialise({
-      brandPage,
+      brandPage:
+        brandPage ?? createInitialBrandPage(this.viewModel.brandPageType),
+      isBlankSite,
       logoDraftDesignAttributes: this.viewModel.logoDraftDesignAttributes,
       unsplashApplicationName: this.viewModel.unsplashApplicationName,
       templateCategories: this.viewModel.templateCategories,
@@ -355,15 +359,15 @@ export default defineComponent({
     }, 800);
   },
   methods: {
-    getBrandPageFromFallback(viewModel): BrandPageData {
+    getBrandPageFromFallback(viewModel): BrandPageData | undefined {
       if (
         viewModel?.brandPageData &&
         typeof viewModel.brandPageData === 'string'
       ) {
         return JSON.parse(viewModel.brandPageData!) as BrandPageData;
-      } else {
-        return createInitialBrandPage(viewModel.brandPageType);
       }
+
+      return undefined;
     },
 
     async handleCaptureSnapshot() {