import { type IEventEmitter } from '@breadstone/mosaik-elements';
import { DesignerCanvasInteractionMode } from '../../../../Types/DesignerCanvasInteractionMode';
import { CustomElement } from '../../../Abstracts/CustomElement';
import type { IDesignerCanvasElementProps } from './IDesignerCanvasElementProps';
declare const DesignerCanvasElement_base: (abstract new (...args: Array<any>) => import("../../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../../Behaviors/Themeable").IThemeableCtor;
/**
 * DesignerCanvas - The navigable spatial interaction surface around the frame.
 *
 * @description
 * Owns viewport interaction such as panning and zooming. Uses PanController,
 * PinchController, and KeyboardController from the foundation for gesture
 * and keyboard handling. Supports Ctrl+scroll zoom, pinch-to-zoom,
 * drag-to-pan, and keyboard shortcuts for common zoom levels.
 *
 * @name DesignerCanvas
 * @element mosaik-designer-canvas
 * @category Layouts
 *
 * @slot - Default slot for exactly one mosaik-designer-frame
 *
 * @csspart transform - The transform layer that applies pan and zoom transformations
 * @csspart viewport - The viewport layer that clips and contains the transform surface
 *
 * @cssprop {String} --designer-canvas-background-color - Background color of the canvas surface
 * @cssprop {String} --designer-canvas-dot-color - Color of the dotted grid background pattern
 * @cssprop {String} --designer-canvas-dot-size - Size of individual grid dots
 * @cssprop {String} --designer-canvas-dot-spacing - Distance between grid dots
 * @cssprop {String} --designer-canvas-font-family - The canvas font family CSS custom property.
 * @cssprop {String} --designer-canvas-font-letter-spacing - The canvas font letter spacing CSS custom property.
 * @cssprop {String} --designer-canvas-font-line-height - The canvas font line height CSS custom property.
 * @cssprop {String} --designer-canvas-font-size - The canvas font size CSS custom property.
 * @cssprop {String} --designer-canvas-font-text-decoration - The canvas font text decoration CSS custom property.
 * @cssprop {String} --designer-canvas-font-text-transform - The canvas font text transform CSS custom property.
 * @cssprop {String} --designer-canvas-font-weight - The canvas font weight CSS custom property.
 * @cssprop {String} --designer-canvas-gap - The canvas gap CSS custom property.
 * @cssprop {String} --designer-canvas-padding-bottom - The canvas padding bottom CSS custom property.
 * @cssprop {String} --designer-canvas-padding-left - The canvas padding left CSS custom property.
 * @cssprop {String} --designer-canvas-padding-right - The canvas padding right CSS custom property.
 * @cssprop {String} --designer-canvas-padding-top - The canvas padding top CSS custom property.
 * @cssprop {String} --designer-canvas-shadow - The canvas shadow CSS custom property.
 * @cssprop {String} --designer-canvas-shadow-blur - The canvas shadow blur CSS custom property.
 * @cssprop {String} --designer-canvas-shadow-color - The canvas shadow color CSS custom property.
 * @cssprop {String} --designer-canvas-shadow-offset-x - The canvas shadow offset x CSS custom property.
 * @cssprop {String} --designer-canvas-shadow-offset-y - The canvas shadow offset y CSS custom property.
 * @cssprop {String} --designer-canvas-shadow-spread - The canvas shadow spread CSS custom property.
 * @cssprop {String} --designer-canvas-transition-duration - Transition duration for animated state changes
 * @cssprop {String} --designer-canvas-transition-mode - Transition timing function
 * @cssprop {String} --designer-canvas-transition-property - Transition properties to animate
 * @cssprop {String} --designer-canvas-translate - The canvas translate CSS custom property.
 *
 * @fires zoomChanged {DesignerZoomChangedEvent} - Fired when the zoom level changes
 *
 * @example
 * Pannable and zoomable canvas with a centered artboard:
 * ```html
 * <mosaik-designer-canvas>
 *   <mosaik-designer-frame></mosaik-designer-frame>
 * </mosaik-designer-canvas>
 * ```
 *
 * @example
 * Canvas with custom zoom bounds:
 * ```html
 * <mosaik-designer-canvas min-zoom="0.25" max-zoom="4">
 *   <mosaik-designer-frame></mosaik-designer-frame>
 * </mosaik-designer-canvas>
 * ```
 *
 * @public
 */
export declare class DesignerCanvasElement extends DesignerCanvasElement_base implements IDesignerCanvasElementProps {
    private readonly _panController;
    private readonly _pinchController;
    private readonly _keyboardController;
    private readonly _zoomChanged;
    private readonly _zoomFactor;
    private readonly _panFactor;
    private _zoom;
    private _minZoom;
    private _maxZoom;
    private _panX;
    private _panY;
    private _panStartX;
    private _panStartY;
    private _isPanning;
    private _interactionMode;
    /**
     * Constructs a new instance of the {@link DesignerCanvasElement} class.
     *
     * @public
     */
    constructor();
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
     */
    static get is(): string;
    /**
     * Gets or sets the `zoom` property.
     * The current zoom level (1 = 100%).
     *
     * @public
     * @attr
     */
    get zoom(): number;
    set zoom(value: number);
    /**
     * Gets or sets the `minZoom` property.
     *
     * @public
     * @attr
     */
    get minZoom(): number;
    set minZoom(value: number);
    /**
     * Gets or sets the `maxZoom` property.
     *
     * @public
     * @attr
     */
    get maxZoom(): number;
    set maxZoom(value: number);
    /**
     * Returns the current pan X offset.
     *
     * @public
     * @readonly
     */
    get panX(): number;
    /**
     * Returns the current pan Y offset.
     *
     * @public
     * @readonly
     */
    get panY(): number;
    /**
     * Returns the current zoom level as percentage string.
     *
     * @public
     * @readonly
     */
    get zoomLevel(): string;
    /**
     * Returns whether the canvas is currently being panned.
     *
     * @public
     * @readonly
     */
    get isPanning(): boolean;
    /**
     * Gets or sets the `interactionMode` property.
     * Controls whether drag-to-pan is enabled and which cursor is shown.
     *
     * - `pointer`: default cursor, no drag-to-pan.
     * - `pan`: grab cursor, drag-to-pan enabled.
     *
     * @public
     * @attr
     */
    get interactionMode(): DesignerCanvasInteractionMode;
    set interactionMode(value: DesignerCanvasInteractionMode);
    /**
     * Called when the zoom level changes.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get zoomChanged(): IEventEmitter<number>;
    /**
     * Zooms in by the zoom factor.
     *
     * @public
     */
    zoomIn(): void;
    /**
     * Zooms out by the zoom factor.
     *
     * @public
     */
    zoomOut(): void;
    /**
     * Sets a specific zoom level.
     *
     * @public
     */
    setZoom(level: number): void;
    /**
     * Resets zoom and pan to defaults.
     *
     * @public
     */
    resetZoom(): void;
    /**
     * Fits the frame within the visible canvas area.
     *
     * @public
     */
    fitToFrame(): void;
    /**
     * Pans the canvas by a given delta.
     *
     * @public
     */
    panBy(deltaX: number, deltaY: number): void;
    /**
     * @protected
     */
    protected onPanStart(): void;
    /**
     * @protected
     */
    protected onPanMove(event: CustomEvent<{
        clientX: number;
        clientY: number;
        deltaX: number;
        deltaY: number;
    }>): void;
    /**
     * @protected
     */
    protected onPanEnd(): void;
    /**
     * @protected
     */
    protected onPinchMove(event: CustomEvent<{
        distance: number;
        scale: number;
    }>): void;
    /**
     * Handles wheel events for Ctrl+scroll zoom.
     *
     * @protected
     */
    protected onWheel(event: WheelEvent): void;
}
/**
 * @public
 */
export declare namespace DesignerCanvasElement {
    type Props = IDesignerCanvasElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-designer-canvas': DesignerCanvasElement;
    }
}
export {};
//# sourceMappingURL=DesignerCanvasElement.d.ts.map