@useinsider/guido 2.0.0-beta.087a24f → 2.0.0-beta.0941bcd

package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts

@@ -0,0 +1,57 @@
+import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+import { AlgorithmControl, ALGORITHM_CONTROL_ID } from './algorithm';
+import { CurrencyControl, CURRENCY_CONTROL_ID } from './currency';
+import { FiltersControl, FILTERS_CONTROL_ID } from './filters';
+import { LocaleControl, LOCALE_CONTROL_ID } from './locale';
+import { ProductLayoutControl, PRODUCT_LAYOUT_CONTROL_ID } from './productLayout';
+import { ShuffleControl, SHUFFLE_CONTROL_ID } from './shuffle';
+export declare const CONTROL_BLOCK_ID = "ui-elements-recommendation-block";
+export { AlgorithmControl, ALGORITHM_CONTROL_ID, LocaleControl, LOCALE_CONTROL_ID, CurrencyControl, CURRENCY_CONTROL_ID, ProductLayoutControl, PRODUCT_LAYOUT_CONTROL_ID, FiltersControl, FILTERS_CONTROL_ID, ShuffleControl, SHUFFLE_CONTROL_ID, };
+export * from './utils';
+/**
+ * Main recommendation block control that composes all sub-controls
+ * Registered in the Settings tab of the block's settings panel
+ */
+export declare class RecommendationBlockControl extends CommonControl {
+    private store;
+    private storeUnsubscription;
+    private hasInitializedData;
+    private algorithmControl;
+    private localeControl;
+    private currencyControl;
+    private productLayoutControl;
+    private filtersControl;
+    private shuffleControl;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): Promise<void>;
+    /**
+     * Immediately regenerate products with styles (no debounce)
+     * Used for initial load after fetch completes
+     */
+    private _regenerateWithProducts;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    onDestroy(): void;
+    /**
+     * Initialize all sub-controls with the shared API context
+     * Each sub-control manages its own form values and event listeners
+     */
+    _initializeSubControls(): void;
+    /**
+     * Debounced product fetch to prevent rapid API calls during config changes
+     */
+    private _debouncedFetchProducts;
+    /**
+     * Debounced regeneration when products arrive from API
+     * Tries in-place update first to preserve styles, falls back to full regeneration
+     */
+    private _debouncedRegenerateWithProducts;
+    /**
+     * Listen to store changes that require product refresh or regeneration
+     * - Config changes (size, strategy, filters, etc.) trigger API refetch
+     * - Currency code changes trigger API refetch (formatting changes are handled in-place)
+     * - Products array changes (API response) trigger HTML regeneration
+     */
+    _listenStateUpdates(): void;
+}

package/dist/src/extensions/Blocks/Recommendation/controls/main/locale.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Locale Selection Control
+ *
+ * Handles locale/language selection for recommendation products.
+ * Configuration is stored via node config (persists with template).
+ * Language options are fetched from API and cached in Pinia store.
+ */
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+export declare const LOCALE_CONTROL_ID = "recommendation-locale-control";
+/**
+ * Control for selecting recommendation content locale/language
+ */
+export declare class LocaleControl extends CommonControl {
+    private store;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    _setFormValues(): void;
+    _initializeSelectItems(): void;
+    _onLocaleChange(value: string): void;
+    _listenToFormUpdates(): void;
+}

package/dist/src/extensions/Blocks/Recommendation/controls/main/productLayout.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Product Layout Control
+ *
+ * Handles product display configuration:
+ * - Number of products to show
+ * - Products per row (hidden for list layout)
+ * - Triggers product row regeneration on changes
+ *
+ * Configuration is stored via node config (persists with template).
+ */
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+export declare const PRODUCT_LAYOUT_CONTROL_ID = "recommendation-product-layout-control";
+/**
+ * Control for configuring product count and layout density
+ */
+export declare class ProductLayoutControl extends CommonControl {
+    private store;
+    private storeUnsubscription;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    onDestroy(): void;
+    _setFormValues(): void;
+    /**
+     * Updates "Products in One Row" visibility based on layout orientation
+     * This control is hidden for list layout (products always take full width)
+     * Reads from node config first, falls back to DOM
+     */
+    _updateProductsInRowVisibility(): void;
+    _onProductCountChange(value: string): void;
+    _onProductsInRowChange(value: number): void;
+    _regenerateProductRows(): void;
+    _debouncedRegenerateProductRows: import("@vueuse/shared").PromisifyFn<() => void>;
+    _listenToFormUpdates(): void;
+    /**
+     * Subscribe to store changes to update visibility when layout changes
+     * This is still needed because layout changes come from LayoutControl
+     */
+    _listenStateUpdates(): void;
+}

