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

package/lib/src/shared/content-settings/components/text-style-field/TextStyleField.mixin.js

@@ -4,9 +4,14 @@ import { ref } from 'vue';
 import { v4 as uuidV4 } from 'uuid';
 import { backgroundColorConvertor, colorConvertor, textAlignmentOptionsConvertor, textCSSStyleOptionsConvertor, textSizeValueConvertor, letterSpacingValueConvertor, lineHeightValueConvertor, } from '@brand-page-maker/convertors';
 import { useUiStyleSettingsStore } from '../../../style-settings/store';
-import { resolveTextColor } from '@brand-page/utils/text-style.util';
-import { FONT_FAMILY_CONFIGS, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, MIN_LETTER_SPACING_PERCENT, MAX_LETTER_SPACING_PERCENT, MIN_LINE_HEIGHT, MAX_LINE_HEIGHT, TEXT_STYLE_TYPES, TEXT_STYLE_TYPES_DISPLAY_NAME_MAP, } from '@brand-page';
+import { useUiContentSettingsStore } from '../../store';
+import { resolveTextStyle, TEXT_STYLE_CASCADE_PROPS, normalizeTextStyleAgainstRole, omitTypography, } from '@brand-page/utils/text-style.util';
+import { composeTextDecoration } from '@shared/text-role-typography.util';
+import { FONT_FAMILY_CONFIGS, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, MIN_LETTER_SPACING_PERCENT, MAX_LETTER_SPACING_PERCENT, MIN_LINE_HEIGHT, MAX_LINE_HEIGHT, CANONICAL_TEXT_STYLE_TYPES, TEXT_STYLE_TYPES_DISPLAY_NAME_MAP, } from '@brand-page';
 const TEXT_SIZE_CHANGE_DEBOUNCE_WAIT_IN_MS = 5;
