@designcrowd/library.brand-page 6.2.6 → 6.2.7-ast-faq-1

package/lib/src/{CreatedOnBrandCrowd-de-de-DpeSEnwP.js → CreatedOnBrandCrowd-de-de-7BhvVOyG.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-CxYv3NzT.js → CreatedOnBrandCrowd-en-us-DhKWkmpT.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-CzQ1HRHw.js → CreatedOnBrandCrowd-es-es-B8vcPgJ5.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-J77YZaT1.js → CreatedOnBrandCrowd-fr-ca-DJywro34.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-J77YZaT1.js → CreatedOnBrandCrowd-fr-fr-DJywro34.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-1vh4Smqt.js → CreatedOnBrandCrowd-pt-br-8Fe-EYbW.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-1vh4Smqt.js → CreatedOnBrandCrowd-pt-pt-8Fe-EYbW.js}

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

package/lib/src/{CreatedOnDcom-de-de-CXX6W_29.js → CreatedOnDcom-de-de-CgIFS1rD.js}

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

package/lib/src/{CreatedOnDcom-en-us-D78BmX6f.js → CreatedOnDcom-en-us-xfxOfOmI.js}

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

package/lib/src/{CreatedOnDcom-es-es-FfbPM2vD.js → CreatedOnDcom-es-es-NUDILwyj.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-C6L60rxJ.js → CreatedOnDcom-fr-ca-DIC9p-8J.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-BEDnW9w-.js → CreatedOnDcom-fr-fr-CIAM16GN.js}

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

package/lib/src/{CreatedOnDcom-pt-br-CZXVvc1n.js → CreatedOnDcom-pt-br-CbVwaB2_.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-IQq744nb.js → CreatedOnDcom-pt-pt-ZrwJAVB-.js}

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

package/lib/src/brand-page/constants/misc.constants.d.ts

@@ -77,6 +77,14 @@ export declare const IMAGE_RESOLUTION_PRESETS: {
     readonly ULTRA_HD: "q=80&w=2160";
 };
 export type ImagesSectionContentDisplayStyle = (typeof IMAGES_SECTION_CONTENT_DISPLAY_STYLES)[number];
