@designcrowd/library.brand-page 6.1.1 → 6.1.2-color-v2-2

package/lib/src/{CreatedOnBrandCrowd-de-de-B5B5ThJ6.js → CreatedOnBrandCrowd-de-de-dmDPJ3B5.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-a48CaORy.js → CreatedOnBrandCrowd-en-us-enXUVsBp.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-xpuZ317-.js → CreatedOnBrandCrowd-es-es-C3MEil9A.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-V-iUMArW.js → CreatedOnBrandCrowd-fr-ca-BZTF6RtW.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-V-iUMArW.js → CreatedOnBrandCrowd-fr-fr-BZTF6RtW.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DZ0NKSAy.js → CreatedOnBrandCrowd-pt-br-0mwjA9fv.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-DZ0NKSAy.js → CreatedOnBrandCrowd-pt-pt-0mwjA9fv.js}

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

package/lib/src/{CreatedOnDcom-de-de-_950cgGp.js → CreatedOnDcom-de-de-Bk2_qT2O.js}

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

package/lib/src/{CreatedOnDcom-en-us-DogKzH-g.js → CreatedOnDcom-en-us-Ddfk_ipz.js}

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

package/lib/src/{CreatedOnDcom-es-es-CmGM3IPX.js → CreatedOnDcom-es-es-5bvFd1op.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-BonEDkWZ.js → CreatedOnDcom-fr-ca-BwLVAwM8.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-DQHtKrd_.js → CreatedOnDcom-fr-fr-BVT4iQTJ.js}

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

package/lib/src/{CreatedOnDcom-pt-br-CtYJSBjs.js → CreatedOnDcom-pt-br-BX-jIWSe.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-DoO9r4lA.js → CreatedOnDcom-pt-pt-VvU6cH6q.js}

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

package/lib/src/brand-page/components/background-shape/BackgroundShape.mixin.d.ts

@@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     backgroundShapesStyle(): BrandPageCssStyle;
     isFullBackground(): boolean;
     objectUrl(): string;