package/dist/src/extensions/Blocks/Recommendation/controls/main/shuffle.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Shuffle Products Control
+ *
+ * Handles the toggle for shuffling/randomizing recommended products.
+ * Configuration is stored via node config (persists with template).
+ */
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+export declare const SHUFFLE_CONTROL_ID = "recommendation-shuffle-control";
+/**
+ * Control for toggling product shuffle/randomization
+ */
+export declare class ShuffleControl extends CommonControl {
+    private store;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    _setFormValues(): void;
+    _initializeToggle(): void;
+    _onShuffleChange(value: boolean): void;
+    _listenToFormUpdates(): void;
+}

package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts

@@ -0,0 +1,214 @@
+/**
+ * Shared utilities for Recommendation block controls
+ *
+ * Provides common functionality used across multiple controls:
+ * - Layout detection from DOM
+ * - Card composition retrieval
+ * - Product row regeneration
+ * - Spacing reapplication
+ * - In-place content updates (style-preserving)
+ */
+import type { CurrencyConfig } from '../../types/nodeConfig';
+import type { RecommendationProduct } from '@@/Types/recommendation';
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { ModificationDescription } from '@stripoinc/ui-editor-extensions';
+import { type Orientation } from '../../templates';
+/**
+ * Type for document modifier returned by api.getDocumentModifier()
+ *
+ * Uses `any` for the modifyHtml return type because:
+ * 1. Stripo's actual API uses complex generics (TemplateModifier<HtmlNodeModifier, CssNodeModifier>)
+ * 2. Multiple files define their own DocumentModifier with different methods
+ * 3. The methods (setStyle, setInnerHtml, setAttribute) chain and return the same object
+ *
+ * The actual chaining like modifier.modifyHtml(node).setStyle(...).setAttribute(...).apply()
+ * works correctly at runtime - this is just a TypeScript compatibility issue.
+ */
+interface DocumentModifier {
+    modifyHtml: (node: ImmutableHtmlNode) => any;
+    apply: (description: ModificationDescription) => void;
+}
+/**
+ * Gets the block element from the current node
+ * The currentNode could BE the block element or contain it
+ * @param currentNode - The current template node
+ * @returns The block element or null if not found
+ */
+export declare function getBlockElement(currentNode: ImmutableHtmlNode | null | undefined): ImmutableHtmlNode | null;
+/**
+ * Gets the current layout orientation from the block's data attribute
+ * Supports both old (horizontal/vertical) and new (list/grid) values for backward compatibility
+ * @param currentNode - The current template node
+ * @returns The layout value ('grid' or 'list'), defaults to 'grid'
+ */
+export declare function getCurrentLayout(currentNode: ImmutableHtmlNode | null | undefined): Orientation;
+/**
+ * Gets the current card composition from block data attribute or use default
+ * @param currentNode - The current template node
+ * @returns Array of card element types in order
+ */
+export declare function getCardComposition(currentNode: ImmutableHtmlNode | null | undefined): string[];
+export interface RegenerateProductRowsOptions {
+    currentNode: ImmutableHtmlNode | null | undefined;
+    documentModifier: DocumentModifier;
+    afterRegenerate?: () => void;
+    /** Optional: pass products directly instead of reading from store */
+    products?: RecommendationProduct[];
+    /** Optional: pass layout directly to avoid stale DOM reads after setAttribute */
+    layout?: Orientation;
+}
+/**
+ * Regenerates product rows based on current store configuration
+ * Reads products, layout, and composition from store/DOM and rebuilds the HTML
+ * @param options - Configuration options for regeneration
+ */
+export declare function regenerateProductRows(options: RegenerateProductRowsOptions): void;
+export interface ReapplySpacingOptions {
+    currentNode: ImmutableHtmlNode | null | undefined;
+    documentModifier: DocumentModifier;
+}
+/**
+ * Reapplies spacing values from data attributes after product regeneration
+ * This ensures spacing persists when products are regenerated
+ * @param options - Configuration options
+ */
+export declare function reapplySpacing(options: ReapplySpacingOptions): void;
+export interface RegenerateWithStylesOptions extends Omit<RegenerateProductRowsOptions, 'products' | 'layout'> {
+    /** Skip style capture/restore if styles were already handled externally */
+    skipStylePreservation?: boolean;
+    /** Optional: pass products directly instead of reading from store */
+    products?: RecommendationProduct[];
+    /** Optional: pass layout directly to avoid stale DOM reads after setAttribute */
+    layout?: Orientation;
+}
+/**
+ * Regenerates product rows while preserving user-applied styles
+ *
+ * This unified function handles the complete regeneration flow:
+ * 1. Captures existing styles (fonts, colors, button styles, etc.)
+ * 2. Regenerates HTML with new products/layout
+ * 3. Restores captured styles to new elements
+ * 4. Reapplies spacing from data attributes
+ *
+ * NOTE: Style restoration is temporarily disabled due to Stripo selection bug.
+ * Multiple apply() calls (setInnerHtml + restoreStyles + reapplySpacing) cause
+ * Stripo's internal cursor/selection tracking to lose node references, resulting in
+ * "Cannot read properties of undefined (reading 'textContent')" errors.
+ *
+ * Use this instead of `regenerateProductRows` when styles must be preserved.
+ * @example
+ * // When products change (API response, count change, layout change)
+ * regenerateProductRowsWithStyles({
+ *     currentNode: this.currentNode,
+ *     documentModifier: this.api.getDocumentModifier(),
+ * });
+ * @param options - Configuration options for regeneration
+ */
+export declare function regenerateProductRowsWithStyles(options: RegenerateWithStylesOptions): void;
+type PriceKey = 'price' | 'original_price' | 'discount';
+/**
+ * Formats a product price using current currency settings
+ * @param product - The product containing price data
+ * @param priceKey - Which price to use ('price', 'original_price', or 'discount')
+ * @returns Formatted price string
+ */
+export declare function formatProductPrice(product: RecommendationProduct, priceKey?: PriceKey): string;
+interface UpdateSingleProductContentOptions {
+    documentModifier: DocumentModifier;
+    product: RecommendationProduct;
+    imageEl: ImmutableHtmlNode | null;
+    nameEl: ImmutableHtmlNode | null;
+    priceEl: ImmutableHtmlNode | null;
+    oldPriceEl: ImmutableHtmlNode | null;
+    omnibusPriceEl: ImmutableHtmlNode | null;
+    omnibusDiscountEl: ImmutableHtmlNode | null;
+    buttonEl: ImmutableHtmlNode | null;
+}
+/**
+ * Updates a single product's dynamic content (image, name, prices, button URL)
+ * without touching the styled container elements.
+ *
+ * Uses setText() on text nodes instead of setInnerHtml() to preserve Stripo's
+ * internal node references and avoid cursor/selection tracking issues.
+ * @returns true if any modifications were made
+ */
+export declare function updateSingleProductContent(options: UpdateSingleProductContentOptions): boolean;
+export interface UpdateProductContentInPlaceOptions {
+    currentNode: ImmutableHtmlNode | null | undefined;
+    documentModifier: DocumentModifier;
+    products: RecommendationProduct[];
+}
+/**
+ * Updates product content in-place without regenerating HTML structure.
+ * Preserves all user-applied styles by only touching dynamic content.
+ *
+ * This is the preferred method when:
+ * - Product data changed but count remains the same
+ * - Currency/locale changed (prices need reformatting)
+ *
+ * Uses setText() on text nodes instead of setInnerHtml() to preserve
+ * Stripo's internal node references and avoid cursor/selection tracking issues.
+ *
+ * Falls back to false when:
+ * - Product count changed (need to add/remove elements)
+ * - Cannot find required elements
+ * @param options - Configuration options
+ * @returns true if in-place update was successful, false to fall back to full regeneration
+ */
+export declare function updateProductContentInPlace(options: UpdateProductContentInPlaceOptions): boolean;
+export interface UpdatePricesInPlaceOptions {
+    currentNode: ImmutableHtmlNode | null | undefined;
+    documentModifier: DocumentModifier;
+}
+/**
+ * Updates only price displays in-place (for currency changes).
+ * This is a lightweight update when only formatting changes, not product data.
+ *
+ * Perfect for:
+ * - Currency symbol change
+ * - Currency alignment change
+ * - Decimal/thousand separator changes
+ *
+ * Uses setText() on text nodes instead of setInnerHtml() to preserve
+ * Stripo's internal node references and avoid cursor/selection tracking issues.
+ * @param options - Configuration options
+ * @returns true if update was successful, false otherwise
+ */
+export declare function updatePricesInPlace(options: UpdatePricesInPlaceOptions): boolean;
+/**
+ * Gets current card background color from existing elements
+ * Checks both grid (.product-card-segment) and list (.product-card-wrapper) selectors
+ * @param currentNode - The current template node
+ * @returns Background color string or null if not found
+ */
+export declare function getCurrentCardBackgroundColor(currentNode: ImmutableHtmlNode | null | undefined): string | null;
+export interface ApplyCardBackgroundColorOptions {
+    currentNode: ImmutableHtmlNode | null | undefined;
+    documentModifier: DocumentModifier;
+    bgColor: string | null;
+    layout: Orientation;
+}
+/**
+ * Applies card background color to appropriate elements based on layout
+ * @param options - Configuration options
+ */
+export declare function applyCardBackgroundColor(options: ApplyCardBackgroundColorOptions): void;
+export interface SetCurrencyAttributesOptions {
+    currentNode: ImmutableHtmlNode | null | undefined;
+    documentModifier: DocumentModifier;
+    currency: CurrencyConfig;
+}
+/**
+ * Sets currency configuration as HTML attributes on the block element
+ * These attributes are read by the HTML compiler at runtime to format prices
+ * @param options - Configuration options
+ */
+export declare function setCurrencyAttributes(options: SetCurrencyAttributesOptions): void;
+/**
+ * Reads currency configuration from block HTML attributes
+ * Used to restore settings when loading a template
+ * @param currentNode - The current template node
+ * @returns CurrencyConfig or null if attributes not found
+ */
+export declare function getCurrencyAttributesFromBlock(currentNode: ImmutableHtmlNode | null | undefined): Partial<CurrencyConfig> | null;
+export {};

