import { Context } from 'react';
import { CSSProperties } from 'react';
import { DetailedHTMLProps } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { IconButtonProps } from '@chakra-ui/react';
import { InputHTMLAttributes } from 'react';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { MemoExoticComponent } from 'react';
import { MouseEventHandler } from 'react';
import { MutableRefObject } from 'react';
import { ReactNode } from 'react';
import { ReactPortal } from 'react';
import { RefAttributes } from 'react';
import { RefObject } from 'react';

/** Add a child under `parentAddress`. Returns the new node's address. */
export declare function addChild(json: SqueedJson, parentAddress: string, child: any, key?: string): {
    json: SqueedJson;
    address: string;
};

export declare function addConnection(json: SqueedJson, sourceAddress: string, connection: SqueedConnection): SqueedJson;

/** "root.a.b.#" → ["a", "b"] */
export declare function addressToPath(address: string): string[];

/** `$target` cross-link (the compiler supports one per node; an existing one is replaced) */
export declare const addTargetEdge: (json: SqueedJson, sourceAddress: string, targetAddress: string, label?: string) => SqueedJson;

/**
 * For hand-built graphs (no Squeed JSON): hide everything downstream of a node whose
 * `data.config.collapsed` is true, plus the edges touching hidden nodes.
 */
export declare function applyCollapsed(nodes: FlowDiagramNode[], edges: FlowDiagramEdge[]): {
    nodes: FlowDiagramNode[];
    edges: FlowDiagramEdge[];
};

export declare function applyFormChange(data: SqueedJson, request: Omit<FormChange, "data" | "previousValue">, handler?: (event: FormChange) => FormEdit[] | void): SqueedJson;

export declare function applyStateEdits(state: SqueedJson, edits: readonly FormEdit[]): SqueedJson;

export declare type BackgroundPattern = "dot" | "steel" | "grid" | "none";

export declare type BackgroundVariant = BackgroundPattern | "transparent";

/**
 * Wrap consumer callbacks so every toolbar/edit event is applied to `json`
 * with Squeed `$` keys and delivered via `onJsonChange`. Granular callbacks
 * still fire first (for logging/analytics) — consumers must not also mutate.
 */
export declare function bindSqueedCallbacks(json: SqueedJson, compiledEdges: FlowDiagramEdge[], callbacks: FlowDiagramCallbacks, onJsonChange?: (json: SqueedJson, change: SqueedChange) => void, formSchema?: FormSchema): FlowDiagramCallbacks;

export declare const BottomBar: MemoExoticComponent<    {
({ nodeGridControlsTarget, }?: {
nodeGridControlsTarget?: HTMLElement | null;
}): JSX_2.Element;
displayName: string;
}>;

/** Props passed to custom bottom bar renderer */
export declare interface BottomBarRenderProps {
    zoomIn: () => void;
    zoomOut: () => void;
    resetZoom: () => void;
    direction: FlowDirection;
    isZoomMode: boolean;
    setIsZoomMode: (v: boolean) => void;
    isMultiSelectMode: boolean;
    setIsMultiSelectMode: (v: boolean) => void;
    isDragMode: boolean;
    setIsDragMode: (v: boolean) => void;
    isEdgeHandlesEnabled: boolean;
    setIsEdgeHandlesEnabled: (v: boolean) => void;
    isArrayNodeMode: boolean;
    setIsArrayNodeMode: (v: boolean) => void;
    selectedNodeIds: string[];
    selectedNodeData: any[];
    selectedEdgeId: string | null;
    selectedEdgeData: any;
    onNodeDeselect: () => void;
    onEdgeDeselect: () => void;
    callbacks: FlowDiagramCallbacks;
}

/** Centre + size, model units (matches cytoscape's node position/width/height) */
declare interface Box {
    x: number;
    y: number;
    w: number;
    h: number;
    outline?: Point[];
}

export declare type BuiltInEdgeType = "straight" | "bezier" | "orthogonal" | "rounded-orthogonal";

export declare function CollapseAllToggle({ onBeforeExpand, }?: {
    onBeforeExpand?: () => void;
}): JSX_2.Element;

export declare function CompactPropertyLayoutToggle({ label, }?: {
    label?: string;
}): JSX_2.Element;

export declare interface CompileOptions {
    title?: string;
    /** Root in the middle, children fan out both ways (direction "C") */
    isCenter?: boolean;
    hideDefaultObject?: boolean;
    separateObjectKeys?: boolean;
}

/**
 * `createFlowDiagram` + post-pass:
 * - deterministic edge ids (`source->target[#n]`) so selection survives regeneration
 * - honors `$isEdgeDashed` / `$edgeColor`, which the compiler doesn't read
 * - `$label` wins over the compiler's shared-config `headerTitle` (it leaks the previous node's title)
 */
export declare function compileSqueed(json: SqueedJson, opts?: CompileOptions): {
    nodes: FlowDiagramNode[];
    edges: FlowDiagramEdge[];
};

export declare function connectionIssue(contract: WorkflowContract, edge: FlowDiagramEdge["data"]): string | undefined;

export declare function ConnectionsOnlyToggle({ checked, onChange, disabled, label, }: ConnectionsOnlyToggleProps): JSX_2.Element;

export declare interface ConnectionsOnlyToggleProps {
    checked: boolean;
    onChange: (checked: boolean) => void;
    disabled?: boolean;
    label?: string;
}

export declare type ContentFormat = "markdown" | "html" | "jsx";

export declare const ContentFullscreenButton: ForwardRefExoticComponent<    {
fullscreen: boolean;
onClick: MouseEventHandler<HTMLButtonElement>;
} & RefAttributes<HTMLButtonElement>>;

export declare const contentObjTheme: (color: any) => {
    background: any;
    highlight: string;
    border: string;
    property: string;
    boolean: string;
    string: string;
    number: string;
};

declare interface ContractPort {
    kind: "input" | "config" | "output" | "error";
    label?: string;
    resourceType?: string;
    multiple?: boolean;
}

export declare interface ContractProperty {
    type: ContractType;
    optional: boolean;
}

export declare type ContractType = {
    kind: "json";
} | {
    kind: "string" | "number" | "integer" | "boolean" | "null";
} | {
    kind: "literal";
    value: string | number | boolean | null;
} | {
    kind: "union";
    types: ContractType[];
} | {
    kind: "array";
    items: ContractType;
} | {
    kind: "object";
    properties: Record<string, ContractProperty>;
    additionalProperties?: ContractType;
    ports?: Record<string, ContractPort>;
};

export declare function copySelection(json: SqueedJson, ids: string[]): SqueedJson;

export declare function createFlowDiagram(jsnObjct: any, path?: string, nodes?: any[], edges?: any[], activeLabel?: string, flowConfig?: any, nodeConfig?: any): {
    nodes: any[];
    edges: any[];
};

export declare function createFlowDocumentActions(options: FlowDocumentActionOptions): {
    replaceJson(value: unknown): SqueedJson;
    replaceState(value: unknown): SqueedJson;
};

export declare function createFormNode(document: SqueedJson, source: string, schema?: FormSchema): {
    address: string;
    json: SqueedJson;
};

