@designcrowd/library.brand-page 6.2.11-builder-v2-1 → 6.2.12

package/lib/src/shared/text-role-typography.util.js

@@ -0,0 +1,183 @@
+/**
+ * MIGRATION-22 SNAPSHOT DEPENDENCY: its normalisation and RTE lift use `composeTextDecoration`,
+ * `NEUTRAL_TYPOGRAPHY_VALUE`, `TEXT_STYLE_CASCADE_PROPS` and `roleVarRef`. After migration-22
+ * releases, pin their v22 behaviour in the migration before changing them.
+ */
+export const ROLE_VAR_ATTRS = [
+    {
+        markAttr: 'fontFamily',
+        cssProp: 'font-family',
+        varName: '--role-font-family',
+    },
+    { markAttr: 'fontSize', cssProp: 'font-size', varName: '--role-font-size' },
+    {
+        markAttr: 'lineHeight',
+        cssProp: 'line-height',
+        varName: '--role-line-height',
+    },
+    {
+        markAttr: 'letterSpacing',
+        cssProp: 'letter-spacing',
+        varName: '--role-letter-spacing',
+    },
+    {
+        markAttr: 'fontWeight',
+        cssProp: 'font-weight',
+        varName: '--role-font-weight',
+    },
+    {
+        markAttr: 'fontStyle',
+        cssProp: 'font-style',
+        varName: '--role-font-style',
+    },
+    {
+        markAttr: 'textDecoration',
+        cssProp: 'text-decoration',
+        varName: '--role-text-decoration',
+    },
+];
+export const TEXT_STYLE_CASCADE_PROPS = [
+    'fontFamily',
+    'fontSize',
+    'fontWeight',
+    'fontStyle',
+    'letterSpacing',
+    'lineHeight',
+    'textDecoration',
+];
+/** A copy of a style without typography; colour, alignment and other metadata stay. */
+export const omitTypography = (style) => {
+    const rest = { ...style };
+    for (const prop of TEXT_STYLE_CASCADE_PROPS)
+        delete rest[prop];
+    return rest;
+};
+/**
+ * `omitTypography` as a patch, for the stores that deep-merge a write: an unset value replaces the
+ * block's own and their role normalisation then drops the key.
+ */
+export const CLEARED_TYPOGRAPHY = Object.freeze(Object.fromEntries(TEXT_STYLE_CASCADE_PROPS.map((prop) => [prop, undefined])));
+/** Only the typography a style sets itself. */
+export const pickTypography = (style) => {
+    const typography = {};
+    for (const prop of TEXT_STYLE_CASCADE_PROPS) {
+        if (style[prop] !== undefined)
+            typography[prop] = style[prop];
+    }
+    return typography;
+};
+export const textRoleClassName = (type) => `bp-text-role-${type}`;
+const ROLE_VAR_BY_ATTR = new Map(ROLE_VAR_ATTRS.map((attr) => [attr.markAttr, attr]));
+export const roleVarRef = (markAttr) => {
+    const attr = ROLE_VAR_BY_ATTR.get(markAttr);
+    return attr ? `var(${attr.varName})` : undefined;
+};
+export const NEUTRAL_TYPOGRAPHY_VALUE = {
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    textDecoration: 'none',
+    letterSpacing: 'normal',
+};
+const TEXT_DECORATION_FLAGS = [
+    'underline',
+    'line-through',
+    'overline',
+];
+const RTE_TEXT_DECORATION_CLASS_PREFIX = 'bp-rte-text-decoration-';
+const canonicalTextDecoration = (value) => {
+    if (!value)
+        return undefined;
+    const flags = value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    if (flags.length === 1 && flags[0] === 'none')
+        return 'none';
+    if (flags.length === 0 ||
+        flags.includes('none') ||
+        flags.some((flag) => !TEXT_DECORATION_FLAGS.includes(flag))) {
+        return undefined;
+    }
+    return (TEXT_DECORATION_FLAGS.filter((flag) => flags.includes(flag)).join(' ') ||
+        undefined);
+};
+const textDecorationState = (value) => {
+    const trimmed = value?.trim().toLowerCase();
+    if (!trimmed)
+        return undefined;
+    if (trimmed === 'none')
+        return { clearsRole: true, value: 'none' };
+    if (trimmed.startsWith('none ')) {
+        const resetValue = canonicalTextDecoration(trimmed.slice('none '.length));
+        return resetValue && resetValue !== 'none'
+            ? { clearsRole: true, value: resetValue }
+            : undefined;
+    }
+    const normalValue = canonicalTextDecoration(trimmed);
+    return normalValue ? { clearsRole: false, value: normalValue } : undefined;
+};
+/**
+ * Whether a local decoration explicitly clears its role's lines before adding its own. The reset
+ * marker qualifies the run's own lines, so with no literal (absent, or the role ref) it means nothing.
+ */
+export const textDecorationClearsRole = (value, resetMarker = false) => {
+    const state = textDecorationState(value);
+    return state !== undefined && (resetMarker || state.clearsRole);
+};
+/**
+ * A run's own decoration in the form every compare reads: a reset run's lines become `none <lines>`
+ * ("clear the role, then draw these"). A read form only — writes store the marker instead.
+ */
+export const localTextDecoration = (value, resetMarker = false) => {
+    const state = textDecorationState(value);
+    return state && resetMarker && !state.clearsRole
+        ? `none ${state.value}`
+        : value;
+};
+export const textDecorationFlags = (value) => {
+    const state = textDecorationState(value);
+    return new Set(state?.value === 'none' ? [] : state?.value.split(' '));
+};
+export const textDecorationValue = (flags) => {
+    const selected = new Set(flags);
+    const value = TEXT_DECORATION_FLAGS.filter((flag) => selected.has(flag)).join(' ');
+    return value || 'none';
+};
+export const composeTextDecoration = (roleValue, localValue, clearsRole = false) => {
+    const local = localValue === 'var(--role-text-decoration)'
+        ? undefined
+        : textDecorationState(localValue);
+    if (local && (clearsRole || local.clearsRole))
+        return local.value;
+    const role = canonicalTextDecoration(roleValue);
+    const flags = new Set();
+    if (role && role !== 'none')
+        role.split(' ').forEach((flag) => flags.add(flag));
+    if (local?.value && local.value !== 'none') {
+        local.value.split(' ').forEach((flag) => flags.add(flag));
+    }
+    const composed = TEXT_DECORATION_FLAGS.filter((flag) => flags.has(flag)).join(' ');
+    return composed || (role || local ? 'none' : undefined);
+};
+export const rteTextDecorationClassName = (value, clearsRole = false) => {
+    if (value === 'var(--role-text-decoration)')
+        return `${RTE_TEXT_DECORATION_CLASS_PREFIX}inherit`;
+    const state = textDecorationState(value);
+    return state
+        ? `${RTE_TEXT_DECORATION_CLASS_PREFIX}${(clearsRole || state.clearsRole) && state.value !== 'none'
+            ? 'reset-'
+            : ''}${state.value
+            .replaceAll('line-through', 'linethrough')
+            .replaceAll(' ', '-')}`
+        : undefined;
+};
+export const runTypographyFillValue = (attr, roleStyle, styleObj) => {
+    const roleValue = roleStyle?.[attr];
+    const blockValue = styleObj?.[attr];
+    const neutral = NEUTRAL_TYPOGRAPHY_VALUE[attr];
+    const hasRole = roleValue != null && roleValue !== '';
+    const hasBlock = blockValue != null && blockValue !== '';
+    if (roleStyle == null)
+        return hasBlock ? blockValue : undefined;
+    const effectiveRole = hasRole ? roleValue : neutral;
+    if (hasBlock && blockValue !== effectiveRole)
+        return blockValue;
+    return hasRole || neutral != null ? roleVarRef(attr) : undefined;
+};

