@myissue/vue-website-page-builder 3.5.13 → 3.5.15

package/dist/index.d.ts

@@ -1,11 +1,1384 @@
-export { default as PageBuilder } from './PageBuilder/PageBuilder.vue';
-export { default as Preview } from './PageBuilder/Preview.vue';
-export { usePageBuilderStateStore } from './stores/page-builder-state';
-export { usePageBuilderModal } from './composables/usePageBuilderModal';
-export { resetThemeColorPresets, buildStorageKey } from './composables/useThemeColorPresets';
-export type { PageBuilderUser, ComponentObject, ImageObject, PageBuilderConfig, BuilderResourceComponent, BuilderResourceData, StartBuilderResult, PageSettings, ThemeColorPreset, ThemeColorPresetId, ThemeColorPresetInput, ThemeColorPresetSettings, ThemeColorPresetSettingsInput, FormName, } from './types';
-export { PageBuilderService } from './services/PageBuilderService';
-export { createPinia } from 'pinia';
-export { sharedPageBuilderPinia, sharedPageBuilderStore } from './stores/shared-store';
-export { getPageBuilder } from './composables/builderInstance';
-export { pageBuilder } from './plugin';
+import { App } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { createPinia } from 'pinia';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { Pinia } from 'pinia';
+import { PiniaCustomStateProperties } from 'pinia';
+import { PublicProps } from 'vue';
+import { StoreDefinition } from 'pinia';
+
+declare type AvailableLanguage = 'en' | 'zh-Hans' | 'fr' | 'ja' | 'ru' | 'es' | 'pt' | 'de' | 'ar' | 'hi' | 'da' | 'it';
+
+export declare interface BuilderResourceComponent {
+    html_code: string;
+    title?: string;
+    [key: string]: unknown;
+}
+
+export declare type BuilderResourceData = BuilderResourceComponent[];
+
+/**
+ * Build a user-scoped storage key so each user keeps their own presets.
+ * Falls back to the shared key when no `userForPageBuilder.id` is provided.
+ *
+ * @example
+ * // user id 42  → "vueWebsitePageBuilderThemeColorPresets-u42"
+ * // no id       → "vueWebsitePageBuilderThemeColorPresets"
+ */
+export declare function buildStorageKey(config?: PageBuilderConfig | null): string;
+
+export declare interface ComponentObject {
+    id: string | number | null;
+    html_code: string;
+    title: string;
+    [key: string]: unknown;
+}
+
+export { createPinia }
+
+export declare type FormName = 'post' | 'article' | 'blog' | 'news' | 'page' | 'faq' | 'testimonial' | 'case-study' | 'press-release' | 'product' | 'products' | 'category' | 'collection' | 'brand' | 'coupon' | 'discount' | 'shop' | 'cart' | 'checkout' | 'profile' | 'account' | 'team' | 'team-member' | 'author' | 'customer' | 'user' | 'service' | 'services' | 'package' | 'plan' | 'pricing' | 'subscription' | 'job' | 'job-listing' | 'career' | 'applicant' | 'event' | 'events' | 'webinar' | 'appointment' | 'reservation' | 'schedule' | 'listing' | 'directory' | 'location' | 'vendor' | 'company' | 'gallery' | 'image' | 'video' | 'media' | 'audio' | 'file' | 'contact' | 'support' | 'ticket' | 'feedback' | 'review' | 'inquiry' | 'report' | 'setting' | 'configuration' | 'integration' | 'theme' | 'language' | 'menu' | 'navigation' | 'tag' | 'meta';
+
+/**
+ * Retrieves the singleton instance of the PageBuilderService.
+ * This function is used throughout the application to access the service.
+ * It throws an error if the service has not been initialized, ensuring that
+ * the plugin has been correctly installed.
+ *
+ * @throws {Error} If the PageBuilderService has not been initialized.
+ * @returns {PageBuilderService} The singleton instance of the PageBuilderService.
+ */
+export declare function getPageBuilder(): PageBuilderService;
+
+export declare interface ImageObject {
+    src: string;
+    [key: string]: unknown;
+}
+
+export declare const PageBuilder: DefineComponent<ExtractPropTypes<{
+    CustomMediaLibraryComponent: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    CustomBuilderComponents: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    showCloseButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showPublishButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    handleClosePageBuilder: (...args: any[]) => void;
+    handlePublishPageBuilder: (...args: any[]) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<{
+    CustomMediaLibraryComponent: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    CustomBuilderComponents: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    showCloseButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showPublishButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onHandleClosePageBuilder?: ((...args: any[]) => any) | undefined;
+    onHandlePublishPageBuilder?: ((...args: any[]) => any) | undefined;
+}>, {
+    CustomBuilderComponents: Record<string, any>;
+    CustomMediaLibraryComponent: Record<string, any>;
+    showCloseButton: boolean;
+    showPublishButton: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+export declare const pageBuilder: {
+    install: (app: App) => void;
+};
+
+export declare interface PageBuilderConfig {
+    updateOrCreate: {
+        /**
+         * Whether the builder is creating new content or updating existing content.
+         * Accepts `'create'`, `'update'`, or any other string for dynamic / computed values.
+         * The union with `(string & {})` preserves autocomplete for the two common values
+         * while allowing any string without requiring `as const` or explicit casting.
+         *
+         * @example
+         * // Dynamic value — works without `as const`
+         * formType: hasContent ? 'update' : 'create'
+         */
+        formType: 'create' | 'update' | (string & {});
+        formName: FormName | (string & {});
+        [key: string]: unknown;
+    };
+    pageBuilderLogo?: {
+        src: string;
+        [key: string]: unknown;
+    } | null;
+    resourceData?: {
+        /**
+         * Optional page/resource title shown in the builder toolbar.
+         * Made optional so consumers can pass a resource object without a title
+         * or when the title isn't known yet at the time `startBuilder` is called.
+         */
+        title?: string;
+        /**
+         * Accepts both numeric IDs and string-based IDs (e.g. UUIDs).
+         * The service handles both types at runtime when building localStorage keys.
+         */
+        id?: number | string;
+        [key: string]: unknown;
+    } | null;
+    userForPageBuilder?: PageBuilderUser;
+    [key: string]: unknown;
+    userSettings?: {
+        language?: {
+            default?: string;
+            enable?: readonly string[];
+            disableLanguageDropDown?: boolean;
+        };
+        autoSave?: boolean;
+        notifications?: boolean;
+        /**
+         * Default canvas font and, optionally, the restricted set of fonts shown in
+         * the font-family picker.
+         *
+         * - Single value: `'jost'` — sets the canvas default; picker shows all fonts.
+         * - Comma-separated list: `'jost, raleway, arial'` — first entry is the
+         *   canvas default; picker is restricted to the listed fonts.
+         *
+         * Unknown font names (not in the built-in list) are silently ignored.
+         */
+        fontFamily?: string;
+        /**
+         * Per-element font overrides applied to the builder canvas.
+         * Each value follows the same format as `fontFamily` — a font key name or
+         * comma-separated list; the first recognised entry is used.
+         *
+         * Available font names: jost, raleway, palantino, arial, helvetica, georgia,
+         * times, times-new-roman, courier, courier-new, verdana, tahoma, trebuchet,
+         * garamond, bookman, comic-sans, impact, lucida, lucida-console, lucida-sans,
+         * candara, optima, avenir, futura, calibri, cambria, didot, franklin-gothic,
+         * rockwell, baskerville, sans, serif, mono
+         */
+        elementFonts?: PageBuilderElementFonts;
+    } | null;
+    settings?: {
+        brandColor?: string;
+        themeColorPresets?: ThemeColorPresetSettingsInput | ThemeColorPresetSettings | null;
+        [key: string]: unknown;
+    } | null;
+    pageSettings?: PageSettings;
+}
+
+/**
+ * Per-element font overrides for the builder canvas.
+ * Each value is a font key name or comma-separated list (e.g. `'jost'` or
+ * `'jost, raleway, arial'`). The first recognised font name is applied;
+ * unrecognised names are silently skipped.
+ */
+declare interface PageBuilderElementFonts {
+    h1?: string;
+    h2?: string;
+    h3?: string;
+    h4?: string;
+    h5?: string;
+    h6?: string;
+    p?: string;
+}
+
+export declare const PageBuilderPreview: DefineComponent<ExtractPropTypes<{
+    mobile: {
+        type: BooleanConstructor;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    mobile: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{}>, {
+    mobile: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+export declare class PageBuilderService {
+    private fontSizeRegex;
+    protected pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>;
+    private getLocalStorageItemName;
+    private getApplyImageToSelection;
+    private getHyberlinkEnable;
+    private getComponents;
+    private getComponent;
+    private getElement;
+    private getComponentArrayAddMethod;
+    private NoneListernesTags;
+    private hasStartedEditing;
+    private originalComponents;
+    private savedMountComponents;
+    private pendingMountComponents;
+    private globalStylesObserver;
+    private _pendingPageSettings;
+    private _lastKnownPageSettings;
+    private isPageBuilderMissingOnStart;
+    private elementsWithListeners;
+    private translate;
+    constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>);
+    /**
+     * Returns an array of available languages.
+     * @returns {AvailableLanguage[]} An array of available language codes.
+     */
+    availableLanguage(): AvailableLanguage[];
+    /**
+     * Sets the current language in the page builder state.
+     * @param {string} lang - The language code to set.
+     */
+    changeLanguage(lang: string): void;
+    /**
+     * Deselects any selected or hovered elements in the builder UI.
+     * @returns {Promise<void>}
+     */
+    clearHtmlSelection(): Promise<void>;
+    /**
+     * Ensures that the `updateOrCreate` configuration is valid and sets default values if necessary.
+     * @param {PageBuilderConfig} config - The page builder configuration.
+     * @private
+     */
+    private ensureUpdateOrCreateConfig;
+    /**
+     * Validates the user-provided components array.
+     * @param {unknown} components - The components data to validate.
+     * @returns {{error: true, warning: string, status: string} | {error: true, reason: string} | undefined} An error object if validation fails, otherwise undefined.
+     * @private
+     */
+    private validateUserProvidedComponents;
+    /**
+     * Ensures that the language configuration is valid and sets default values if necessary.
+     * @param {PageBuilderConfig} config - The page builder configuration.
+     * @private
+     */
+    private ensureLanguage;
+    /**
+     * Validates the entire page builder configuration.
+     * @param {PageBuilderConfig} config - The page builder configuration.
+     * @private
+     */
+    private validateConfig;
+    /**
+     * Saves user settings to local storage.
+     * @param {string} newLang - The new language to save.
+     */
+    saveUserSettingsStorage(newLang: string): void;
+    /**
+     * Initializes the Page Builder.
+     * @param {PageBuilderConfig} config - The configuration object for the Page Builder.
+     * @param {BuilderResourceData} [passedComponentsArray] - Optional array of components to load.
+     * @returns {Promise<StartBuilderResult>} A result object indicating success or failure.
+     */
+    startBuilder(config: PageBuilderConfig, passedComponentsArray?: BuilderResourceData): Promise<StartBuilderResult>;
+    /**
+     * Completes the builder initialization process once the DOM is ready.
+     * @param {BuilderResourceData} [passedComponentsArray] - Optional array of components to load.
+     * @returns {Promise<void>}
+     */
+    completeBuilderInitialization(passedComponentsArray?: BuilderResourceData): Promise<void>;
+    /**
+     * Converts an array of ComponentObject into a single HTML string.
+     *
+     * @returns {string} A single HTML string containing all components.
+     */
+    private renderComponentsToHtml;
+    /**
+     * Completes the mounting process by loading components into the DOM and setting up listeners.
+     * @param {string} html - The HTML string of components to mount.
+     * @param {boolean} [useConfigPageSettings] - Whether to use page settings from the passed data.
+     * @private
+     */
+    private completeMountProcess;
+    /**
+     * Applies CSS class changes to the currently selected element.
+     * @param {string | undefined} cssUserSelection - The user's CSS class selection.
+     * @param {string[]} CSSArray - The array of possible CSS classes for this property.
+     * @param {string} mutationName - The name of the store mutation to call.
+     * @returns {string | undefined} The previously applied CSS class.
+     * @private
+     */
+    private applyElementClassChanges;
+    private removeElementClassesFromArray;
+    /**
+     * Removes all CSS classes from the main page builder container.
+     * @returns {Promise<void>}
+     */
+    clearClassesFromPage(): Promise<void>;
+    /**
+     * Removes all inline styles from the main page builder container.
+     * @returns {Promise<void>}
+     */
+    clearInlineStylesFromPage(): Promise<void>;
+    /**
+     * Selects the main page builder container for global styling.
+     * @returns {Promise<void>}
+     */
+    globalPageStyles(): Promise<void>;
+    /**
+     * Disconnects the MutationObserver that tracks global page style changes.
+     * Call when closing the global styles editor panel.
+     */
+    stopGlobalStylesSync(): void;
+    /**
+     * Handles changes to the font weight of the selected element.
+     * @param {string} [userSelectedFontWeight] - The selected font weight class.
+     */
+    handleFontWeight(userSelectedFontWeight?: string): void;
+    /**
+     * Handles changes to the base font size of the selected element.
+     * @param {string} [userSelectedFontSize] - The selected font size class.
+     */
+    handleFontSizeBase(userSelectedFontSize?: string): void;
+    /**
+     * Handles changes to the desktop font size of the selected element.
+     * @param {string} [userSelectedFontSize] - The selected font size class for desktop.
+     */
+    handleFontSizeDesktop(userSelectedFontSize?: string): void;
+    /**
+     * Applies helper CSS classes to elements, such as wrapping them or adding responsive text classes.
+     * @param {HTMLElement} element - The element to process.
+     * @private
+     */
+    private ensureImagesHaveAltText;
+    private applyHelperCSSToElements;
+    /**
+     * Toggles the visibility of the TipTap modal for rich text editing.
+     * @param {boolean} status - Whether to show or hide the modal.
+     * @returns {Promise<void>}
+     */
+    toggleTipTapModal(status: boolean): Promise<void>;
+    /**
+     * Wraps an element in a div if it's an excluded tag and adjacent to an image.
+     * @param {HTMLElement} element - The element to potentially wrap.
+     * @private
+     */
+    private wrapElementInDivIfExcluded;
+    /**
+     * Handles the mouseover event for editable elements, showing a hover state.
+     * @param {Event} e - The mouse event.
+     * @param {HTMLElement} element - The element being hovered over.
+     * @private
+     */
+    private handleMouseOver;
+    /**
+     * Handles the mouseleave event for editable elements, removing the hover state.
+     * @param {Event} e - The mouse event.
+     * @private
+     */
+    private handleMouseLeave;
+    /**
+     * Checks if an element is editable based on its tag name.
+     * @param {Element | null} el - The element to check.
+     * @returns {boolean} True if the element is editable, false otherwise.
+     */
+    isEditableElement(el: Element | null): boolean;
+    getSelectedComponentSection(): HTMLElement | null;
+    isSelectedComponentTopElement(): boolean;
+    selectedComponentIsFullWidth(): boolean;
+    setSelectedComponentFullWidth(enabled: boolean): Promise<void>;
+    /**
+     * Returns true when the global page wrapper has the full-width class applied.
+     */
+    isGlobalFullWidth(): boolean;
+    /**
+     * Toggles the full-width class on the page wrapper so that global background
+     * colours stretch across the entire browser viewport.
+     */
+    setGlobalFullWidth(enabled: boolean): Promise<void>;
+    /** Returns true when the currently selected element is an `<img>`. */
+    isSelectedElementImage(): boolean;
+    setImageSettingsModalOpen(open: boolean): void;
+    isImageSettingsModalOpen(): boolean;
+    private findImageAspectClass;
+    private removeImageAspectClasses;
+    handleImageObjectFit(userSelection?: string): void;
+    handleImageObjectPosition(userSelection?: string): void;
+    handleImageAspectRatio(userSelection?: string): void;
+    handleImageAltText(alt?: string): Promise<void>;
+    getSelectedImageAltText(): string;
+    /**
+     * Attaches click, mouseover, and mouseleave event listeners to all editable elements in the page builder.
+     * @private
+     */
+    private addListenersToEditableElements;
+    /**
+     * Handles the click event for editable elements, setting the element as selected.
+     * @param {Event} e - The click event.
+     * @param {HTMLElement} element - The clicked element.
+     * @private
+     */
+    private handleElementClick;
+    private getHistoryBaseKey;
+    private initializeHistory;
+    /**
+     * Triggers an auto-save of the current page builder content to local storage if enabled.
+     */
+    handleAutoSave: () => Promise<void>;
+    /**
+     * Manually saves the current page builder content to local storage.
+     */
+    handleManualSave: (doNoClearHTML?: boolean) => Promise<void>;
+    /**
+     * Clones a component object and prepares it for insertion into the DOM by adding unique IDs and prefixes.
+     * @param {ComponentObject} componentObject - The component object to clone.
+     * @returns {ComponentObject} The cloned and prepared component object.
+     */
+    cloneCompObjForDOMInsertion(componentObject: ComponentObject): ComponentObject;
+    /**
+     * Removes the 'hovered' and 'selected' attributes from all elements in the page builder.
+     * @private
+     */
+    private removeHoveredAndSelected;
+    /**
+     * Syncs the CSS classes of the currently selected element to the state store.
+     * @private
+     */
+    private syncCurrentClasses;
+    /**
+     * Syncs the inline styles of the currently selected element to the state store.
+     * @private
+     */
+    private syncCurrentStyles;
+    /**
+     * Adds a CSS class to the currently selected element.
+     * @param {string} userSelectedClass - The class to add.
+     */
+    handleAddClasses(userSelectedClass: string): void;
+    /**
+     * Adds or updates an inline style property on the currently selected element.
+     * @param {string} property - The CSS property to add/update.
+     * @param {string} value - The value of the CSS property.
+     */
+    handleAddStyle(property: string, value: string): void;
+    /**
+     * Removes an inline style property from the currently selected element.
+     * @param {string} property - The CSS property to remove.
+     */
+    handleRemoveStyle(property: string): void;
+    /**
+     * Handles changes to the font family of the selected element.
+     * @param {string} [userSelectedFontFamily] - The selected font family class.
+     */
+    handleFontFamily(userSelectedFontFamily?: string): void;
+    /**
+     * Handles changes to the font style of the selected element.
+     * @param {string} [userSelectedFontStyle] - The selected font style class.
+     */
+    handleFontStyle(userSelectedFontStyle?: string): void;
+    /**
+     * Removes every class that appears in any of the given arrays from the currently
+     * selected element. Used to strip conflicting shorthand/directional padding or
+     * margin classes before applying a new value (e.g. remove pbx-py-* when setting
+     * pbx-pt-*, so the shorthand never silently overrides the directional value).
+     */
+    private purgeConflictingClasses;
+    /**
+     * Handles changes to the vertical padding of the selected element.
+     * py-* shorthand: also clear individual pt-* and pb-* so they don't override.
+     */
+    handleVerticalPadding(userSelectedVerticalPadding?: string): void;
+    /**
+     * Handles changes to the horizontal padding of the selected element.
+     * px-* shorthand: also clear individual pl-* and pr-* so they don't override.
+     */
+    handleHorizontalPadding(userSelectedHorizontalPadding?: string): void;
+    /**
+     * Handles changes to the top padding of the selected element.
+     * pt-*: also clear py-* shorthand which also sets padding-top.
+     */
+    handleTopPadding(userSelectedTopPadding?: string): void;
+    /**
+     * Handles changes to the right padding of the selected element.
+     * pr-*: also clear px-* shorthand which also sets padding-right.
+     */
+    handleRightPadding(userSelectedRightPadding?: string): void;
+    /**
+     * Handles changes to the bottom padding of the selected element.
+     * pb-*: also clear py-* shorthand which also sets padding-bottom.
+     */
+    handleBottomPadding(userSelectedBottomPadding?: string): void;
+    /**
+     * Handles changes to the left padding of the selected element.
+     * pl-*: also clear px-* shorthand which also sets padding-left.
+     */
+    handleLeftPadding(userSelectedLeftPadding?: string): void;
+    /**
+     * Handles changes to the vertical margin of the selected element.
+     * my-* shorthand: also clear individual mt-* and mb-*.
+     */
+    handleVerticalMargin(userSelectedVerticalMargin?: string): void;
+    /**
+     * Handles changes to the horizontal margin of the selected element.
+     * mx-* shorthand: also clear individual ml-* and mr-*.
+     */
+    handleHorizontalMargin(userSelectedHorizontalMargin?: string): void;
+    /**
+     * Handles changes to the top margin of the selected element.
+     * mt-*: also clear my-* shorthand.
+     */
+    handleTopMargin(userSelectedTopMargin?: string): void;
+    /**
+     * Handles changes to the right margin of the selected element.
+     * mr-*: also clear mx-* shorthand.
+     */
+    handleRightMargin(userSelectedRightMargin?: string): void;
+    /**
+     * Handles changes to the bottom margin of the selected element.
+     * mb-*: also clear my-* shorthand.
+     */
+    handleBottomMargin(userSelectedBottomMargin?: string): void;
+    /**
+     * Handles changes to the left margin of the selected element.
+     * ml-*: also clear mx-* shorthand.
+     */
+    handleLeftMargin(userSelectedLeftMargin?: string): void;
+    /**
+     * Handles changes to the border style of the selected element.
+     * @param {string} [borderStyle] - The selected border style class.
+     */
+    handleBorderStyle(borderStyle?: string): void;
+    /**
+     * Handles changes to the border width of the selected element.
+     * @param {string} [borderWidth] - The selected border width class.
+     */
+    handleBorderWidth(borderWidth?: string): void;
+    /**
+     * Handles changes to the border color of the selected element.
+     * @param {string} [borderColor] - The selected border color class.
+     */
+    handleBorderColor(borderColor?: string): void;
+    /**
+     * Handles changes to the background color of the selected element.
+     * @param {string} [color] - The selected background color class.
+     */
+    handleBackgroundColor(color?: string): void;
+    handleCustomBackgroundColor(color: string): void;
+    /**
+     * Handles changes to the text color of the selected element.
+     * @param {string} [color] - The selected text color class.
+     */
+    handleTextColor(color?: string): void;
+    handleCustomTextColor(color: string): void;
+    /**
+     * Handles changes to the global border radius of the selected element.
+     * @param {string} [borderRadiusGlobal] - The selected global border radius class.
+     */
+    handleBorderRadiusGlobal(borderRadiusGlobal?: string): void;
+    /**
+     * Handles changes to the top-left border radius of the selected element.
+     * @param {string} [borderRadiusTopLeft] - The selected top-left border radius class.
+     */
+    handleBorderRadiusTopLeft(borderRadiusTopLeft?: string): void;
+    /**
+     * Handles changes to the top-right border radius of the selected element.
+     * @param {string} [borderRadiusTopRight] - The selected top-right border radius class.
+     */
+    handleBorderRadiusTopRight(borderRadiusTopRight?: string): void;
+    /**
+     * Handles changes to the bottom-left border radius of the selected element.
+     * @param {string} [borderRadiusBottomleft] - The selected bottom-left border radius class.
+     */
+    handleBorderRadiusBottomleft(borderRadiusBottomleft?: string): void;
+    /**
+     * Handles changes to the bottom-right border radius of the selected element.
+     * @param {string} [borderRadiusBottomRight] - The selected bottom-right border radius class.
+     */
+    handleBorderRadiusBottomRight(borderRadiusBottomRight?: string): void;
+    /**
+     * Handles changes to the tablet font size of the selected element.
+     * @param {string} [userSelectedFontSize] - The selected font size class for tablet.
+     */
+    handleFontSizeTablet(userSelectedFontSize?: string): void;
+    /**
+     * Handles changes to the mobile font size of the selected element.
+     * @param {string} [userSelectedFontSize] - The selected font size class for mobile.
+     */
+    handleFontSizeMobile(userSelectedFontSize?: string): void;
+    /**
+     * Handles changes to the background opacity of the selected element.
+     * @param {string} [opacity] - The selected background opacity class.
+     */
+    handleBackgroundOpacity(opacity?: string): void;
+    /**
+     * Handles changes to the opacity of the selected element.
+     * @param {string} [opacity] - The selected opacity class.
+     */
+    handleOpacity(opacity?: string): void;
+    /**
+     * Removes all components from both the builder state and the DOM.
+     * @private
+     */
+    private deleteAllComponentsFromDOM;
+    undo(): Promise<void>;
+    redo(): Promise<void>;
+    private hasVisibleContent;
+    private isSectionEmpty;
+    /**
+     * Duplicate the currently selected component from the DOM and the state.
+     * @returns {Promise<void>}
+     */
+    /**
+     * Finds the first two-column layout container inside the selected section.
+     * Matches flex-row containers (including responsive variants like lg:pbx-flex-row)
+     * AND grid containers with a grid-cols-2 class, in each case requiring exactly
+     * two direct element children.  Returns the container or null.
+     */
+    findReverseableContainer(): HTMLElement | null;
+    /**
+     * Reverses the visual order of a two-column layout by physically swapping the
+     * two direct children of the detected container.  This works for both flex-row
+     * and grid-cols-2 layouts and naturally toggles on repeated clicks.
+     * Persists the change to the store and localStorage.
+     */
+    reverseComponentLayout(): Promise<void>;
+    duplicateComponent(): Promise<void>;
+    /**
+     * Deletes the currently selected component from the DOM and the state.
+     * @returns {Promise<void>}
+     */
+    deleteComponentFromDOM(): Promise<void>;
+    /**
+     * Duplicates the currently selected element and inserts the copy immediately
+     * after it in the DOM, then syncs the change to the store.
+     */
+    duplicateElementInDOM(): Promise<void>;
+    /**
+     * Deletes the currently selected element from the DOM and stores it for potential restoration.
+     * @returns {Promise<void>}
+     */
+    deleteElementFromDOM(): Promise<void>;
+    /**
+     * Removes a CSS class from the currently selected element.
+     * @param {string} userSelectedClass - The class to remove.
+     */
+    handleRemoveClasses(userSelectedClass: string): void;
+    /**
+     * Reorders the currently selected component up or down in the component list.
+     * @param {number} direction - The direction to move the component (-1 for up, 1 for down).
+     */
+    reorderComponent(direction: number): Promise<void>;
+    /**
+     * Checks if the currently selected component can be moved up.
+     * @returns {boolean} True if the component can be moved up, false otherwise.
+     */
+    canMoveUp(): boolean;
+    /**
+     * Checks if the currently selected component can be moved down.
+     * @returns {boolean} True if the component can be moved down, false otherwise.
+     */
+    canMoveDown(): boolean;
+    /**
+     * Ensures that a text area element has content, adding a visual indicator if it's empty.
+     */
+    ensureTextAreaHasContent: () => void;
+    /**
+     * Handles text input for an element, updating its content.
+     * @param {string} textContentVueModel - The new text content from the Vue model.
+     * @returns {Promise<void>}
+     */
+    handleTextInput: (textContentVueModel: string) => Promise<void>;
+    /**
+     * Checks if the selected element or its first child is an iframe.
+     * @returns {boolean} True if it is an iframe, false otherwise.
+     */
+    ElOrFirstChildIsIframe(): boolean;
+    /**
+     * Checks if the selected element is a valid text container (i.e., does not contain images or divs).
+     * @returns {boolean | undefined} True if it's a valid text element, otherwise undefined.
+     */
+    isSelectedElementValidText(): false | undefined;
+    /**
+     * Generates a preview of the current page design.
+     */
+    previewCurrentDesign(): void;
+    /**
+     * Sanitizes a string to be used as a key in local storage.
+     * @param {string} input - The string to sanitize.
+     * @returns {string} The sanitized string.
+     */
+    sanitizeForLocalStorage(input: string): string;
+    /**
+     * Clones an element and removes selection-related attributes from the clone.
+     * @param {HTMLElement} element - The element to clone.
+     * @returns {HTMLElement} The sanitized clone.
+     * @private
+     */
+    private cloneAndRemoveSelectionAttributes;
+    /**
+     * Syncs the current DOM state of components to the in-memory store.
+     * @private
+     */
+    syncDomToStoreOnly(): Promise<void>;
+    generateHtmlFromComponents(): Promise<string>;
+    generateFullPageHtml(): Promise<string>;
+    /**
+     * Saves the current DOM state of components to local storage.
+     * @private
+     */
+    private saveDomComponentsToLocalStorage;
+    /**
+     * Removes the current page's components from local storage.
+     * @private
+     */
+    private removeCurrentComponentsFromLocalStorage;
+    /**
+     * Handles the form submission process, clearing local storage and the DOM.
+     * Global page settings (classes / inline styles on the page wrapper) are
+     * intentionally preserved so they survive a "remove all components" action.
+     * @returns {Promise<void>}
+     */
+    handleFormSubmission(): Promise<void>;
+    /**
+     * Reads the current page settings.
+     * Prioritises the live #pagebuilder element (always current) and falls back to localStorage.
+     */
+    private readCurrentPageSettings;
+    /** Applies captured global page classes/styles to the page wrapper once. */
+    private applyPageSettingsToPage;
+    /** Reconnects the global-styles MutationObserver after a Vue remount replaces nodes. */
+    private reconnectGlobalStylesObserver;
+    /**
+     * Updates the component store and re-renders the page without losing global page
+     * styles on #pagebuilder. Settings must be captured before the remount and
+     * re-applied after Vue renders.
+     */
+    private setComponentsPreservingPageSettings;
+    /**
+     * Parses a CSS style string into a key-value object.
+     * @param {string} style - The style string to parse.
+     * @returns {Record<string, string>} The parsed style object.
+     * @private
+     */
+    private parseStyleString;
+    /**
+     * Deletes old page builder data from local storage (older than 2 weeks).
+     */
+    deleteOldPageBuilderLocalStorage(): void;
+    /**
+     * Sets a flag to indicate that the user has started editing.
+     */
+    startEditing(): void;
+    /**
+     * Re-attaches click/hover listeners to any newly added DOM elements.
+     * Call this after programmatically inserting elements into the builder canvas.
+     */
+    refreshListeners(): Promise<void>;
+    /**
+     * Resumes editing from a draft saved in local storage.
+     * @returns {Promise<void>}
+     */
+    resumeEditingFromDraft(): Promise<void>;
+    /**
+     * Restores the original content that was loaded when the builder started.
+     * @returns {Promise<void>}
+     */
+    restoreOriginalContent(): Promise<void>;
+    returnLatestComponents(): Promise<ComponentObject[]>;
+    /**
+     * Gets the local storage key for the current resource.
+     * @returns {string | null} The local storage key.
+     */
+    getStorageItemNameForResource(): string | null;
+    /**
+     * Retrieves the saved page HTML from local storage.
+     * @returns {string | false} The HTML string or false if not found.
+     */
+    getSavedPageHtml(): string | false;
+    /**
+     * Applies a selected image to the current element.
+     * @param {ImageObject} image - The image object to apply.
+     * @returns {Promise<void>}
+     */
+    applySelectedImage(image: ImageObject): Promise<void>;
+    /**
+     * Sets the base primary image from the currently selected element if it's an image.
+     * @private
+     */
+    private setBasePrimaryImageFromSelectedElement;
+    /**
+     * Adds or removes a hyperlink from the selected element.
+     * @param {boolean} hyperlinkEnable - Whether to enable or disable the hyperlink.
+     * @param {string | null} urlInput - The URL for the hyperlink.
+     * @param {boolean} openHyperlinkInNewTab - Whether the link should open in a new tab.
+     * @private
+     */
+    private addHyperlinkToElement;
+    /**
+     * Checks if the selected element contains a hyperlink and updates the state accordingly.
+     * @private
+     */
+    private checkForHyperlink;
+    /**
+     * Handles all hyperlink-related actions for the selected element.
+     * @param {boolean} [hyperlinkEnable] - Whether to enable or disable the hyperlink.
+     * @param {string | null} [urlInput] - The URL for the hyperlink.
+     * @param {boolean} [openHyperlinkInNewTab] - Whether the link should open in a new tab.
+     */
+    handleHyperlink(hyperlinkEnable?: boolean, urlInput?: string | null, openHyperlinkInNewTab?: boolean): void;
+    addTheme(components: string): Promise<void>;
+    analyzeSEO(): Promise<SEOSummary>;
+    /**
+     * Adds a new component to the page builder.
+     * @param {ComponentObject} componentObject - The component to add.
+     * @returns {Promise<void>}
+     */
+    addComponent(componentObject: ComponentObject): Promise<void>;
+    /**
+     * Adds a prefix to Tailwind CSS classes in a string.
+     * @param {string} classList - The string of classes.
+     * @param {string} [prefix='pbx-'] - The prefix to add.
+     * @returns {string} The prefixed class string.
+     * @private
+     */
+    private addTailwindPrefixToClasses;
+    /**
+     * Converts a style object to a CSS string.
+     * @param {string | Record<string, string> | null | undefined} styleObj - The style object.
+     * @returns {string} The CSS style string.
+     * @private
+     */
+    private convertStyleObjectToString;
+    /**
+     * Parses a string of HTML and extracts builder components and global page settings.
+     * - This method expects an **HTML string** containing one or more `<section>...</section>` elements (such as the output from `getSavedPageHtml()` or a previously saved builder HTML string).
+     * - **Do NOT pass a JSON string** (such as the result of `JSON.stringify(componentsArray)`) to this method. Passing a JSON string to `DOMParser.parseFromString(..., 'text/html')` will not produce valid DOM nodes. Instead, it will treat the JSON as plain text, resulting in a `<html><head></head><body>{...json...}</body></html>` structure, not real HTML elements.
+     * - If you pass a JSON string, you will see lots of `\n` and strange HTML, because the parser is just wrapping your JSON in a `<body>` tag as text.
+     *
+     * Why only HTML?
+     * - It enforces a single source of truth for builder state (HTML).
+     * - It prevents misuse (e.g., passing JSON to a DOM parser, which is always a bug).
+     * - It makes your documentation and support much simpler.
+     *
+     * @param htmlString - The HTML string to parse (must contain `<section>...</section>` elements, not JSON).
+     * @returns An object with `components` (array of builder components) and `pageSettings` (global styles for the page).
+     */
+    parsePageBuilderHTML(htmlString: string): {
+        components: ComponentObject[];
+        pageSettings: PageSettings;
+    };
+    /**
+     * Applies modified components by mounting them to the DOM and attaching listeners.
+     * @param htmlString - The HTML string to apply
+     * @returns {Promise<string | null>} - Returns error message if failed, otherwise null
+     */
+    applyModifiedHTML(htmlString: string): Promise<string | null>;
+    private validateMountingHTML;
+    /**
+     * Applies modified components by mounting them to the DOM and attaching listeners.
+     * @param htmlString - The HTML string to apply
+     * @returns {Promise<string | null>} - Returns error message if failed, otherwise null
+     */
+    applyModifiedComponents(htmlString: string): Promise<string | null>;
+    /**
+     * Mounts builder components to the DOM from an HTML string.
+     *
+     * Input format detection:
+     *   - If the input starts with `[` or `{`: treated as JSON (array or object).
+     *   - If the input starts with `<`: treated as HTML.
+     *
+     * This function should be used when:
+     *   - Restoring the builder from a published HTML snapshot.
+     *   - Importing a static HTML export.
+     *   - Loading the builder from previously published or saved HTML (e.g., from `getSavedPageHtml()`).
+     *
+     * Typical use cases include restoring a published state, importing templates, or previewing published content.
+     */
+    private mountComponentsToDOM;
+    private updateLocalStorageItemName;
+    /**
+     * Initializes the styles for the currently selected element.
+     */
+    initializeElementStyles(): Promise<void>;
+}
+
+declare interface PageBuilderState {
+    componentArrayAddMethod: string | null;
+    localStorageItemName: string | null;
+    showModalTipTap: boolean;
+    menuRight: boolean;
+    borderStyle: string | null;
+    borderWidth: string | null;
+    borderColor: string | null;
+    borderRadiusGlobal: string | null;
+    borderRadiusTopLeft: string | null;
+    borderRadiusTopRight: string | null;
+    borderRadiusBottomleft: string | null;
+    borderRadiusBottomRight: string | null;
+    elementContainsHyperlink: boolean | null;
+    hyperlinkAbility: boolean | null;
+    hyperlinkInput: string | null;
+    hyperlinkMessage: string | null;
+    hyperlinkError: string | null;
+    hyberlinkEnable: boolean;
+    openHyperlinkinkInNewTab: boolean | null;
+    opacity: string | null;
+    backgroundOpacity: string | null;
+    textAreaVueModel: string | null;
+    currentClasses: string[];
+    currentStyles: Record<string, string>;
+    fontVerticalPadding: string | null;
+    fontHorizontalPadding: string | null;
+    fontTopPadding: string | null;
+    fontRightPadding: string | null;
+    fontBottomPadding: string | null;
+    fontLeftPadding: string | null;
+    fontVerticalMargin: string | null;
+    fontHorizontalMargin: string | null;
+    fontTopMargin: string | null;
+    fontRightMargin: string | null;
+    fontBottomMargin: string | null;
+    fontLeftMargin: string | null;
+    fontStyle: string | null;
+    fontFamily: string | null;
+    fontWeight: string | null;
+    fontBase: string | null;
+    fontDesktop: string | null;
+    fontTablet: string | null;
+    fontMobile: string | null;
+    backgroundColor: string | null;
+    textColor: string | null;
+    element: (HTMLElement & {
+        src?: string;
+    }) | null;
+    component: ComponentObject | null;
+    components: ComponentObject[];
+    basePrimaryImage: string | null;
+    imageObjectFit: string | null;
+    imageObjectPosition: string | null;
+    imageAspectRatio: string | null;
+    imageSettingsPanelOpen: boolean;
+    configPageBuilder: PageBuilderConfig | null;
+    showModalHTMLEditor: boolean;
+    toggleGlobalHtmlMode: boolean;
+    applyImageToSelection: ImageObject;
+    currentPreviewImage: string | null;
+    builderStarted: boolean;
+    isLoadingGlobal: boolean;
+    isSaving: boolean;
+    hasLocalDraftForUpdate: boolean;
+    isResumeEditing: boolean;
+    isRestoring: boolean;
+    currentLanguage: string | null;
+    historyIndex: number;
+    historyLength: number;
+    addComponentAddIndex: number | null;
+}
+
+export declare interface PageBuilderUser {
+    /**
+     * Optional stable user identifier.
+     * When provided, theme color presets are stored under a user-scoped localStorage
+     * key (`vueWebsitePageBuilderThemeColorPresets-u{id}`) so every user keeps their
+     * own personalized presets on the same device.  Accepts any string or number that
+     * uniquely identifies the user in the host application (e.g. a database row id).
+     * Also accepts `null` for cases where the DB returns a nullable id column.
+     */
+    id?: string | number | null;
+    /**
+     * Display name shown in the builder toolbar.
+     * Optional so consumers can omit it or pass auth-user objects where the name
+     * field may be `username`, `displayName`, etc. — just pick the right field.
+     */
+    name?: string;
+    image?: string;
+}
+
+export declare interface PageSettings {
+    classes?: string;
+    style?: string | Record<string, string>;
+    [key: string]: unknown;
+}
+
+/**
+ * Clear the stored theme color presets for the current user and reset the
+ * in-memory state to built-in defaults.
+ *
+ * Useful when the user explicitly wants to "restore defaults" or when a
+ * host application signs out a user and needs to clear personalization data.
+ */
+export declare function resetThemeColorPresets(): void;
+
+declare interface SEOCheck {
+    check: string;
+    passed: boolean;
+    details: string;
+    category: string;
+}
+
+declare interface SEOSummary {
+    score: number;
+    checks: SEOCheck[];
+}
+
+declare interface SetPushComponentsPayload {
+    componentArrayAddMethod?: string;
+    component: ComponentObject;
+}
+
+export declare const sharedPageBuilderPinia: Pinia;
+
+export declare const sharedPageBuilderStore: ReturnType<typeof usePageBuilderStateStore>;
+
+export declare type StartBuilderResult = {
+    error: true;
+    reason: string;
+} | {
+    message: string;
+    validation?: {
+        error: true;
+        warning: string;
+        status: string;
+    } | {
+        error: true;
+        reason: string;
+    };
+    passedComponentsArray?: BuilderResourceData;
+};
+
+export declare interface ThemeColorPreset {
+    id: ThemeColorPresetId;
+    label: string;
+    color: string;
+    enabled: boolean;
+}
+
+export declare type ThemeColorPresetId = 'primary' | 'secondary' | 'custom1' | 'custom2' | 'custom3' | 'custom4' | 'custom5' | 'custom6';
+
+/** Flexible input for consumer configs — id accepts any string (e.g. inferred from variables). */
+export declare interface ThemeColorPresetInput {
+    id: ThemeColorPresetId | (string & {});
+    label?: string;
+    color?: string;
+    enabled?: boolean;
+    [key: string]: unknown;
+}
+
+export declare interface ThemeColorPresetSettings {
+    enabled: boolean;
+    colors: readonly ThemeColorPreset[];
+}
+
+/** Input shape for themeColorPresets in PageBuilderConfig (partial colors are normalized at runtime). */
+export declare interface ThemeColorPresetSettingsInput {
+    enabled?: boolean;
+    colors?: ReadonlyArray<ThemeColorPresetInput>;
+    [key: string]: unknown;
+}
+
+export declare function usePageBuilderModal(): {
+    closeAddComponentModal: () => void;
+    closeMediaLibraryModal: () => void;
+};
+
+export declare const usePageBuilderStateStore: StoreDefinition<"pageBuilderState", PageBuilderState, {
+    getComponentArrayAddMethod(state: PageBuilderState): string | null;
+    getLocalStorageItemName(state: PageBuilderState): string | null;
+    getShowModalTipTap(state: PageBuilderState): boolean;
+    getMenuRight(state: PageBuilderState): boolean;
+    getBorderStyle(state: PageBuilderState): string | null;
+    getBorderWidth(state: PageBuilderState): string | null;
+    getBorderColor(state: PageBuilderState): string | null;
+    getBorderRadiusGlobal(state: PageBuilderState): string | null;
+    getBorderRadiusTopLeft(state: PageBuilderState): string | null;
+    getBorderRadiusTopRight(state: PageBuilderState): string | null;
+    getBorderRadiusBottomleft(state: PageBuilderState): string | null;
+    getBorderRadiusBottomRight(state: PageBuilderState): string | null;
+    getElementContainsHyperlink(state: PageBuilderState): boolean | null;
+    getHyperlinkAbility(state: PageBuilderState): boolean | null;
+    getHyperlinkInput(state: PageBuilderState): string | null;
+    getHyperlinkMessage(state: PageBuilderState): string | null;
+    getHyperlinkError(state: PageBuilderState): string | null;
+    getHyberlinkEnable(state: PageBuilderState): boolean;
+    getOpenHyperlinkInNewTab(state: PageBuilderState): boolean | null;
+    getOpacity(state: PageBuilderState): string | null;
+    getBackgroundOpacity(state: PageBuilderState): string | null;
+    getTextAreaVueModel(state: PageBuilderState): string | null;
+    getCurrentClasses(state: PageBuilderState): string[];
+    getCurrentStyles(state: PageBuilderState): Record<string, string>;
+    getFontStyle(state: PageBuilderState): string | null;
+    getFontVerticalPadding(state: PageBuilderState): string | null;
+    getFontHorizontalPadding(state: PageBuilderState): string | null;
+    getFontTopPadding(state: PageBuilderState): string | null;
+    getFontRightPadding(state: PageBuilderState): string | null;
+    getFontBottomPadding(state: PageBuilderState): string | null;
+    getFontLeftPadding(state: PageBuilderState): string | null;
+    getFontVerticalMargin(state: PageBuilderState): string | null;
+    getFontHorizontalMargin(state: PageBuilderState): string | null;
+    getFontTopMargin(state: PageBuilderState): string | null;
+    getFontRightMargin(state: PageBuilderState): string | null;
+    getFontBottomMargin(state: PageBuilderState): string | null;
+    getFontLeftMargin(state: PageBuilderState): string | null;
+    getFontFamily(state: PageBuilderState): string | null;
+    getFontWeight(state: PageBuilderState): string | null;
+    getFontBase(state: PageBuilderState): string | null;
+    getFontDesktop(state: PageBuilderState): string | null;
+    getFontTablet(state: PageBuilderState): string | null;
+    getFontMobile(state: PageBuilderState): string | null;
+    getBackgroundColor(state: PageBuilderState): string | null;
+    getTextColor(state: PageBuilderState): string | null;
+    getElement(state: PageBuilderState): HTMLElement | null;
+    getComponent(state: PageBuilderState): ComponentObject | null;
+    getComponents(state: PageBuilderState): ComponentObject[];
+    getBasePrimaryImage(state: PageBuilderState): string | null;
+    getImageObjectFit(state: PageBuilderState): string | null;
+    getImageObjectPosition(state: PageBuilderState): string | null;
+    getImageAspectRatio(state: PageBuilderState): string | null;
+    getImageSettingsPanelOpen(state: PageBuilderState): boolean;
+    getPageBuilderConfig(state: PageBuilderState): PageBuilderConfig | null;
+    getShowModalHTMLEditor(state: PageBuilderState): boolean;
+    getToggleGlobalHtmlMode(state: PageBuilderState): boolean;
+    getApplyImageToSelection(state: PageBuilderState): ImageObject;
+    getCurrentPreviewImage(state: PageBuilderState): string | null;
+    getBuilderStarted: (state: PageBuilderState) => boolean;
+    getIsLoadingGlobal: (state: PageBuilderState) => boolean;
+    getIsSaving: (state: PageBuilderState) => boolean;
+    getHasLocalDraftForUpdate: (state: PageBuilderState) => boolean;
+    getIsLoadingResumeEditing: (state: PageBuilderState) => boolean;
+    getIsRestoring: (state: PageBuilderState) => boolean;
+    getCurrentLanguage: (state: PageBuilderState) => string | null;
+    getHistoryIndex: (state: PageBuilderState) => number;
+    getHistoryLength: (state: PageBuilderState) => number;
+    getAddComponentAddIndex: (state: {
+        componentArrayAddMethod: string | null;
+        localStorageItemName: string | null;
+        showModalTipTap: boolean;
+        menuRight: boolean;
+        borderStyle: string | null;
+        borderWidth: string | null;
+        borderColor: string | null;
+        borderRadiusGlobal: string | null;
+        borderRadiusTopLeft: string | null;
+        borderRadiusTopRight: string | null;
+        borderRadiusBottomleft: string | null;
+        borderRadiusBottomRight: string | null;
+        elementContainsHyperlink: boolean | null;
+        hyperlinkAbility: boolean | null;
+        hyperlinkInput: string | null;
+        hyperlinkMessage: string | null;
+        hyperlinkError: string | null;
+        hyberlinkEnable: boolean;
+        openHyperlinkinkInNewTab: boolean | null;
+        opacity: string | null;
+        backgroundOpacity: string | null;
+        textAreaVueModel: string | null;
+        currentClasses: string[];
+        currentStyles: Record<string, string>;
+        fontVerticalPadding: string | null;
+        fontHorizontalPadding: string | null;
+        fontTopPadding: string | null;
+        fontRightPadding: string | null;
+        fontBottomPadding: string | null;
+        fontLeftPadding: string | null;
+        fontVerticalMargin: string | null;
+        fontHorizontalMargin: string | null;
+        fontTopMargin: string | null;
+        fontRightMargin: string | null;
+        fontBottomMargin: string | null;
+        fontLeftMargin: string | null;
+        fontStyle: string | null;
+        fontFamily: string | null;
+        fontWeight: string | null;
+        fontBase: string | null;
+        fontDesktop: string | null;
+        fontTablet: string | null;
+        fontMobile: string | null;
+        backgroundColor: string | null;
+        textColor: string | null;
+        element: (HTMLElement & {
+            src?: string;
+        }) | null;
+        component: {
+            [x: string]: unknown;
+            id: string | number | null;
+            html_code: string;
+            title: string;
+        } | null;
+        components: {
+            [x: string]: unknown;
+            id: string | number | null;
+            html_code: string;
+            title: string;
+        }[];
+        basePrimaryImage: string | null;
+        imageObjectFit: string | null;
+        imageObjectPosition: string | null;
+        imageAspectRatio: string | null;
+        imageSettingsPanelOpen: boolean;
+        configPageBuilder: {
+            [x: string]: unknown;
+            updateOrCreate: {
+                [x: string]: unknown;
+                formType: "create" | "update" | (string & {});
+                formName: FormName | (string & {});
+            };
+            pageBuilderLogo?: {
+                [x: string]: unknown;
+                src: string;
+            } | null | undefined;
+            resourceData?: {
+                [x: string]: unknown;
+                title?: string | undefined;
+                id?: number | string | undefined;
+            } | null | undefined;
+            userForPageBuilder?: {
+                id?: string | number | null | undefined;
+                name?: string | undefined;
+                image?: string | undefined;
+            } | undefined;
+            userSettings?: {
+                language?: {
+                    default?: string | undefined;
+                    enable?: readonly string[] | undefined;
+                    disableLanguageDropDown?: boolean | undefined;
+                } | undefined;
+                autoSave?: boolean | undefined;
+                notifications?: boolean | undefined;
+                fontFamily?: string | undefined;
+                elementFonts?: {
+                    h1?: string | undefined;
+                    h2?: string | undefined;
+                    h3?: string | undefined;
+                    h4?: string | undefined;
+                    h5?: string | undefined;
+                    h6?: string | undefined;
+                    p?: string | undefined;
+                } | undefined;
+            } | null | undefined;
+            settings?: {
+                [x: string]: unknown;
+                brandColor?: string | undefined;
+                themeColorPresets?: {
+                    [x: string]: unknown;
+                    enabled?: boolean | undefined;
+                    colors?: readonly {
+                        [x: string]: unknown;
+                        id: ThemeColorPresetId | (string & {});
+                        label?: string | undefined;
+                        color?: string | undefined;
+                        enabled?: boolean | undefined;
+                    }[] | undefined;
+                } | {
+                    enabled: boolean;
+                    colors: readonly {
+                        id: ThemeColorPresetId;
+                        label: string;
+                        color: string;
+                        enabled: boolean;
+                    }[];
+                } | null | undefined;
+            } | null | undefined;
+            pageSettings?: {
+                [x: string]: unknown;
+                classes?: string | undefined;
+                style?: (string | Record<string, string>) | undefined;
+            } | undefined;
+        } | null;
+        showModalHTMLEditor: boolean;
+        toggleGlobalHtmlMode: boolean;
+        applyImageToSelection: {
+            [x: string]: unknown;
+            src: string;
+        };
+        currentPreviewImage: string | null;
+        builderStarted: boolean;
+        isLoadingGlobal: boolean;
+        isSaving: boolean;
+        hasLocalDraftForUpdate: boolean;
+        isResumeEditing: boolean;
+        isRestoring: boolean;
+        currentLanguage: string | null;
+        historyIndex: number;
+        historyLength: number;
+        addComponentAddIndex: number | null;
+    } & PiniaCustomStateProperties<PageBuilderState>) => number | null;
+}, {
+    setComponentArrayAddMethod(payload: string | null): void;
+    setLocalStorageItemName(payload: string | null): void;
+    setShowModalTipTap(payload: boolean): void;
+    setMenuRight(payload: boolean): void;
+    setBorderStyle(payload: string | null): void;
+    setBorderWidth(payload: string | null): void;
+    setBorderColor(payload: string | null): void;
+    setBorderRadiusGlobal(payload: string | null): void;
+    setBorderRadiusTopLeft(payload: string | null): void;
+    setBorderRadiusTopRight(payload: string | null): void;
+    setBorderRadiusBottomleft(payload: string | null): void;
+    setBorderRadiusBottomRight(payload: string | null): void;
+    setElementContainsHyperlink(payload: boolean | null): void;
+    setHyperlinkAbility(payload: boolean | null): void;
+    setHyperlinkInput(payload: string | null): void;
+    setHyperlinkMessage(payload: string | null): void;
+    setHyperlinkError(payload: string | null): void;
+    setHyberlinkEnable(payload: boolean): void;
+    setOpenHyperlinkInNewTab(payload: boolean | null): void;
+    setOpacity(payload: string | null): void;
+    setBackgroundOpacity(payload: string | null): void;
+    setTextAreaVueModel(payload: string | null): void;
+    setClass(payload: string): void;
+    removeClass(payload: string): void;
+    setCurrentClasses(payload: string[] | ArrayLike<string>): void;
+    setCurrentStyles(payload: Record<string, string>): void;
+    setFontVerticalPadding(payload: string | null): void;
+    setFontHorizontalPadding(payload: string | null): void;
+    setFontTopPadding(payload: string | null): void;
+    setFontRightPadding(payload: string | null): void;
+    setFontBottomPadding(payload: string | null): void;
+    setFontLeftPadding(payload: string | null): void;
+    setFontVerticalMargin(payload: string | null): void;
+    setFontHorizontalMargin(payload: string | null): void;
+    setFontTopMargin(payload: string | null): void;
+    setFontRightMargin(payload: string | null): void;
+    setFontBottomMargin(payload: string | null): void;
+    setFontLeftMargin(payload: string | null): void;
+    setFontStyle(payload: string | null): void;
+    setFontFamily(payload: string | null): void;
+    setFontWeight(payload: string | null): void;
+    setFontBase(payload: string | null): void;
+    setFontDesktop(payload: string | null): void;
+    setFontTablet(payload: string | null): void;
+    setFontMobile(payload: string | null): void;
+    setBackgroundColor(payload: string | null): void;
+    setTextColor(payload: string | null): void;
+    setElement(payload: HTMLElement | null): void;
+    setComponent(payload: ComponentObject | null): void;
+    setComponents(payload: ComponentObject[] | null): void;
+    setPushComponents(payload: SetPushComponentsPayload): void;
+    setBasePrimaryImage(payload: string | null): void;
+    setImageObjectFit(payload: string | null): void;
+    setImageObjectPosition(payload: string | null): void;
+    setImageAspectRatio(payload: string | null): void;
+    setImageSettingsPanelOpen(payload: boolean): void;
+    setCurrentLayoutPreview(payload: string): void;
+    setPageBuilderConfig(payload: PageBuilderConfig | null): void;
+    setShowModalHTMLEditor(payload: boolean): void;
+    setToggleGlobalHtmlMode(payload: boolean): void;
+    setApplyImageToSelection(payload: ImageObject): void;
+    setCurrentPreviewImage(payload: string | null): void;
+    setBuilderStarted(payload: boolean): void;
+    setIsLoadingGlobal(payload: boolean): void;
+    setIsSaving(payload: boolean): void;
+    setHasLocalDraftForUpdate(payload: boolean): void;
+    setIsLoadingResumeEditing(payload: boolean): void;
+    setIsRestoring(payload: boolean): void;
+    setCurrentLanguage(payload: string): void;
+    setHistoryIndex(payload: number): void;
+    setHistoryLength(payload: number): void;
+    setAddComponentAddIndex(payload: number | null): void;
+}>;
+
+export { }