export declare function createJsonPlayback<Document>(options: JsonStreamOptions<Document> & {
    source: string;
    durationMs?: number;
    tickMs?: number;
    onChange: (state: JsonPlaybackState) => void;
    onError: (error: unknown) => void;
}): {
    play(): void;
    pause(): void;
    seek(next: number): void;
    dispose(): void;
};

export declare function createJsonStream<Document>(options: JsonStreamOptions<Document>): {
    snapshot: (text: string) => void;
    append(chunk: string): void;
    flush: () => void;
    finish(): Document;
    cancel(): void;
};

export declare function createWorkflowExecution<Input>(adapter: WorkflowExecutionAdapter<Input>, onChange: (state: WorkflowExecutionState) => void): {
    getState: () => WorkflowExecutionState;
    run(input: Input, executionId?: string): Promise<WorkflowExecutionState>;
    cancel(): Promise<void>;
    dispose(): void;
};

export declare interface CustomEdgeContext {
    edge: FlowDiagramEdge["data"];
    source: Box;
    target: Box;
    sourcePoint: Point;
    targetPoint: Point;
    direction: FlowDirection;
    sourceY?: number;
    targetY?: number;
    inverted: boolean;
    defaultGeometry: CustomEdgeGeometry;
}

export declare type CustomEdgeFactory = (context: CustomEdgeContext) => CustomEdgeGeometry | null;

export declare interface CustomEdgeGeometry {
    d: string;
    arrow?: string;
    label: {
        x: number;
        y: number;
        angle: number;
    };
}

export declare const DEFAULT_PALETTE: string[];

export declare function DiagramAppearanceControls(): JSX_2.Element;

export declare function downloadSvg(canvas: HTMLElement, filename?: string): Promise<void>;

export declare function duplicateSelection(json: SqueedJson, ids: string[]): {
    json: SqueedJson;
    ids: string[];
};

export declare const DynamicIcon: ({ name, svg, ...props }: {
    [x: string]: any;
    name: any;
    svg?: boolean;
}) => JSX_2.Element;

export declare type EdgeAnimationVariant = "dashed" | "traveling";

export declare type EdgeMode = "auto" | "nodes" | "properties" | "workflow";

/** Bottom-bar contents while an edge is selected */
export declare function EdgeTools({ edgeId, onClose, }: {
    edgeId: string;
    onClose: () => void;
}): JSX_2.Element;

export declare const EditableLabel: ({ nodeId, label, color, fontWeight, fontSize, wrap, isEditing, onEditStart, onEditEnd, }: EditableLabelProps) => JSX_2.Element;

declare interface EditableLabelProps {
    nodeId: string;
    label: string;
    color: string;
    fontWeight?: string;
    fontSize?: string;
    wrap?: boolean;
    isEditing: boolean;
    onEditStart: () => void;
    onEditEnd: () => void;
}

export declare function ErrorToast({ message, onDismiss, }: {
    message: string;
    onDismiss: () => void;
}): ReactPortal;

export declare function exportSvg(canvas: HTMLElement): Promise<string>;

export declare function FlowDiagram({ loading, loader, ...props }: FlowDiagramProps): JSX_2.Element;

/** Event callbacks for the flow diagram */
export declare interface FlowDiagramCallbacks {
    onNodesCopy?: (ids: string[]) => boolean | void | Promise<boolean | void>;
    onNodesDuplicate?: (ids: string[]) => boolean | void;
    onGraphEdgeColorChange?: (color: string) => void;
    onAllNodesIconLabelChange?: (enabled: boolean) => void;
    onNodeCreateRequest?: (request: FlowNodeCreationRequest) => boolean;
    onFormSchemaChange?: (schema: FormSchema | undefined) => void;
    onFormChange?: (event: FormChange) => FormEdit[] | void;
    uploadFormFile?: (request: FormUploadRequest) => Promise<string> | string;
    resolveFormOptions?: (request: FormOptionsRequest) => Promise<FormOption[]> | FormOption[];
    onSpacingChange?: (spacing: NodeSpacing) => void;
    onEdgeRadiusChange?: (radius: number) => void;
    onCompactPropertyLayoutChange?: (enabled: boolean) => void;
    onBackgroundVariantChange?: (variant: BackgroundVariant) => void;
    onNodeGridZoomOut?: (options: NodeGridOptions) => boolean;
    onNodeGridFillRequest?: (options: NodeGridOptions) => boolean;
    onNodeGridModeRequest?: (enabled: boolean, options: NodeGridOptions) => boolean;
    onNodeGridDrop?: (nodeId: string, point: {
        x: number;
        y: number;
    }, modifiers?: NodeSelectionModifiers) => boolean;
    getNodeEditMetadata?: () => NodeEditMetadata | undefined;
    /** Fires when a node is clicked/selected */
    onNodeSelect?: (nodeId: string, nodeData: any, modifiers?: NodeSelectionModifiers) => void;
    onBackgroundClick?: () => void;
    onBottomBarCollapsedChange?: (collapsed: boolean) => void;
    /** Fires when selection is cleared */
    onNodeDeselect?: () => void;
    /** Fires on double-click of a node */
    onNodeDoubleClick?: (nodeId: string, nodeData: any) => void;
    onNodeViewModeChange?: (nodeId: string, mode: NodeViewMode) => void;
    onNodeViewToggle?: (nodeId: string) => void;
    onNodeTypeViewChange?: (nodeId: string, view: NodeTypeView | undefined) => void;
    /** Fires when a node is created via edge drawing into empty space */
    onNodeCreate?: (params: {
        type: string;
        position: any;
        sourceNodeId?: string;
        isArrayMode?: boolean;
    }) => boolean | void;
    /** Fires when a node is deleted */
    onNodeDelete?: (nodeId: string, nodeData: any) => void;
    /** Fires when a node label is edited inline */
    onNodeLabelChange?: (nodeId: string, newLabel: string) => void;
    onNodeSubtitleChange?: (nodeId: string, subtitle: string) => void;
    onNodeContentChange?: (nodeId: string, content: NodeContent) => void;
    /** Fires when a node's content format changes (markdown | html | jsx) */
    onNodeContentFormatChange?: (nodeId: string, format: ContentFormat) => void;
    onNodeDimensionChange?: (nodeId: string, dimension: "width" | "height", value: number | undefined) => void;
    onFixedNodePositionsChange?: (positions: Record<string, {
        x: number;
        y: number;
    }>) => void;
    onPromptSubmit?: (request: {
        nodeId: string;
        prompt: string;
        temperature?: number;
    }, signal: AbortSignal) => Promise<void>;
    /** Fires when a node's collapse toggle is clicked */
    onNodeCollapse?: (nodeId: string, collapsed: boolean) => void;
    onNodeParentChange?: (nodeId: string, parentId: string) => void;
    /** Fires when a node's color is changed via the toolbar */
    onNodeColorChange?: (nodeId: string, colorType: "text" | "bg", color: string) => void;
    /** Fires when a node's icon is changed via the toolbar */
    onNodeIconChange?: (nodeId: string, iconName: string) => void;
    onNodeOutlineChange?: (nodeId: string, outline: boolean) => void;
    onNodeBorderColorChange?: (nodeId: string, color: string) => void;
    onNodeBorderStyleChange?: (nodeId: string, style: "solid" | "dashed") => void;
    onNodeBorderWidthChange?: (nodeId: string, width: number | undefined) => void;
    onNodeBorderRadiusChange?: (nodeId: string, radius: number | undefined) => void;
    onNodeAnimationChange?: (nodeId: string, animated: boolean) => void;
    onNodeAnimationVariantChange?: (nodeId: string, variant: NodeAnimationVariant) => void;
    onEdgeAnimationVariantChange?: (edgeId: string, variant: EdgeAnimationVariant) => void;
    /** Fires when a hover overlay action is clicked */
    onNodeHoverAction?: (actionId: string, nodeId: string, nodeData: any) => void;
    /** Fires when a new edge is drawn between two nodes */
    onEdgeCreate?: (sourceId: string, targetId: string, properties?: FlowEdgeProperties) => void;
    /** Fires when an edge is clicked/selected */
    onEdgeSelect?: (edgeId: string, edgeData: any) => void;
    /** Fires when edge selection is cleared */
    onEdgeDeselect?: () => void;
    /** Fires when an edge is removed */
    onEdgeRemove?: (edgeId: string, edgeData: any) => void;
    /** Fires when the user deletes an edge from the selection toolbar */
    onEdgeDelete?: (edgeId: string, edgeData: any) => void;
    /** Fires when an edge's color is changed */
    onEdgeColorChange?: (edgeId: string, color: string) => void;
    onEdgeTypeChange?: (edgeId: string, type: string | undefined) => void;
    onEdgeIconChange?: (edgeId: string, icon: string) => void;
    /** Fires when an edge's label is changed */
    onEdgeLabelChange?: (edgeId: string, newLabel: string) => void;
    /** Fires when an edge's style is changed (solid, dashed, animated) */
    onEdgeStyleChange?: (edgeId: string, style: "solid" | "dashed" | "animated") => void;
    /** Fires when the viewport (pan/zoom) changes */
    onViewportChange?: (viewport: {
        pan: {
            x: number;
            y: number;
        };
        zoom: number;
    }) => void;
    /** Fires when the flow direction changes via bottom bar */
    onDirectionChange?: (direction: FlowDirection) => void;
    onThemeColorChange?: (color: string) => void;
    onEdgeModeChange?: (mode: EdgeMode) => void;
    onWorkflowConfigurationOpen?: () => void;
    onWorkflowContractChange?: (contract: WorkflowContract | undefined) => void;
    /** Fires when array/set mode toggles in bottom bar */
    onArrayModeChange?: (isArrayMode: boolean) => void;
    /** Fires once the renderer is ready with the engine handle (zoom/pan/fit/coordinate helpers) */
    onInit?: (engine: FlowEngine) => void;
    /** Fires after layout and measurement settle; viewport-only changes do not trigger it. */
    onLayoutComplete?: (engine: FlowEngine) => void;
    /**
     * Fires with the updated Squeed JSON after any toolbar/inline edit. The SDK applies the
     * edit with `$` schema keys; store the result and pass it back as `json`.
     */
    onJsonChange?: (json: Record<string, any> | any[], change: SqueedChangeInfo) => void;
}