+    resolvedShapeColor(): string;
 }, {
     isValidSvgUrl(url: string): boolean;
     applySvgAttributes(svgData: string): string;

package/lib/src/brand-page/components/background-shape/BackgroundShape.mixin.js

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import axios from 'axios';
 import { applyColorToSvgString } from '@brand-page/utils/svg-color.util';
+import { resolveColorReference, } from '@brand-page/utils/color-palette.util';
 import { isURL } from '../../../utils/validator.util';
 import { PROXY_SHAPE_URL_REGEX } from '@brand-page/constants';
 import { getRegexToMatchAttributeInSvgTag } from '@brand-page/utils/svg.util';
@@ -17,6 +18,11 @@ export default defineComponent({
             required: true,
         },
     },
+    inject: {
+        // BP-5886: getter for the page palette (provided by <Page>) to resolve
+        // `var(--id)` fills.
+        getPaletteColors: { default: undefined },
+    },
     data() {
         return {
             svgData: '',
@@ -48,9 +54,18 @@ export default defineComponent({
             }
             return this.viewModel.name;
         },
+        // BP-5886: the shape's colour with any palette `var(--id)` resolved to its
+        // concrete value — `var()` can't resolve inside the <img>-embedded SVG.
+        resolvedShapeColor() {
+            const getColors = this.getPaletteColors;
+            const colors = getColors?.() ?? [];
+            return resolveColorReference(this.viewModel?.style?.color, colors);
+        },
     },
     watch: {
-        'viewModel.style.color': {
+        // BP-5886: re-render when the resolved colour changes — covers both a direct
+        // colour edit and an edit to a referenced palette role.
+        resolvedShapeColor: {
             handler() {
                 this.render();
             },
@@ -146,8 +161,8 @@ export default defineComponent({
             else {
                 this.originalSvgData = this.viewModel.name;
             }
-            if (this.viewModel.style.color) {
-                this.svgData = applyColorToSvgString(this.originalSvgData, this.viewModel.style.color);
+            if (this.resolvedShapeColor) {
+                this.svgData = applyColorToSvgString(this.originalSvgData, this.resolvedShapeColor);
             }
             else {
                 this.svgData = this.originalSvgData;

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.d.ts

@@ -1,6 +1,7 @@
 import type { PropType } from 'vue';
 import type { ContactFormViewModel } from '@brand-page/view-models';
 import type { BrandPageContext, FormField, FormFieldType } from '@brand-page/models';
+import { type RichTextValue } from '@brand-page-maker/utils';
 export interface FieldValue {
     value: string;
     error?: string;
@@ -62,7 +63,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     hasFormError(): boolean;
     hasSubmitError(): boolean;
     isSubmitButtonVisible(): boolean;
-    title(): string;
+    title(): RichTextValue;
     renderText(): string;
     renderSuccessText(): string;
     successMessageColorStyle(): BrandPageCssStyle;

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.js

@@ -120,9 +120,14 @@ export default defineComponent({
                 isEmail(this.viewModel.responseEmail));
         },
         title() {
-            return this.viewModel.title && this.viewModel.title.trim() !== ''
-                ? this.viewModel.title
-                : 'Contact Us';
+            // Render exactly what's in the data — no render-time default. The block
+            // factory seeds a localised title (contentSettingsTr('contactUsTitle')) on
+            // creation and it flows through the translation pipeline, so a hardcoded
+            // 'Contact Us' fallback here would (a) override a user who deliberately
+            // cleared the title and (b) paint untranslated English on non-English
+            // sites. This is also the one section that had such a fallback — every
+            // other section renders its data title directly (BP-5787).
+            return this.viewModel.title;
         },
         renderText() {
             if (!this.viewModel.description) {

package/lib/src/brand-page/components/media/Shape.mixin.d.ts

@@ -30,6 +30,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     originalSvgData: string;
 }, {
     useObjectElement(): boolean;
+    resolvedColorReplacements(): ColorReplacement[];
     objectStyle(): {
         width?: undefined;
         height?: undefined;

package/lib/src/brand-page/components/media/Shape.mixin.js

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import axios from 'axios';
 import { applyColorReplacementsToSvgString } from '@brand-page/utils/svg-color.util';
+import { resolveColorReference, } from '@brand-page/utils/color-palette.util';
 import { PROXY_SHAPE_URL_REGEX } from '@brand-page/constants';
 import { getRegexToMatchAttributeInSvgTag } from '@brand-page/utils/svg.util';
 export default defineComponent({
@@ -31,6 +32,11 @@ export default defineComponent({
             default: undefined,
         },
     },
+    inject: {
+        // BP-5886: getter for the page palette (provided by <Page>) — used to resolve
+        // `var(--id)` fills to concrete colours before the SVG is built.
+        getPaletteColors: { default: undefined },
+    },
     data() {
         return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
     },
@@ -38,6 +44,16 @@ export default defineComponent({
         useObjectElement() {
             return !!this.imageUrl.match(PROXY_SHAPE_URL_REGEX);
         },
+        // BP-5886: colour replacements with any palette `var(--id)` resolved to its
+        // concrete value — `var()` can't resolve inside the <img>-embedded SVG.
+        resolvedColorReplacements() {
+            const getColors = this.getPaletteColors;
+            const colors = getColors?.() ?? [];
+            return (this.colorReplacements ?? []).map((c) => ({
+                ...c,
+                replacementColor: resolveColorReference(c.replacementColor, colors),
+            }));
+        },
         objectStyle() {
             if (!this.size) {
                 return {};
@@ -60,7 +76,9 @@ export default defineComponent({
         },
     },
     watch: {
-        colorReplacements: {
+        // BP-5886: watch the RESOLVED replacements so the shape re-renders both when
+        // its own colours change and when a referenced palette colour is edited.
+        resolvedColorReplacements: {
             handler(newVal, oldVal) {
                 if (newVal &&
                     oldVal &&
@@ -136,7 +154,7 @@ export default defineComponent({
             if (!this.originalSvgData) {
                 return;
             }
-            this.svgData = applyColorReplacementsToSvgString(this.originalSvgData, this.colorReplacements);
+            this.svgData = applyColorReplacementsToSvgString(this.originalSvgData, this.resolvedColorReplacements);
             this.svgData = this.applySvgAttributes(this.svgData);
             const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
             const oldSvgDataObjectUrl = this.svgDataObjectUrl;

package/lib/src/brand-page/components/page/Page.mixin.d.ts

@@ -52,6 +52,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     styles: {};
 }, {
     brandPageToken(): string | null;
+    shouldEmitPaletteRoot(): boolean;
+    paletteRootStyleHtml(): string;
     contents(): ContentViewModel[];
     backgroundShapes(): BackgroundShape[];
     rootElementStyles(): BrandPageCssStyle;

package/lib/src/brand-page/components/page/Page.mixin.js

@@ -1,6 +1,6 @@
-import { defineComponent } from 'vue';
+import { defineComponent, provide } from 'vue';
 import { DEFAULT_FONT_FAMILY_KEY, FALLBACK_FONT_FAMILIES, FONT_FAMILY_CONFIGS, } from '../../constants';
-import { getSlugFromContext, getPageHeadingText } from '@brand-page/utils';
+import { getSlugFromContext, getPageHeadingText, buildPaletteRootCss, } from '@brand-page/utils';
 import { findNavItemByRelativePath } from '@brand-page/utils/route.util';
 import { BRAND_PAGE_TYPES } from '@brand-page/models';
 import { hasProfileContent as checkHasProfileContent } from '@brand-page/utils/vcard.util';
@@ -59,6 +59,14 @@ export default defineComponent({
         'save-contact-widget-click',
     ],
     setup(props) {
+        // BP-5886: shapes render as <img>-embedded SVG, an isolated document the
+        // `:root` palette block can't reach, so a `var(--id)` fill won't resolve.
+        // Provide the palette as a getter so the shape mixins can resolve their refs
+        // to concrete colours before building the SVG. A getter (not a provided ref)
+        // sidesteps Options-API inject ref-unwrapping ambiguity and stays reactive:
+        // calling it inside a shape's computed tracks `viewModel.styles.colors`, so
+        // shapes recolour when a referenced palette colour is edited.
+        provide('getPaletteColors', () => props.viewModel?.styles?.colors ?? []);
         return {
             fluidText: JSON.stringify({
                 default: props.context.brandPageType === BRAND_PAGE_TYPES.brandSite
@@ -77,6 +85,17 @@ export default defineComponent({
         brandPageToken() {
             return this.viewModel?.brandPageToken || null;
         },
+        // BP-5886 — global colour palette emitted as a single `:root` block.
+        // Only the published single-document surfaces emit the global block:
+        // template-grid cards get scoped vars (TemplatePreview) and the maker main
+        // preview emits from BrandPageMakerPage, so guard those out to avoid a
+        // duplicate / colliding `:root`.
+        shouldEmitPaletteRoot() {
+            return !this.context?.isTemplate && !this.context?.isPreview;
+        },
+        paletteRootStyleHtml() {
+            return buildPaletteRootCss(this.viewModel?.styles?.colors ?? []);
+        },
         contents() {
             return this.pageViewModel?.contents || [];
         },

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';
@@ -53,6 +61,7 @@ export declare class PageStyles {
     logoStyles: LogoStyles;
     textStyles: TextStyles;
     galleryStyles: GalleryStyles;
+    colors: ColorItem[];
     constructor(option?: Partial<Omit<PageStyles, 'logoStyles' | 'buttonStyles' | 'backgroundStyles' | 'textStyles'>> & {
         logoStyles?: Partial<LogoStyles>;
         buttonStyles?: Partial<ButtonStyles>;
@@ -148,7 +157,7 @@ export interface TextContent extends Content {
     /**
      * For BrandPage/BrandContact only
      */
-    text: string;
+    text: RichTextValue;
     /**
      * For BrandSite
      */
@@ -171,9 +180,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;
@@ -191,7 +200,7 @@ export interface MapContent extends Content {
 }
 export interface MailingListContent extends Content {
     acceptedFields?: 'emailOnly' | 'nameAndEmail';
-    title: string;
+    title: RichTextValue;
     buttonText: string;
     titleStyle: TextStyleDeclaration;
     buttonTextStyle: TextStyleDeclaration;
@@ -243,10 +252,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;
@@ -265,8 +274,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;
@@ -293,8 +302,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;
@@ -313,8 +322,8 @@ 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;
 }
@@ -322,9 +331,9 @@ export interface TestimonialItems {
     /** Stable per-item identifier. See ImageItem.id. */
     id: string;
     imageUrl: string;
-    name: string;
-    position: string;
-    testimonials: string;
+    name: RichTextValue;
+    position: RichTextValue;
+    testimonials: RichTextValue;
     colorReplacements: ColorReplacement[];
     mediaType: string;
     size?: string;
@@ -337,7 +346,7 @@ export interface TestimonialItems {
 export interface TextItem {
     /** Stable per-item identifier. See ImageItem.id. */
     id: string;
-    text: string;
+    text: RichTextValue;
     textStyle: TextStyleDeclaration;
     textOverride?: string;
 }
@@ -354,8 +363,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;
@@ -370,9 +379,21 @@ export interface ColorReplacement {
     originalColor: string;
     replacementColor: string;
 }
+/**
+ * A single entry in the global colour palette (BP-5886).
+ * `id` is the CSS-variable name emitted at :root (`--<id>`); elements reference
+ * the colour via `var(--<id>)`. `value` is a concrete literal (rgb/#hex or a
+ * gradient string). `palette` = the 4 static brand roles (`palette-0`…`palette-3`);
+ * `custom` = one-off colours chosen on elements (`palette-custom-<uuid>`).
+ */
+export interface ColorItem {
+    id: string;
+    value: string;
+    type: 'palette' | 'custom';
+}
 export interface TestimonialSectionContent extends Content {
     type: 'testimonial-section';
-    title: string;
+    title: RichTextValue;
     displayStyle: string;
     items: TestimonialItems[];
     titleStyle: TextStyleDeclaration;
@@ -386,8 +407,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;
@@ -411,7 +432,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;
@@ -434,8 +455,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

@@ -85,6 +85,9 @@ export class PageStyles {
     logoStyles;
     textStyles;
     galleryStyles;
+    // BP-5886 global colour palette. Non-nullable (default []) per the model
+    // reactivity rule; old persisted `styles` that omit it hydrate to [].
+    colors;
     constructor(option = {}) {
         this.backgroundStyles = new BackgroundStyles(option.backgroundStyles || {
             backgroundImageUrl: '',
@@ -109,6 +112,7 @@ export class PageStyles {
             ? new TextStyles(option.textStyles)
             : TextStyles.GetDefaultTextStyle();
         this.galleryStyles = new GalleryStyles(option.galleryStyles);
+        this.colors = option.colors ? option.colors.map((c) => ({ ...c })) : [];
     }
 }
 export const ASPECT_RATIOS = {