@codingfactory/mediables-vue 2.12.0 → 2.13.0

package/dist/vanilla-editor/ui/ActiveFiltersPanel.d.ts

@@ -0,0 +1,93 @@
+export class ActiveFiltersPanel {
+    constructor(state: any, filterManager: any);
+    state: any;
+    filterManager: any;
+    element: HTMLElement | null;
+    _filterItems: Map<any, any>;
+    _unsubscribers: any[];
+    _onRemove: any;
+    _onReset: any;
+    _onClearAll: any;
+    _onUpdateValue: any;
+    _onSelect: any;
+    /**
+     * Create and render the active filters panel
+     * @param {Object} options - { onRemove, onReset, onClearAll, onUpdateValue, onSelect }
+     * @returns {HTMLElement}
+     */
+    render({ onRemove, onReset, onClearAll, onUpdateValue, onSelect }: Object): HTMLElement;
+    _listContainer: HTMLElement | undefined;
+    /**
+     * Subscribe to state changes
+     */
+    _subscribeToState(): void;
+    /**
+     * Update selected state for all items
+     */
+    _updateSelectedState(): void;
+    /**
+     * Render the filter list
+     */
+    _renderFilterList(): void;
+    /**
+     * Create a filter item
+     * @param {string} filterId
+     * @param {Object} def - Filter definition
+     * @returns {HTMLElement}
+     */
+    _createFilterItem(filterId: string, def: Object): HTMLElement;
+    /**
+     * Normalize control type (handle aliases)
+     * @param {string} type
+     * @returns {string}
+     */
+    _normalizeControlType(type: string): string;
+    /**
+     * Get a summary of filter values
+     * @param {Object} def - Filter definition
+     * @param {Object} values - Current values
+     * @returns {string}
+     */
+    _getValuesSummary(def: Object, values: Object): string;
+    /**
+     * Format a numeric value for display
+     * @param {number} value
+     * @returns {string}
+     */
+    _formatValue(value: number): string;
+    /**
+     * Update values display for all items
+     */
+    _updateValuesDisplay(): void;
+    /**
+     * Handle filter removal
+     * @param {string} filterId
+     */
+    _handleRemove(filterId: string): void;
+    /**
+     * Handle filter reset
+     * @param {string} filterId
+     */
+    _handleReset(filterId: string): void;
+    /**
+     * Handle clear all
+     */
+    _handleClearAll(): void;
+    /**
+     * Handle filter selection
+     * @param {string} filterId
+     */
+    _handleSelect(filterId: string): void;
+    /**
+     * Show panel
+     */
+    show(): void;
+    /**
+     * Hide panel
+     */
+    hide(): void;
+    /**
+     * Clean up
+     */
+    destroy(): void;
+}

package/dist/vanilla-editor/ui/CategoryCarousel.d.ts

@@ -0,0 +1,66 @@
+export class CategoryCarousel {
+    constructor(state: any, editor: any);
+    state: any;
+    editor: any;
+    element: HTMLElement | null;
+    _chips: Map<any, any>;
+    _scrollIndex: number;
+    _unsubscribers: any[];
+    /**
+     * Create and render the category carousel
+     * @param {Function} onSelect - Callback when category is selected
+     * @returns {HTMLElement}
+     */
+    render(onSelect: Function): HTMLElement;
+    _onSelect: Function | undefined;
+    _leftBtn: HTMLElement | undefined;
+    _carousel: HTMLElement | undefined;
+    _rightBtn: HTMLElement | undefined;
+    _pagination: HTMLElement | undefined;
+    /**
+     * Subscribe to state changes
+     */
+    _subscribeToState(): void;
+    /**
+     * Select a category
+     * @param {string} categoryId
+     */
+    _selectCategory(categoryId: string): void;
+    /**
+     * Scroll carousel left
+     */
+    _scrollLeft(): void;
+    /**
+     * Scroll carousel right
+     */
+    _scrollRight(): void;
+    /**
+     * Scroll to a specific page
+     * @param {number} pageIndex
+     */
+    _scrollToPage(pageIndex: number): void;
+    /**
+     * Animate carousel scroll
+     */
+    _scrollCarousel(): void;
+    /**
+     * Update navigation button states
+     */
+    _updateNavButtons(): void;
+    /**
+     * Update pagination dot states
+     */
+    _updatePagination(): void;
+    /**
+     * Set the selected category
+     * @param {string} categoryId
+     */
+    setSelected(categoryId: string): void;
+    /**
+     * Clean up
+     */
+    destroy(): void;
+}
+import { REGISTRY_TO_UI } from '../filters/categories.js';
+import { getUiCategoryForRegistry } from '../filters/categories.js';
+export { REGISTRY_TO_UI as REGISTRY_CATEGORY_MAP, getUiCategoryForRegistry };