/** Configuration for the flow diagram appearance and behavior */
export declare interface FlowDiagramConfig {
    bottomBarExtra?: React.ReactNode;
    bottomBarCollapsed?: boolean;
    bottomBarNavigation?: boolean;
    bottomBarCollision?: boolean;
    bottomBarFill?: boolean;
    /** Live placeholder for an empty node's content, e.g. workflow step status during a run. */
    nodePlaceholder?: (nodeId: string, data: FlowDiagramNode["data"]) => string | undefined;
    /** Prompt token allowance for the header-divider budget overlay. */
    promptBudget?: (nodeId: string) => {
        used: number;
        limit: number;
    } | undefined;
    /** Animate fit/center/focus actions for 300ms by default. Per-action flags override this; reduced motion stays instant. */
    animateViewport?: boolean;
    disableAnimations?: boolean;
    edgeReveal?: {
        durationMs?: number;
        paused?: boolean;
        revealNodes?: boolean;
    };
    formSchema?: FormSchema;
    spacing?: NodeSpacing;
    edgeRadius?: number;
    backgroundVariant?: BackgroundVariant;
    edgeType?: BuiltInEdgeType | (string & {});
    customEdgeTypes?: Record<string, CustomEdgeFactory>;
    /** Layout direction: "LR", "RL", "TB", "BT" */
    direction?: FlowDirection;
    nodeAlignment?: NodeAlignment;
    edgeMode?: EdgeMode;
    compactPropertyLayout?: boolean;
    nodeViewModes?: Record<string, NodeViewMode>;
    allNodesIconLabel?: boolean;
    nodeGridSpacing?: "collision" | "layout";
    nodeGridConnections?: boolean;
    nodeGrid?: {
        enabled: boolean;
        options: NodeGridOptions;
        order?: string[];
    };
    workflowContract?: WorkflowContract;
    /** Layout algorithm */
    layout?: LayoutAlgorithm;
    /** Theme accent color (Chakra token e.g. "blue.500") */
    themeColor?: string;
    /** Light or dark mode */
    colorMode?: "light" | "dark";
    /** Background pattern style */
    backgroundPattern?: BackgroundPattern;
    /** Background color override */
    backgroundColor?: string;
    /** Edge/line color override */
    edgeColor?: string;
    /** Default style for all compound/container nodes (per-node `viewProps` override it) */
    parentNodeStyle?: ParentNodeStyle;
    /** Min zoom level (default: 0.01) */
    minZoom?: number;
    /** Max zoom level (default: 1.5) */
    maxZoom?: number;
    /** Initial viewport position and zoom */
    initialViewport?: {
        pan: {
            x: number;
            y: number;
        };
        zoom: number;
    };
    fixedNodePositions?: Record<string, {
        x: number;
        y: number;
    }>;
    /** Enable edge drawing handles (default: true) */
    edgeHandles?: boolean;
    /** Disable all interactions */
    readOnly?: boolean;
    /** Enable inline node label editing */
    editable?: boolean;
    /** Actions rendered in the node hover overlay */
    nodeOverlayActions?: NodeOverlayAction[];
    /** Custom render function for node hover overlay */
    renderNodeOverlay?: (props: NodeOverlayProps) => React.ReactNode;
    /** Custom render function for multi-select toolbar */
    renderSelectedNodeToolbar?: (props: SelectedNodeToolbarProps) => React.ReactNode;
    /** Custom render function for edge selection toolbar */
    renderSelectedEdgeToolbar?: (props: SelectedEdgeToolbarProps) => React.ReactNode;
    /** Custom render function to replace the entire built-in bottom bar */
    renderBottomBar?: (props: BottomBarRenderProps) => React.ReactNode;
    /** Built-in node/edge selection toolbars (bottom bar swaps to them on select). `false` disables. */
    selectionToolbar?: SelectionToolbarConfig | false;
    /** Custom views: objectView, arrayView, text, parentContainer; jsxContent receives JsxContentRendererProps. */
    customViews?: Record<string, React.ComponentType<any>>;
    /** Disable built-in keyboard shortcuts (Z/M/D) when the consumer handles its own */
    disableKeyboardShortcuts?: boolean;
    /** Externally controlled zoom mode (overrides internal state when provided) */
    isZoomMode?: boolean;
    /** Externally controlled multi-select mode (overrides internal state when provided) */
    isMultiSelectMode?: boolean;
    /** Externally controlled edge draw mode (overrides internal state when provided) */
    isEdgeHandlesEnabled?: boolean;
    /** Externally controlled drag/pan mode (overrides internal state when provided) */
    isDragMode?: boolean;
}

