@useinsider/guido 2.1.0-beta.febc521 → 2.1.0-beta.ff1bc98

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

@@ -0,0 +1,60 @@
+/**
+ * Product Layout Control
+ *
+ * Handles product display configuration:
+ * - Number of products to show
+ * - Products per row on desktop (hidden for list layout)
+ * - Products per row on mobile (hidden for list layout)
+ * - Triggers product row regeneration on changes
+ *
+ * Desktop/mobile counters swap visibility based on editor mode
+ * (detected via Stripo's EditorStatePropertyType.previewDeviceMode).
+ *
+ * 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
+ * Includes both desktop and mobile "products per row" counters
+ */
+export declare class ProductLayoutControl extends CommonControl {
+    private store;
+    private storeUnsubscription;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    onDestroy(): void;
+    _setFormValues(): void;
+    /**
+     * Checks if the editor is currently in mobile preview mode
+     * using Stripo's EditorStatePropertyType API.
+     */
+    _isMobileMode(): boolean;
+    /**
+     * Updates counter visibility based on layout orientation and editor mode.
+     * - List layout: hide both counters (products always full-width)
+     * - Grid + desktop mode: show desktop counter, hide mobile counter
+     * - Grid + mobile mode: show mobile counter, hide desktop counter
+     */
+    _updateProductsInRowVisibility(): void;
+    /**
+     * Subscribes to editor preview mode changes via Stripo API.
+     * When the user switches between desktop/mobile preview, toggles
+     * which "Products in One Row" counter is visible.
+     */
+    _subscribeToEditorModeChanges(): void;
+    _onProductCountChange(value: string): void;
+    _onProductsInRowChange(value: number): void;
+    _onMobileCardsInRowChange(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,221 @@
+/**
+ * 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 only the mobile product container rows.
+ * Used when mobile-specific settings change (mobileCardsInRow)
+ * or when the desktop container is regenerated (to keep both in sync).
+ */
+export declare function regenerateMobileProductRows(options: Omit<RegenerateProductRowsOptions, 'afterRegenerate'>): void;
+/**
+ * Regenerates product rows in the desktop container based on current store configuration.
+ * Also regenerates the mobile container to keep both in sync.
+ * 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/mobileLayout/cssRules.d.ts

@@ -0,0 +1,29 @@
+/**
+ * CSS rules for mobile grid layout visibility switching
+ *
+ * Follows the modifyCss pattern from textTrim control.
+ * Rules are injected into the document's stylesheet via modifyCss
+ * so they appear in the compiled HTML export.
+ */
+import type { ImmutableCssNode } from '@stripoinc/ui-editor-extensions';
+import { ModificationDescription } from '@stripoinc/ui-editor-extensions';
+/** CSS class for desktop product container */
+export declare const CSS_CLASS_DESKTOP_CONTAINER = "ins-recommendation-desktop-container";
+/** CSS class for mobile product container */
+export declare const CSS_CLASS_MOBILE_CONTAINER = "ins-recommendation-mobile-container";
+interface CssModifierApi {
+    getDocumentRootCssNode: () => ImmutableCssNode | null;
+    getDocumentModifier: () => {
+        modifyCss: (node: ImmutableCssNode) => {
+            appendRule: (rule: string) => void;
+        };
+        apply: (desc: ModificationDescription) => void;
+    };
+}
+/**
+ * Ensures mobile layout CSS rules exist in the document stylesheet.
+ * Only adds rules if they don't already exist (prevents duplicates across multiple blocks).
+ * Follows the same pattern as textTrim's _ensureCssRulesExist().
+ */
+export declare function ensureMobileCssRulesExist(api: CssModifierApi): void;
+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,34 @@
+import { ImmutableCssNode, 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
+ * and injects the required CSS rules into the document stylesheet
+ */
+export declare class NameTextTrimControl extends CommonControl {
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    _setFormValues(): void;
+    _getCurrentTrimState(): boolean;
+    /**
+     * Finds an existing CSS rule in the document stylesheet by exact query
+     * @param query - The CSS query to search for (uses Stripo's CSS query syntax)
+     * @returns The CSS rule node if found, undefined otherwise
+     */
+    _findCssRule(query: string): ImmutableCssNode | undefined;
+    /**
+     * Finds the .text-trim-enabled p rule by searching all text-trim rules and comparing selectors
+     * This is needed because Stripo's CSS query syntax interprets spaces as path separators
+     * @returns true if the rule exists
+     */
+    _hasParagraphRule(): boolean;
+    /**
+     * Ensures the text-trim CSS rules exist in the document stylesheet
+     * Only adds rules if they don't already exist (prevents duplicates across multiple blocks)
+     */
+    _ensureCssRulesExist(): void;
+    _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;
+        };
+    };
+};