import { SDKPluginOptions } from '../utils';
export declare enum ErrorType {
    NoPagesFound = "noPagesFound",
    PageNotFound = "pageNotFound",
    NoFramesFound = "noFramesFound",
    MissingRootComponent = "missingRootComponent",
    ComponentNotFound = "componentNotFound"
}
export interface ComponentConfigSchema {
    /**
     * React Component
     * @examples
     * component: ({ id, className, children, title, ...rest }) => {
     *   return (
     *    <div id={id} className={className} {...rest}>
     *      <h1>{title}</h1>
     *      {children}
     *    </div>
     *   )
     * }
     */
    component: 'ReactComponent';
    /**
     * Indicate if the component can accept the `id` property.
     * The id property could be used to apply component related styles from the StyleManager.
     */
    allowPropId?: boolean;
    /**
     * Indicate if the component can accept the `className` property.
     * The className property could be used to apply class related styles from the StyleManager.
     */
    allowPropClassName?: boolean;
    /**
     * Indicate if the component can accept children.
     */
    allowChildren?: boolean;
    /**
     * Return an array of properties in a shape of GrapesJS traits.
     * @examples
     * props: () => [
     *  {
     *    type: 'text',
     *    name: 'title',
     *    label: 'Title',
     *  }
     * ]
     */
    props?: '__fn__';
    /**
     * GrapesJS component model definition.
     * @examples
     * model: {
     *  defaults: {
     *    draggable: false,
     *  }
     * }
     */
    model?: object;
    /**
     * Allows you to customize the style of the wrapper element around your React component.
     *
     * In the editor, all React components are automatically wrapped in a container element.
     * This wrapper enables editing features like drag & drop, selection, and more.
     *
     * For most cases, styling the wrapper is sufficient. If you need deeper customization
     * (e.g., changing the wrapper element type or structure), use the `editorRender` option instead.
     *
     * @examples
     * wrapperStyle: { display: 'block' }
     */
    wrapperStyle?: object;
    /**
     * Custom render function for displaying the component inside the editor canvas.
     *
     * Use this when you want full control over how the component appears in the editor,
     * including custom wrappers, helper elements, or injected behavior.
     *
     * The `connectDom` function must be passed to the element that should be treated as the
     * component root (for selection, dragging, etc.).
     *
     * @examples
     * component: MyComponent,
     * editorRender: ({ connectDom, editor, component, children, props }) => {
     *  return (
     *    <div ref={connectDom}>
     *      <div>Custom render of the component in the editor canvas</div>
     *      <MyComponent {...props}>{children}</MyComponent>
     *    </div>
     *  )
     * }
     */
    editorRender?: 'ReactComponent';
}
export interface RendererReactOptionsSchema extends SDKPluginOptions {
    /**
     * Map of custom components.
     * @examples
     * components: {
     *  MyComponent: {
     *   allowPropId: true,
     *   allowPropClassName: true,
     *   allowChildren: true,
     *   component: ({ id, className, children, title, ...rest }) => {
     *     return (
     *        <div id={id} className={className} {...rest}>
     *          <h1>{title}</h1>
     *          {children}
     *        </div>
     *      )
     *   },
     *  }
     * }
     */
    components?: Record<string, ComponentConfigSchema>;
    /**
     * Custom error component.
     * This is used when, for example, you're trying to render a page with an invalid id.
     * @examples
     * errorComponent: ({ errorType }) => <div>Error: {errorType}</div>
     */
    errorComponent?: 'ReactComponent';
    /**
     * Custom root component that wraps the entire rendered project.
     * Usually used to provide a layout or context for the entire application.
     * @examples
     * rootComponent: ({ children }) => <div>{children}</div>
     */
    rootComponent?: 'ReactComponent';
    /**
     * Custom react component to append at the end of the `<head>` element.
     * @examples
     * headAfter: () => (<>
     *  <meta/>
     *  <script src="path/to/analytics.js"></script>
     * </>)
     */
    headAfter?: 'ReactComponent';
    /**
     * Custom react component to append at the end of the `<body>` element.
     * @examples
     * bodyAfter: () => <div>Powered by MyApp</div>
     */
    bodyAfter?: 'ReactComponent';
}