import { type IEventEmitter } from '@breadstone/mosaik-elements';
import { CustomElement } from '../../Abstracts/CustomElement';
import { DesignerMode, type IDesignerElementProps, type IDesignerFrameSize } from './IDesignerElementProps';
declare const DesignerElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Designer - The root coordination component for the design environment.
 *
 * @description
 * The Designer component provides the top-level context for a designer
 * workspace, managing designer-wide state, layer management in controlled
 * and uncontrolled patterns, and frame sizing context consumed by descendants.
 * It establishes the structural foundation for canvas-based editing surfaces.
 *
 * @name Designer
 * @element mosaik-designer
 * @category Layouts
 *
 * @slot - Default slot for the primary workspace structure (mosaik-designer-content)
 * @slot after-content - Generic extension slot after the main content area
 * @slot before-content - Generic extension slot before the main content area
 * @slot footer - Generic extension slot for footer content such as status bars
 * @slot header - Generic extension slot for header content such as toolbars
 *
 * @cssprop {String} --designer-font-family - The font family CSS custom property.
 * @cssprop {String} --designer-font-letter-spacing - The font letter spacing CSS custom property.
 * @cssprop {String} --designer-font-line-height - The font line height CSS custom property.
 * @cssprop {String} --designer-font-size - The font size CSS custom property.
 * @cssprop {String} --designer-font-text-decoration - The font text decoration CSS custom property.
 * @cssprop {String} --designer-font-text-transform - The font text transform CSS custom property.
 * @cssprop {String} --designer-font-weight - The font weight CSS custom property.
 * @cssprop {String} --designer-gap - The gap CSS custom property.
 * @cssprop {String} --designer-padding-bottom - The padding bottom CSS custom property.
 * @cssprop {String} --designer-padding-left - The padding left CSS custom property.
 * @cssprop {String} --designer-padding-right - The padding right CSS custom property.
 * @cssprop {String} --designer-padding-top - The padding top CSS custom property.
 * @cssprop {String} --designer-shadow - The shadow CSS custom property.
 * @cssprop {String} --designer-shadow-blur - The shadow blur CSS custom property.
 * @cssprop {String} --designer-shadow-color - The shadow color CSS custom property.
 * @cssprop {String} --designer-shadow-offset-x - The shadow offset x CSS custom property.
 * @cssprop {String} --designer-shadow-offset-y - The shadow offset y CSS custom property.
 * @cssprop {String} --designer-shadow-spread - The shadow spread CSS custom property.
 * @cssprop {String} --designer-transition-duration - Transition duration for animated state changes
 * @cssprop {String} --designer-transition-mode - Transition timing function
 * @cssprop {String} --designer-transition-property - Transition properties to animate
 * @cssprop {String} --designer-translate - The translate CSS custom property.
 *
 * @fires layersChanged {DesignerLayersChangedEvent} - Fired when the layers change via user action
 *
 * @example
 * Minimal designer workspace with a canvas and frame:
 * ```html
 * <mosaik-designer>
 *   <mosaik-designer-content>
 *     <mosaik-designer-canvas>
 *       <mosaik-designer-frame></mosaik-designer-frame>
 *     </mosaik-designer-canvas>
 *   </mosaik-designer-content>
 * </mosaik-designer>
 * ```
 *
 * @example
 * Designer workspace with header toolbar and footer status bar:
 * ```html
 * <mosaik-designer>
 *   <mosaik-stack slot="header" orientation="horizontal">
 *     <mosaik-button label="Save"></mosaik-button>
 *   </mosaik-stack>
 *   <mosaik-designer-content>
 *     <mosaik-designer-canvas>
 *       <mosaik-designer-frame></mosaik-designer-frame>
 *     </mosaik-designer-canvas>
 *   </mosaik-designer-content>
 *   <mosaik-text slot="footer" text="Ready"></mosaik-text>
 * </mosaik-designer>
 * ```
 *
 * @public
 */
export declare class DesignerElement extends DesignerElement_base implements IDesignerElementProps {
    private readonly _layersChanged;
    private _defaultLayers;
    private _layers;
    private _internalLayers;
    private _frameSize;
    private _mode;
    /**
     * Constructs a new instance of the {@link DesignerElement} class.
     *
     * @public
     */
    constructor();
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
     */
    static get is(): string;
    /**
     * Gets or sets the `defaultLayers` property.
     * Used for uncontrolled mode. Sets the initial layers.
     *
     * @public
     */
    get defaultLayers(): Array<unknown> | null;
    set defaultLayers(value: Array<unknown> | null);
    /**
     * Gets or sets the `layers` property.
     * Used for controlled mode. When set, the designer uses this as the source of truth.
     *
     * @public
     */
    get layers(): Array<unknown> | null;
    set layers(value: Array<unknown> | null);
    /**
     * Gets or sets the `frameSize` property.
     * Defines the size of the inner design frame.
     *
     * @public
     */
    get frameSize(): IDesignerFrameSize;
    set frameSize(value: IDesignerFrameSize);
    /**
     * Gets or sets the `mode` property.
     * Controls the selection behavior: 'none', 'single', or 'multiple'.
     *
     * @public
     * @attr
     */
    get mode(): DesignerMode;
    set mode(value: DesignerMode);
    /**
     * Returns the resolved layers, respecting controlled vs uncontrolled mode.
     *
     * @public
     * @readonly
     */
    get resolvedLayers(): Array<unknown>;
    /**
     * Called when the layers change via user action.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get layersChanged(): IEventEmitter<Array<unknown>>;
    /**
     * Updates the layers from a user action.
     * In uncontrolled mode, updates internal state directly.
     * In controlled mode, emits the change for the parent to handle.
     *
     * @public
     */
    updateLayers(newLayers: Array<unknown>): void;
}
/**
 * @public
 */
export declare namespace DesignerElement {
    type Props = IDesignerElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-designer': DesignerElement;
    }
}
export {};
//# sourceMappingURL=DesignerElement.d.ts.map