/// <reference types="react" />

import type { Configuration } from '@cesdk/cesdk-js';
import type CreativeEditorSDK from '@cesdk/cesdk-js';
import { ForwardRefExoticComponent } from 'react';
import { RefAttributes } from 'react';

/**
 * A production-ready React wrapper for the Creative Editor SDK.
 *
 * Provides a React component with proper error handling, loading state callbacks,
 * and lifecycle management for integrating the Creative Editor SDK. The component
 * handles SDK initialization and cleanup.
 *
 * @example Basic Usage
 * ```tsx
 * import CreativeEditor from '@cesdk/cesdk-js/react';
 * import {
 *   ImageColorsAssetSource, BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource,
 *   DemoAssetSources, EffectsAssetSource, FiltersAssetSource,
 *   PagePresetsAssetSource, StickerAssetSource, TextAssetSource,
 *   TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources,
 *   VectorShapeAssetSource
 * } from '@cesdk/cesdk-js/plugins';
 *
 * function MyApp() {
 *   return (
 *     <CreativeEditor
 *       config={{
 *         licenseKey: 'your-license-key',
 *         baseURL: 'https://your-cdn-url/assets',
 *       }}
 *       init={async (cesdk) => {
 *         await cesdk.addPlugin(new ImageColorsAssetSource());
 *         await cesdk.addPlugin(new ColorPaletteAssetSource());
 *         await cesdk.addPlugin(new TypefaceAssetSource());
 *         await cesdk.addPlugin(new TextAssetSource());
 *         await cesdk.addPlugin(new TextComponentAssetSource());
 *         await cesdk.addPlugin(new VectorShapeAssetSource());
 *         await cesdk.addPlugin(new StickerAssetSource());
 *         await cesdk.addPlugin(new EffectsAssetSource());
 *         await cesdk.addPlugin(new FiltersAssetSource());
 *         await cesdk.addPlugin(new BlurAssetSource());
 *         await cesdk.addPlugin(new PagePresetsAssetSource());
 *         await cesdk.addPlugin(new CropPresetsAssetSource());
 *         await cesdk.addPlugin(new UploadAssetSources());
 *         await cesdk.addPlugin(new DemoAssetSources());
 *         await cesdk.actions.run('scene.create');
 *       }}
 *       width="100vw"
 *       height="100vh"
 *     />
 *   );
 * }
 * ```
 *
 * @example With Error Handling
 * ```tsx
 * import CreativeEditor from '@cesdk/cesdk-js/react';
 * import {
 *   ImageColorsAssetSource, BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource,
 *   DemoAssetSources, EffectsAssetSource, FiltersAssetSource,
 *   PagePresetsAssetSource, StickerAssetSource, TextAssetSource,
 *   TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources,
 *   VectorShapeAssetSource
 * } from '@cesdk/cesdk-js/plugins';
 *
 * function MyApp() {
 *   return (
 *     <CreativeEditor
 *       config={{
 *         licenseKey: 'your-license-key',
 *         baseURL: 'https://your-cdn-url/assets',
 *       }}
 *       init={async (cesdk) => {
 *         await cesdk.addPlugin(new ImageColorsAssetSource());
 *         await cesdk.addPlugin(new ColorPaletteAssetSource());
 *         await cesdk.addPlugin(new TypefaceAssetSource());
 *         await cesdk.addPlugin(new TextAssetSource());
 *         await cesdk.addPlugin(new TextComponentAssetSource());
 *         await cesdk.addPlugin(new VectorShapeAssetSource());
 *         await cesdk.addPlugin(new StickerAssetSource());
 *         await cesdk.addPlugin(new EffectsAssetSource());
 *         await cesdk.addPlugin(new FiltersAssetSource());
 *         await cesdk.addPlugin(new BlurAssetSource());
 *         await cesdk.addPlugin(new PagePresetsAssetSource());
 *         await cesdk.addPlugin(new CropPresetsAssetSource());
 *         await cesdk.addPlugin(new UploadAssetSources());
 *         await cesdk.addPlugin(new DemoAssetSources());
 *         await cesdk.actions.run('scene.create');
 *       }}
 *       onError={(error) => {
 *         console.error('SDK initialization failed:', error);
 *         // Handle error (e.g., show notification, retry logic)
 *       }}
 *       onLoadingStateChange={(state) => {
 *         console.log('Loading state changed:', state);
 *       }}
 *       width="100vw"
 *       height="100vh"
 *     />
 *   );
 * }
 * ```
 * @remarks
 * - The component automatically handles SDK cleanup on unmount
 * - For render-time errors, we recommend using a React Error Boundary
 * @category Framework Wrapper
 * @public
 */
declare const CreativeEditor: ForwardRefExoticComponent<CreativeEditorProps & RefAttributes<HTMLDivElement>>;
export { CreativeEditor }
export default CreativeEditor;

/**
 * Error that occurred during Creative Editor SDK initialization.
 * @public
 */
export declare interface CreativeEditorError {
    /** The error message */
    message: string;
    /** The original error object */
    cause?: unknown;
}

/**
 * Loading state of the Creative Editor SDK.
 * @public
 */
export declare type CreativeEditorLoadingState = 'idle' | 'loading' | 'loaded' | 'error';

/**
 * Props for the CreativeEditor React component.
 * @public
 */
export declare interface CreativeEditorProps {
    /** Configuration object for the Creative Editor SDK */
    config: Configuration;
    /** Initialization function called after SDK instance is created */
    init?: (cesdk: CreativeEditorSDK) => void | Promise<void>;
    /** Height of the editor container */
    height?: number | string;
    /** Width of the editor container */
    width?: number | string;
    /** CSS class name for the container element */
    className?: string;
    /** Callback fired when loading state changes */
    onLoadingStateChange?: (state: CreativeEditorLoadingState) => void;
    /** Callback fired when an error occurs */
    onError?: (error: CreativeEditorError) => void;
}

export { }