package/dist/vanilla-editor/ui/CropControls.d.ts

@@ -0,0 +1,65 @@
+export class CropControls {
+    constructor(state: any, cropManager: any, editor?: null);
+    state: any;
+    cropManager: any;
+    editor: any;
+    element: HTMLElement | null;
+    _shapeChips: Map<any, any>;
+    _aspectChips: Map<any, any>;
+    _rotationPresetChips: Map<any, any>;
+    _rotationRange: HTMLElement | null;
+    _rotationNumber: HTMLElement | null;
+    _rotationValue: Element | null;
+    _unsubscribers: any[];
+    /**
+     * Apply crop and return the editor UI to filter mode.
+     * If crop application cannot complete, force-disable crop mode to avoid
+     * leaving the editor stuck in crop controls.
+     */
+    _applyCropAndReturnToFilters(): void;
+    /**
+     * Create and render the crop controls
+     * @returns {HTMLElement}
+     */
+    render(): HTMLElement;
+    _shapeSection: HTMLElement | undefined;
+    _aspectSection: HTMLElement | undefined;
+    _renderRotationSection(): HTMLElement;
+    /**
+     * Subscribe to state changes
+     */
+    _subscribeToState(): void;
+    _rotateBy(delta: any): void;
+    _setRotation(angle: any): void;
+    _previewAngleValue(rawValue: any): void;
+    _syncRotationControls(value: any): void;
+    _refreshPresetChips(angle: any): void;
+    _formatAngle(angle: any): string;
+    _formatPlainAngle(angle: any): string;
+    /**
+     * Select a crop shape
+     * @param {string} shapeId
+     */
+    _selectShape(shapeId: string): void;
+    /**
+     * Select an aspect ratio
+     * @param {string} aspectId
+     */
+    _selectAspect(aspectId: string): void;
+    /**
+     * Update aspect ratio section visibility
+     */
+    _updateAspectVisibility(): void;
+    /**
+     * Show controls
+     */
+    show(): void;
+    /**
+     * Hide controls
+     */
+    hide(): void;
+    /**
+     * Clean up
+     */
+    destroy(): void;
+}

package/dist/vanilla-editor/ui/FilterAdjustments.d.ts

@@ -0,0 +1,93 @@
+export class FilterAdjustments {
+    constructor(state: any, filterManager: any);
+    state: any;
+    filterManager: any;
+    element: HTMLElement | null;
+    _controls: Map<any, any>;
+    _onChange: any;
+    _onReset: any;
+    _onAction: any;
+    _unsubscribers: any[];
+    /**
+     * Create and render the filter adjustments panel
+     * @param {Object} options - { onChange, onReset, onAction }
+     * @returns {HTMLElement}
+     */
+    render({ onChange, onReset, onAction }: Object): HTMLElement;
+    /**
+     * Subscribe to state changes
+     */
+    _subscribeToState(): void;
+    /**
+     * Render controls for the selected filter.
+     *
+     * Renders both the static controls from def.controls and any dynamic
+     * controls the filter instance exposes via getDynamicControls() (e.g.
+     * per-stop color/offset/alpha rows for Color Gradient).
+     */
+    _renderControls(): void;
+    /**
+     * Create a control element based on type.
+     *
+     * The update key passed to _handleChange is `ctl.property || ctl.id`.
+     * Dynamic controls (e.g. from getDynamicControls) use their property
+     * path (e.g. 'colorStops[0].color') so FilterManager.updateValue can
+     * route the write correctly. Static controls without a property fall
+     * back to the control id, matching the legacy contract.
+     *
+     * @param {string} filterId
+     * @param {Object} ctl - Control definition
+     * @param {*} value - Current value
+     * @returns {HTMLElement|null}
+     */
+    _createControl(filterId: string, ctl: Object, value: any): HTMLElement | null;
+    /**
+     * Normalize control type (handle aliases)
+     * @param {string} type
+     * @returns {string}
+     */
+    _normalizeControlType(type: string): string;
+    /**
+     * Normalize options array format
+     * @param {Array} options
+     * @returns {Array}
+     */
+    _normalizeOptions(options: any[]): any[];
+    /**
+     * Handle control value change
+     * @param {string} filterId
+     * @param {string} controlId
+     * @param {*} value
+     */
+    _handleChange(filterId: string, controlId: string, value: any): void;
+    /**
+     * Handle reset button
+     * @param {string} filterId
+     */
+    _handleReset(filterId: string): void;
+    /**
+     * Handle button action. Dynamic controls (e.g. color stop rows) depend on
+     * filter state that can change as a result of the action (add/remove stop),
+     * so re-render after the action completes.
+     *
+     * @param {string} filterId
+     * @param {string} action
+     */
+    _handleAction(filterId: string, action: string): void;
+    /**
+     * Update control values from state
+     */
+    _updateValues(): void;
+    /**
+     * Show panel
+     */
+    show(): void;
+    /**
+     * Hide panel
+     */
+    hide(): void;
+    /**
+     * Clean up
+     */
+    destroy(): void;
+}

