import { default as React, ReactNode } from 'react';

/** The MIME type palette entries put their kind on during a drag. */
export declare const GRAPH_NODE_MIME = "application/x-nexus-graph-node";
/**
 * How the palette lays its items out.
 *
 * - `horizontal` — a row, wrapping if it must.
 * - `vertical` — a column.
 * - `auto` — whichever fits the space the palette is given. See
 *   {@link NodePalette} for the rule.
 */
export type PaletteOrientation = 'horizontal' | 'vertical' | 'auto';
/** The orientation actually rendered, once `auto` has been resolved. */
export type ResolvedOrientation = Exclude<PaletteOrientation, 'auto'>;
/** An entry in a {@link NodePalette}. */
export interface INodePaletteItem {
    /**
     * The `kind` given to the node this creates. Also the payload carried on the
     * drag, so the drop handler knows what was dragged.
     */
    kind: string;
    /** Label shown in the palette. */
    label: string;
    /** Optional icon or swatch rendered before the label. */
    icon?: ReactNode;
    /** One line explaining what the node is, shown as a tooltip. */
    description?: string;
}
export interface NodePaletteProps {
    /** The node types on offer. */
    items: INodePaletteItem[];
    /**
     * Called when an item is activated by click or Enter, for creating without a
     * drag. Keyboard users need this — a drag-only palette is unreachable.
     */
    onSelect?: (item: INodePaletteItem) => void;
    /** Called when a drag starts, if you want to show a drop hint. */
    onDragStart?: (item: INodePaletteItem) => void;
    /**
     * Layout axis. Defaults to `"auto"`, which measures the available space and
     * picks whichever axis fits.
     */
    orientation?: PaletteOrientation;
    /**
     * Called when `auto` settles on an axis, and whenever it changes. Useful for
     * adjusting surrounding layout to match.
     */
    onOrientationChange?: (orientation: ResolvedOrientation) => void;
    /**
     * Hide labels and show icons only. Useful for a narrow rail; items keep their
     * accessible name, so nothing is lost to a screen reader.
     */
    iconOnly?: boolean;
    /** Extra classes merged onto the root element. */
    className?: string;
    /** Accessible label for the group. Defaults to `"Node palette"`. */
    'aria-label'?: string;
}
/**
 * A palette of node types that can be dragged onto a {@link GraphCanvas}, or
 * activated with the keyboard.
 *
 * The palette carries only the item's `kind` on the drag; what a node of that
 * kind actually *is* is decided by your drop handler. Pair it with
 * {@link readPaletteDrag} on the canvas.
 *
 * Every item is a real button, so the palette is fully usable without a
 * pointer — `onSelect` fires on click or Enter.
 *
 * ## Orientation
 *
 * `auto` (the default) measures the space the palette's container gives it and
 * picks the axis that fits:
 *
 * 1. a row, if the items fit the available width;
 * 2. otherwise a column, if they fit the available height;
 * 3. otherwise a row that wraps.
 *
 * A container that shrink-wraps its content — an absolutely positioned overlay,
 * say — offers no information about available space, so the palette measures
 * the nearest ancestor that has a size of its own. That is what stops a
 * vertical palette from narrowing its own container and then being unable to
 * discover it has room to go horizontal again.
 *
 * Pass `horizontal` or `vertical` when you already know.
 *
 * @example
 * ```tsx
 * <GraphCanvas
 *   onDrop={(point, event) => {
 *     const kind = readPaletteDrag(event);
 *     if (kind) addNode({ kind, position: point });
 *   }}
 *   overlay={
 *     <NodePalette
 *       items={[{ kind: 'task', label: 'Task' }, { kind: 'gate', label: 'Gate' }]}
 *       onSelect={(item) => addNodeAtCentre(item.kind)}
 *     />
 *   }
 * />
 * ```
 */
export declare const NodePalette: ({ items, onSelect, onDragStart, orientation, onOrientationChange, iconOnly, className, "aria-label": ariaLabel, }: NodePaletteProps) => import("react/jsx-runtime").JSX.Element;
/**
 * Read the node kind from a drop on the canvas, or `null` if the drag did not
 * come from a {@link NodePalette}.
 *
 * @example
 * ```tsx
 * <GraphCanvas onDrop={(point, event) => {
 *   const kind = readPaletteDrag(event);
 *   if (kind) createNode(kind, point);
 * }} />
 * ```
 */
export declare const readPaletteDrag: (event: React.DragEvent) => string | null;