export declare interface FlowDiagramContextValue {
    allNodesIconLabel: boolean;
    setAllNodesIconLabel: (enabled: boolean) => void;
    nodeViewModes: Record<string, NodeViewMode>;
    setNodeViewMode: (nodeId: string, mode: NodeViewMode) => void;
    nodeRadiusPreviews: Record<string, number>;
    setNodeRadiusPreview: (ids: string[], radius: number | undefined) => void;
    spacing: number;
    edgeRadius: number | undefined;
    setEdgeRadius: (radius: number) => void;
    setSpacing: (spacing: NodeSpacing) => void;
    backgroundVariant: BackgroundVariant;
    setBackgroundVariant: (variant: BackgroundVariant) => void;
    setEdgeMode: (mode: EdgeMode) => void;
    compactPropertyLayout: boolean;
    setCompactPropertyLayout: (enabled: boolean) => void;
    workflowContract?: WorkflowContract;
    setWorkflowContract: (contract: WorkflowContract | undefined) => void;
    themeColor: string;
    setThemeColor: (color: string) => void;
    backgroundSelected: boolean;
    setBackgroundSelected: (selected: boolean) => void;
    edgeColor: string;
    setEdgeColor: (color: string) => void;
    colorMode: "light" | "dark";
    direction: string;
    nodeAlignment: NodeAlignment;
    edgeMode: EdgeMode;
    parentNodeStyle?: ParentNodeStyle;
    selectedNodeIds: string[];
    setSelectedNodeIds: (ids: string[]) => void;
    selectedEdgeId: string | null;
    setSelectedEdgeId: (id: string | null) => void;
    isZoomMode: boolean;
    setIsZoomMode: (v: boolean) => void;
    isMultiSelectMode: boolean;
    setIsMultiSelectMode: (v: boolean) => void;
    isDragMode: boolean;
    setIsDragMode: (v: boolean) => void;
    isEdgeHandlesEnabled: boolean;
    setIsEdgeHandlesEnabled: (v: boolean) => void;
    isArrayNodeMode: boolean;
    setIsArrayNodeMode: (v: boolean) => void;
    isPinned: boolean;
    setIsPinned: (v: boolean) => void;
    isPerformanceMode: boolean;
    setIsPerformanceMode: (v: boolean) => void;
    nodeGridOptions: NodeGridOptions | null;
    setNodeGridOptions: (options: NodeGridOptions | null) => void;
    lastNodeGridOptions: NodeGridOptions;
    fillRadiusEditedIds: ReadonlySet<string>;
    setFillRadiusEditedIds: (ids: Set<string>) => void;
    engineRef: React.MutableRefObject<FlowEngine | null>;
    callbacks: FlowDiagramCallbacks;
    config: FlowDiagramConfig;
    readOnly: boolean;
}

export declare interface FlowDiagramEdge {
    data: {
        id: string;
        type?: BuiltInEdgeType | (string & {});
        source: string;
        target: string;
        sourceProperty?: string;
        targetProperty?: string;
        connection?: SqueedConnectionRef;
        collapsedEndpoints?: {
            source: string;
            target: string;
        };
        label?: string;
        icon?: string;
        /** Chakra token or hex; overrides the default unless a graph-wide edgeColor is selected. */
        color?: string;
        isInverted?: boolean;
        isEdgeAnimated?: boolean;
        edgeAnimationVariant?: EdgeAnimationVariant;
        isEdgeDashed?: boolean;
    };
}

export declare interface FlowDiagramNode {
    data: {
        id: string;
        label?: string;
        text?: string;
        code?: string;
        type: string;
        parent?: string;
        headerTitle?: string;
        description?: Record<string, any>;
        viewProps?: any;
        config?: Record<string, any>;
        isNodeAnimated?: boolean;
        nodeAnimationVariant?: NodeAnimationVariant;
    };
}

/** Top-level props for the FlowDiagram component */
export declare interface FlowDiagramProps {
    /** Show the loader while the host fetches data; initial compilation waits until false. */
    loading?: boolean;
    /** Custom loading content while fetching or preparing JSON. Set null to hide the overlay; aria-busy and the interaction lock remain active. */
    loader?: React.ReactNode;
    /** Title shown on the root node */
    title?: string;
    /**
     * Squeed JSON document. When provided, nodes/edges are compiled from it and every
     * edit is reported through `callbacks.onJsonChange`. Takes precedence over nodes/edges.
     */
    json?: Record<string, any> | any[];
    forms?: StateForms;
    /** Pre-computed nodes */
    nodes?: FlowDiagramNode[];
    /** Pre-computed edges */
    edges?: FlowDiagramEdge[];
    /** Diagram configuration */
    config?: FlowDiagramConfig;
    /** Event callbacks */
    callbacks?: FlowDiagramCallbacks;
    showBottomBar?: boolean;
    /** Custom controls rendered inside the diagram and form providers, even when showBottomBar is false. */
    children?: React.ReactNode;
    /** CSS class name */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
}

export declare function FlowDiagramProvider({ config, callbacks, nodes, edges, children, }: {
    config: FlowDiagramConfig;
    callbacks: FlowDiagramCallbacks;
    nodes?: FlowDiagramNode[];
    edges?: FlowDiagramEdge[];
    children: React.ReactNode;
}): JSX_2.Element;

/** "C" = center: root in the middle, children fan out both ways (generate with `isCntr: true`); laid out as LR */
export declare type FlowDirection = "LR" | "RL" | "TB" | "BT" | "C";

export declare interface FlowDocumentActionOptions {
    json?: SqueedJson;
    state?: SqueedJson;
    readOnly?: boolean;
    onJsonChange?: (json: SqueedJson, change: SqueedChange) => void;
    onStateChange?: StateForms["onChange"];
}

export declare interface FlowEdgeProperties {
    sourceProperty?: string;
    targetProperty?: string;
}

