@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/shared/color-palette/section-color-matches.ts

@@ -1,13 +1,10 @@
 import type { BrandPageContext } from '@brand-page';
-// Leaf import, not the `@brand-page/utils` barrel: the barrel cycles through the
-// settings-component graph this module is reached from.
-import { resolveTextColor } from '@brand-page/utils/text-style.util';
 import { collectRteTextColors } from '@shared/color-strategies/rte-color';
 import { showsTextBackgroundColor } from '@shared/content-settings/text-background-color.util';
 import { pairedRteTextField } from '@shared/color-strategies/rte-field-pairs';
 // From the leaf, not `rich-text-editor.util` — that module drags dompurify and the
 // render helpers in at runtime, which this pure collector must not.
-import { isRteHtmlString } from '@brand-page-maker/utils/rte-shape';
+import { isRteHtmlString } from '@shared/rte-shape.util';
 import {
   resolveColorMatchState,
   resolveShapeMatchState,
@@ -279,23 +276,12 @@ export const collectSectionColorMatches = (
     label: string,
   ): SectionColorMatch | undefined => {
     const linkedStyleType = style.textStyleType as string | undefined;
-    const inheritedColor = linkedStyleType
-      ? textStyleOptions?.[linkedStyleType]?.style?.color
-      : undefined;
-    // The renderer's cascade — element colour over the global style's — via the
-    // same helper `TextStyleField.selectedTextStyle` uses.
-    const cascaded = resolveTextColor(
-      style as { color?: string },
-      inheritedColor ? { color: inheritedColor } : undefined,
-    );
-    // The third level, which `resolveTextColor` does not model because the
-    // renderer gets it free from root CSS inheritance.
-    const value = cascaded || defaultTextColor;
-    const state = resolveColorMatchState({
-      value,
-      linkedStyleType,
-      inheritedColor,
-    });
+    // ADR-0020: a role carries no colour, so a field with no colour of its own renders
+    // the page base coat (defaultTextColor), never a role colour. Element-first, else
+    // the base coat — there is no longer a `global-style` rung.
+    const ownColour = style.color as string | undefined;
+    const value = ownColour || defaultTextColor;
+    const state = resolveColorMatchState({ value, linkedStyleType });
 
     if (!state) {
       return undefined;
@@ -306,13 +292,8 @@ export const collectSectionColorMatches = (
       label,
       source: 'field',
       group: 'element',
-      origin: style.color
-        ? 'element'
-        : inheritedColor
-          ? 'global-style'
-          : 'site-default',
-      // Named on the site-default level too: "lands on the site default *through*
-      // Titles" is what tells the admin where to fix it.
+      origin: ownColour ? 'element' : 'site-default',
+      // Names the link so a site-default readout can say which role's text it is.
       originStyleType: linkedStyleType,
       entries: [toEntry(value, state, resolveColor)],
     };

package/src/shared/color-strategies/color-strategies.ts

@@ -274,6 +274,41 @@ export const FIELD_SLOT_MAP: Record<string, ColorSlot> = {
   testimonialStyle: 'onSurface',
 };
 
+/**
+ * Style fields a strategy writes although no settings config declares them, per section type,
+ * each with the config field it `follows` and the `textField` it colours: written only when the
+ * followed field is assignable, so it shares its visibility gate, and its slot still comes from
+ * `FIELD_SLOT_MAP`. A rich-text `textField` is recoloured with it, as a pair is.
+ *
+ * The payment and shop success message is edited through its `successMessage` text field, so
+ * the config walk never reaches its style. It follows the description it is seeded from
+ * (`text-role-reconnect.util.ts`). The contact form's is not listed. Not in
+ * `RTE_SECTION_FIELD_PAIRS`: released migration-21 reads that table.
+ */
+export const STYLE_FIELDS_OUTSIDE_CONFIG: Record<
+  string,
+  Record<string, { follows: string; textField: string }>
+> = {
+  'request-payment': {
+    successMessageStyle: {
+      follows: 'descriptionStyle',
+      textField: 'successMessage',
+    },
+  },
+  'support-me': {
+    successMessageStyle: {
+      follows: 'descriptionStyle',
+      textField: 'successMessage',
+    },
+  },
+  'shop-section': {
+    successMessageStyle: {
+      follows: 'descriptionStyle',
+      textField: 'successMessage',
+    },
+  },
+};
+
 /**
  * Resolve a field's slot: its default placement, promoted to the raised layer when this
  * section puts it there AND that layer is actually being painted.

package/src/shared/color-strategies/rte-color.test.ts

@@ -10,7 +10,7 @@ import {
   toRteJson,
   resolveHtmlParser,
   renderRteToHtml,
-} from '@brand-page-maker/utils/rte-render.util';
+} from '@shared/rte-render.util';
 
 const REF = 'var(--palette-1)';
 

package/src/shared/color-strategies/rte-color.ts

@@ -18,6 +18,9 @@ import { DEFAULT_LINK_COLOR } from '@src/constants/rich-text-editor.constants';
  *
  * **Overwrites deliberate literal colours** — a hand-picked `#FF0000` becomes the slot
  * colour. Consistent with the macro's replace-not-merge semantics, and one undo reverts it.
+ *
+ * MIGRATION-22 SNAPSHOT DEPENDENCY: its colour bake uses `collectRteTextColors` and
+ * `fillUncolouredRteText`. Pin the v22 implementation before changing either after release.
  */
 
 /**
@@ -39,6 +42,22 @@ const HIGHLIGHT_MARK = 'highlight';
 const isUnmarkedWhitespace = (node: JSONContent): boolean =>
   !node.marks?.length && typeof node.text === 'string' && !node.text.trim();
 
+/**
+ * True when the doc has at least one run `setRteTextColor` will actually colour:
+ * `docHasTextRun` (rte-authoring.util.ts) counts any text node, unmarked whitespace included, so
+ * a doc whose only run IS unmarked whitespace passes that check, `setRteTextColor` walks it and
+ * returns a (structurally unchanged) doc, and a caller that then deletes the style colour on any
+ * truthy return loses the colour with nowhere left to hold it.
+ */
+export const docHasColourableRun = (doc: JSONContent): boolean => {
+  const walk = (node: JSONContent): boolean =>
+    node.type === 'text'
+      ? !isUnmarkedWhitespace(node)
+      : (node.content ?? []).some(walk);
+
+  return walk(doc);
+};
+
 /**
  * A hyperlink run. Exempt from the strategy colour on both sides: the setter forces
  * `DEFAULT_LINK_COLOR` instead (links are always the same blue, per `AutoLink`), and the

package/src/shared/color-strategies/rte-field-pairs.test.ts

@@ -1,5 +1,9 @@
 import { describe, test, expect } from 'vitest';
-import { RTE_SECTION_FIELD_PAIRS, pairedRteTextField } from './rte-field-pairs';
+import {
+  RTE_SECTION_FIELD_PAIRS,
+  PLAIN_TEXT_PAIR_SECTIONS,
+  pairedRteTextField,
+} from './rte-field-pairs';
 import { RTE_ALLOWED_SECTION_TYPES } from '@brand-page-maker/utils/rich-text-editor.util';
 
 describe('pairedRteTextField', () => {
@@ -31,14 +35,31 @@ describe('pairedRteTextField', () => {
 });
 
 describe('the moved map still backs its original consumer', () => {
-  // Guards the move out of rich-text-editor.util.ts: RTE_ALLOWED_SECTION_TYPES is
-  // derived from the map's keys plus the 'text' special case.
-  test('RTE_ALLOWED_SECTION_TYPES = map keys + text', () => {
+  // Guards the move out of rich-text-editor.util.ts: RTE_ALLOWED_SECTION_TYPES is the pairs
+  // map's keys MINUS the plain-by-design sections, plus the 'text' special case. The plain
+  // sections sit in the map only for the colour-strategy pairing lookup — mounting an editor
+  // on them would convert their plain title/description to a doc and strand the style colour.
+  test('RTE_ALLOWED_SECTION_TYPES = map keys (minus plain-text sections) + text', () => {
     expect([...RTE_ALLOWED_SECTION_TYPES].sort()).toEqual(
-      [...Object.keys(RTE_SECTION_FIELD_PAIRS), 'text'].sort(),
+      [
+        ...Object.keys(RTE_SECTION_FIELD_PAIRS).filter(
+          (type) => !PLAIN_TEXT_PAIR_SECTIONS.has(type),
+        ),
+        'text',
+      ].sort(),
     );
   });
 
+  test('PLAIN_TEXT_PAIR_SECTIONS is empty — every paired section is RTE-editable (BP-5969)', () => {
+    // shop/request-payment/support-me were restored to RTE (they were RTE on develop); the seam is
+    // kept but currently holds nothing, and any type added to it must drop out of the editor gate.
+    expect(PLAIN_TEXT_PAIR_SECTIONS.size).toBe(0);
+
+    for (const type of ['shop-section', 'request-payment', 'support-me']) {
+      expect(RTE_ALLOWED_SECTION_TYPES).toContain(type);
+    }
+  });
+
   test('every pair names both halves', () => {
     Object.values(RTE_SECTION_FIELD_PAIRS)
       .flat()

package/src/shared/color-strategies/rte-field-pairs.ts

@@ -5,6 +5,9 @@
  * lookup, so keeping it out of `rich-text-editor.util.ts` (which pulls `dompurify`
  * at runtime) lets both read one source of truth without the strategy path dragging
  * in the editor toolchain.
+ *
+ * MIGRATION-22 SNAPSHOT DEPENDENCY: this list controls that migration's RTE conversion and colour
+ * walk. Preserve its v22 interpretation in the migration before changing this list after release.
  */
 
 export interface RTEFieldPair {
@@ -94,3 +97,33 @@ export const pairedRteTextField = (
     (pair) => pair.styleField === styleField,
   )?.textField;
 };
+
+/**
+ * Sections whose title/description are plain `string` (rendered by `TextWrapper`'s plain path from
+ * `style.color`, never an RTE mark) rather than RTE-managed docs. A section listed here is excluded
+ * from the RTE style-field set below, the migration's plain→doc conversion, the maker's add-time doc
+ * authoring, AND the editor gate (`RTE_ALLOWED_SECTION_TYPES`) — the single classification for
+ * "this field is plain, not RTE".
+ *
+ * **Currently empty.** shop/request-payment/support-me were RTE-editable on `develop` (title stored
+ * as `string`, editor mounted via the pairs map, the runtime mapper converting on the fly); BP-5969
+ * briefly classified them plain, which regressed that. They are RTE again — authored as docs at the
+ * factory and converted for existing sites by migration-22 — so this set is empty. Kept as the seam:
+ * to make a future section's title/description plain, add its type here and every consumer honours it.
+ */
+export const PLAIN_TEXT_PAIR_SECTIONS = new Set<string>([]);
+
+/**
+ * The genuinely-RTE style fields for a content type: the pairs map (minus the plain-by-design
+ * sections) plus the `text` section's own `textStyle`. Single source of truth shared by the
+ * migration (conversion + colour decouple) and the maker's content authoring.
+ */
+export const rteStyleFieldsFor = (type: string): string[] => {
+  if (PLAIN_TEXT_PAIR_SECTIONS.has(type)) return [];
+
+  const fields = (RTE_SECTION_FIELD_PAIRS[type] ?? []).map(
+    (pair) => pair.styleField,
+  );
+
+  return type === 'text' ? [...fields, 'textStyle'] : fields;
+};

package/src/shared/content-settings/components/color-matches-panel/ColorMatchesPanel.test.ts

@@ -503,28 +503,15 @@ describe('ColorMatchesPanel — RTE rows', () => {
     );
   });
 
-  test('an ALL-uncoloured document does not also claim "rest at site default"', () => {
-    // There is no "rest" — every run is at the default, and the origin line
-    // already says so. Reported from the UI as "Site default · … · rest at site
-    // default".
-    const styleStore = useUiStyleSettingsStore();
-
-    // Phase 3: the panel's "site default" level is now the paragraphs style.
-    styleStore.textStyles = {
-      ...styleStore.textStyles,
-      textStyleOptions: {
-        ...styleStore.textStyles.textStyleOptions,
-        paragraphs: {
-          type: 'paragraphs',
-          style: { color: 'var(--palette-0)' },
-        },
-      },
-    } as any;
-
+  test('an ALL-uncoloured document reports no colour, never "rest at site default"', () => {
+    // Post-ADR-0020 there is no site-wide default text colour, so an all-uncoloured
+    // document has no colour anywhere in the cascade: the row reads "No colour set"
+    // (not a fabricated site-default palette colour), and there is no "rest" to fall
+    // through. Reported from the UI as "Site default · … · rest at site default".
     const wrapper = mountPanel(config, { title: doc(para(run('plain'))) });
     const row = rows(wrapper)[0];
 
-    expect(row.text()).toContain('Logo Text');
+    expect(row.text()).toContain('No colour set');
     expect(row.find('[data-test="color-match-detail"]').exists()).toBe(false);
     expect(row.find('[data-test="color-match-origin"]').text()).toBe(
       'inherits global',
@@ -532,13 +519,15 @@ describe('ColorMatchesPanel — RTE rows', () => {
     expect(wrapper.text()).not.toContain('rest at site default');
   });
 
-  test('a document with no colour marks reports the global default it renders at', () => {
+  test('a document with no colour marks reads as inheriting the global default, bare', () => {
+    // Post-ADR-0020 there is no site-wide default text colour to name — an uncoloured
+    // RTE document simply inherits the (browser) default, reported bare as "inherits
+    // global": no style, and no static alarm.
     const wrapper = mountPanel(config, { title: doc(para(run('plain'))) });
 
     expect(rows(wrapper)[0].attributes('data-test-origin')).toBe(
       'site-default',
     );
-    // Bare — no style is named because the global style never colours RTE runs.
     expect(wrapper.text()).toContain('inherits global');
     expect(wrapper.text()).not.toContain('Static');
   });
@@ -584,19 +573,12 @@ describe('ColorMatchesPanel — where a text colour comes from', () => {
     useUiColorPaletteStore().setColors(seed());
   });
 
-  const withGlobalStyles = (
-    textStyleOptions: Record<string, unknown>,
-    defaultColor?: string,
-  ) => {
+  const withGlobalStyles = (textStyleOptions: Record<string, unknown>) => {
     const styleStore = useUiStyleSettingsStore();
 
     styleStore.textStyles = {
       ...styleStore.textStyles,
-      textStyleOptions: {
-        // Phase 3: `paragraphs` carries the panel's "site default" level.
-        paragraphs: { type: 'paragraphs', style: { color: defaultColor } },
-        ...textStyleOptions,
-      },
+      textStyleOptions: { ...textStyleOptions },
     } as any;
   };
 
@@ -614,9 +596,10 @@ describe('ColorMatchesPanel — where a text colour comes from', () => {
     expect(row.find('[data-test="color-match-origin"]').exists()).toBe(false);
   });
 
-  test('a colour handed down by a global style names that style, muted', () => {
-    // The whole point: "recolour this heading" and "recolour every Title on the
-    // site" are different acts, and the panel has to say which one this is.
+  test('a role colour is ignored — a link-only field renders a neutral "Inherits", never the role colour (ADR-0020)', () => {
+    // Even though `titles` carries a colour, a role no longer contributes one, so a
+    // link-only field reports neither the role's colour nor a brand tone — it reads as
+    // inheriting the (now colourless) role, exactly as the per-field indicator does.
     withGlobalStyles({ titles: { style: { color: 'var(--palette-0)' } } });
 
     const wrapper = mountPanel(config, {
@@ -624,20 +607,22 @@ describe('ColorMatchesPanel — where a text colour comes from', () => {
     });
     const row = rows(wrapper)[0];
 
-    expect(row.attributes('data-test-origin')).toBe('global-style');
-    expect(row.text()).toContain('Logo Text');
-    expect(row.find('[data-test="color-match-detail"]').exists()).toBe(false);
-    expect(row.find('[data-test="color-match-origin"]').text()).toBe(
-      'via titles',
-    );
-    // The old prose chain, verbatim, on hover.
-    expect(valueCell(row).attributes('title')).toBe(
-      'From titles · Color matched · Logo Text',
-    );
+    expect(row.attributes('data-test-origin')).toBe('site-default');
+    expect(row.attributes('data-test-state')).toBe('inherits');
+    expect(row.text()).toContain('Inherits');
+    // The role's colour must not surface as a brand-toned match.
+    expect(row.find(`.${COLOR_MATCH_TONE_CLASS.brand}`).exists()).toBe(false);
+    // The inherits state names the linked style in its own value detail, so there is
+    // no separate origin line repeating it.
+    expect(row.find('[data-test="color-match-origin"]').exists()).toBe(false);
   });
 
-  test('falling through to the site default names the style it fell through', () => {
-    withGlobalStyles({ titles: { style: {} } }, 'var(--palette-3)');
+  test('a link-only field names the style it inherits from, in the value and the hover title', () => {
+    // Post-ADR-0020 there is no colour to "fall through" to, but the linked style is
+    // still worth surfacing: the value reads "Inherits · titles" and the verbose hover
+    // title carries the full chain. The style name lives in the value detail, so the
+    // inherits row shows no separate origin line.
+    withGlobalStyles({ titles: { style: {} } });
 
     const wrapper = mountPanel(config, {
       titleStyle: { textStyleType: 'titles' },
@@ -645,33 +630,25 @@ describe('ColorMatchesPanel — where a text colour comes from', () => {
     const row = rows(wrapper)[0];
 
     expect(row.attributes('data-test-origin')).toBe('site-default');
-    expect(row.text()).toContain('Utility 2');
-    // Its own line below the value ("inherits global <Style>"), not an inline
-    // suffix — the linked style leads because it is where an admin would go.
-    const origin = row.find('[data-test="color-match-origin"]');
-
-    expect(origin.text()).toBe('inherits global titles');
-    expect(origin.classes()).toContain('tw-block');
-    expect(row.find('[data-test="color-match-detail"]').exists()).toBe(false);
+    expect(row.attributes('data-test-state')).toBe('inherits');
+    expect(row.text()).toContain('Inherits');
+    expect(row.find('[data-test="color-match-detail"]').text()).toBe('titles');
+    expect(row.find('[data-test="color-match-origin"]').exists()).toBe(false);
     expect(valueCell(row).attributes('title')).toBe(
-      'Site default (via titles) · Color matched · Utility 2',
+      'Site default (via titles) · Inherits · titles',
     );
   });
 
-  test('an unlinked field with no colour inherits the global default, unnamed', () => {
-    withGlobalStyles({}, 'var(--palette-3)');
-
+  test('an unlinked field with no colour has nothing to report — no row', () => {
+    // Post-ADR-0020 an uncoloured field has no colour anywhere (no role colour, no
+    // page base coat) and, unlinked, no style to name either — so the panel reports it
+    // exactly as its per-field indicator does: nothing. The section carries no other
+    // colour, so the whole panel stays silent.
     const wrapper = mountPanel(config, { titleStyle: {} });
-    const row = rows(wrapper)[0];
 
-    expect(row.attributes('data-test-origin')).toBe('site-default');
-    expect(row.text()).toContain('Utility 2');
-    // No linked style sits between this field and the site-wide default text
-    // colour, so there is no "<Style>" to append — the bare "inherits global".
-    expect(row.find('[data-test="color-match-origin"]').text()).toBe(
-      'inherits global',
-    );
-    expect(row.find('[data-test="color-match-detail"]').exists()).toBe(false);
+    expect(
+      wrapper.find('[data-component="color-matches-panel"]').exists(),
+    ).toBe(false);
   });
 });
 

package/src/shared/content-settings/components/color-matches-panel/ColorMatchesPanel.vue

@@ -212,10 +212,16 @@ const styleSettingsStore = useUiStyleSettingsStore();
 const userStore = useBrandPageMakerUserStore();
 
 const matches = computed<SectionColorMatch[]>(() =>
+  // No `defaultTextColor`: post-ADR-0020 there is no site-wide default text colour
+  // (the page base coat was removed, and a role carries no colour), so an uncoloured
+  // field renders at the browser default, not a managed colour. Feeding one in would
+  // invent a "site default" the per-field `ColorMatchIndicator` has no notion of and
+  // report an uncoloured field as an off-palette static — the divergence this panel
+  // must never have. An uncoloured field is reported exactly as the indicator does:
+  // `inherits` when linked, nothing when unlinked.
   collectSectionColorMatches(props.config, props.content, {
     context: props.context,
     textStyleOptions: styleSettingsStore.textStyles?.textStyleOptions,
-    defaultTextColor: styleSettingsStore.defaultTextColor,
     canUseRichTextEditor: userStore.features.canUseRichTextEditor,
     resolveColor: paletteStore.resolveColor,
   }),

package/src/shared/content-settings/components/content-settings/ContentSettings.mixin.ts

@@ -9,25 +9,14 @@ import { useUiSideBarStore } from '../../../side-bar/store';
 import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { useUiContentSettingsStore } from '../../store';
 import { CONTENT_SETTINGS_MODES } from '../../store';
-import {
-  useBrandPageMakerUserStore,
-  useBrandPageContainerStore,
-} from '@brand-page-maker/stores';
+import { useBrandPageContainerStore } from '@brand-page-maker/stores';
 import { SIDE_BAR_CONTENT_ID } from '../../constants';
 import type { ComponentPublicInstance } from '@vue/runtime-core';
 import {
   SELECT_LOCATIONS,
   useEventTracker,
 } from '@brand-page-maker/composables/useEventTracker';
-import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
-import {
-  switchAllContentToRTE,
-  transformToRTE,
-  RTE_ALLOWED_SECTION_TYPES,
-} from '@brand-page-maker/utils';
-import { useUiStyleSettingsStore } from '../../../style-settings/store';
 import { usePageNavigationStore } from '../../../../shared/page-navigation/store/page-navigation-store';
-import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 
 interface CategoryTab {
   category: string;
@@ -40,13 +29,9 @@ export default defineComponent({
     const contentSettingsStore = useUiContentSettingsStore();
     const pageSettingsStore = useUiPageSettingsStore();
     const pageNavigationStore = usePageNavigationStore();
-    const styleSettingsStore = useUiStyleSettingsStore();
     const sideBarStore = useUiSideBarStore();
-    const userStore = useBrandPageMakerUserStore();
     const containerStore = useBrandPageContainerStore();
     const eventTracker = useEventTracker();
-    const historyStore = useHistoryStore();
-    const { externalEditor } = useExternalRichTextEditor();
 
     return {
       mode: computed(() => contentSettingsStore.mode),
@@ -56,17 +41,11 @@ export default defineComponent({
         () => contentSettingsStore.selectedItemId,
       ),
       isAdminMaker: computed(() => containerStore.isAdminMaker),
-      canUseRichTextEditor: computed(
-        () => userStore.features.canUseRichTextEditor,
-      ),
       contentSettingsStore,
       pageNavigationStore,
       pageSettingsStore,
       sideBarStore,
-      styleSettingsStore,
       eventTracker,
-      historyStore,
-      externalEditor,
     };
   },
   data() {
@@ -79,17 +58,6 @@ export default defineComponent({
       ] as CategoryTab[],
     };
   },
-  mounted() {
-    if (this.canUseRichTextEditor) {
-      // RTE rewrap on tab mount — fold into current head.
-      this.historyStore.mergeNextMutation();
-      switchAllContentToRTE(
-        this.pageSettingsStore,
-        this.externalEditor,
-        this.styleSettingsStore,
-      );
-    }
-  },
   computed: {
     showPageControls(): boolean {
       return true;
@@ -132,18 +100,6 @@ export default defineComponent({
         return;
       }
 
-      if (
-        RTE_ALLOWED_SECTION_TYPES.includes(option.type) &&
-        this.canUseRichTextEditor
-      ) {
-        transformToRTE(
-          this.pageSettingsStore,
-          this.externalEditor,
-          this.styleSettingsStore,
-          newItem.settings.content as Content,
-        );
-      }
-
       // Send MixPanel add event
       this.eventTracker.sendAddContentEvent(
         option.type,
@@ -292,7 +248,4 @@ export default defineComponent({
       this.scrollToSelectedItem(itemId);
     },
   },
-  beforeUnmount() {
-    this.externalEditor.destroy();
-  },
 });

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.ts

@@ -2,7 +2,10 @@ import { defineComponent, computed } from 'vue';
 import type { PropType } from 'vue';
 import type { ContentItem, Field, UpdateItemValuePayload } from '../../models';
 import { VIEWPORTS, type Content, type LogoContent } from '@brand-page';
-import { containerTextColorDefaults } from '@brand-page/utils/container-text-color.util';
+import {
+  containerTextColorDefaults,
+  buttonLabelColorDefault,
+} from '@brand-page/utils/container-text-color.util';
 import { UI_EVENT_SOURCES } from '../../../models';
 import { useUiContentSettingsStore } from '../../store';
 import { useUiSideBarStore } from '../../../side-bar/store';
@@ -140,6 +143,10 @@ export default defineComponent({
      * aren't container-bound text. Fed to the Text Style panel so its swatch matches
      * what the renderer paints — both derive it from the SAME helper (see
      * `container-text-color.util.ts`), so the sidebar and canvas cannot drift.
+     *
+     * A standalone button's label carries no element colour (it inherits the button's
+     * on-fill colour at render); `buttonLabelColorDefault` supplies that same colour so
+     * the swatch shows it instead of reading blank.
      */
     containerDefaultColor(): string | undefined {
       const defaults = containerTextColorDefaults(
@@ -148,7 +155,14 @@ export default defineComponent({
         this.brandPageType,
       ) as Record<string, string | undefined>;
 
-      return defaults[this.fieldName];
+      return (
+        defaults[this.fieldName] ??
+        buttonLabelColorDefault(
+          this.content,
+          this.brandPageData.styles,
+          this.fieldName,
+        )
+      );
     },
     isInline(): boolean {
       return this.field.isInline || false;
@@ -261,8 +275,13 @@ export default defineComponent({
     // the store's new one, so remount it (same lever as onUseGeneratedText) to
     // re-seed from the just-written value. Keyed off the history store's resync
     // signal, bumped by the applier only when it writes an RTE document.
-    'historyStore.rteResyncToken'() {
-      if (this.showRichTextEditor) {
+    'historyStore.rteResyncToken'(_token: number, previous: number) {
+      const isExcepted = this.historyStore.isRteResyncExcepted(
+        { id: this.id, name: this.fieldName },
+        previous,
+      );
+
+      if (this.showRichTextEditor && !isExcepted) {
         this.richTextEditorKey = this.richTextEditorKey + 1;
       }
     },
@@ -292,9 +311,16 @@ export default defineComponent({
         this.contentSettingsStore.updateItemValue(payload);
       }
 
-      // Switching a card title's text style clears its colour; re-bake the card's
-      // higher-contrast brand colour so it stays readable. No-op for non-card content.
-      if (this.field.type === ITEM_FIELD_TYPES['text-style'] && payload.id) {
+      // Re-bake the section's contrast colour after a change that can leave text uncoloured:
+      // switching a text style clears its colour, and ADDING a new `textItems` entry creates one
+      // with no colour (TextItemsField.addOption). `applyTextContrast` colours only the uncoloured
+      // fields/items, so this is a no-op for the rest. Without it a new brand-site text item falls
+      // back to the base default instead of the page-contrast colour.
+      if (
+        (this.field.type === ITEM_FIELD_TYPES['text-style'] ||
+          this.field.type === ITEM_FIELD_TYPES['text-items']) &&
+        payload.id
+      ) {
         this.contentSettingsStore.applyCardContrastToItem({ id: payload.id });
       }