@designcrowd/library.brand-page 6.0.6-ast-bg-shape-2 → 6.0.6-json-prereq-2

package/lib/src/{CreatedOnBrandCrowd-de-de-FBIOiGyB.js → CreatedOnBrandCrowd-de-de-F1Ldbx6c.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-wawntNBs.js";
+import { _ as t } from "./lib-BWEaceMZ.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-C0UyWKLw.js → CreatedOnBrandCrowd-en-us-D8z2m0Et.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-wawntNBs.js";
+import { _ as t } from "./lib-BWEaceMZ.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-Ob5_G51b.js → CreatedOnBrandCrowd-es-es-CLSkbkYu.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-wawntNBs.js";
+import { _ as t } from "./lib-BWEaceMZ.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-Dp7DaN9s.js → CreatedOnBrandCrowd-fr-ca-Cyc4YWYR.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-wawntNBs.js";
+import { _ as t } from "./lib-BWEaceMZ.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-Dp7DaN9s.js → CreatedOnBrandCrowd-fr-fr-Cyc4YWYR.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-wawntNBs.js";
+import { _ as t } from "./lib-BWEaceMZ.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-B42T278-.js → CreatedOnBrandCrowd-pt-br-DSSUcSmV.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-wawntNBs.js";
+import { _ as t } from "./lib-BWEaceMZ.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-B42T278-.js → CreatedOnBrandCrowd-pt-pt-DSSUcSmV.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-wawntNBs.js";
+import { _ as t } from "./lib-BWEaceMZ.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-LDOPwzR8.js → CreatedOnDcom-de-de-DF1JaJPE.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-wawntNBs.js";
+import { _ as e } from "./lib-BWEaceMZ.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-DVH4dPqF.js → CreatedOnDcom-en-us-Dek2GCu0.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-wawntNBs.js";
+import { _ as e } from "./lib-BWEaceMZ.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-CCjDf6JK.js → CreatedOnDcom-es-es-C3JD7_bP.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-wawntNBs.js";
+import { _ as e } from "./lib-BWEaceMZ.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-B-onUZea.js → CreatedOnDcom-fr-ca-Bllxm84y.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-wawntNBs.js";
+import { _ as e } from "./lib-BWEaceMZ.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-CvUTso8h.js → CreatedOnDcom-fr-fr-B3cFZgRB.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-wawntNBs.js";
+import { _ as e } from "./lib-BWEaceMZ.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-Bx2ex-72.js → CreatedOnDcom-pt-br-DHCnZdZk.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-wawntNBs.js";
+import { _ as M } from "./lib-BWEaceMZ.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-LXHdb2Ol.js → CreatedOnDcom-pt-pt-BLooAZOd.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-wawntNBs.js";
+import { _ as M } from "./lib-BWEaceMZ.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

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

@@ -7,6 +7,14 @@ import { TextStyles } from './styles.model';
 import { LogoStyles } from './logo.model';
 import type { LogoImageModel, LogoTemplateImageModel } from './logo.model';
 import type { BrandPagePaymentConfig } from './payment.model';
+import type { JSONContent } from '@tiptap/vue-3';
+/**
+ * BP-5787 — a rich-text field is either a legacy inline-HTML string or a
+ * Tiptap JSON document. Typing RTE content fields as RichTextValue (instead of
+ * `string`) forces every consumer to handle both forms — surfacing at compile
+ * time any code that assumes a plain string (e.g. `.replace`, `.length`).
+ */
+export type RichTextValue = string | JSONContent;
 export * from './brand-page-context.model';
 export * from './payment.model';
 export * from './content.model';
@@ -26,13 +34,11 @@ export declare class BackgroundShape {
     constructor(option?: Partial<BackgroundShape>);
 }
 export type BackgroundStyle = Partial<Omit<BrandPageCssStyle, 'backgroundColor'>>;
-export type BackgroundShapeMode = 'single' | 'multiple';
 export declare class BackgroundStyles {
     style: BackgroundStyle;
     backgroundShapeStyle: BackgroundStyle;
     backgroundImageUrl: string;
     backgroundShapes: BackgroundShape[];
-    shapeMode?: BackgroundShapeMode;
     personalisationRole?: PersonalisationRole;
     media?: AbstractMedia;
     mediaOverlayStyle: BrandPageCssStyle;
@@ -143,7 +149,7 @@ export interface TextContent extends Content {
     /**
      * For BrandPage/BrandContact only
      */
-    text: string;
+    text: RichTextValue;
     /**
      * For BrandSite
      */
@@ -166,9 +172,9 @@ export interface TextContent extends Content {
 }
 export interface ProfileContent extends Content {
     avatarImageUrl: string;
-    name: string;
-    title: string;
-    description: string;
+    name: RichTextValue;
+    title: RichTextValue;
+    description: RichTextValue;
     backgroundColor: BrandPageCssStyle;
     colorReplacements: ColorReplacement[];
     mediaType?: string;
@@ -186,7 +192,7 @@ export interface MapContent extends Content {
 }
 export interface MailingListContent extends Content {
     acceptedFields?: 'emailOnly' | 'nameAndEmail';
-    title: string;
+    title: RichTextValue;
     buttonText: string;
     titleStyle: TextStyleDeclaration;
     buttonTextStyle: TextStyleDeclaration;
@@ -237,10 +243,10 @@ export interface FormField {
 export interface ContactFormContent extends Content {
     type: 'contact-form';
     displayStyle: string;
-    title: string;
-    description: string;
+    title: RichTextValue;
+    description: RichTextValue;
     buttonText: string;
-    successMessage: string;
+    successMessage: RichTextValue;
     fields: FormField[];
     responseEmail: string;
     imageUrl?: string;
@@ -259,8 +265,8 @@ export interface ContactFormContent extends Content {
 export interface BannerSectionContent extends Content {
     type: 'banner-section';
     imageUrl: string;
-    title: string;
-    description: string;
+    title: RichTextValue;
+    description: RichTextValue;
     buttonText: string | false;
     url: string;
     email?: string;
@@ -287,8 +293,8 @@ export declare const MEDIA_TYPES: {
 };
 export type MediaType = keyof typeof MEDIA_TYPES;
 export interface TextMediaItem extends ImageItem {
-    title: string;
-    paragraph: string;
+    title: RichTextValue;
+    paragraph: RichTextValue;
     itemsId: number;
     buttonText?: string | false;
     buttonPageId?: string;
@@ -307,16 +313,16 @@ export interface TextShapeItem extends TextMediaItem {
 export interface ShapeItem extends ImageItem {
     colorReplacements: ColorReplacement[];
     mediaType: MediaType;
-    title?: string;
-    paragraph?: string;
+    title?: RichTextValue;
+    paragraph?: RichTextValue;
     titleOverride?: string;
     paragraphOverride?: string;
 }
 export interface TestimonialItems {
     imageUrl: string;
-    name: string;
-    position: string;
-    testimonials: string;
+    name: RichTextValue;
+    position: RichTextValue;
+    testimonials: RichTextValue;
     colorReplacements: ColorReplacement[];
     mediaType: string;
     size?: string;
@@ -327,7 +333,7 @@ export interface TestimonialItems {
     positionOverride?: string;
 }
 export interface TextItem {
-    text: string;
+    text: RichTextValue;
     textStyle: TextStyleDeclaration;
     textOverride?: string;
 }
@@ -344,8 +350,8 @@ export interface ImagesSectionContent extends Content, MediaSection {
     enablePopup: boolean;
 }
 export interface MediaSection extends Content {
-    title: string;
-    description: string;
+    title: RichTextValue;
+    description: RichTextValue;
     displayStyle: ImagesSectionContentDisplayStyle;
     items: TextShapeItem[] | TextMediaItem[];
     titleStyle: TextStyleDeclaration;
@@ -362,7 +368,7 @@ export interface ColorReplacement {
 }
 export interface TestimonialSectionContent extends Content {
     type: 'testimonial-section';
-    title: string;
+    title: RichTextValue;
     displayStyle: string;
     items: TestimonialItems[];
     titleStyle: TextStyleDeclaration;
@@ -376,8 +382,8 @@ export interface TestimonialSectionContent extends Content {
 export interface AboutSectionContent extends Content {
     type: 'about-section';
     imageUrl: string;
-    title: string;
-    paragraph: string;
+    title: RichTextValue;
+    paragraph: RichTextValue;
     displayStyle: string;
     titleStyle: TextStyleDeclaration;
     paragraphStyle: TextStyleDeclaration;
@@ -399,7 +405,7 @@ export declare const SOCIAL_LINKS_ICON_DISPLAY_STYLES: {
 export type SocialLinksIconDisplayStyle = keyof typeof SOCIAL_LINKS_ICON_DISPLAY_STYLES;
 export interface SocialLinksContent extends Content {
     type: 'social-links';
-    title: string;
+    title: RichTextValue;
     links: LinksItem[];
     iconDisplayStyle: SocialLinksIconDisplayStyle;
     iconFillStyles: BrandPageCssStyle;
@@ -422,8 +428,8 @@ export interface DividerSectionContent extends Content {
 }
 export interface BookingSectionContent extends Content {
     type: 'booking-section';
-    title: string;
-    description: string;
+    title: RichTextValue;
+    description: RichTextValue;
     buttonText: string;
     url: string;
     email?: string;

package/lib/src/brand-page/models/index.js

@@ -46,7 +46,6 @@ export class BackgroundStyles {
     backgroundShapeStyle;
     backgroundImageUrl;
     backgroundShapes;
-    shapeMode;
     personalisationRole;
     media;
     mediaOverlayStyle;
@@ -54,7 +53,6 @@ export class BackgroundStyles {
         this.backgroundImageUrl = option.backgroundImageUrl || '';
         this.backgroundShapes = (option.backgroundShapes ||
             []);
-        this.shapeMode = option.shapeMode;
         this.style = option.style || {
             background: '',
         };

package/lib/src/brand-page/utils/migration/migration-18.d.ts

@@ -0,0 +1,2 @@
+import type { MigrationData } from '../migration.util';
+export declare const migration18: (migrationResult: MigrationData) => Promise<MigrationData>;

package/lib/src/brand-page/utils/migration/migration-18.js

@@ -0,0 +1,71 @@
+import { hasRTEContent } from '../../../brand-page-maker/utils';
+import { useExternalRichTextEditor } from '../../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
+/**
+ * BP-5787 — migrate existing inline-HTML RTE content to Tiptap JSON.
+ *
+ * The editor now emits, and the renderer now reads, Tiptap JSON. Existing
+ * published/saved sites still hold RTE fields as HTML strings. This converts
+ * them on load:
+ *   - maker: the loaded model is JSON, so the next save persists JSON.
+ *   - web-renderer: lazy migrate-on-read — old sites render from JSON without
+ *     needing a re-save.
+ *
+ * Runs on EVERY load (runAlways) so it also normalises content the AI section
+ * builders still emit as HTML — there is no need to change those builders or
+ * widen the content model types.
+ *
+ * Scope: only HTML-RTE strings (hasRTEContent) are converted. Plain strings,
+ * numbers, and already-JSON docs are left untouched, so the migration is
+ * idempotent (re-running on JSON content is a no-op — non-string values are
+ * skipped). Nested RTE inside item arrays (textItems, testimonials, images…)
+ * is handled by recursing into arrays; style objects are intentionally not
+ * descended into (they never hold RTE content).
+ */
+const convertRteStringsToJson = (value, editor) => {
+    if (Array.isArray(value)) {
+        value.forEach((item) => convertRteStringsToJson(item, editor));
+        return;
+    }
+    if (!value || typeof value !== 'object')
+        return;
+    const record = value;
+    Object.keys(record).forEach((key) => {
+        const field = record[key];
+        if (typeof field === 'string' && hasRTEContent(field)) {
+            editor.commands.setContent(field);
+            record[key] = editor.getJSON();
+        }
+        else if (Array.isArray(field)) {
+            convertRteStringsToJson(field, editor);
+        }
+    });
+};
+export const migration18 = async (migrationResult) => {
+    const { brandPageModel } = migrationResult;
+    // HTML→JSON parsing needs a DOM (Tiptap's editor). In a DOM-less context
+    // (pure-node SSR or unit tests) we can't parse HTML, so we leave the RTE
+    // fields as HTML strings — the renderer and the fraud/translation extractors
+    // all dual-read HTML, so this is safe. Conversion happens wherever a DOM is
+    // available (the browser editor, jsdom).
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return migrationResult;
+    }
+    let externalEditor;
+    try {
+        externalEditor = useExternalRichTextEditor().externalEditor;
+    }
+    catch {
+        return migrationResult;
+    }
+    try {
+        for (const page of brandPageModel.pages) {
+            for (const content of page.contents) {
+                convertRteStringsToJson(content, externalEditor);
+            }
+        }
+    }
+    finally {
+        externalEditor.destroy();
+    }
+    return migrationResult;
+};

package/lib/src/brand-page/utils/migration.util.js

@@ -20,6 +20,7 @@ import { migration14 } from './migration/migration-14';
 import { migration15 } from './migration/migration-15';
 import { migration16 } from './migration/migration-16';
 import { migration17 } from './migration/migration-17';
+import { migration18 } from './migration/migration-18';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -132,6 +133,16 @@ const MIGRATION_TABLE = [
         runAlways: true,
         description: 'Padding Control backfill (BP-5699 Tier 2 + BP-5700 Store): backfill existing top/bottom spacing as explicit padding for text (12px), images/social links/shapes/booking (32px), store (16px), contact form (per layout), banner and about (per display style)',
     },
+    {
+        version: 18,
+        migrateFn: migration18,
+        // runAlways: normalise RTE to JSON on every load. Idempotent (only HTML
+        // strings are converted; JSON is skipped), so it also catches content the
+        // AI section builders still emit as HTML — converting it on the next read
+        // without a new migration or changes to those builders.
+        runAlways: true,
+        description: 'BP-5787: convert inline-HTML RTE content to Tiptap JSON on load (lazy migrate-on-read for web-renderer; persisted on next maker save; also normalises AI-built HTML)',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

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

@@ -1,5 +1,5 @@
 export declare const getRenderText: (text: string) => string;
-export declare const escapeContentText: (text: string | undefined) => string | undefined;
+export declare const escapeContentText: (text: unknown) => string | undefined;
 export declare const decodeHtmlEntities: (text: string) => string;
 export declare const unescapeContentText: (text: string) => string;
 export declare const encodeContentText: (text: string | undefined) => string | undefined;

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

@@ -1,11 +1,43 @@
 import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
+/**
+ * BP-5787 — a Tiptap JSON document is an object with `type: 'doc'`.
+ * Inlined here (rather than importing from brand-page-maker) to avoid a
+ * circular import: rich-text-editor.util imports getRenderText from this file.
+ */
+const isTiptapDoc = (value) => typeof value === 'object' &&
+    value !== null &&
+    value.type === 'doc';
+const jsonDocPlainText = (doc) => {
+    const parts = [];
+    const walk = (node) => {
+        if (typeof node?.text === 'string')
+            parts.push(node.text);
+        node?.content?.forEach(walk);
+    };
+    walk(doc);
+    return parts.join(' ').replace(/\s+/g, ' ').trim();
+};
 export const getRenderText = (text) => {
+    // BP-5787: RTE fields may now be Tiptap JSON objects. Non-strings pass
+    // through untouched so the renderer (TextWrapper) handles them via its
+    // JSON-aware path, instead of throwing on `.replace`.
+    if (typeof text !== 'string') {
+        return text;
+    }
     return text.replace(new RegExp(`(${ESCAPED_NEWLINE_CHARACTER}|\\n)`, 'g'), '<br/>');
 };
+// Accepts a legacy inline-HTML string or a Tiptap JSON document (BP-5787):
+// for JSON it returns the concatenated visible text; for HTML it strips tags.
 export const escapeContentText = (text) => {
     if (!text) {
         return text;
     }
+    if (isTiptapDoc(text)) {
+        return jsonDocPlainText(text);
+    }
+    if (typeof text !== 'string') {
+        return undefined;
+    }
     return text
         .replace(/(<([^>]+)>)/gi, '')
         .replace(/(\r\n|\r|\n)/g, ESCAPED_NEWLINE_CHARACTER);

package/lib/src/brand-page/utils/vcard.util.js

@@ -150,9 +150,9 @@ const processSocialLinks = (socialLinksContent, vcardLines, addedEntries) => {
     });
 };
 const addProfileInfo = (profile, vcardLines) => {
-    const name = sanitizeForVCard(profile.name || '');
-    const title = sanitizeForVCard(profile.title || '');
-    const description = sanitizeForVCard(profile.description || '');
+    const name = sanitizeForVCard(getPlainTextFromRTE(profile.name) || '');
+    const title = sanitizeForVCard(getPlainTextFromRTE(profile.title) || '');
+    const description = sanitizeForVCard(getPlainTextFromRTE(profile.description) || '');
     if (name) {
         const nameParts = name.trim().split(/\s+/);
         const lastName = nameParts.length > 1 ? nameParts.pop() || '' : '';
@@ -205,6 +205,6 @@ const downloadVCard = (vcard, filename) => {
 export const saveContact = (brandPageData) => {
     const vcard = generateVCard(brandPageData);
     const profile = findProfileContent(brandPageData);
-    const filename = generateVCardFilename(profile?.name);
+    const filename = generateVCardFilename(getPlainTextFromRTE(profile?.name));
     downloadVCard(vcard, filename);
 };

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

@@ -1,4 +1,4 @@
-import type { ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, MediaTypes, TextStyles, BackgroundStyle, BackgroundShape, PersonalisationRole, SaveContactOptions } from './models';
+import type { ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, MediaTypes, TextStyles, BackgroundStyle, BackgroundShape, PersonalisationRole, SaveContactOptions, RichTextValue } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 export type ViewModelType = 'button' | 'image' | 'image-gallery' | 'logo' | 'map' | 'mailing-list' | 'profile' | 'support-me' | 'request-payment' | 'text' | 'video' | 'contact-form' | 'banner-section' | 'images-section' | 'about-section' | 'divider-section' | 'testimonial-section' | 'social-links' | 'shapes-section' | 'shop-section' | 'booking-section';
 export interface ContentViewModel {
@@ -94,8 +94,8 @@ export interface TextImageSectionViewModel {
     id: string;
     type: 'images-section';
     role: ContentType;
-    title: string;
-    description: string;
+    title: RichTextValue;
+    description: RichTextValue;
     displayStyle: ImagesSectionContentDisplayStyle;
     aspectRatio: AspectRatio;
     areImagesFullWidth: boolean;

package/lib/src/brand-page-maker/__fixtures__/complex-rte.fixture.d.ts

@@ -0,0 +1,22 @@
+/**
+ * BP-5787 — golden-master fixture for the RTE HTML→JSON migration.
+ *
+ * A single rich-text value that exercises every mark/node the editor can emit,
+ * so one snapshot guards the whole serialisation surface. Captured as a baseline
+ * on the current HTML pipeline; after the migration the JSON pipeline must
+ * reproduce byte-identical rendered output (see rte-render-parity.test.ts).
+ *
+ * Coverage:
+ *  - block nodes: heading (h2), paragraph, text-align (center / right)
+ *  - inline marks: bold, italic, underline, strike
+ *  - textStyle attrs: fontFamily, fontSize (em), letterSpacing (em), lineHeight (unitless)
+ *  - colour: theme TOKEN ref (var(--logo-text-color)) AND a literal hex (#FF0000)
+ *  - highlight (background colour via <mark>)
+ *  - links: internal (target=_self) and external (target=_blank rel=noopener)
+ */
+export declare const COMPLEX_RTE_HTML = "<h2 style=\"text-align: center\"><span style=\"color: var(--logo-text-color)\">Themed heading</span></h2><p><strong>bold</strong> <em>italic</em> <u>underline</u> <s>strike</s> <span style=\"font-family: Montserrat; font-size: 1.5em; letter-spacing: 0.05em; line-height: 1.4\">styled span</span> <mark data-color=\"#ffe08a\" style=\"background-color: #ffe08a\">highlight</mark> <span style=\"color: #FF0000\">literal hex</span> <a target=\"_self\" href=\"/about\">internal link</a> <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://example.com\">external link</a></p><p style=\"text-align: right\">second paragraph, right-aligned</p>";
+/**
+ * The theme-token CSS variable that MUST survive the HTML→JSON round-trip
+ * (BP-5787 stores token refs instead of flattening them to rgb()).
+ */
+export declare const THEME_TOKEN_REF = "var(--logo-text-color)";

package/lib/src/brand-page-maker/__fixtures__/complex-rte.fixture.js

@@ -0,0 +1,22 @@
+/**
+ * BP-5787 — golden-master fixture for the RTE HTML→JSON migration.
+ *
+ * A single rich-text value that exercises every mark/node the editor can emit,
+ * so one snapshot guards the whole serialisation surface. Captured as a baseline
+ * on the current HTML pipeline; after the migration the JSON pipeline must
+ * reproduce byte-identical rendered output (see rte-render-parity.test.ts).
+ *
+ * Coverage:
+ *  - block nodes: heading (h2), paragraph, text-align (center / right)
+ *  - inline marks: bold, italic, underline, strike
+ *  - textStyle attrs: fontFamily, fontSize (em), letterSpacing (em), lineHeight (unitless)
+ *  - colour: theme TOKEN ref (var(--logo-text-color)) AND a literal hex (#FF0000)
+ *  - highlight (background colour via <mark>)
+ *  - links: internal (target=_self) and external (target=_blank rel=noopener)
+ */
+export const COMPLEX_RTE_HTML = `<h2 style="text-align: center"><span style="color: var(--logo-text-color)">Themed heading</span></h2><p><strong>bold</strong> <em>italic</em> <u>underline</u> <s>strike</s> <span style="font-family: Montserrat; font-size: 1.5em; letter-spacing: 0.05em; line-height: 1.4">styled span</span> <mark data-color="#ffe08a" style="background-color: #ffe08a">highlight</mark> <span style="color: #FF0000">literal hex</span> <a target="_self" href="/about">internal link</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://example.com">external link</a></p><p style="text-align: right">second paragraph, right-aligned</p>`;
+/**
+ * The theme-token CSS variable that MUST survive the HTML→JSON round-trip
+ * (BP-5787 stores token refs instead of flattening them to rgb()).
+ */
+export const THEME_TOKEN_REF = 'var(--logo-text-color)';

package/lib/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.mixin.d.ts

@@ -1,14 +1,15 @@
 import type { BackgroundStylesConfigOption } from '@brand-page-maker/models/background-styles-config';
 import type { UserMediaItem, UserMediaItemWithDimensions } from 'src/shared/my-uploads/models';
+interface BackgroundShapePosition {
+    name: string;
+    screenLeft: number;
+    screenTop: number;
+    originLeft: number;
+    originTop: number;
+    scalePercentage: number;
+    opacityPercentage: number;
+}
 declare const _default: import("vue").DefineComponent<{}, {
-    backgroundShapes: import("vue").ComputedRef<import("@shared/background-settings/composables/useBackgroundShapeControls").BackgroundShapePosition[]>;
-    onShapeScreenXChange: (index: number, value: number) => void;
-    onShapeScreenYChange: (index: number, value: number) => void;
-    onShapeOriginXChange: (index: number, value: number) => void;
-    onShapeOriginYChange: (index: number, value: number) => void;
-    onShapeSizeChange: (index: number, value: number | string) => void;
-    onShapeOpacityChange: (index: number, value: number | string) => void;
-    onDeleteShape: (index: number) => void;
     logoTheme: import("vue").ComputedRef<{
         logoTextColor: {
             rgb: string;
@@ -179,7 +180,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                 wordBreak?: string | undefined;
             };
         }[];
-        shapeMode?: import("../../../brand-page").BackgroundShapeMode | undefined;
         personalisationRole?: import("../../../brand-page").PersonalisationRole | undefined;
         media?: {
             type: import("../../../brand-page").MediaTypes;
@@ -282,9 +282,6 @@ declare const _default: import("vue").DefineComponent<{}, {
             backgroundStyle: import("../../../brand-page").BackgroundStyle;
         }): void;
         setBackgroundShapes(payload: import("../../../brand-page").BackgroundShape[]): void;
-        setShapeMode(payload: {
-            shapeMode: import("../../../brand-page").BackgroundShapeMode;
-        }): void;
         setBackgroundPersonalisationRole(payload: {
             personalisationRole: import("../../../brand-page").PersonalisationRole | undefined;
         }): void;
@@ -302,13 +299,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         deleteBackgroundShape({ shapeIndex }: {
             shapeIndex: number;
         }): void;
-        replaceBackgroundShape({ shapeIndex, shapeUrl, width, height, aspectRatio, }: {
-            shapeIndex: number;
-            shapeUrl: string;
-            width?: number;
-            height?: number;
-            aspectRatio?: number;
-        }): void;
         setLogoColors({ logoColors }: import("../../../shared/background-settings/background-settings-models").SetLogoColorsPayload): void;
         clearUserImageBackgroundImageUrl(): void;
         setAdminBackgroundOptionDefaultValues(): void;
@@ -321,8 +311,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         setBackgroundMode(payload: {
             backgroundMode: import("@brand-page-maker/stores").BrandPageSettingsMode;
         }): void;
-        openShapePicker(intent: import("@shared/background-settings/store").ShapePickerIntent): void;
-        closeShapePicker(): void;
         setBackgroundMedia(payload: import("src/shared/my-uploads/models").MediaBaseSelectedPayload): void;
         removeBackgroundVideo(): void;
         resetMediaOverlayStyle(): void;
@@ -344,9 +332,18 @@ declare const _default: import("vue").DefineComponent<{}, {
         readonly backgroundShapeStyle: "backgroundShapeStyle";
     };
 }, {
+    backgroundShapes(): BackgroundShapePosition[];
     colorPickerValue(): (key: BackgroundStylesConfigOption) => string;
     backgroundShapeUrl(): string;
 }, {
+    onShapeSettingChange(index: number, updatedSettings: any): void;
+    onShapeScreenXChange(index: number, value: any): void;
+    onShapeScreenYChange(index: number, value: any): void;
+    onShapeOriginXChange(index: number, value: any): void;
+    onShapeOriginYChange(index: number, value: any): void;
+    onShapeSizeChange(index: number, value: any): void;
+    onShapeOpacityChange(index: number, value: any): void;
+    onDeleteShape(index: number): void;
     onColorMatchToggled(option: BackgroundStylesConfigOption, value: boolean): void;
     onColorPickerInput(option: BackgroundStylesConfigOption, value: string | Event): void;
     onBackgroundShapeSelected(shape: UserMediaItemWithDimensions): void;