package/dist/vanilla-editor/ui/FilterCarousel.d.ts

@@ -0,0 +1,74 @@
+export class FilterCarousel {
+    constructor(state: any, filterManager: any);
+    state: any;
+    filterManager: any;
+    element: HTMLElement | null;
+    _filterCards: Map<any, any>;
+    _scrollIndex: number;
+    _unsubscribers: any[];
+    _onToggle: any;
+    _onSelect: any;
+    /**
+     * Create and render the filter carousel
+     * @param {Object} options - { onToggle, onSelect }
+     * @returns {HTMLElement}
+     */
+    render({ onToggle, onSelect }: Object): HTMLElement;
+    _leftBtn: HTMLElement | undefined;
+    _carousel: HTMLElement | undefined;
+    _rightBtn: HTMLElement | undefined;
+    /**
+     * Subscribe to state changes
+     */
+    _subscribeToState(): void;
+    /**
+     * Render filters for current category
+     */
+    _renderFilters(): void;
+    /**
+     * Create a filter card
+     * @param {Object} filter
+     * @param {Object} options
+     * @returns {HTMLElement}
+     */
+    _createFilterCard(filter: Object, { isActive, isSelected }: Object): HTMLElement;
+    /**
+     * Handle filter card click (select)
+     * @param {string} filterId
+     */
+    _handleCardClick(filterId: string): void;
+    /**
+     * Handle filter toggle
+     * @param {string} filterId
+     * @param {boolean} enabled
+     */
+    _handleToggle(filterId: string, enabled: boolean): void;
+    /**
+     * Update active states based on state
+     */
+    _updateActiveStates(): void;
+    /**
+     * Update selected state based on state
+     */
+    _updateSelectedState(): void;
+    /**
+     * Scroll carousel left
+     */
+    _scrollLeft(): void;
+    /**
+     * Scroll carousel right
+     */
+    _scrollRight(): void;
+    /**
+     * Animate carousel scroll
+     */
+    _scrollCarousel(): void;
+    /**
+     * Update navigation button states
+     */
+    _updateNavButtons(): void;
+    /**
+     * Clean up
+     */
+    destroy(): void;
+}

package/dist/vanilla-editor/ui/MobileActiveFilters.d.ts

@@ -0,0 +1,21 @@
+export class MobileActiveFilters {
+    constructor(state: any, filterManager: any);
+    state: any;
+    filterManager: any;
+    element: HTMLElement | null;
+    _scrollContainer: HTMLElement | null;
+    _chips: Map<any, any>;
+    _unsubscribers: any[];
+    _onToggle: any;
+    _onSelect: any;
+    /**
+     * @param {Object} callbacks - { onToggle(filterId, enabled), onSelect(filterId) }
+     * @returns {HTMLElement}
+     */
+    render({ onToggle, onSelect }: Object): HTMLElement;
+    _subscribeToState(): void;
+    _renderChips(): void;
+    _createChip(filterId: any, def: any): HTMLElement;
+    _updateSelectedState(): void;
+    destroy(): void;
+}