package/dist/src/extensions/Blocks/Recommendation/controls/name/index.d.ts

@@ -0,0 +1,97 @@
+/**
+ * Name Element Controls
+ *
+ * Controls for styling the product name element in recommendation cards.
+ */
+import { NameTextTrimControl } from './textTrim';
+/**
+ * Grouped Name Controls
+ * Use this object for cleaner imports in extension.ts
+ */
+export declare const NameControls: {
+    readonly align: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly color: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly size: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly style: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly fontFamily: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly background: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly paddings: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly textTrim: typeof NameTextTrimControl;
+};

package/dist/src/extensions/Blocks/Recommendation/controls/name/textTrim.d.ts

@@ -0,0 +1,16 @@
+import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+/**
+ * Control for enabling/disabling text trimming on product names
+ * When enabled, adds a CSS class that applies text-overflow: ellipsis
+ */
+export declare class NameTextTrimControl extends CommonControl {
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    _setFormValues(): void;
+    _getCurrentTrimState(): boolean;
+    _onTextTrimChange(enabled: boolean): void;
+    _listenToFormUpdates(): void;
+}

package/dist/src/extensions/Blocks/Recommendation/controls/oldPrice/index.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Old Price Element Controls
+ *
+ * Controls for styling the original/old price element in recommendation cards.
+ */
+/**
+ * Grouped Old Price Controls
+ * Use this object for cleaner imports in extension.ts
+ */
+export declare const OldPriceControls: {
+    readonly align: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly color: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly size: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly style: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly fontFamily: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly background: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly paddings: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+};