package/lib/src/utils/minify-brand-page-metadata.d.ts

@@ -1,5 +1,7 @@
 import { type BrandPageModel, type BrandPageType, type NavModel, type PageStyles } from '../brand-page/models';
 import type { ContentType } from '../brand-page/models/content.model';
+import type { TextStyleOption } from '../brand-page/models/styles.model';
+import { type TextStyleType } from '../brand-page/models/styles.model';
 import { type AssetEntry } from './build-asset-manifest';
 type MinifiedFooterSocialLink = {
     position: number;
@@ -66,6 +68,17 @@ type MinifiedPage = {
     isHidden?: boolean;
     contents: MinifiedContent[];
 };
+/**
+ * The canonical roles are the source of truth. The four legacy options and the retired root text
+ * colour remain in the outbound payload temporarily because the deployed AI pipeline still reads
+ * them for contrast repair. Remove this compatibility shape only after pipeline PR #664 ships.
+ */
+type MinifiedTextStyles = {
+    textStyleOptions: Partial<Record<TextStyleType, TextStyleOption>>;
+    style?: {
+        color?: string;
+    };
+};
 export interface MinifiedBrandPageMetadata {
     brandPageType: BrandPageType;
     v: number;
@@ -74,7 +87,9 @@ export interface MinifiedBrandPageMetadata {
      * a concrete value, so the lookup table only costs tokens and invites the LLM
      * echoing a `palette-…` id back at us.
      */
-    styles: Omit<PageStyles, 'colors'>;
+    styles: Omit<PageStyles, 'colors' | 'textStyles'> & {
+        textStyles: MinifiedTextStyles;
+    };
     pages: MinifiedPage[];
     nav: NavModel;
     footer?: {

package/lib/src/utils/minify-brand-page-metadata.js

@@ -1,5 +1,7 @@
 import { BRAND_PAGE_TYPES, } from '../brand-page/models';
 import { resolveModelColorReferences } from '../brand-page/utils/color-palette.util';
+import { CANONICAL_TEXT_STYLE_TYPES, LEGACY_TEXT_STYLE_TYPES, } from '../brand-page/models/styles.model';
+import { DEFAULT_FONT_FAMILY_KEY, FONT_FAMILY_CONFIGS, } from '../brand-page/constants';
 import { hasRTEContent, isTiptapDocument } from '../brand-page-maker/utils';
 import { useExternalRichTextEditor } from '../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { findAssetKey, resolveLogoData, } from './build-asset-manifest';
@@ -423,10 +425,19 @@ const minifyHeaderBackgroundStyle = (backgroundStyle) => {
             backgroundOpacity < 100 && { backgroundOpacity }),
     };
 };
-const minifyHeader = (header, logoAssetKey) => {
+const minifyHeader = (header, textStyles, logoAssetKey) => {
     if (!header)
         return undefined;
     const nav = header.navigation;
+    const navStyle = nav?.defaultButtonStyle;
+    // A linked nav stores only what differs from its role, so its font may be the role's, else the
+    // page root's Lato.
+    const navFontFamily = navStyle?.fontFamily ||
+        (navStyle?.textStyleType
+            ? textStyles?.textStyleOptions?.[navStyle.textStyleType]?.style
+                ?.fontFamily
+            : undefined) ||
+        FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name;
     return {
         displayStyle: header.displayStyle || undefined,
         isLogoVisible: header.isLogoVisible,
@@ -437,11 +448,8 @@ const minifyHeader = (header, logoAssetKey) => {
         navigation: nav
             ? {
                 displayType: nav.displayType || undefined,
-                defaultButtonStyle: nav.defaultButtonStyle
-                    ? {
-                        color: nav.defaultButtonStyle.color,
-                        fontFamily: nav.defaultButtonStyle.fontFamily,
-                    }
+                defaultButtonStyle: navStyle
+                    ? { color: navStyle.color, fontFamily: navFontFamily }
                     : undefined,
                 selectedButtonStyle: nav.selectedButtonStyle || undefined,
                 hamburgerMenuStyle: nav.hamburgerMenuStyle
@@ -451,6 +459,17 @@ const minifyHeader = (header, logoAssetKey) => {
             : undefined,
     };
 };
+/**
+ * A fresh copy, never the source model. The deployed pipeline still uses the legacy role/root-colour
+ * shape for contrast repair, so preserve it in the outbound payload until #664 is deployed.
+ */
+const minifyTextStyles = (textStyles) => ({
+    textStyleOptions: Object.fromEntries([...CANONICAL_TEXT_STYLE_TYPES, ...LEGACY_TEXT_STYLE_TYPES]
+        .map((role) => [role, textStyles?.textStyleOptions?.[role]])
+        .filter(([, option]) => option !== undefined)),
+    style: textStyles
+        ?.style,
+});
 const minifyPage = (page, nav, editor, assets) => ({
     id: page.id,
     title: page.title,
@@ -466,15 +485,18 @@ export const minifyBrandPageMetadata = (model, assets) => {
     const result = {
         brandPageType: model.brandPageType || BRAND_PAGE_TYPES.default,
         v: model.v,
-        styles: stylesWithoutPalette,
+        styles: {
+            ...stylesWithoutPalette,
+            textStyles: minifyTextStyles(stylesWithoutPalette.textStyles),
+        },
         pages: model.pages.map((p) => minifyPage(p, model.nav, externalEditor, assets)),
         nav: model.nav,
         footer: {
             desktop: minifyFooter(model.pageFooterDesktop, findAssetKey(assets, resolveLogoData(model.pageFooterDesktop?.logoImage, model.pageFooterDesktop?.logoImageBase64Url))),
             mobile: minifyFooter(model.pageFooterMobile, findAssetKey(assets, resolveLogoData(model.pageFooterMobile?.logoImage, model.pageFooterMobile?.logoImageBase64Url))),
         },
-        pageHeaderDesktop: minifyHeader(model.pageHeaderDesktop, findAssetKey(assets, resolveLogoData(model.pageHeaderDesktop?.logoImage, model.pageHeaderDesktop?.logoImageBase64Url))),
-        pageHeaderMobile: minifyHeader(model.pageHeaderMobile, findAssetKey(assets, resolveLogoData(model.pageHeaderMobile?.logoImage, model.pageHeaderMobile?.logoImageBase64Url))),
+        pageHeaderDesktop: minifyHeader(model.pageHeaderDesktop, model.styles?.textStyles, findAssetKey(assets, resolveLogoData(model.pageHeaderDesktop?.logoImage, model.pageHeaderDesktop?.logoImageBase64Url))),
+        pageHeaderMobile: minifyHeader(model.pageHeaderMobile, model.styles?.textStyles, findAssetKey(assets, resolveLogoData(model.pageHeaderMobile?.logoImage, model.pageHeaderMobile?.logoImageBase64Url))),
     };
     externalEditor.destroy();
     // The outbound half of the AI colour bridge. The pipeline reads colours as

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.2.11-builder-v2-1",
+  "version": "6.2.12",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",