@designcrowd/library.brand-page 6.2.2-live-preview-1 → 6.2.3-ast-faq

package/lib/src/{CreatedOnBrandCrowd-de-de-Cn0M-eZ1.js → CreatedOnBrandCrowd-de-de-BRisMzFY.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-DRLMSDZr.js → CreatedOnBrandCrowd-en-us-CDDsL9GX.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-BglTu73U.js → CreatedOnBrandCrowd-es-es-BkZrEo4j.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-Bj6YZ_el.js → CreatedOnBrandCrowd-fr-ca-sx_ury7R.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-Bj6YZ_el.js → CreatedOnBrandCrowd-fr-fr-sx_ury7R.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DEoOmQ1F.js → CreatedOnBrandCrowd-pt-br-DCWiAfkU.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-DEoOmQ1F.js → CreatedOnBrandCrowd-pt-pt-DCWiAfkU.js}

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

package/lib/src/{CreatedOnDcom-de-de-BZ7gTt4Z.js → CreatedOnDcom-de-de-C1S7f22L.js}

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

package/lib/src/{CreatedOnDcom-en-us-CD6Km5sH.js → CreatedOnDcom-en-us-DgTlWaXE.js}

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

package/lib/src/{CreatedOnDcom-es-es-CNpZHvEl.js → CreatedOnDcom-es-es-CxSQJe_V.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-URS-ydJ1.js → CreatedOnDcom-fr-ca-Bbam2tt6.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-D2AVeA3H.js → CreatedOnDcom-fr-fr-Cb0XDRPL.js}

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

package/lib/src/{CreatedOnDcom-pt-br-C32frnFs.js → CreatedOnDcom-pt-br-BjdX3-E3.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-TDYGjRXS.js → CreatedOnDcom-pt-pt-BXpbfopB.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-Dm9AuOJL.js";
+import { _ as M } from "./lib-DwpSAbLZ.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,25 @@ export interface BookingSectionContent extends Content {
     buttonLinkType: ButtonLinkType;
     buttonTextStyle: TextStyleDeclaration;
 }
+export interface FaqItem {
+    /** Stable per-item identifier. See ImageItem.id. */
+    id: string;
+    question: RichTextValue;
+    /** Drives `question`, per item — like a section's `titleStyle` drives its title. */
+    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;
+}
 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/model.util.d.ts

@@ -1,4 +1,4 @@
-import { type Content, type AboutSectionContent, type BannerSectionContent, type BrandPageModel, type ButtonWithModalContent, type ImagesSectionContent, type LogoContent, type MailingListContent, type ProfileContent, type ShapesSectionContent, type SocialLinksContent, type SupportMeContent, type TestimonialSectionContent, type TextContent, type RequestPaymentContent, type ContactFormContent, type LogoImageModel, type ShopContent, type ImageContent, type ImageGalleryContent, type BookingSectionContent } from '../models';
+import { type Content, type AboutSectionContent, type BannerSectionContent, type BrandPageModel, type ButtonWithModalContent, type ImagesSectionContent, type LogoContent, type MailingListContent, type ProfileContent, type ShapesSectionContent, type SocialLinksContent, type SupportMeContent, type TestimonialSectionContent, type TextContent, type RequestPaymentContent, type ContactFormContent, type LogoImageModel, type ShopContent, type ImageContent, type ImageGalleryContent, type BookingSectionContent, type FaqSectionContent } from '../models';
 export declare const isLogoContent: (content?: Content) => content is LogoContent;
 export declare const applyLogoImageToBrandPageModelLogoContents: (model: BrandPageModel, logoImage: LogoImageModel) => BrandPageModel;
 export declare const isTextContent: (content?: Content) => content is TextContent;
@@ -8,6 +8,7 @@ export declare const isSupportMeContent: (content?: Content) => content is Suppo
 export declare const isButtonContent: (content?: Content) => content is ButtonWithModalContent;
 export declare const isBannerContent: (content?: Content) => content is BannerSectionContent;
 export declare const isBookingContent: (content?: Content) => content is BookingSectionContent;
+export declare const isFaqContent: (content?: Content) => content is FaqSectionContent;
 export declare const isAboutContent: (content?: Content) => content is AboutSectionContent;
 export declare const isTestimonialContent: (content?: Content) => content is TestimonialSectionContent;
 export declare const isShapesContent: (content?: Content) => content is ShapesSectionContent;

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

@@ -43,6 +43,9 @@ export const isBannerContent = (content) => {
 export const isBookingContent = (content) => {
     return content?.type === 'booking-section';
 };
+export const isFaqContent = (content) => {
+    return content?.type === 'faq-section';
+};
 export const isAboutContent = (content) => {
     return content?.type === 'about-section';
 };

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,28 @@ 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 — these styles are CONTENT_TEXT_STYLE_PROPERTY_KEYS
+        // (see the testimonial mapper), resolved per item for the item styles.
+        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 +894,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

@@ -606,6 +606,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: {
@@ -657,6 +658,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: {
@@ -708,6 +710,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: {
@@ -759,6 +762,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: {
@@ -810,6 +814,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: {
@@ -861,11 +866,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>;
@@ -929,6 +936,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;
 };
+/**
+ * An editor bound to a list item (`itemStyleTarget`) writes its toolbar styles to that
+ * item's own style field instead of the section-level `${name}Style`. Returns false when
+ * the editor has no item target, so the caller falls through to its section-level write.
+ */
+export declare const writeListItemStyles: (store: ReturnType<typeof useUiContentSettingsStore>, props: {
+    rawId: string;
+    name: string;
+    itemStyleTarget?: RteItemStyleTarget;
+}, value: TextStyleDeclaration, isHydrationWrite?: boolean) => boolean;
 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;