import { record, xy } from '@synnaxlabs/x';
import { ConnectionLineComponent, Edge as RFEdge, EdgeProps as RFEdgeProps, FitViewOptions as RFFitViewOptions, Node as RFNode, NodeChange, ReactFlowProps } from '@xyflow/react';
import { ComponentPropsWithoutRef, ReactElement } from 'react';
import { z } from 'zod';
import { Aether } from '../../aether';
import { Button } from '../../button';
import { RenderProp } from '../../component/renderProp';
import { Flex } from '../../flex';
import { Viewport as CoreViewport } from '../../viewport';
import { diagram } from './aether';
import { Edge, Node, Viewport } from './aether/types';
export interface SymbolProps {
    symbolKey: string;
    position: xy.XY;
    selected: boolean;
    draggable: boolean;
}
export interface UseProps {
    allowEdit?: boolean;
    initialEdges: Edge[];
    initialNodes: Node[];
    initialViewport?: Viewport;
}
export declare const use: ({ initialNodes, initialEdges, allowEdit, initialViewport, }: UseProps) => UseReturn;
export interface UseReturn {
    edges: Edge[];
    nodes: Node[];
    onNodesChange: (nodes: Node[], changes: NodeChange[]) => void;
    onEdgesChange: (edges: Edge[]) => void;
    editable: boolean;
    onEditableChange: (v: boolean) => void;
    onViewportChange: (vp: Viewport) => void;
    viewport: Viewport;
    fitViewOnResize: boolean;
    setFitViewOnResize: (v: boolean) => void;
    viewportMode: CoreViewport.Mode;
    onViewportModeChange: (v: CoreViewport.Mode) => void;
}
export interface DiagramProps extends UseReturn, Omit<ComponentPropsWithoutRef<"div">, "onError">, Pick<z.infer<typeof diagram.Diagram.stateZ>, "visible" | "autoRenderInterval">, Aether.ComponentProps, Pick<ReactFlowProps, "minZoom" | "maxZoom" | "fitViewOptions" | "snapGrid" | "snapToGrid"> {
    triggers?: CoreViewport.UseTriggers;
    dragHandleSelector?: string;
}
interface ContextValue {
    editable: boolean;
    visible: boolean;
    onEditableChange: (v: boolean) => void;
    registerNodeRenderer: (renderer: RenderProp<SymbolProps>) => void;
    registerEdgeRenderer: (renderer: RenderProp<EdgeProps<record.Unknown>>) => void;
    viewportMode: CoreViewport.Mode;
    onViewportModeChange: (v: CoreViewport.Mode) => void;
    registerConnectionLineComponent: (component: ConnectionLineComponent<RFNode>) => void;
    fitViewOnResize: boolean;
    setFitViewOnResize: (v: boolean) => void;
    fitViewOptions: FitViewOptions;
}
export declare const useContext: () => ContextValue;
export interface NodeRendererProps {
    children: RenderProp<SymbolProps>;
}
export interface EdgeProps<D extends record.Unknown> extends RFEdgeProps<RFEdge<D>> {
    onDataChange: (data: D) => void;
}
export declare const NodeRenderer: import('react').MemoExoticComponent<({ children }: NodeRendererProps) => ReactElement | null>;
export interface EdgeRendererProps<D extends record.Unknown> {
    connectionLineComponent: ConnectionLineComponent<RFNode>;
    children: RenderProp<EdgeProps<D>>;
}
export declare const EdgeRenderer: <D extends record.Unknown>(props: EdgeRendererProps<D>) => ReactElement | null;
export type FitViewOptions = RFFitViewOptions;
export declare const Background: () => ReactElement | null;
export interface ControlsProps extends Flex.BoxProps {
}
export declare const Controls: (props: ControlsProps) => ReactElement;
export interface ToggleEditControlProps extends Omit<Button.ToggleProps, "value" | "onChange" | "children"> {
}
export declare const ToggleEditControl: ({ onClick, ...rest }: ToggleEditControlProps) => ReactElement;
export interface FitViewControlProps extends Omit<Button.ToggleProps, "children" | "onChange" | "value"> {
}
export declare const FitViewControl: ({ onClick, ...rest }: FitViewControlProps) => ReactElement;
export declare const VIEWPORT_MODES: readonly ["zoom", "pan", "select"];
export declare const SelectViewportModeControl: () => ReactElement;
export declare const Diagram: (props: DiagramProps) => ReactElement;
export {};
//# sourceMappingURL=Diagram.d.ts.map