/** Handle passed to `callbacks.onInit`. */
export declare interface FlowEngine {
    zoom(): number;
    /** Set zoom keeping the current pan (like cytoscape `cy.zoom(level)`) */
    zoom(level: number): void;
    pan(): Point;
    pan(p: Point, animate?: boolean): void;
    /** Zoom keeping the model point under `renderedPoint` (container px) fixed */
    zoomAt(level: number, renderedPoint: Point): void;
    /** Fit all elements into the container with `padding` rendered px */
    fit(padding?: number, animate?: boolean, afterViewChange?: boolean): void;
    /** Explicit alias for fit: fit and centre all elements with screen-pixel padding. */
    centerAndFit(padding?: number, animate?: boolean, afterViewChange?: boolean): void;
    /** Centre all elements at the current zoom */
    center(animate?: boolean): void;
    /** Fit one node; afterViewChange waits for opening geometry. Padding is in screen pixels (default 50). */
    focusNode(id: string, padding?: number, animate?: boolean, afterViewChange?: boolean): void;
    /** Fit hierarchy descendants and outgoing nodes; centerOnNode keeps the selected node at the viewport center. Does not expand collapsed nodes. */
    focusBranch(id: string, padding?: number, animate?: boolean, afterViewChange?: boolean, centerOnNode?: boolean, zoomScale?: number): void;
    focusConnections(id: string, padding?: number, animate?: boolean, afterViewChange?: boolean): void;
    isolateConnections(id: string, padding?: number, animate?: boolean): void;
    /** Temporarily show only this branch and fit it, preserving graph data. */
    isolateBranch(id: string, padding?: number, animate?: boolean): void;
    /** End isolation and restore the saved viewport; afterViewChange coordinates a non-Grid preview close with layout. */
    restoreView(animate?: boolean, state?: ViewportState, afterViewChange?: boolean): void;
    /** Hide/show edge paths, labels and hit targets without changing graph data. */
    setEdgesVisible(visible: boolean): void;
    clientToModel(clientX: number, clientY: number): Point;
    modelToClient(p: Point): Point;
    getNodeBox(id: string): Box | undefined;
    detectNodeCollisions(options?: NodeCollisionOptions): NodeCollision[];
    resolveNodeCollisions(options?: ResolveNodeCollisionsOptions): NodeCollisionResolution;
    arrangeNodesInGrid(options?: NodeGridOptions): NodeGridArrangement;
    setNodeGridMode(enabled: boolean, options?: NodeGridOptions): void;
    swapGridNodes(source: string, target: string, animate?: boolean): boolean;
    setNodePosition(id: string, position: Point | undefined, options?: {
        persist?: boolean;
    }): boolean;
    getFixedNodePositions(): Record<string, Point>;
    onViewportChange(fn: (vp: ViewportState) => void): () => void;
}

export declare interface FlowNodeCreationRequest {
    sourceNodeId: string;
    sourceProperty?: string;
    reverse: boolean;
    position: {
        x: number;
        y: number;
    };
}

export declare function FlowPort({ id, label, role, side, position, placement, children, style, }: FlowPortProps): JSX_2.Element;

export declare interface FlowPortProps {
    id: string;
    label?: string;
    role: "source" | "target";
    side?: PortSide;
    position?: number;
    placement?: "config";
    children?: ReactNode;
    style?: CSSProperties;
}

export declare const FlowView: MemoExoticComponent<({ nodes, edges }: FlowViewProps) => JSX_2.Element>;

declare interface FlowViewProps {
    nodes: FlowDiagramNode[];
    edges: FlowDiagramEdge[];
}

export declare function formatTimeAgo(value: string | undefined, now?: number): string;

export declare interface FormBinding {
    $type: string;
    $fields?: Record<string, FormFieldConfig>;
    $create?: FormCreation;
}

export declare interface FormChange extends FormRequest {
    previousValue: unknown;
    value: unknown;
}

export declare type FormCondition = {
    $address: string;
} & ({
    $equals: FormValue;
} | {
    $in: FormValue[];
});

export declare interface FormCreation {
    $address: string;
    $type: string;
    $label?: string;
    $icon?: string;
    $edgeLabel?: string;
    $defaults?: Record<string, unknown>;
}

export declare const FormDocumentContext: Context<    {
setSchema?: (schema: FormSchema | undefined) => void;
data?: SqueedJson;
viewData?: SqueedJson;
bindings?: StateForms["bindings"];
editable?: boolean;
schema?: FormSchema;
renderForm?: StateForms["renderForm"];
onFieldCreate?: (change: FormChange, config: FormFieldConfig) => void;
structured?: StructuredForms;
references?: StateForms["references"];
callbacks: FlowDiagramCallbacks;
}>;

export declare type FormEdit = {
    op: "set";
    address: string;
    value: unknown;
} | {
    op: "remove";
    address: string;
};

export declare interface FormFieldConfig {
    $label?: string;
    $section?: string;
    $control?: "input" | "textarea" | "select" | "pills" | "checkbox" | "upload";
    $upload?: {
        accept?: string;
        maxSizeBytes?: number;
    };
    $visibleWhen?: FormCondition;
    $requiredWhen?: FormCondition;
    $options?: {
        $source: "callback";
        $dependsOn?: string[];
    };
}

export declare interface FormOption {
    label: string;
    value: FormValue;
    /** Optional secondary line shown beside the label (e.g. method + path). */
    description?: string;
}

export declare interface FormOptionsRequest extends FormRequest {
    signal: AbortSignal;
}

export declare interface FormRequest {
    address: string;
    nodeAddress: string;
    nodeId?: string;
    data: SqueedJson;
}

export declare type FormSchema = Record<string, Extract<ContractType, {
    kind: "object";
}>>;

export declare interface FormUploadRequest extends FormRequest {
    file: File;
    signal: AbortSignal;
}

export declare type FormValue = string | number | boolean | null;

export declare function formValueError(type: ContractType, value: unknown, required: boolean): string | undefined;

export declare const getChakraColorHex: (color?: any, opacity?: any) => any;

export declare const getColorVariant: (color: string) => {
    primary: string;
    secondary: string;
    light: string;
} | {
    secondary: string;
    primary?: undefined;
    light?: undefined;
};

export declare function getDarkerHexColor(hex: string, factor?: number): string;

/** Flat chrome surface: the border and halo only appear while hovered. Colors are CSS values. */
export declare function getInteractionSurface(surface: string, border: string): {
    "--flow-start-shadow": string;
    "@media (hover: hover)": {
        "&:hover": {
            borderColor: string;
            "@media (prefers-reduced-motion: no-preference)": {
                animation: string;
            };
            boxShadow: string;
        };
    };
    "--flow-rest-shadow": string;
    "--flow-hover-shadow": string;
    borderWidth: string;
    borderStyle: string;
    borderColor: string;
    boxShadow: string;
};

export declare function getNode(json: SqueedJson, address: string): any;

export declare function getSelectionRoots(json: SqueedJson, ids: string[]): string[];

export declare function GridAdjustmentToggle(): JSX_2.Element;

declare interface GridDivider {
    section: string;
    axis: "x" | "y";
    row: number;
    index: number;
    weights: number[];
    length: number;
    position: Point;
}

export declare function isNodeVisible(id: string, edges: readonly (FlowEdgeProperties & {
    source: string;
    target: string;
})[], mode: EdgeMode): boolean;

export declare interface JsonPlaybackState {
    position: number;
    total: number;
    playing: boolean;
}

export declare interface JsonStreamOptions<Document> {
    parse: (source: string) => Document;
    repair: (source: string) => string;
    preview: (document: Document) => void;
    commit: (document: Document) => void;
    intervalMs?: number;
    maxBytes?: number;
}

export declare interface JsxContentRendererProps {
    components: {
        type: string;
        [key: string]: unknown;
    }[];
    colorMode?: "light" | "dark";
    fillHeight?: boolean;
}