package/dist/vanilla-editor/ui/MobileFilterDrawer.d.ts

@@ -0,0 +1,79 @@
+export class MobileFilterDrawer {
+    constructor(state: any, filterManager: any);
+    state: any;
+    filterManager: any;
+    _drawer: HTMLElement | null;
+    _body: HTMLElement | null;
+    _titleEl: HTMLElement | null;
+    _isOpen: boolean;
+    _currentFilterId: string | null;
+    _controls: Map<any, any>;
+    _onChange: any;
+    _onReset: any;
+    _onRemove: any;
+    _onAction: any;
+    _container: HTMLElement | null;
+    /**
+     * Build the drawer DOM and append to container (should be the controls section)
+     * @param {HTMLElement} container - Parent element (controls-section)
+     * @param {Object} callbacks - { onChange, onReset, onRemove, onAction }
+     */
+    build(container: HTMLElement, { onChange, onReset, onRemove, onAction }: Object): void;
+    /**
+     * Open the drawer for a specific filter
+     * @param {string} filterId
+     */
+    open(filterId: string): void;
+    /**
+     * Close the drawer
+     */
+    close(): void;
+    /**
+     * Check if drawer is open
+     * @returns {boolean}
+     */
+    get isOpen(): boolean;
+    /**
+     * Size the drawer to match the container (controls section) height
+     */
+    _sizeToContainer(): void;
+    /**
+     * Animate drawer open (CSS transition)
+     */
+    _animateOpen(): void;
+    /**
+     * Animate drawer close (CSS transition)
+     */
+    _animateClose(): void;
+    /**
+     * Render controls for the current filter.
+     * Renders both static (def.controls) and dynamic (instance.getDynamicControls)
+     * controls so filters like Color Gradient show per-stop rows.
+     */
+    _renderControls(): void;
+    /**
+     * Create a control element based on type. See FilterAdjustments._createControl
+     * for the update-key contract (property path for dynamic controls, id for static).
+     * @param {string} filterId
+     * @param {Object} ctl
+     * @param {*} value
+     * @returns {HTMLElement|null}
+     */
+    _createControl(filterId: string, ctl: Object, value: any): HTMLElement | null;
+    /**
+     * Normalize control type
+     * @param {string} type
+     * @returns {string}
+     */
+    _normalizeControlType(type: string): string;
+    /**
+     * Normalize options array
+     * @param {Array} options
+     * @returns {Array}
+     */
+    _normalizeOptions(options: any[]): any[];
+    /**
+     * Clean up
+     */
+    destroy(): void;
+}

package/dist/vanilla-editor/ui/Toolbar.d.ts

@@ -0,0 +1,35 @@
+export class Toolbar {
+    constructor(state: any, editor: any);
+    state: any;
+    editor: any;
+    element: HTMLElement | null;
+    _removeBgBtn: HTMLElement | null;
+    _removeBgTierSelect: HTMLElement | null;
+    _removeBgStatus: HTMLElement | null;
+    _removeBgTier: string;
+    _unsubscribers: any[];
+    /**
+     * Create and render the toolbar
+     * @returns {HTMLElement}
+     */
+    render(): HTMLElement;
+    _zoomLabel: HTMLElement | undefined;
+    _themeBtn: HTMLElement | undefined;
+    _cropBtn: HTMLElement | undefined;
+    /**
+     * Subscribe to state changes
+     */
+    _subscribeToState(): void;
+    _canRemoveBackground(): any;
+    _updateRemoveBgButton(): void;
+    _setRemoveBgStatus(message: any): void;
+    /**
+     * Update zoom display
+     * @param {number} zoom
+     */
+    updateZoom(zoom: number): void;
+    /**
+     * Clean up
+     */
+    destroy(): void;
+}

package/dist/vanilla-editor/ui/UIBuilder.d.ts

