import { ReactNode } from 'react';
import { NodeDefinition } from '@teamflojo/floimg-studio-shared';

export type NodePaletteColorVariant = "amber" | "blue" | "teal" | "pink" | "cyan" | "orange" | "emerald";
export interface NodePaletteItemProps {
    /** The node definition to render */
    definition: NodeDefinition;
    /** Color variant for the palette item */
    colorVariant: NodePaletteColorVariant;
    /** Handler for drag start - receives the definition to serialize */
    onDragStart: (e: React.DragEvent, definition: NodeDefinition) => void;
    /** Handler for double-click - adds node to canvas */
    onDoubleClick: (definition: NodeDefinition) => void;
    /** Whether this node is disabled (prevents drag/add) */
    disabled?: boolean;
    /** Handler for when a disabled node is clicked */
    onDisabledClick?: (definition: NodeDefinition) => void;
    /** Custom badge to render (e.g., icon, tag) */
    badge?: ReactNode;
    /** Message to display instead of description when disabled */
    alternateMessage?: string;
}
/**
 * A single item in the node palette. Renders with themed CSS classes
 * for consistent styling.
 *
 * Extension features (disabled state, badges) are opt-in via props.
 */
export declare function NodePaletteItem({ definition, colorVariant, onDragStart, onDoubleClick, disabled, onDisabledClick, badge, alternateMessage, }: NodePaletteItemProps): import("react/jsx-runtime").JSX.Element;