export declare type LayoutAlgorithm = "dagre" | "elk" | "tidytree" | "concentric" | "cose";

export declare const LIGHT_BLACK = "#c6c6c6";

export declare function LoadingBorder({ active, label, radius, }: {
    active?: boolean;
    label?: string;
    radius?: number;
}): JSX_2.Element;

export declare const NODE_TYPE_VIEWS: readonly ["", "icon-label", "object", "text", "grid", "parent", "prompt"];

export declare type NodeAlignment = "leading" | "center" | "trailing";

export declare type NodeAnimationVariant = "traveling" | "pulse";

export declare function NodeBorderRadiusControl({ ids, showDivider, }: {
    ids: string[];
    showDivider?: boolean;
}): JSX_2.Element;

export declare interface NodeCollision {
    source: string;
    target: string;
    overlap: Point;
}

export declare interface NodeCollisionOptions {
    margin?: number;
}

export declare interface NodeCollisionResolution {
    positions: Map<string, Point>;
    movedNodeIds: string[];
    collisions: NodeCollision[];
    iterations: number;
    resolved: boolean;
}

export declare function NodeConfigSummary({ nodeAddress, expanded, }: {
    nodeAddress: string;
    expanded?: boolean;
}): JSX_2.Element;

export declare type NodeContent = string | Record<string, unknown>[];

export declare interface NodeEditMetadata {
    userId: string;
    name: string;
    at: string;
}

export declare function NodeForm({ nodeAddress, structured, }: {
    nodeAddress: string;
    structured?: boolean;
}): JSX_2.Element;

export declare function NodeFormPopover({ nodeAddress, active, label, open, onClose, onBack, children, filter, height, width, }: {
    nodeAddress: string;
    active: boolean;
    label: string;
    open?: boolean;
    onClose?: () => void;
    onBack?: () => void;
    children?: ReactNode;
    filter?: ReactNode;
    height?: number;
    width?: number;
}): JSX_2.Element;

export declare interface NodeGridArrangement {
    dividers?: GridDivider[];
    positions: Map<string, Point>;
    movedNodeIds: string[];
    skippedNodeIds: string[];
    collisions: NodeCollision[];
    bounds?: Rect;
    sizes?: Map<string, {
        w: number;
        h: number;
    }>;
}

export declare function NodeGridControls({ fillOnly, }?: {
    fillOnly?: boolean;
}): JSX_2.Element;

export declare interface NodeGridOptions extends NodeCollisionOptions {
    adjustment?: {
        enabled?: boolean;
        sections?: Record<string, {
            rows?: number[];
            columns?: number[][];
            members?: string[][];
        }>;
    };
    order?: string[];
    columns?: number;
    animate?: boolean;
    gaps?: number | {
        x: number;
        y: number;
    };
    fill?: boolean;
    padding?: number;
}

export declare function NodeIconPicker({ nodeId, edgeId, value, open: requestedOpen, onOpenChange, }: {
    nodeId?: string;
    edgeId?: string;
    value?: string;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
}): JSX_2.Element;

/** Actions shown in the hover overlay above nodes */
export declare interface NodeOverlayAction {
    id: string;
    icon: any;
    label: string;
    nodeTypes?: string[];
}

/** Props passed to custom node overlay renderer */
export declare interface NodeOverlayProps {
    nodeId: string;
    nodeData: any;
    isRoot: boolean;
    isParent: boolean;
    isHovered: boolean;
    setIsHovered: (v: boolean) => void;
}

export declare interface NodeSelectionModifiers {
    shiftKey: boolean;
    ctrlKey: boolean;
    metaKey: boolean;
    altKey: boolean;
    keyboardNavigation?: boolean;
    viewToggle?: boolean;
}

export declare type NodeSpacing = number | "compact" | "normal" | "spacious";

/** Bottom-bar contents while one or more nodes are selected */
export declare function NodeTools({ ids, onClose, afterLabel, }: {
    ids: string[];
    onClose: () => void;
    afterLabel?: React.ReactNode;
}): JSX_2.Element;

export declare type NodeTypeView = Exclude<(typeof NODE_TYPE_VIEWS)[number], "">;

export declare const NodeView: MemoExoticComponent<({ data: nodeData, children, isInverted, isParent, onOpenView, editOnMount, hoverLeaveDelay, }: NodeViewProps) => JSX_2.Element>;

declare interface NodeViewChildArgs {
    id: string;
    data: any;
    isActive: boolean;
    isHovered: boolean;
    isLowZoom: boolean;
    isEditing: boolean;
    onSelect: (event: React.MouseEvent, viewToggle?: boolean) => void;
    onEditStart: () => void;
    onEditEnd: () => void;
}

declare type NodeViewMode = "default" | "properties" | "icon-label";

declare interface NodeViewProps {
    data: any;
    isInverted?: boolean;
    isParent?: boolean;
    onOpenView?: () => void;
    editOnMount?: boolean;
    hoverLeaveDelay?: number;
    children: (args: NodeViewChildArgs) => React.ReactNode;
}

export declare function PanelDragHandle({ label, disabled, }: {
    label: string;
    disabled?: boolean;
}): JSX_2.Element;

/**
 * Style for compound (container) nodes. Set per node via `data.viewProps`,
 * or for all containers via `config.parentNodeStyle` (per-node wins).
 * Colors accept Chakra tokens ("purple.500") or hex.
 */
export declare interface ParentNodeStyle {
    outline?: boolean;
    /** Fill color; also the default border/label color (default: themeColor) */
    bgColor?: string;
    /** Fill opacity 0–1 (default 0.4) */
    bgOpacity?: number;
    borderColor?: string;
    /** px (default 6) */
    borderWidth?: number;
    borderStyle?: "solid" | "dashed" | "dotted" | "double";
    /** Corner radius px (default 50) */
    borderRadius?: number;
    /** Label color (default: bgColor) */
    textColor?: string;
    /** Label size px (default 70) */
    fontSize?: number;
    /** Inner padding px (default 120) */
    padding?: number;
    /** Label placement (default "top") */
    labelPosition?: "top" | "center" | "bottom";
}

export declare function parseFlowDocument(source: string): SqueedJson;

export declare function parseJsonContract(source: string, name: string): WorkflowContract;

export declare function parseTypeScriptContract(source: string, name: string): Promise<WorkflowContract>;

export declare function parseTypeScriptForm(source: string, name: string, typeName?: string, options?: {
    allowJson?: boolean;
}): Promise<Extract<ContractType, {
    kind: "object";
}>>;

declare interface Point {
    x: number;
    y: number;
}

declare type PortSide = "top" | "right" | "bottom" | "left";

export declare function projectJsonPlaybackPreview(partial: SqueedJson, document: SqueedJson): SqueedJson;

export declare function readFormSchema(file: Pick<File, "name" | "size" | "text">, typeNames: string[]): Promise<FormSchema>;

export declare function readWorkflowContract(file: File): Promise<WorkflowContract>;

declare interface Rect {
    x1: number;
    y1: number;
    x2: number;
    y2: number;
}