+// BP-5969: cap the collapsed-card live preview so large roles (e.g. H1) fit the
+// header row. The subtitle still reports the real edited size uncapped.
+const TEXT_STYLE_PREVIEW_MAX_SIZE_PX = 28;
 export default defineComponent({
     props: {
         id: {
@@ -79,6 +84,23 @@ export default defineComponent({
             required: false,
             default: false,
         },
+        // BP-5969: opt in to rendering the collapsed-card header in the role's own
+        // live typography (name at its font/size/weight + a `Family • Sizepx`
+        // subtitle). Only the global Style tab enables this; block-level fields
+        // (nav/footer/content) keep the plain bold label.
+        showTypographyPreview: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        // BP-5969 (ADR-0020): a role defines typography only — colour is contrast-derived per
+        // surface, not a role property. The role editor (global Style tab) hides the colour picker;
+        // element-level fields keep it (an element may still carry an explicit colour override).
+        showColor: {
+            type: Boolean,
+            required: false,
+            default: true,
+        },
         // Container-aware default colour from the parent field wrapper: text on a filled
         // block must contrast that fill, so the swatch shows the same colour the renderer
         // paints. Both sides derive it from one helper (`container-text-color.util.ts`).
@@ -90,11 +112,13 @@ export default defineComponent({
     },
     setup() {
         const styleSettingsStore = useUiStyleSettingsStore();
+        const contentSettingsStore = useUiContentSettingsStore();
         const textStyleTypeDropdownRef = `text-style-dropdown-${uuidV4()}`;
         return {
             availableTextFontFamilyOptions: computed(() => styleSettingsStore.availableTextFontFamilyOptions),
             textStyleOptions: computed(() => styleSettingsStore.textStyles.textStyleOptions),
             styleSettingsStore,
+            contentSettingsStore,
             textStyleTypeDropdownRef,
             [textStyleTypeDropdownRef]: ref(null),
         };
@@ -103,25 +127,23 @@ export default defineComponent({
     data: () => {
         return {
             isCollapsed: true,
+            // BP-5969: the "style modified" popup next to the role dropdown (apply/reset overrides).
+            isStyleModifiedPopupOpen: false,
             MIN_TEXT_SIZE_PX,
             MAX_TEXT_SIZE_PX,
             MIN_LETTER_SPACING_PERCENT,
             MAX_LETTER_SPACING_PERCENT,
             MIN_LINE_HEIGHT,
             MAX_LINE_HEIGHT,
-            textStyleTypeOptions: [
-                {
-                    value: undefined,
-                    label: TEXT_STYLE_TYPES_DISPLAY_NAME_MAP().none,
-                    isSelected: false,
-                },
-                ...Object.keys(TEXT_STYLE_TYPES).map((key) => ({
-                    value: key,
-                    label: TEXT_STYLE_TYPES_DISPLAY_NAME_MAP()[key][0].toUpperCase() +
-                        TEXT_STYLE_TYPES_DISPLAY_NAME_MAP()[key].slice(1),
-                    isSelected: false,
-                })),
-            ],
+            // BP-5969 (ADR-0019): every text block is always linked to exactly one canonical
+            // role — there is no "none"/detached option. Legacy roles stay resolvable for
+            // un-migrated content but are never pickable (migration-22 reconnects them).
+            textStyleTypeOptions: CANONICAL_TEXT_STYLE_TYPES.map((key) => ({
+                value: key,
+                label: TEXT_STYLE_TYPES_DISPLAY_NAME_MAP()[key][0].toUpperCase() +
+                    TEXT_STYLE_TYPES_DISPLAY_NAME_MAP()[key].slice(1),
+                isSelected: false,
+            })),
             debounceOnTextSizeChange: undefined,
             debounceOnLetterSpacingChange: undefined,
             debounceOnLineHeightChange: undefined,
@@ -149,18 +171,17 @@ export default defineComponent({
             if (!selectedTextStyleOption) {
                 return theValue;
             }
-            return Object.assign({}, selectedTextStyleOption.style, {
+            // Typography must follow the RENDERER's per-property cascade (ADR-0019): each prop
+            // resolves element-first over the role, so the panel shows the same size/family/weight
+            // the canvas paints — a per-block override stays visible in the sliders instead of
+            // snapping back to the role. `resolveTextStyle` is the shared resolver (colour included,
+            // element-first via `resolveTextColor` with the container-aware middle rung); mirroring it
+            // here is what keeps the panel and canvas from drifting, and it protects the handlers below
+            // that spread `selectedTextStyle`. The role style is spread first to keep its non-cascade
+            // props (e.g. backgroundColor); alignment stays role-first and applyAutoScale is re-layered.
+            return Object.assign({}, selectedTextStyleOption.style, resolveTextStyle(theValue, selectedTextStyleOption.style, this.containerDefaultColor), {
                 applyAutoScale: theValue.applyAutoScale,
                 textAlign: selectedTextStyleOption.style.textAlign || theValue.textAlign,
-                // `color` must follow the RENDERER's cascade (element first, then the global
-                // style) or the panel shows one colour while the canvas paints another. It
-                // also protects the handlers below, which all spread `selectedTextStyle`:
-                // without it, editing e.g. font size replaces the element's colour with the
-                // global one. Shared with the renderer via `resolveTextColor` — don't restate
-                // the chain here, a second copy is how the two drifted apart. The
-                // container-aware default is the resolver's middle rung (below the element
-                // colour, above the global style), fed from the same helper the renderer uses.
-                color: resolveTextColor(theValue, selectedTextStyleOption.style, this.containerDefaultColor),
             });
         },
         textCSSStyleOptions() {
@@ -240,33 +261,88 @@ export default defineComponent({
                 this.debounceOnLineHeightChange(val);
             },
         },
-        textStyleTypeDropdownTitle() {
-            const selectedTextStyleTypeOption = this.textStyleTypeOptions.find((x) => x.isSelected);
-            if (selectedTextStyleTypeOption) {
-                return selectedTextStyleTypeOption.label;
-            }
-            return TEXT_STYLE_TYPES_DISPLAY_NAME_MAP().none;
+        // The plain role name: the dropdown title (its asterisk is the dropdown's own) and the
+        // "Apply changes to all '<role>'" popup label.
+        selectedRoleLabel() {
+            const selected = this.textStyleTypeOptions.find((x) => x.isSelected);
+            return selected?.label ?? '';
+        },
+        selectedRoleType() {
+            return this.textStyleTypeOptions.find((x) => x.isSelected)?.value;
+        },
+        // A block has a typography override when it carries any cascade prop of its own. The
+        // store normalizes role-equal props away on write, so a present prop is a real override.
+        hasTypographyOverride() {
+            if (!this.showTextStyleTypeOptions)
+                return false;
+            const value = this.value;
+            if (!value?.textStyleType)
+                return false;
+            return TEXT_STYLE_CASCADE_PROPS.some((prop) => value[prop] != null);
+        },
+        // BP-5969: the collapsed card header renders the role name in its OWN
+        // typography. We derive the inline style from the same resolved style the
+        // controls edit (`selectedTextStyle`), so the preview repaints live as the
+        // sliders/pickers move. Size is capped so a large role (e.g. H1 at 60px)
+        // still fits the header row rather than overflowing the card.
+        //
+        // Family/weight/style/decoration are applied so the preview shows the role's
+        // font AND its B/I/U/S styling. The family is quoted (multi-word names like
+        // "PT Serif" must be a single CSS token) and given a generic fallback.
+        textStylePreviewStyle() {
+            const style = this.selectedTextStyle;
+            const sizePx = Math.min(Number(textSizeValueConvertor.convert(style)) ||
+                TEXT_STYLE_PREVIEW_MAX_SIZE_PX, TEXT_STYLE_PREVIEW_MAX_SIZE_PX);
+            // Strip any quotes the value already carries, then re-quote once.
+            const family = (style.fontFamily || '').replace(/^['"]|['"]$/g, '');
+            return {
+                fontFamily: family ? `"${family}", sans-serif` : 'inherit',
+                fontSize: `${sizePx}px`,
+                fontWeight: style.fontWeight || 'normal',
+                fontStyle: style.fontStyle || 'normal',
+                letterSpacing: style.letterSpacing || 'normal',
+                // lineHeight is intentionally omitted: the preview is a single truncated
+                // line, so the role's line-height only adds vertical padding that
+                // misaligns the header row. Let it inherit the panel's default instead.
+                textDecoration: style.textDecoration || 'none',
+            };
+        },
+        // BP-5969: the `Family • Sizepx` line shown under the role name when
+        // collapsed. Size is the true edited size (uncapped, unlike the preview).
+        textStylePreviewSubtitle() {
+            const style = this.selectedTextStyle;
+            const family = style.fontFamily || '';
+            const sizePx = textSizeValueConvertor.convert(style);
+            const parts = [family, sizePx ? `${sizePx}px` : ''].filter(Boolean);
+            return parts.join(' • ');
         },
     },
     methods: {
         emitChange(style, textStyleType) {
+            // BP-5969 (ADR-0020): linking a role is a TYPOGRAPHY action and no longer touches
+            // colour — a role carries none, and colour is a separate axis, so switching roles
+            // keeps the element's own colour + background (a full clean slate is the explicit
+            // "reset to global" action). A whole-box edit likewise keeps the current link (it no
+            // longer detaches).
             if (!this.showTextStyleTypeOptions) {
                 textStyleType = undefined;
             }
+            else if (textStyleType === undefined) {
+                textStyleType = this.value
+                    ?.textStyleType;
+            }
             const { backgroundColor, ...filteredStyle } = style;
-            const value = {
+            // Normalise here, not only downstream: content-settings-store does this for its own
+            // fields, but nav, header-button and footer text write straight to their own stores,
+            // which keep what they're given without checking it against the role. Without this, one
+            // B/I/U/S click bakes fontStyle/textDecoration in as a permanent override
+            // (`text-css-style-options.convertor` always writes all four props), and a later role
+            // edit can never repaint it back.
+            const value = normalizeTextStyleAgainstRole({
                 ...(backgroundColor === undefined ? filteredStyle : style),
                 textAlign: style.textAlign, //text align should never be empty (setting a textalign here causes text alignment changes when changing global text styles)
                 textStyleType,
-            };
-            // Linking to a global style drops the element's own colour override: the
-            // renderer resolves colour element-first (see resolveTextColor), so a colour
-            // parked before the link would keep winning. Colours are the only element-first
-            // properties, so nothing else needs clearing.
-            if (textStyleType) {
-                value.color = undefined;
-                value.backgroundColor = undefined;
-            }
+            }, this.textStyleOptions);
             this.$emit('update:modelValue', { id: this.id, name: this.name, value });
             if (!textStyleType) {
                 this.textStyleTypeOptions.forEach((option) => {
@@ -277,9 +353,20 @@ export default defineComponent({
         toggleCollapsed() {
             this.isCollapsed = !this.isCollapsed;
         },
+        // BP-5969: a whole-box edit layers a SPARSE override on the element's own style (not
+        // the resolved role), so the role's colour/typography is never baked in as an
+        // override. Store normalization then drops any prop equal to the role. For an unlinked
+        // field (e.g. the role-definition editor, `showTextStyleTypeOptions` false) there is no
+        // role class, so the full resolved style is the base.
+        overrideBaseStyle() {
+            const value = this.value;
+            return this.showTextStyleTypeOptions && value?.textStyleType
+                ? { ...value }
+                : this.selectedTextStyle;
+        },
         onSelectFont(font) {
             const newValue = {
-                ...this.selectedTextStyle,
+                ...this.overrideBaseStyle(),
                 fontFamily: FONT_FAMILY_CONFIGS[font.key].name,
             };
             this.emitChange(newValue);
@@ -290,7 +377,7 @@ export default defineComponent({
                 isSelected: option.value === e.value ? !option.isSelected : option.isSelected,
             }));
             const newValue = {
-                ...this.selectedTextStyle,
+                ...this.overrideBaseStyle(),
                 ...textCSSStyleOptionsConvertor.convertBack({ options }),
             };
             this.emitChange(newValue);
@@ -304,11 +391,14 @@ export default defineComponent({
             this.textStyleTypeOptions.forEach((option) => {
                 option.isSelected = option.value === e.value;
             });
-            this.emitChange(this.value, e.value);
+            // Picking a role gives that role's look, as the RTE picker does: overrides kept from the
+            // previous role would otherwise win the per-property cascade. Colour is not typography,
+            // so it stays (global-text-style.md).
+            this.emitChange(omitTypography(this.value), e.value);
         },
         onSelectAlignment(e) {
             const newValue = {
-                ...this.selectedTextStyle,
+                ...this.overrideBaseStyle(),
                 ...textAlignmentOptionsConvertor.convertBack({
                     options: [{ ...e, isSelected: true }],
                 }),
@@ -319,18 +409,14 @@ export default defineComponent({
             const current = this.value;
             // A colour edit on a linked element keeps the link and layers a sticky colour
             // override rather than detaching. The renderer resolves colour element-first
-            // (resolveTextColor), so it wins over the style's colour while typography stays
-            // synced to the style. Written as a clean linked style (type, alignment,
-            // auto-scale, colour) with no baked-in typography; re-selecting the style from
-            // the dropdown resets it back to the style's colour.
+            // (resolveTextColor), so it wins over the role's colour while typography stays
+            // driven by the role class. Preserve the element's existing (typography) overrides.
             if (this.showTextStyleTypeOptions && current.textStyleType) {
                 this.$emit('update:modelValue', {
                     id: this.id,
                     name: this.name,
                     value: {
-                        textStyleType: current.textStyleType,
-                        textAlign: current.textAlign,
-                        applyAutoScale: current.applyAutoScale,
+                        ...current,
                         ...colorConvertor.convertBack(color.value),
                     },
                 });
@@ -343,32 +429,92 @@ export default defineComponent({
         },
         onSelectBackgroundColor(color) {
             const newValue = {
-                ...this.selectedTextStyle,
+                ...this.overrideBaseStyle(),
                 ...backgroundColorConvertor.convertBack(color.value),
             };
             this.emitChange(newValue);
         },
         onTextSizeChange(textSize) {
             const newValue = {
-                ...this.selectedTextStyle,
+                ...this.overrideBaseStyle(),
                 ...textSizeValueConvertor.convertBack(textSize),
             };
             this.emitChange(newValue);
         },
         onLetterSpacingChange(spacing) {
             const newValue = {
-                ...this.selectedTextStyle,
+                ...this.overrideBaseStyle(),
                 ...letterSpacingValueConvertor.convertBack(spacing),
             };
             this.emitChange(newValue);
         },
         onLineHeightChange(lineHeight) {
             const newValue = {
-                ...this.selectedTextStyle,
+                ...this.overrideBaseStyle(),
                 ...lineHeightValueConvertor.convertBack(lineHeight),
             };
             this.emitChange(newValue);
         },
+        // Clear the typography overrides so the block follows its role. Colour and background stay:
+        // a role carries no colour to fall back to (ADR 0020).
+        resetToGlobal() {
+            this.$emit('update:modelValue', {
+                id: this.id,
+                name: this.name,
+                value: omitTypography(this.value),
+            });
+        },
+        // BP-5969 (A5): promote this block's typography overrides into the role definition, so
+        // every block linked to the role adopts them. Then reset this block to fully-linked and
+        // re-normalize its siblings (their now-role-equal overrides drop away).
+        saveToGlobal() {
+            const value = this.value;
+            const type = value.textStyleType;
+            if (!type)
+                return;
+            const role = this.textStyleOptions[type]?.style;
+            if (!role)
+                return;
+            const overrides = {};
+            TEXT_STYLE_CASCADE_PROPS.forEach((prop) => {
+                const propValue = value[prop];
+                if (propValue != null) {
+                    overrides[prop] =
+                        prop === 'textDecoration'
+                            ? composeTextDecoration(role.textDecoration, propValue)
+                            : propValue;
+                }
+            });
+            const previousRole = { ...role };
+            this.styleSettingsStore.setTextStyleOption({
+                type,
+                style: { ...role, ...overrides },
+            });
+            this.resetToGlobal();
+            this.contentSettingsStore.renormalizeTextStylesForRole(type, previousRole);
+        },
+        // The role dropdown pairs with a "style modified" toggle that opens this popup
+        // (apply to all / reset to default), mirroring the RTE toolbar affordance.
+        toggleStyleModifiedPopup() {
+            this.isStyleModifiedPopupOpen = !this.isStyleModifiedPopupOpen;
+        },
+        onClickOutsideStyleModified(event) {
+            // v-click-outside also fires on window blur (its iframe detection), where the
+            // target is `window` and has no `closest` — treat a non-element target as outside.
+            const { target } = event;
+            const outside = !(target instanceof Element) ||
+                !target.closest('.text-style-field__modified-popup');
+            if (outside)
+                this.isStyleModifiedPopupOpen = false;
+        },
+        onApplyStyleToRole() {
+            this.saveToGlobal();
+            this.isStyleModifiedPopupOpen = false;
+        },
+        onResetStyleToRole() {
+            this.resetToGlobal();
+            this.isStyleModifiedPopupOpen = false;
+        },
         generateFontFamilySelectorKey() {
             return `fontFamilySelector-${this.id}-${Date.now()}`;
         },
@@ -377,9 +523,7 @@ export default defineComponent({
         syncTextStyleTypeSelection() {
             const value = this.value;
             this.textStyleTypeOptions.forEach((option) => {
-                // Do NOT simplify to `option.value === value?.textStyleType`: the "none"
-                // option's value is `undefined`, so that form would SELECT it whenever no
-                // style is set, but the convention (see emitChange) is all-flags-false.
+                // A value with no role selects nothing (see emitChange): every option stays unselected.
                 option.isSelected =
                     Boolean(value?.textStyleType) && option.value === value.textStyleType;
             });

package/lib/src/shared/content-settings/store/content-settings-store.d.ts

@@ -399,6 +399,12 @@ export declare const useUiContentSettingsStore: import("pinia").StoreDefinition<
         id: string;
         name: string;
     }): unknown;
+    renormalizeTextStylesForRole(type: string, previousRole?: Record<string, unknown>, active?: {
+        id: string;
+        name: string;
+        index?: number;
+        doc: unknown;
+    }): void;
     applyCardContrastToItem({ id }: {
         id: string;
     }): void;

package/lib/src/shared/content-settings/store/content-settings-store.js

@@ -1,5 +1,9 @@
 import { defineStore } from 'pinia';
-import { applyCardTextContrast } from '@brand-page/utils/container-text-color.util';
+import { CONTENT_TEXT_STYLE_PROPERTY_KEYS } from '@brand-page';
+import { applyTextContrast } from '@brand-page/utils/container-text-color.util';
+import { normalizeTextStyleAgainstRole as normalizeAgainstRole } from '@brand-page/utils/text-style.util';
+import { authorContentRteFields, isTiptapDocument, relinkRoleEqualMarks, } from '@brand-page-maker/utils';
+import { pairedRteTextField } from '../../color-strategies/rte-field-pairs';
 import { CONTENT_SETTINGS_CONFIGS, SIDE_BAR_TAB_NAMES, } from '@brand-page-maker/constants';
 import { RESERVED_FIELD_NAMES } from '../constants';
 import { UI_EVENT_SOURCES } from '../../models';
@@ -7,7 +11,8 @@ import { CONTENT_SETTINGS_DISPLAY_MODES, ITEM_CATEGORIES, ITEM_CATEGORY_NAMES, }
 import { useUiStore, useBrandPageMakerUserStore, useBrandPageMakerStore, useBrandPageContainerStore, useVideoStore, } from '@brand-page-maker/stores';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { useUiSideBarStore } from '../../side-bar/store';
-import { createDefaultContentItemGroupState, createDefaultContentItemState, } from '../../navigation-style-settings/store';
+import { createDefaultContentItemGroupState, createDefaultContentItemState, useUiNavigationStyleSettingsStore, } from '../../navigation-style-settings/store';
+import { useUiPageSettingsStore } from '../../page-settings/store';
 import { adminValidatorsDict, dummyValidator, validatorDict, } from '@brand-page-maker/validators';
 import { vueDeepMerge } from '../../../helpers/vue.helper';
 import {} from '@brand-page-maker/stores/video';
@@ -36,6 +41,16 @@ const armHistoryMergeForHydrationWrite = (isHydrationWrite) => {
         return;
     useHistoryStore().mergeNextMutation();
 };
+/**
+ * BP-5969 (ADR-0019): drop typography overrides equal to the block's current role value so the
+ * page-scoped role CSS class drives them — and a later role edit repaints the block instead of a
+ * stale value pinning it. Runs on every text-style write (sidebar edit, RTE link, mount
+ * re-derivation), keeping the persisted style sparse. Delegates to the shared, pure normalizer so
+ * the maker and the AI metadata builder share one authority; this wrapper supplies the store's
+ * live role table.
+ */
+const normalizeTextStyleAgainstRole = (value) => normalizeAgainstRole(value, useBrandPageMakerStore().brandPageData?.styles?.textStyles
+    ?.textStyleOptions);
 export const CONTENT_SETTINGS_MODES = {
     edit: 'edit',
     add: 'add',
@@ -231,11 +246,13 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             if (!item) {
                 return;
             }
-            if (isSameValue(item.settings.content[payload.name], payload.value)) {
+            // BP-5969: a text-style write drops overrides equal to the role (no-op otherwise).
+            const value = normalizeTextStyleAgainstRole(payload.value);
+            if (isSameValue(item.settings.content[payload.name], value)) {
                 return; // no-op write: don't validate, don't flip the modified flag
             }
             armHistoryMergeForHydrationWrite(payload.isHydrationWrite);
-            item.settings.content[payload.name] = payload.value;
+            item.settings.content[payload.name] = value;
             this.validateItem({
                 id: payload.id,
                 name: payload.name,
@@ -275,7 +292,9 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             // open a plain capture burst that swallows the flagged text write
             // (BP-5810's second act).
             armHistoryMergeForHydrationWrite(isHydrationWrite);
-            item.settings.content[`${name}Style`] = vueDeepMerge(item.settings.content[`${name}Style`], value);
+            // BP-5969: normalize the merged style so an override equal to the role is dropped
+            // (the class supplies it) — keeps the block following its role after a role edit.
+            item.settings.content[`${name}Style`] = normalizeTextStyleAgainstRole(vueDeepMerge(item.settings.content[`${name}Style`], value));
             this.validateItem({ id, name });
             this.onContentChanged();
         },
@@ -286,6 +305,77 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             }
             return item.settings.content[`${name}Style`];
         },
+        // BP-5969 (A5 save-to-global): after a role's definition changes, re-normalize every
+        // block linked to it so any override that now equals the new role value is dropped and
+        // the block follows the role again. Walks the content text-style fields + text items.
+        // After "Apply changes to all": drop each sibling style override that now equals the role, and
+        // relink each sibling RTE run literal equal to the role before (`previousRole`) or after. The
+        // `active` editor has already relinked its own doc and still holds its debounced write, so that
+        // doc is written as given and that editor isn't remounted.
+        renormalizeTextStylesForRole(type, previousRole, active) {
+            const styleKeys = Object.keys(CONTENT_TEXT_STYLE_PROPERTY_KEYS);
+            const textStyleOptions = useBrandPageMakerStore().brandPageData?.styles?.textStyles
+                ?.textStyleOptions;
+            const roles = [
+                textStyleOptions?.[type]?.style,
+                previousRole,
+            ];
+            let relinkedRte = false;
+            // A text item's editors share one field, so a relinked sibling item remounts the active one too.
+            let relinkedInActiveField = false;
+            const relink = (doc, inActiveField = false) => {
+                if (!isTiptapDocument(doc))
+                    return doc;
+                const relinked = relinkRoleEqualMarks(doc, roles);
+                if (relinked !== doc) {
+                    relinkedRte = true;
+                    relinkedInActiveField ||= inActiveField;
+                }
+                return relinked;
+            };
+            for (const item of this.items) {
+                const content = item.settings.content;
+                const sectionType = content.type ?? item.type;
+                for (const key of styleKeys) {
+                    const style = content[key];
+                    if (style?.textStyleType !== type)
+                        continue;
+                    content[key] = normalizeTextStyleAgainstRole(style);
+                    const textField = pairedRteTextField(sectionType, key);
+                    if (!textField)
+                        continue;
+                    if (active && active.id === item.id && active.name === textField) {
+                        content[textField] = active.doc;
+                    }
+                    else {
+                        content[textField] = relink(content[textField]);
+                    }
+                }
+                const textItems = content.textItems;
+                if (Array.isArray(textItems)) {
+                    const isActiveField = !!active && active.id === item.id && active.name === 'textItems';
+                    textItems.forEach((textItem, index) => {
+                        if (textItem.textStyle?.textStyleType !== type)
+                            return;
+                        textItem.textStyle = normalizeTextStyleAgainstRole(textItem.textStyle);
+                        textItem.text =
+                            isActiveField && active?.index === index
+                                ? active.doc
+                                : relink(textItem.text, isActiveField);
+                    });
+                }
+            }
+            // Header and footer text links to the same roles but lives in its own stores.
+            useUiNavigationStyleSettingsStore().renormalizeTextStylesForRole(type, textStyleOptions);
+            useUiPageSettingsStore().renormalizeTextStylesForRole(type, textStyleOptions);
+            // A mounted sibling editor holds its own copy of the doc and would write it back.
+            if (relinkedRte) {
+                useHistoryStore().markRteResync(active && !relinkedInActiveField
+                    ? { except: { id: active.id, name: active.name } }
+                    : undefined);
+            }
+            this.onContentChanged();
+        },
         // Re-bake a container-bound block's card text contrast after a text-style change cleared
         // the element colour (a reset), so a card title switched to another style still uses the
         // higher-contrast brand colour. A no-op for non-card content and for fields that keep an
@@ -301,7 +391,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             if (!styles) {
                 return;
             }
-            applyCardTextContrast(item.settings.content, styles, brandPageMakerStore.brandPageType);
+            applyTextContrast(item.settings.content, styles, brandPageMakerStore.brandPageType);
             this.onContentChanged();
         },
         updateTextItemTextStyleType({ id, name, value, index, isHydrationWrite, }) {
@@ -321,7 +411,9 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
                 return;
             }
             armHistoryMergeForHydrationWrite(isHydrationWrite);
-            item.settings.content.textItems[index].textStyle = vueDeepMerge(item.settings.content.textItems[index].textStyle, value);
+            // BP-5969: normalize so a text-item override equal to the role is dropped.
+            item.settings.content.textItems[index].textStyle =
+                normalizeTextStyleAgainstRole(vueDeepMerge(item.settings.content.textItems[index].textStyle, value));
             this.validateItem({ id, name });
             this.onContentChanged();
         },
@@ -385,8 +477,13 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             // readable brand-role colour baked in here rather than derived at render.
             const styles = brandPageMakerStore.brandPageData?.styles;
             if (styles) {
-                applyCardTextContrast(content, styles, brandPageMakerStore.brandPageType);
+                applyTextContrast(content, styles, brandPageMakerStore.brandPageType);
             }
+            // Author RTE-eligible fields as Tiptap docs at birth — the replacement for the retired
+            // runtime plain→RTE rewrap. Runs after applyTextContrast has resolved the element colour
+            // onto style.color; it moves that colour into the mark and clears the object (matching
+            // migration-22's B1→D→G), so new content shares the migrated shape.
+            authorContentRteFields(content, styles?.textStyles?.textStyleOptions);
             const settingsConfig = CONTENT_SETTINGS_CONFIGS()[content.type];
             const fields = Object.keys(content)
                 .filter((k) => RESERVED_FIELD_NAMES.every((n) => n !== k))

package/lib/src/shared/logo-settings/components/LogoSettings.mixin.d.ts

@@ -82,6 +82,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         setHideBranding(payload: {
             hideBranding: boolean;
         }): void;
+        setSaveContactButtonTextStyle(payload: {
+            buttonTextStyle: import("../../../brand-page").SaveContactOptions["buttonTextStyle"];
+        }): void;
         setSensitiveContent(payload: {
             sensitiveContent: string;
         }): void;
@@ -144,7 +147,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: import("../../../brand-page").BrandPageType;
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../../brand-page").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").PageModel[];
             sections: import("@shared/page-settings/store").PageSettingsStateSections;
@@ -387,6 +390,13 @@ declare const _default: import("vue").DefineComponent<{}, {
                     isVariation: boolean;
                     isExcluded: boolean;
                 } | undefined;
+                bp_6136_v2_ai_builder?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
             };
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
@@ -462,6 +472,13 @@ declare const _default: import("vue").DefineComponent<{}, {
                     isVariation: boolean;
                     isExcluded: boolean;
                 } | undefined;
+                bp_6136_v2_ai_builder?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
             };
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
@@ -537,6 +554,13 @@ declare const _default: import("vue").DefineComponent<{}, {
                     isVariation: boolean;
                     isExcluded: boolean;
                 } | undefined;
+                bp_6136_v2_ai_builder?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
             };
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
@@ -684,6 +708,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             isHidden: boolean;
             pageId: string;
         }): void;
+        renormalizeTextStylesForRole(type: string, textStyleOptions: import("../../../brand-page").TextStyleOptions | undefined): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: import("@shared/page-settings/store").PageSettingsSection;
             propName: keyof import("@shared/page-settings/store").PageSettingsStateSectionStyles;