@useinsider/guido 2.1.0 → 2.2.0-beta.071f000

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

@@ -0,0 +1,52 @@
+/**
+ * Currency Settings Control
+ *
+ * Handles all currency-related configuration for recommendation products:
+ * - Currency type
+ * - Currency location (before/after)
+ * - Currency symbol
+ * - Thousand separator
+ * - Decimal separator
+ * - Decimal count
+ *
+ * Configuration is stored via node config (persists with template).
+ * Currency options are fetched from API and cached in Pinia store.
+ */
+import type { CurrencyConfig } from '../../types/nodeConfig';
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+export declare const CURRENCY_CONTROL_ID = "recommendation-currency-control";
+/**
+ * Control for managing currency display settings in recommendation blocks
+ */
+export declare class CurrencyControl extends CommonControl {
+    private store;
+    private storeUnsubscription;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    onDestroy(): void;
+    _setFormValues(): void;
+    _initializeSelectItems(): void;
+    /**
+     * Applies currency updates to node config, HTML attributes, Pinia store, and DOM.
+     * @param updates - Partial currency config to merge
+     * @param triggerRefetch - Whether to trigger a product API refetch.
+     *   true for currency code changes (different prices from API),
+     *   false for display-only changes (symbol, separators, alignment, decimal count).
+     */
+    _updateCurrency(updates: Partial<CurrencyConfig>, triggerRefetch?: boolean): void;
+    _onCurrencyChange(value: string): void;
+    _onCurrencyLocationChange(value: string): void;
+    _onCurrencySymbolChange(value: string): void;
+    _onThousandSeparatorChange(value: string): void;
+    _onDecimalSeparatorChange(value: string): void;
+    _onDecimalCountChange(value: string): void;
+    _listenToFormUpdates(): void;
+    /**
+     * Subscribe to store changes to update currency selects when API data arrives
+     * This handles the case where the control renders before currency list is loaded
+     */
+    _subscribeToStoreChanges(): void;
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Filters Control
+ *
+ * Handles the filter selection UI for recommendation products
+ * Opens filter selection drawer when button is clicked
+ */
+import { CommonControl } from '../../../common-control';
+export declare const FILTERS_CONTROL_ID = "recommendation-filters-control";
+/**
+ * Control for managing recommendation product filters
+ */
+export declare class FiltersControl extends CommonControl {
+    private store;
+    private addFilterListener;
+    private addFilterButton;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onDestroy(): void;
+    _onFilterSelectClick(): void;
+    _setupButtonListener(): void;
+}

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

@@ -0,0 +1,107 @@
+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 algorithmControl;
+    private localeControl;
+    private currencyControl;
+    private productLayoutControl;
+    private filtersControl;
+    private shuffleControl;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): Promise<void>;
+    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
+     */
+    private _initializeSubControls;
+    /**
+     * Syncs persisted node config into the Pinia store's block state.
+     *
+     * setCurrentBlock() creates a default entry (USD, en_US, mostPopular).
+     * For saved templates, the real config lives in the node (e.g., TRY, tr_TR).
+     * This method reads it and patches the store so fetchRecommendationProducts()
+     * uses the correct values.
+     *
+     * Uses triggerRefetch: false because the fetch hasn't happened yet —
+     * values are being prepared for the upcoming initial fetch.
+     */
+    private _syncNodeConfigToStore;
+    /**
+     * Fetches initial data for a block in three phases:
+     * 1. Shared reference data (algorithms, currencies, filters) — parallel
+     * 2. Smart defaults for new blocks (currency, algorithm) — sequential
+     * 3. Product data with correct defaults — sequential
+     *
+     * Shared by onRender() and onTemplateNodeUpdated() to avoid duplication.
+     * Marks the block as initialized to prevent redundant fetches on re-selection.
+     */
+    private _fetchBlockData;
+    /**
+     * Applies smart defaults for newly dropped blocks.
+     *
+     * For new blocks (config still matches hardcoded defaults), validates that
+     * the default currency and algorithm are available from the API response.
+     * If not, falls back to the first available option.
+     *
+     * Saved templates with user-customized config are left unchanged because
+     * their values won't match the hardcoded defaults.
+     */
+    private _applySmartDefaults;
+    /**
+     * Reads the recommendation-id attribute from the block element within the node
+     */
+    private _getRecommendationIdFromNode;
+    /**
+     * Debounced product fetch to prevent rapid API calls during config changes
+     */
+    private _debouncedFetchProducts;
+    /**
+     * Debounced content update when products arrive from API.
+     *
+     * Tries in-place update first (preserves user-applied styles) — this succeeds
+     * when the product count matches the DOM (algorithm/locale/currency changes).
+     *
+     * Falls back to full regeneration when product count differs from DOM — this
+     * happens after "Number of Products" changes where the DOM still has the old
+     * count. The store pads products to the configured size, so in-place only
+     * fails when the size actually changed.
+     */
+    private _debouncedRegenerateWithProducts;
+    /**
+     * Listen to store changes that require product refresh or regeneration.
+     *
+     * Uses configVersion counter (incremented only by patchCurrentBlockConfig)
+     * to distinguish user-initiated config changes from internal mutations
+     * (e.g., fetchRecommendationCreateData setting preferred currency).
+     *
+     * Tracks currentRecommendationId to detect block switches. When the user
+     * selects a different recommendation block, the proxy getters (e.g.,
+     * recommendationProducts) return the new block's data — a different array
+     * reference that would be falsely detected as "new products arrived".
+     * We skip that tick and update tracking references instead.
+     */
+    private _listenStateUpdates;
+    /**
+     * Persists the current filter state from Pinia store to the Stripo node config.
+     * This ensures filters survive template save/reload cycles.
+     */
+    private _persistFiltersToNodeConfig;
+}

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,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,234 @@
+/**
+ * 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).
+ *
+ * For list layout: hides the mobile row entirely (list is inherently responsive).
+ * For grid layout: shows the mobile row and populates it.
+ */
+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 after product regeneration.
+ * Desktop spacing applies only to the desktop container;
+ * mobile spacing applies only to the mobile container.
+ *
+ * Reads values from node config (primary) with data-attribute fallback
+ * for backward compatibility with pre-nodeConfig templates.
+ * @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;
+/**
+ * Adjusts a products array to a target size.
+ * Used by ProductLayoutControl to synchronously match products to the new size
+ * before regeneration, avoiding the race condition where the store still holds
+ * products from the previous (stale) fetch.
+ *
+ * - More products than target → truncate
+ * - Fewer products than target → pad with dummy products
+ * - Exact match → return as-is
+ */
+export declare function adjustProductsToSize(products: RecommendationProduct[], targetSize: number): RecommendationProduct[];
+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.
+ *
+ * Scopes element queries to the desktop container to avoid double-counting
+ * mobile container elements (both containers share identical block IDs).
+ * After updating desktop, also updates mobile container to keep them in sync.
+ *
+ * Falls back to false when product count changed (need to add/remove 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.
+ *
+ * Scopes element queries to the desktop container to avoid double-counting
+ * mobile container elements. After updating desktop, also updates mobile.
+ *
+ * Perfect for:
+ * - Currency symbol change
+ * - Currency alignment change
+ * - Decimal/thousand separator changes
+ * @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;
+};