/** Removes explicit edges or suppresses a hierarchy edge without deleting its child. */
export declare function removeEdge(json: SqueedJson, edge: RenderedEdgeRef): {
    json: SqueedJson;
    removed: boolean;
};

export declare function removeNode(json: SqueedJson, address: string): SqueedJson;

export declare interface RenderedEdgeRef extends FlowEdgeProperties {
    source: string;
    target: string;
    isInverted?: boolean | null;
    connection?: SqueedConnectionRef;
    collapsedEndpoints?: {
        source: string;
        target: string;
    };
}

export declare function reparentNode(json: SqueedJson, nodeId: string | readonly string[], parentId: string): SqueedJson;

/**
 * Resolve which JSON node carries an edge's keys.
 * parent→child edges (implicit hierarchy) are configured on the child;
 * `$target` cross-links are configured on the source node.
 */
export declare function resolveEdgeOwner(edge: RenderedEdgeRef): {
    address: string;
    kind: "hierarchy" | "target" | "connection";
};

export declare interface ResolveNodeCollisionsOptions extends NodeCollisionOptions {
    animate?: boolean;
    maxIterations?: number;
}

export declare function resolveStateView(view: SqueedJson, state: SqueedJson): SqueedJson;

declare interface RuntimeReference {
    path: string;
    label: string;
}

/** Props passed to custom edge selection toolbar renderer */
export declare interface SelectedEdgeToolbarProps {
    edgeId: string;
    edgeData: any;
    onDeselect: () => void;
}

/** Props passed to custom node selection toolbar renderer */
export declare interface SelectedNodeToolbarProps {
    selectedNodeIds: string[];
    selectedNodeData: any[];
    onDeselect: () => void;
}

/** Built-in selection toolbars (shown in the bottom bar when a node/edge is selected) */
export declare interface SelectionToolbarConfig {
    /** Swatches offered for node/edge colors (Chakra tokens or hex). Default: 9 Chakra 500s */
    palette?: string[];
    /** Hide individual controls */
    hide?: Array<"label" | "typeView" | "color" | "textColor" | "borderColor" | "style" | "outline" | "animation" | "icon" | "collapse" | "delete">;
}

export declare const setCollapsed: (json: SqueedJson, address: string, collapsed: boolean) => SqueedJson;

export declare function setEdgeProp(json: SqueedJson, edge: RenderedEdgeRef, key: SqueedEdgeKey, value: any): SqueedJson;

export declare const setEdgeStyle: (json: SqueedJson, edge: RenderedEdgeRef, style: "solid" | "dashed" | "animated") => SqueedJson;

export declare function setNodeProp(json: SqueedJson, address: string, key: SqueedNodeKey, value: any): SqueedJson;

/** What changed in the Squeed document (delivered alongside the new JSON) */
export declare interface SqueedChange {
    type: "documentReplace" | "form" | "nodeLabel" | "nodeContent" | "nodeColor" | "nodeStyle" | "nodeIcon" | "nodeOutline" | "nodeAnimation" | "nodeCollapse" | "nodeCreate" | "nodeDelete" | "edgeLabel" | "edgeStyle" | "edgeColor" | "edgeCreate" | "edgeDelete";
    /** Node address affected (new node's address for nodeCreate) */
    address?: string;
    nodeAddresses?: string[];
    edge?: RenderedEdgeRef;
    /** `$` key written, when a single key changed */
    key?: string;
    value?: unknown;
}

/** Describes the edit behind an `onJsonChange` */
export declare interface SqueedChangeInfo {
    type: "documentReplace" | "form" | "nodeReplace" | "nodeLabel" | "nodeContent" | "nodeColor" | "nodeStyle" | "nodeIcon" | "nodeOutline" | "nodeAnimation" | "nodeCollapse" | "nodeCreate" | "nodeDelete" | "edgeLabel" | "edgeStyle" | "edgeColor" | "edgeCreate" | "edgeDelete";
    address?: string;
    edge?: FlowEdgeProperties & {
        source: string;
        target: string;
        isInverted?: boolean | null;
        connection?: SqueedConnectionRef;
    };
    key?: string;
    value?: unknown;
}

export declare interface SqueedConnection extends FlowEdgeProperties {
    animationVariant?: EdgeAnimationVariant;
    icon?: string;
    target: string;
    type?: string;
    id?: string;
    label?: string;
    color?: string;
    style?: "solid" | "dashed" | "animated";
}

export declare interface SqueedConnectionRef {
    address: string;
    key: string;
}

/** Schema keys that describe the edge *into* a node (parent → child) */
export declare type SqueedEdgeKey = "$edgeIcon" | "$edgeType" | "$sourceLabel" | "$isEdgeAnimated" | "$edgeAnimationVariant" | "$isEdgeDashed" | "$edgeColor";

/**
 * Squeed JSON = the source document `createFlowDiagram` compiles into nodes/edges.
 * Node ids are JSON addresses ("root.a.b"); these helpers translate toolbar edits
 * back into `$`-prefixed schema keys at that address. All functions are immutable.
 */
export declare type SqueedJson = Record<string, any> | any[];

/** Schema keys that live on a node */
export declare type SqueedNodeKey = "$view" | "$label" | "$subtitle" | "$edited" | "$form" | "$bgColor" | "$textColor" | "$borderColor" | "$borderStyle" | "$borderWidth" | "$borderRadius" | "$fontSize" | "$icon" | "$content" | "$contentFormat" | "$media" | "$collapsed" | "$parent" | "$outline" | "$isNodeAnimated" | "$nodeAnimationVariant" | "$connections" | "$ports";

export declare function stampNodeEdit(json: SqueedJson, address: string, edited?: NodeEditMetadata): SqueedJson;

export declare interface StateFormBinding {
    address: string;
    type: string;
    schemaType?: string;
    portResources?: Record<string, string>;
    resourceType?: string;
    fields?: Record<string, FormFieldConfig>;
}

export declare interface StateForms {
    structured?: boolean;
    references?: RuntimeReference[];
    /** Controlled resource data. Replace immutably to update forms, summaries and view references. */
    state: SqueedJson;
    bindings: Record<string, StateFormBinding>;
    renderForm?: (nodeAddress: string) => ReactNode | undefined;
    /** Receives user form edits after dependent edits. External state replacements do not echo here. */
    onStateChange?: (state: SqueedJson, change: FormChange) => void;
    /** Compatibility alias; onStateChange takes precedence when both are supplied. */
    onChange?: (state: SqueedJson, change: FormChange) => void;
}

declare interface StructuredForms {
    sourceSchema: FormSchema;
    sourceBindings: Record<string, StateFormBinding>;
    nodes: FlowDiagramNode[];
    edges: FlowDiagramEdge[];
    schema: FormSchema;
    bindings: Record<string, StateFormBinding>;
    slots: Map<string, StructuredSlot>;
    containers: Map<string, StructuredNode>;
}

declare interface StructuredNode {
    address: string;
    type: ContractType;
    declared: ContractType;
    scalar: boolean;
}

declare interface StructuredSlot {
    address: string;
    owner: string;
    field: string;
    type: ContractType;
    label: string;
    nodeId: string;
    present: boolean;
}

export declare function SvgExportButton(): JSX_2.Element;