+/** Centered and split are accordions; grid shows every answer. */
+export declare const FAQ_DISPLAY_STYLES: Readonly<{
+    readonly centered: "faq-centered";
+    readonly split: "faq-split";
+    readonly grid: "faq-grid";
+}>;
+export type FaqDisplayStyle = (typeof FAQ_DISPLAY_STYLES)[keyof typeof FAQ_DISPLAY_STYLES];
+export declare const FAQ_MAX_ITEMS = 6;
 export declare const HEADER_CSRF_TOKEN = "csrf-token";
 export declare const STYLE_THEME_KEYS: Readonly<{
     LogoTextColor: "logo-text-color";

package/lib/src/brand-page/constants/misc.constants.js

@@ -103,6 +103,13 @@ export const IMAGE_RESOLUTION_PRESETS = {
     FULL_HD: 'q=80&w=1080',
     ULTRA_HD: 'q=80&w=2160',
 };
+/** Centered and split are accordions; grid shows every answer. */
+export const FAQ_DISPLAY_STYLES = Object.freeze({
+    centered: 'faq-centered',
+    split: 'faq-split',
+    grid: 'faq-grid',
+});
+export const FAQ_MAX_ITEMS = 6;
 export const HEADER_CSRF_TOKEN = 'csrf-token';
 export const STYLE_THEME_KEYS = Object.freeze({
     LogoTextColor: 'logo-text-color',

package/lib/src/brand-page/constants/styles.constants.d.ts

@@ -33,5 +33,7 @@ export declare const CONTENT_TEXT_STYLE_PROPERTY_KEYS: {
     readonly buttonTextStyle: "buttonTextStyle";
     readonly copyrightStyle: "copyrightStyle";
     readonly successMessageStyle: "successMessageStyle";
+    readonly questionStyle: "questionStyle";
+    readonly answerStyle: "answerStyle";
 };
 export type ContentTextStylePropertyKey = keyof typeof CONTENT_TEXT_STYLE_PROPERTY_KEYS;

package/lib/src/brand-page/constants/styles.constants.js

@@ -35,4 +35,6 @@ export const CONTENT_TEXT_STYLE_PROPERTY_KEYS = {
     buttonTextStyle: 'buttonTextStyle',
     copyrightStyle: 'copyrightStyle',
     successMessageStyle: 'successMessageStyle',
+    questionStyle: 'questionStyle',
+    answerStyle: 'answerStyle',
 };

package/lib/src/brand-page/models/content.model.d.ts

@@ -31,6 +31,7 @@ export declare const CONTENT_TYPES: {
     readonly 'shapes-section': "shapes-section";
     readonly 'shop-section': "shop-section";
     readonly 'booking-section': "booking-section";
+    readonly 'faq-section': "faq-section";
 };
 export type ContentType = keyof typeof CONTENT_TYPES;
 export declare const PERSONALISATION_ROLES: {

package/lib/src/brand-page/models/content.model.js

@@ -31,6 +31,7 @@ export const CONTENT_TYPES = {
     'shapes-section': 'shapes-section',
     'shop-section': 'shop-section',
     'booking-section': 'booking-section',
+    'faq-section': 'faq-section',
 };
 export const PERSONALISATION_ROLES = {
     profile: 'profile',

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

@@ -478,6 +478,28 @@ export interface BookingSectionContent extends Content {
     buttonLinkType: ButtonLinkType;
     buttonTextStyle: TextStyleDeclaration;
 }
+export interface FaqItem {
+    /** Stable per-item identifier. See ImageItem.id. */
+    id: string;
+    question: RichTextValue;
+    questionStyle: TextStyleDeclaration;
+    answer: RichTextValue;
+    answerStyle: TextStyleDeclaration;
+}
+export interface FaqSectionContent extends Content {
+    type: 'faq-section';
+    title: RichTextValue;
+    description: RichTextValue;
+    displayStyle: string;
+    items: FaqItem[];
+    titleStyle: TextStyleDeclaration;
+    descriptionStyle: TextStyleDeclaration;
+    backgroundStyle: BrandPageCssStyle;
+    /** `{ color }` for the +/- toggle. */
+    iconColor: BrandPageCssStyle;
+    /** `{ backgroundColor }`, the Divider section's shape. `'transparent'` hides the line. */
+    dividerColor: BrandPageCssStyle;
+}
 export declare class PageModel {
     title: string;
     contents: Content[];

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

@@ -1,4 +1,4 @@
-import type { ProfileContent, TextContent, ContactFormContent, ImageContent, BannerSectionContent, SocialLinksContent, ImageGalleryContent, TestimonialSectionContent, AboutSectionContent, ImagesSectionContent, MailingListContent, SupportMeContent, RequestPaymentContent, ShapesSectionContent, ShopContent, ButtonContent, PageModel, BookingSectionContent } from '../models';
+import type { ProfileContent, TextContent, ContactFormContent, ImageContent, BannerSectionContent, SocialLinksContent, ImageGalleryContent, TestimonialSectionContent, AboutSectionContent, ImagesSectionContent, MailingListContent, SupportMeContent, RequestPaymentContent, ShapesSectionContent, ShopContent, ButtonContent, PageModel, BookingSectionContent, FaqSectionContent } from '../models';
 export type ContentCallback = {
     profileContentCallback: (content: ProfileContent) => void;
     textContentCallback: (content: TextContent) => void;
@@ -17,5 +17,6 @@ export type ContentCallback = {
     shopSectionContentCallback: (content: ShopContent) => void;
     buttonContentCallback: (content: ButtonContent) => void;
     bookingSectionContentCallback: (content: BookingSectionContent) => void;
+    faqSectionContentCallback: (content: FaqSectionContent) => void;
 };
 export declare const forEachPageCallContentCallback: (page: PageModel, callbacks: ContentCallback) => void;

package/lib/src/brand-page/utils/content-callback-util.js

@@ -49,6 +49,9 @@ export const forEachPageCallContentCallback = (page, callbacks) => {
             case 'booking-section':
                 callbacks.bookingSectionContentCallback(content);
                 break;
+            case 'faq-section':
+                callbacks.faqSectionContentCallback(content);
+                break;
             case 'general-link':
             case 'website':
             case 'email':

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

@@ -29,6 +29,8 @@ interface ViewModelMappingOptions {
         previewImageUrl: string;
     };
     setVideoUrlsWithToken?: (token: string, videoUrl: string, previewImageUrl: string, assetId: string) => void;
+    /** Maker-only UI state: content id → the item its settings panel has open. Never persisted. */
+    activeItemIdByContentId?: Record<string, string | undefined>;
 }
 export declare const getBrandPageViewModelFromBrandPageModel: (model: BrandPageModel, brandPageToken: string | undefined, showBrandCrowdLogo: boolean | undefined, options: ViewModelMappingOptions) => BrandPageViewModel;
 export declare const resolvePageIdsInRteJson: (doc: unknown, nav: NavViewModel, options: ViewModelMappingOptions) => unknown;

package/lib/src/brand-page/utils/view-model.util.js

@@ -611,6 +611,27 @@ const mapToTestimonialSectionViewModel = (content, styles) => {
         isFullWidth: true,
     }, styles);
 };
+// An item's question/answer styles are CONTENT_TEXT_STYLE_PROPERTY_KEYS, so the section
+// resolver handles them when handed the item.
+const mapFaqItem = (item, styles) => applyViewModelTextStyles({
+    ...item,
+    questionStyle: { ...item.questionStyle },
+    answerStyle: { ...item.answerStyle },
+}, styles);
+const mapToFaqSectionViewModel = (content, styles, brandPageType, options) => {
+    return applyViewModelTextStyles({
+        ...content,
+        role: content.type,
+        type: 'faq-section',
+        // No `color` pre-seed, as in the testimonial mapper: it would read as an override.
+        titleStyle: { ...content.titleStyle },
+        descriptionStyle: { ...content.descriptionStyle },
+        items: (content.items ?? []).map((item) => mapFaqItem(item, styles)),
+        isFullWidth: true,
+        isStacked: brandPageType !== BRAND_PAGE_TYPES.brandSite,
+        activeItemId: options.activeItemIdByContentId?.[content.id],
+    }, styles);
+};
 const mapToSocialLinksViewModel = (content, styles, brandPageType) => {
     return applyViewModelTextStyles({
         ...content,
@@ -872,6 +893,8 @@ export const mapToViewModel = (styles, brandPageType, options) => (content) => {
             return mapToBannerSectionViewModel(content, styles, options);
         case 'booking-section':
             return mapToBookingSectionViewModel(content, styles);
+        case 'faq-section':
+            return mapToFaqSectionViewModel(content, styles, brandPageType, options);
         case 'about-section':
             return mapToAboutSectionViewModel(content, styles);
         case 'images-section':

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

@@ -1,6 +1,6 @@
-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, ColorItem, RichTextValue } 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, FaqSectionContent, MediaTypes, TextStyles, BackgroundStyle, BackgroundShape, PersonalisationRole, SaveContactOptions, ColorItem, 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 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' | 'faq-section';
 export interface ContentViewModel {
     id: string;
     type: ViewModelType;
@@ -132,6 +132,13 @@ export interface BookingSectionViewModel extends ContentViewModel, Omit<BookingS
     buttonViewModel: ButtonViewModel;
     isFullWidth: boolean;
 }
+export interface FaqSectionViewModel extends ContentViewModel, Omit<FaqSectionContent, 'type'> {
+    isFullWidth: boolean;
+    /** brand.page / brand.contact: split and grid always use their stacked layout. */
+    isStacked: boolean;
+    /** Maker-only: the item the settings panel has open, so the canvas shows it. */
+    activeItemId?: string;
+}
 export interface PageHeaderViewModel extends Omit<PageHeaderDesktop | PageHeaderMobile, 'logoImage' | 'logoImageStyle' | 'isLogoOptional' | 'viewport' | 'isLogoVisible' | 'logoTemplateImage' | 'logoImageHeight' | 'logoImageWidth' | 'headerButton' | 'backgroundStyle'> {
     logo: LogoViewModel;
     pages: PageViewModel[];

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

@@ -627,6 +627,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
             activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
+            activeItemIdByContentId: Record<string, string | undefined>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/content-settings/store").ContentSettingsState>): (id: string) => import("@brand-page").Content | undefined;
         getFieldSettings(state: {
             addContentOptions: {
@@ -678,6 +679,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
             activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
+            activeItemIdByContentId: Record<string, string | undefined>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/content-settings/store").ContentSettingsState>): (id: string, fieldName: string) => import("../../../shared/content-settings/models").ContentItemFieldSettings | undefined;
         getItem(state: {
             addContentOptions: {
@@ -729,6 +731,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
             activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
+            activeItemIdByContentId: Record<string, string | undefined>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/content-settings/store").ContentSettingsState>): (id: string) => import("../../../shared/content-settings/models").ContentItem<any> | undefined;
         getValue(state: {
             addContentOptions: {
@@ -780,6 +783,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
             activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
+            activeItemIdByContentId: Record<string, string | undefined>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/content-settings/store").ContentSettingsState>): (id: string, fieldName: string) => import("@brand-page").Content | string | undefined;
         getItemState(state: {
             addContentOptions: {
@@ -831,6 +835,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
             activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
+            activeItemIdByContentId: Record<string, string | undefined>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/content-settings/store").ContentSettingsState>): (id: string) => import("../../../shared/content-settings/models").ContentSettingsItemState;
         getItemGroupState(state: {
             addContentOptions: {
@@ -882,11 +887,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
             activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
+            activeItemIdByContentId: Record<string, string | undefined>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/content-settings/store").ContentSettingsState>): (id: string, groupId: string) => import("../../../shared/content-settings/models").ContentSettingsItemGroupState;
         mode(): import("@shared/content-settings/store").ContentSettingsMode;
         selectedItem(): import("../../../shared/content-settings/models").ContentItem<any> | undefined;
         selectedItemTemplate(): import("@brand-page-maker/models").ContentSettingsConfig<any> | undefined;
     }, {
+        setActiveItem(contentId: string, itemId: string | undefined): void;
         onContentChanged(): void;
         _addItem({ item, index, }: {
             item: import("../../../shared/content-settings/models").ContentItem<any>;
@@ -950,6 +957,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         updateTextItemTextStyleType({ id, name, value, index, isHydrationWrite, }: import("../../../shared/content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextItemTextStyleTypeWithStyles({ id, name, value, index, isHydrationWrite, }: import("../../../shared/content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
+        updateListItemTextStyles({ id, name, value, target, isHydrationWrite, }: Omit<import("../../../shared/content-settings/models").UpdateMultipleItemValuesPayload<any>, "index"> & {
+            target: import("../../../shared/content-settings/models").RteItemStyleTarget;
+        }): void;
         _setActiveCategoryTab({ activeCategoryTab, }: {
             activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
         }): void;

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -90,6 +90,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
             activeCategoryTab: import("../../models").ItemCategory;
+            activeItemIdByContentId: Record<string, string | undefined>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/content-settings/store").ContentSettingsState>): (id: string) => Content | undefined;
         getFieldSettings(state: {
             addContentOptions: {
@@ -141,6 +142,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
             activeCategoryTab: import("../../models").ItemCategory;
+            activeItemIdByContentId: Record<string, string | undefined>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/content-settings/store").ContentSettingsState>): (id: string, fieldName: string) => import("@shared/content-settings/models").ContentItemFieldSettings | undefined;
         getItem(state: {
             addContentOptions: {
@@ -192,6 +194,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
             activeCategoryTab: import("../../models").ItemCategory;
+            activeItemIdByContentId: Record<string, string | undefined>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/content-settings/store").ContentSettingsState>): (id: string) => ContentItem<any> | undefined;
         getValue(state: {
             addContentOptions: {
@@ -243,6 +246,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
             activeCategoryTab: import("../../models").ItemCategory;
+            activeItemIdByContentId: Record<string, string | undefined>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/content-settings/store").ContentSettingsState>): (id: string, fieldName: string) => Content | string | undefined;
         getItemState(state: {
             addContentOptions: {
@@ -294,6 +298,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
             activeCategoryTab: import("../../models").ItemCategory;
+            activeItemIdByContentId: Record<string, string | undefined>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/content-settings/store").ContentSettingsState>): (id: string) => import("@shared/content-settings/models").ContentSettingsItemState;
         getItemGroupState(state: {
             addContentOptions: {
@@ -345,11 +350,13 @@ declare const _default: import("vue").DefineComponent<{}, {
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
             activeCategoryTab: import("../../models").ItemCategory;
+            activeItemIdByContentId: Record<string, string | undefined>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/content-settings/store").ContentSettingsState>): (id: string, groupId: string) => import("@shared/content-settings/models").ContentSettingsItemGroupState;
         mode(): import("@shared/content-settings/store").ContentSettingsMode;
         selectedItem(): ContentItem<any> | undefined;
         selectedItemTemplate(): import("../../models").ContentSettingsConfig<any> | undefined;
     }, {
+        setActiveItem(contentId: string, itemId: string | undefined): void;
         onContentChanged(): void;
         _addItem({ item, index, }: {
             item: ContentItem<any>;
@@ -413,6 +420,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         updateTextItemTextStyleType({ id, name, value, index, isHydrationWrite, }: import("@shared/content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextItemTextStyleTypeWithStyles({ id, name, value, index, isHydrationWrite, }: import("@shared/content-settings/models").UpdateMultipleItemValuesPayload<any>): void;
+        updateListItemTextStyles({ id, name, value, target, isHydrationWrite, }: Omit<import("@shared/content-settings/models").UpdateMultipleItemValuesPayload<any>, "index"> & {
+            target: import("@shared/content-settings/models").RteItemStyleTarget;
+        }): void;
         _setActiveCategoryTab({ activeCategoryTab, }: {
             activeCategoryTab: import("../../models").ItemCategory;
         }): void;

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.d.ts

@@ -4,6 +4,8 @@ import type { StyleTextFontFamilyOption } from '@shared/style-settings/models';
 import type { HyperlinkType, TextStyleOption } from '@brand-page';
 import { type TextItem, type TextStyleDeclaration } from '@brand-page';
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
+import { useUiContentSettingsStore } from '@shared/content-settings/store';
+import type { RteItemStyleTarget } from '@shared/content-settings/models';
 interface UseRichTextEditorReturn {
     editor: Editor;
     onFocus: () => void;
@@ -55,6 +57,16 @@ interface EditorOptionType {
 export declare const useExternalRichTextEditor: () => {
     externalEditor: Editor;
 };
+/**
+ * Saves a field's style. An editor bound to a list item (`itemStyleTarget`) saves to that
+ * item's own style instead of the section's `${name}Style`.
+ */
+export declare const updateFieldTextStyles: (store: ReturnType<typeof useUiContentSettingsStore>, itemStyleTarget: RteItemStyleTarget | undefined, payload: {
+    id: string;
+    name: string;
+    value: TextStyleDeclaration;
+    isHydrationWrite?: boolean;
+}) => void;
 export declare const useRichTextEditor: (model: ModelRef<any>, props: {
     id: string;
     name: string;
@@ -66,6 +78,7 @@ export declare const useRichTextEditor: (model: ModelRef<any>, props: {
     textItemIndex: number;
     item: TextItem;
     contentType: string;
+    itemStyleTarget?: RteItemStyleTarget;
 }, emit: (event: "focus" | "blur" | "update:modelValue", ...args: any[]) => void, fontSettings: {
     selectedTextStyle: string;
     selectedFont: string;

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.js

@@ -24,6 +24,18 @@ export const useExternalRichTextEditor = () => {
         externalEditor,
     };
 };
+/**
+ * Saves a field's style. An editor bound to a list item (`itemStyleTarget`) saves to that
+ * item's own style instead of the section's `${name}Style`.
+ */
+export const updateFieldTextStyles = (store, itemStyleTarget, payload) => {
+    if (itemStyleTarget) {
+        store.updateListItemTextStyles({ ...payload, target: itemStyleTarget });
+    }
+    else {
+        store.updateTextStyles(payload);
+    }
+};
 export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDropdownRef, 
 // One entry of `textStyleOptions`; `undefined` when the selection is "none".
 selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyleTypeOptions, markedText, isHyperlinkPopupOpen, selectedLinkTypeValue) => {
@@ -204,6 +216,21 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
             });
         }
     });
+    // Set while a toolbar command runs. The toolbar has taken focus by then, so
+    // `isFocused` alone would tag the command's write as hydration and fold it into
+    // the previous undo entry — hidden only when a style write rides along and opens
+    // an entry of its own. Synchronous commands only: the spacing sliders dispatch
+    // after a debounce and are not covered.
+    let isRunningToolbarCommand = false;
+    const runAsToolbarCommand = (command) => {
+        isRunningToolbarCommand = true;
+        try {
+            return command();
+        }
+        finally {
+            isRunningToolbarCommand = false;
+        }
+    };
     // Update model when editor content changes. RTE content is stored as Tiptap
     // JSON (BP-5787). getJSON() is already in hand (the editor holds the doc) and
     // is sanitised natively — no getHTML(), no DOMPurify, no extra editor — so
@@ -217,15 +244,9 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
         // field → store chain and arms the history merge at the moment of the
         // store write — arming here at emit time would lapse before the
         // debounce fires. Genuine edits happen while focused and commit
-        // normally.
-        //
-        // Known limitation: a programmatic toolbar command run on an editor the
-        // user hasn't focused yet would also merge (losing that undo step). Today
-        // the RTE only mounts inside an already-open settings drawer and the user
-        // focuses it before formatting, so this doesn't occur — revisit if a
-        // consumer ever drives toolbar actions on an unfocused editor.
+        // normally, and so do synchronous toolbar commands (isRunningToolbarCommand).
         emit('update:modelValue', sanitizeRteJson(editor.getJSON()), {
-            isHydrationWrite: !editor.isFocused,
+            isHydrationWrite: !editor.isFocused && !isRunningToolbarCommand,
         });
     });
     editor.on('selectionUpdate', () => {
@@ -303,7 +324,7 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
             // write lands ~100ms BEFORE the editor's canonical text write-back, and
             // an unflagged write here would open a plain capture burst that
             // swallows the flagged text write into a phantom entry (BP-5810).
-            contentSettingStore.updateTextStyles({
+            updateFieldTextStyles(contentSettingStore, props.itemStyleTarget, {
                 id: props.rawId,
                 name: props.name,
                 value: {
@@ -488,7 +509,7 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
             });
         }
         else {
-            contentSettingStore.updateTextStyles({
+            updateFieldTextStyles(contentSettingStore, props.itemStyleTarget, {
                 id: props.rawId,
                 name: props.name,
                 value: {
@@ -584,7 +605,7 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
         editor,
         onFocus,
         onBlur,
-        triggerEditorStyleChange,
+        triggerEditorStyleChange: (editorOption) => runAsToolbarCommand(() => triggerEditorStyleChange(editorOption)),
         toggleBold,
         toggleItalic,
         toggleUnderline,
@@ -601,7 +622,7 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
         setInitialStyleSettings,
         copyGlobalStyleSettings,
         unsetAllMarks,
-        handleHyperlink,
+        handleHyperlink: (...args) => runAsToolbarCommand(() => handleHyperlink(...args)),
         hyperlinkValue,
         setHyperlinkUrlValue,
         shouldShow,

package/lib/src/brand-page-maker/constants/config-settings-constant.d.ts

@@ -1,4 +1,4 @@
-import type { LogoContent, FacebookContent, GeneralLinkContent, PhoneContent, EmailContent, ImageContent, InstagramContent, LinkedInContent, PinterestContent, ProfileContent, TextContent, TiktokContent, TwitchContent, XContent, VideoContent, WebsiteContent, YoutubeContent, ContentType, MapContent, ImageGalleryContent, MailingListContent, RequestPaymentContent, SupportMeContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ShopContent, BookingSectionContent } from '@brand-page';
+import type { LogoContent, FacebookContent, GeneralLinkContent, PhoneContent, EmailContent, ImageContent, InstagramContent, LinkedInContent, PinterestContent, ProfileContent, TextContent, TiktokContent, TwitchContent, XContent, VideoContent, WebsiteContent, YoutubeContent, ContentType, MapContent, ImageGalleryContent, MailingListContent, RequestPaymentContent, SupportMeContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ShopContent, BookingSectionContent, FaqSectionContent } from '@brand-page';
 import type { ContentSettingsConfig, ContentSettingsField, ContentSettingsMultiField } from '../models';
 export declare const LOGO_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<LogoContent, "version" | "logoVariation" | "logoImageHeight" | "logoImageWidth" | "logoLastUpdate" | "logoImageBase64Url">>;
 export declare const GENERAL_LINK_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<GeneralLinkContent>;
@@ -51,4 +51,5 @@ export declare const SHOP_SECTION_SETTINGS_CONFIG: () => ContentSettingsConfig<S
     isShippingEnabled: boolean;
 }>;
 export declare const BOOKING_SECTION_SETTINGS_CONFIG: () => ContentSettingsConfig<BookingSectionContent>;
+export declare const FAQ_SECTION_SETTINGS_CONFIG: () => ContentSettingsConfig<FaqSectionContent>;
 export declare const CONTENT_SETTINGS_CONFIGS: () => Record<ContentType, ContentSettingsConfig<any>>;