import { InjectionKey, Ref } from 'vue';
export interface PanelConfig {
    id: string;
    defaultSize: number;
    min: number;
    max: number;
    flex: boolean;
    collapseOnMobile: boolean;
    hideOnMobile: boolean;
}
export interface PanelState {
    id: string;
    config: PanelConfig;
    size: Ref<number>;
    collapsed: Ref<boolean>;
    /** DOM reference set by Panel.vue for direct style mutation during drag. */
    el: Ref<HTMLElement | null>;
}
export interface ResizableContext {
    direction: Ref<'horizontal' | 'vertical'>;
    isMobile: Ref<boolean>;
    panels: Ref<PanelState[]>;
    registerPanel: (config: PanelConfig) => PanelState;
    unregisterPanel: (id: string) => void;
    onHandlePointerDown: (panelId: string, event: PointerEvent) => void;
}
export declare const RESIZABLE_KEY: InjectionKey<ResizableContext>;
export declare function nextPanelId(): string;
export declare function useResizableLayoutProvider(options: {
    directionProp: Ref<'horizontal' | 'vertical'>;
    mobileDirection: 'horizontal' | 'vertical';
    breakpoint: number;
    containerEl: Ref<HTMLElement | undefined>;
}): {
    context: ResizableContext;
    observe: () => void;
    disconnect: () => void;
};
//# sourceMappingURL=useResizableLayout.d.ts.map