export declare function Swatches({ colors, value, label, onPick, onReset, includeTransparent, }: {
    colors: string[];
    value?: string;
    label: string;
    onPick: (c: string) => void;
    onReset?: () => void;
    includeTransparent?: boolean;
}): JSX_2.Element;

export declare const TEXT_PALETTE: string[];

export declare const ToolbarCloseButton: ForwardRefExoticComponent<Omit<Omit<IconButtonProps & RefAttributes<HTMLButtonElement>, "children">, "ref"> & RefAttributes<HTMLButtonElement>>;

export declare function ToolbarCommitInput({ value, placeholder, ariaLabel, width, type, min, disabled, onCommit, }: {
    value: string;
    placeholder: string;
    ariaLabel: string;
    width?: string;
    type?: "text" | "number";
    min?: number;
    disabled?: boolean;
    onCommit: (v: string) => void;
}): JSX_2.Element;

export declare function ToolbarDivider(): JSX_2.Element;

export declare const ToolbarIconButton: ForwardRefExoticComponent<Omit<IconButtonProps & RefAttributes<HTMLButtonElement> & {
icon: React.ReactElement;
rememberAction?: boolean;
}, "ref"> & RefAttributes<HTMLButtonElement>>;

export declare const ToolbarRangeInput: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & RefAttributes<HTMLInputElement>>;

export declare function ToolbarScrollContainer({ children, background, border, endElement, startElement, startElementWidth, framed, }: {
    children: ReactNode;
    background: string;
    border: string;
    endElement?: ReactNode;
    startElement?: ReactNode;
    startElementWidth?: number;
    framed?: boolean;
}): JSX_2.Element;

export declare function ToolbarSelect({ children, value, onValueChange, disabled, style, title, icon, popupContent, footer, pinned, draggable, open: requestedOpen, onOpenChange, labelCase, "aria-label": label, ...triggerProps }: {
    children: ReactNode;
    value: string;
    onValueChange: (value: string) => void;
    disabled?: boolean;
    style?: CSSProperties;
    title?: string;
    icon?: ReactNode;
    popupContent?: ReactNode;
    footer?: ReactNode;
    pinned?: boolean;
    draggable?: boolean;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    labelCase?: "title" | "preserve";
    "aria-label": string;
} & Pick<React.ComponentProps<"button">, "id" | "aria-required" | "aria-invalid" | "aria-describedby">): JSX_2.Element;

export declare function ToolbarTooltip({ label, children, }: {
    label: string;
    children: React.ReactElement;
}): JSX_2.Element;

export declare const TooltipIconButton: ({ icon, label, onClick, color, boxSize, ...props }: {
    [x: string]: any;
    icon: any;
    label: any;
    onClick: any;
    color: any;
    boxSize?: number;
}) => JSX_2.Element;

/** Immutable update of the node at `address` (root address updates the document itself) */
export declare function updateNode(json: SqueedJson, address: string, fn: (node: any) => any): SqueedJson;

export declare function useCustomColors(theme?: any): {
    canvas: string;
    background: string;
    backgroundSecondary: string;
    darkBackgroundSecondary: string;
    border: string;
    darkColor: string;
    backgroundWhiteColor: string;
    borderSecondary: string;
    colorActive: string;
    colorInactive: string;
    iconColor: string;
    moreIconColor: string;
    colorText: string;
    themedColorText: string;
    logoColor: any;
    logoColorSecondary: any;
    darkColorActive: string;
    greenColor: string;
};

/**
 * True while the pointer is within `threshold` px of one edge of `bounds`, or over any `inside`
 * element. Used to reveal hidden edge toolbars; inactive when disabled or the pointer leaves the page.
 */
export declare function useEdgeProximity({ edge, enabled, bounds, inside, threshold, }: {
    edge: "top" | "bottom";
    enabled: boolean;
    bounds: RefObject<HTMLElement | null>;
    inside?: RefObject<HTMLElement | null>[];
    threshold?: number;
}): boolean;

export declare function useFlowData(): {
    nodeById: Map<string, FlowDiagramNode>;
    edgeById: Map<string, FlowDiagramEdge>;
    parentIds: Set<string>;
};

export declare function useFlowDiagramContext(): FlowDiagramContextValue;

export declare function useNodeViewActions(): {
    allNodesIconLabel: boolean;
    setAllNodesIconLabel: (enabled: boolean) => void;
    getNodeViewMode: (nodeId: string) => NodeViewMode;
    showNodeProperties: (nodeId: string) => void;
    restoreNodeView: (nodeId: string) => void;
    toggleNodeView: (nodeId: string) => void;
    setNodeViewMode: (nodeId: string, mode: NodeViewMode) => void;
};

/**
 * Hook that stops all event propagation on a DOM element.
 * Use this on any interactive element inside a node (inputs, textareas, forms)
 * to prevent cytoscape from intercepting mouse/keyboard events.
 *
 * @param active - Only attach listeners when true (e.g. when editing)
 * @returns ref to attach to the wrapper element
 *
 * @example
 * const inputRef = useStopPropagation<HTMLDivElement>(isEditing);
 * return <div ref={inputRef}><input /></div>;
 */
export declare function useStopPropagation<T extends HTMLElement>(active?: boolean): MutableRefObject<T>;

export declare function useThemeContentColors(color: any): {
    bgColor: any;
    highlightColor: string;
    borderColor: string;
    textColor: string;
    propertyColor: string;
    secondary: string;
    bgColorFaint: any;
    highlightColorFaint: string;
};

export declare function validateGridAdjustment(adjustment: NodeGridOptions["adjustment"]): void;

declare interface ViewportState {
    pan: Point;
    zoom: number;
}

export declare interface WorkflowContract {
    name: string;
    nodes: Record<string, ContractProperty>;
}

export declare function WorkflowControls({ showDivider, compact, }?: {
    showDivider?: boolean;
    compact?: boolean;
}): JSX_2.Element;

export declare interface WorkflowExecutionAdapter<Input> {
    execute: (request: WorkflowExecutionRequest<Input>) => Promise<WorkflowExecutionUpdate | void>;
    subscribe: (request: WorkflowExecutionRequest<Input>, receive: (update: WorkflowExecutionUpdate) => void) => (() => void) | Promise<() => void>;
    cancel?: (request: WorkflowExecutionRequest<Input>) => Promise<void>;
}

export declare interface WorkflowExecutionRequest<Input> {
    executionId: string;
    input: Input;
    signal: AbortSignal;
}

export declare interface WorkflowExecutionState {
    executionId: string;
    status: WorkflowRunStatus;
    output?: unknown;
    error?: string;
    steps: Record<string, NonNullable<WorkflowExecutionUpdate["step"]>>;
}

export declare interface WorkflowExecutionUpdate {
    executionId: string;
    status?: WorkflowRunStatus;
    output?: unknown;
    error?: string;
    step?: {
        id: string;
        status: WorkflowStepStatus;
        output?: unknown;
        error?: string;
    };
}

export declare type WorkflowRunStatus = "subscribing" | "running" | "paused" | "completed" | "failed" | "cancelled";

export declare type WorkflowStepStatus = "pending" | "running" | "completed" | "failed" | "skipped";

export { }