@@ -0,0 +1,87 @@
+/**
+ * UI Builder - DOM helpers and component factories
+ * Creates UI elements without external dependencies
+ */
+/**
+ * Create an element with attributes and children
+ * @param {string} tag - HTML tag name
+ * @param {Object} attrs - Attributes and properties
+ * @param {...(string|HTMLElement)} children - Child elements or text
+ * @returns {HTMLElement}
+ */
+export function el(tag: string, attrs?: Object, ...children: (string | HTMLElement)[]): HTMLElement;
+/**
+ * Create a slider with label and value display
+ * @param {Object} options
+ * @returns {HTMLElement}
+ */
+export function createSlider({ id, label, min, max, step, value, onChange }: Object): HTMLElement;
+/**
+ * Create a toggle switch
+ * @param {Object} options
+ * @returns {HTMLElement}
+ */
+export function createToggle({ id, label, checked, onChange }: Object): HTMLElement;
+/**
+ * Create a color picker
+ * @param {Object} options
+ * @returns {HTMLElement}
+ */
+export function createColorPicker({ id, label, value, onChange }: Object): HTMLElement;
+/**
+ * Create a text input that commits on Enter or blur (not on every keystroke).
+ * This deferred-commit behavior is important for inputs that trigger expensive
+ * parsing on change (e.g. the CSS gradient input, which creates a full PIXI
+ * filter on each commit).
+ *
+ * @param {Object} options
+ * @param {string} options.id
+ * @param {string} options.label
+ * @param {string} [options.value]
+ * @param {string} [options.placeholder]
+ * @param {Function} [options.onCommit] - Called with trimmed value on Enter or blur when value changed
+ * @returns {HTMLElement}
+ */
+export function createTextInput({ id, label, value, placeholder, onCommit }: {
+    id: string;
+    label: string;
+    value?: string | undefined;
+    placeholder?: string | undefined;
+    onCommit?: Function | undefined;
+}): HTMLElement;
+/**
+ * Create a select dropdown
+ * @param {Object} options
+ * @returns {HTMLElement}
+ */
+export function createSelect({ id, label, options, value, onChange }: Object): HTMLElement;
+/**
+ * Create a button
+ * @param {Object} options
+ * @returns {HTMLElement}
+ */
+export function createButton({ label, className, onClick, icon, disabled }: Object): HTMLElement;
+/**
+ * Create an icon button
+ * @param {Object} options
+ * @returns {HTMLElement}
+ */
+export function createIconButton({ icon, title, className, onClick, disabled, testId, ariaLabel }: Object): HTMLElement;
+/**
+ * Create a chip/tag
+ * @param {Object} options
+ * @returns {HTMLElement}
+ */
+export function createChip({ label, icon, active, onClick }: Object): HTMLElement;
+/**
+ * Create a card component
+ * @param {Object} options
+ * @returns {HTMLElement}
+ */
+export function createCard({ className, children }: Object): HTMLElement;
+/**
+ * Create scrollable container
+ * @param {Object} options
+ * @returns {HTMLElement}
+ */
+export function createScrollContainer({ className, horizontal, children }: Object): HTMLElement;

package/dist/vanilla-editor/ui-v2/ActiveFiltersStack.d.ts

@@ -0,0 +1,16 @@
+export class ActiveFiltersStack {
+    constructor(state: any, filterManager: any);
+    state: any;
+    filterManager: any;
+    element: HTMLElement | null;
+    _unsubscribers: any[];
+    _onRemove: any;
+    _onSelect: any;
+    _onClearAll: any;
+    render({ onRemove, onSelect, onClearAll }?: {}): HTMLElement;
+    _renderContents(): void;
+    _renderChip(def: any, isSelected: any, layerId?: null): HTMLElement;
+    _activeFilterLayerId(): any;
+    _refreshSelection(): void;
+    destroy(): void;
+}

package/dist/vanilla-editor/ui-v2/BackgroundPanel.d.ts

@@ -0,0 +1,16 @@
+export class BackgroundPanel {
+    constructor(state: any, editor: any);
+    state: any;
+    editor: any;
+    element: HTMLElement | null;
+    _errorMessage: string | null;
+    _unsubscribers: any[];
+    render(): HTMLElement;
+    _render(): void;
+    _runAction(promise: any): void;
+    _field(label: any, control: any): HTMLElement;
+    _option(value: any, label: any, current: any): HTMLElement;
+    _backgroundLayer(): any;
+    _backgroundBlur(layer: any): number;
+    destroy(): void;
+}