@theclearsky/react-blender-nodes 0.0.6 → 0.0.7

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { ClassProp } from 'class-variance-authority/types';
 import { ClassValue } from 'clsx';
 import { ComponentProps } from 'react';
 import { Connection } from '@xyflow/react';
+import { Context } from 'react';
 import { ControlLinePosition } from '@xyflow/react';
 import { ControlPosition } from '@xyflow/react';
 import { Edge } from '@xyflow/react';
@@ -10,7 +11,9 @@ import { EdgeChange } from '@xyflow/react';
 import { EdgeLabelOptions } from '@xyflow/react';
 import { EdgePosition } from '@xyflow/system';
 import { EdgeProps } from '@xyflow/react';
+import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { HandleShape as HandleShape_2 } from '../..';
 import { HandleType } from '@xyflow/react';
 import { HTMLAttributes } from 'react';
 import { JSX } from 'react/jsx-runtime';
@@ -23,7 +26,10 @@ import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { ResizeControlDirection } from '@xyflow/system';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { TypeOfNode as TypeOfNode_2 } from './types';
 import { VariantProps } from 'class-variance-authority';
+import { Viewport } from '@xyflow/react';
 import { XYPosition } from '@xyflow/react';
 import { z } from 'zod';
 
@@ -85,6 +91,29 @@ export declare type Action<DataTypeUniqueId extends string = string, NodeTypeUni
         /** New value for the input */
         value: string | number;
     };
+} | {
+    /** Open a node group and push it onto the openedNodeGroupStack */
+    type: typeof actionTypesMap.OPEN_NODE_GROUP;
+    payload: {
+        /** ID of the node to open */
+        nodeId: string;
+    } | {
+        /** Type of node to open */
+        nodeType: NodeTypeUniqueId;
+    };
+} | {
+    /** Close a node group and pop it from the openedNodeGroupStack */
+    type: typeof actionTypesMap.CLOSE_NODE_GROUP;
+} | {
+    /** Add a new node group to the graph */
+    type: typeof actionTypesMap.ADD_NODE_GROUP;
+} | {
+    /** Set the viewport of the graph */
+    type: typeof actionTypesMap.SET_VIEWPORT;
+    payload: {
+        /** Current viewport of the graph */
+        viewport: Viewport;
+    };
 };
 
 /** Map of action types for type-safe action dispatching */
@@ -95,8 +124,14 @@ export declare const actionTypesMap: {
     readonly UPDATE_EDGES_BY_REACT_FLOW: "UPDATE_EDGES_BY_REACT_FLOW";
     readonly ADD_EDGE_BY_REACT_FLOW: "ADD_EDGE_BY_REACT_FLOW";
     readonly UPDATE_INPUT_VALUE: "UPDATE_INPUT_VALUE";
+    readonly OPEN_NODE_GROUP: "OPEN_NODE_GROUP";
+    readonly CLOSE_NODE_GROUP: "CLOSE_NODE_GROUP";
+    readonly ADD_NODE_GROUP: "ADD_NODE_GROUP";
+    readonly SET_VIEWPORT: "SET_VIEWPORT";
 };
 
+export declare function addAnInputOrOutputToAllNodesOfANodeTypeAcrossStateIncludingSubtrees<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(state: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>, nodeType: NodeTypeUniqueId, typeOfInputOrOutput: TypeOfInput<DataTypeUniqueId>, addAtIndex: HandleIndices, beforeOrAfterIndex?: 'before' | 'after'): Pick<State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>, 'typeOfNodes' | 'nodes' | 'edges'>;
+
 /**
  * Adds a new edge between two handles with type checking and inference
  *
@@ -120,9 +155,7 @@ export declare const actionTypesMap: {
  * @param enableComplexTypeChecking - Whether to enable complex type checking
  * @returns Object containing updated nodes, edges, and validation result
  */
-export declare function addEdgeWithTypeChecking<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(newEdgeSourceNodeId: string, newEdgeSourceHandleId: string, newEdgeTargetNodeId: string, newEdgeTargetHandleId: string, state: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>): {
-    updatedNodes: Nodes<UnderlyingType, NodeTypeUniqueId, ComplexSchemaType, DataTypeUniqueId>;
-    updatedEdges: Edges;
+export declare function addEdgeWithTypeChecking<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(newEdgeSourceNodeId: string, newEdgeSourceHandleId: string, newEdgeTargetNodeId: string, newEdgeTargetHandleId: string, state: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>, groupInputNodeId: string | undefined, groupOutputNodeId: string | undefined, unmodifiedState: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>): {
     validation: ConnectionValidationResult;
 };
 
@@ -377,6 +410,12 @@ isCurrentlyInsideReactFlow?: boolean;
 nodeResizerProps?: NodeResizerWithMoreControlsProps;
 /** Node type unique id */
 nodeTypeUniqueId?: string | undefined;
+/**
+* Whether to show the node open button (square mouse pointer icon)
+* - Used by full graph for node groups
+* @default false
+*/
+showNodeOpenButton?: boolean;
 } & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
 
 /**
@@ -489,6 +528,12 @@ export declare type ConfigurableNodeProps<UnderlyingType extends SupportedUnderl
     nodeResizerProps?: NodeResizerWithMoreControlsProps;
     /** Node type unique id */
     nodeTypeUniqueId?: NodeTypeUniqueId;
+    /**
+     * Whether to show the node open button (square mouse pointer icon)
+     * - Used by full graph for node groups
+     * @default false
+     */
+    showNodeOpenButton?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -590,7 +635,7 @@ declare type ConnectionValidationResult = {
  * );
  * ```
  */
-export declare function constructInputOrOutputOfType<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(typeOfDataTypeInNode: TypeOfInput<DataTypeUniqueId> | TypeOfNode<DataTypeUniqueId>['outputs'][number], allDataTypes: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['dataTypes']): ConfigurableNodeInput<UnderlyingType, ComplexSchemaType, DataTypeUniqueId> | ConfigurableNodeOutput<UnderlyingType, ComplexSchemaType, DataTypeUniqueId>;
+export declare function constructInputOrOutputOfType<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(typeOfDataTypeInNode: TypeOfInput<DataTypeUniqueId> | TypeOfNode<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['outputs'][number], allDataTypes: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['dataTypes']): ConfigurableNodeInput<UnderlyingType, ComplexSchemaType, DataTypeUniqueId> | ConfigurableNodeOutput<UnderlyingType, ComplexSchemaType, DataTypeUniqueId>;
 
 /**
  * Constructs a ConfigurableNodeInputPanel from a type definition
@@ -843,6 +888,45 @@ export declare type ContextAwareInputProps = {
     isCurrentlyInsideReactFlow: boolean;
 };
 
+/**
+ * Context-aware open button component that handles both ReactFlow and standalone contexts
+ *
+ * This component intelligently renders either a ReactFlow-aware button (for ReactFlow context)
+ * or a simple button (for standalone usage) based on the context.
+ *
+ * Features:
+ * - Automatically detects ReactFlow context
+ * - Renders appropriate button based on context
+ * - Integrates with FullGraph's dispatch system
+ * - Supports conditional rendering
+ *
+ * @param props - The component props
+ * @returns JSX element containing the appropriate open button
+ *
+ * @example
+ * ```tsx
+ * <ContextAwareOpenButton
+ *   nodeId="node-123"
+ *   showButton={true}
+ *   isCurrentlyInsideReactFlow={true}
+ * />
+ * ```
+ */
+export declare const ContextAwareOpenButton: ({ showButton, isCurrentlyInsideReactFlow, }: ContextAwareOpenButtonProps) => JSX.Element;
+
+/**
+ * Props for the ContextAwareOpenButton component
+ */
+export declare type ContextAwareOpenButtonProps = {
+    /**
+     * Whether the button should be shown
+     * @default false
+     */
+    showButton?: boolean;
+    /** Whether the component is currently inside a ReactFlow context */
+    isCurrentlyInsideReactFlow: boolean;
+};
+
 /**
  * A context menu component with nested submenu support
  *
@@ -978,7 +1062,7 @@ export declare type Coordinate = {
  * @param contextMenuPosition - The position where the context menu was opened
  * @returns ContextMenuItem array for the context menu
  */
-export declare function createNodeContextMenu<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>({ typeOfNodes, dispatch, setContextMenu, contextMenuPosition, }: CreateNodeContextMenuProps<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>): ContextMenuItem[];
+export declare function createNodeContextMenu<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>({ typeOfNodes, dispatch, setContextMenu, contextMenuPosition, isRecursionAllowed, currentNodeType, }: CreateNodeContextMenuProps<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>): ContextMenuItem[];
 
 export declare type CreateNodeContextMenuProps<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? any : never = never> = {
     typeOfNodes: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['typeOfNodes'];
@@ -990,6 +1074,16 @@ export declare type CreateNodeContextMenuProps<DataTypeUniqueId extends string =
         position: XYPosition;
     }) => void;
     contextMenuPosition: XYPosition;
+    /**
+     * Whether to allow recursion
+     * - If not provided, is considered true
+     * - When true, the recursion is checked, and nesting of node groups is not allowed if it creates a recursion
+     * - When false, the recursion is not checked, and all nesting of node groups is allowed
+     *
+     * @default true
+     */
+    isRecursionAllowed?: boolean;
+    currentNodeType?: NodeTypeUniqueId;
 };
 
 /**
@@ -1124,6 +1218,10 @@ export declare type Edges = ConfigurableEdgeState[];
  */
 export declare function FullGraph<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>({ state, dispatch, }: FullGraphProps<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>): JSX.Element;
 
+export declare const FullGraphContext: Context<    {
+allProps: FullGraphProps;
+}>;
+
 /**
  * Props for the FullGraph component
  *
@@ -1141,6 +1239,62 @@ export declare type FullGraphProps<DataTypeUniqueId extends string = string, Nod
     ]>;
 };
 
+/**
+ * Gets all the dependencies of a node type recursively
+ * - Basically, it returns the node types that this node type directly depends on and all their dependencies recursively
+ * - Includes itself
+ *
+ * @param stateOrNodeToNodeDependencies - The state or the node to node dependencies
+ * @param nodeType - The node type
+ * @returns All dependencies of the node type as a set
+ */
+export declare function getAllDependenciesOfNodeTypeRecursively<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(stateOrNodeToNodeDependencies: Pick<State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>, 'typeOfNodes'> | Partial<Record<NodeTypeUniqueId, Set<NodeTypeUniqueId>>>, nodeType: NodeTypeUniqueId): Set<NodeTypeUniqueId>;
+
+/**
+ * Gets all the dependents of a node type recursively
+ * - Basically, it returns the node types that are dependent on the given node type and all their dependents recursively
+ * - Includes itself
+ *
+ * @param stateOrNodeToNodeDependents - The state or the node to node dependents
+ * @param nodeType - The node type
+ * @returns All dependents of the node type as a set
+ */
+export declare function getAllDependentsOfNodeTypeRecursively<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(stateOrNodeToNodeDependents: Pick<State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>, 'typeOfNodes'> | Partial<Record<NodeTypeUniqueId, Set<NodeTypeUniqueId>>>, nodeType: NodeTypeUniqueId): Set<NodeTypeUniqueId>;
+
+export declare function getCurrentNodesAndEdgesFromState<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(state: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>): {
+    nodes: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['nodes'];
+    edges: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['edges'];
+    inputNodeId?: string;
+    outputNodeId?: string;
+};
+
+export declare function getDependencyGraphBetweenNodeTypes<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(state: Pick<State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>, 'typeOfNodes'>): {
+    nodeToNodeDependents: Partial<Record<NodeTypeUniqueId, Set<NodeTypeUniqueId>>>;
+    nodeToNodeDependencies: Partial<Record<NodeTypeUniqueId, Set<NodeTypeUniqueId>>>;
+};
+
+/**
+ * Gets the direct dependencies of a node type
+ * - Basically, it returns the node types that this node type directly depends on
+ * - Doesn't include itself
+ *
+ * @param stateOrNodeToNodeDependencies - The state or the node to node dependencies
+ * @param nodeType - The node type
+ * @returns The direct dependencies of the node type as a set
+ */
+export declare function getDirectDependenciesOfNodeType<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(stateOrNodeToNodeDependencies: Pick<State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>, 'typeOfNodes'> | Partial<Record<NodeTypeUniqueId, Set<NodeTypeUniqueId>>>, nodeType: NodeTypeUniqueId): Set<NodeTypeUniqueId>;
+
+/**
+ * Gets the direct dependents of a node type
+ * - Basically, it returns the node types that are directly dependent on the given node type
+ * - Doesn't include itself
+ *
+ * @param stateOrNodeToNodeDependents - The state or the node to node dependents
+ * @param nodeType - The node type
+ * @returns The direct dependents of the node type as a set
+ */
+export declare function getDirectDependentsOfNodeType<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(stateOrNodeToNodeDependents: Pick<State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>, 'typeOfNodes'> | Partial<Record<NodeTypeUniqueId, Set<NodeTypeUniqueId>>>, nodeType: NodeTypeUniqueId): Set<NodeTypeUniqueId>;
+
 export declare function getResultantDataTypeOfHandleConsideringInferredType<DataTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(handle: ConfigurableNodeInput<UnderlyingType, ComplexSchemaType, DataTypeUniqueId> | ConfigurableNodeOutput<UnderlyingType, ComplexSchemaType, DataTypeUniqueId> | undefined): {
     dataTypeObject: DataType<UnderlyingType, ComplexSchemaType>;
     dataTypeUniqueId: DataTypeUniqueId;
@@ -1509,7 +1663,7 @@ export declare function makeStateWithAutoInfer<DataTypeUniqueId extends string =
  * };
  * ```
  */
-export declare function makeTypeOfNodeWithAutoInfer<DataTypeUniqueId extends string = string>(input: TypeOfNode<DataTypeUniqueId>): TypeOfNode<DataTypeUniqueId>;
+export declare function makeTypeOfNodeWithAutoInfer<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(input: TypeOfNode<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>): TypeOfNode<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>;
 
 /**
  * Array of node changes for ReactFlow
@@ -1590,6 +1744,8 @@ export declare type Nodes<UnderlyingType extends SupportedUnderlyingTypes = Supp
 
 declare type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 
+declare type Orientation = 'horizontal' | 'vertical';
+
 /**
  * ReactFlow-aware input component that automatically updates node data
  *
@@ -1610,6 +1766,22 @@ export declare type ReactFlowAwareInputProps = {
     input: ConfigurableNodeInput;
 };
 
+/**
+ * ReactFlow-aware open button component that dispatches open node group action
+ *
+ * This component renders the open button and dispatches the OPEN_NODE_GROUP action
+ * when clicked. It integrates with the ReactFlow context to maintain state consistency.
+ *
+ * @param props - The component props
+ * @returns JSX element containing the open button
+ */
+export declare const ReactFlowAwareOpenButton: ({}: ReactFlowAwareOpenButtonProps) => JSX.Element;
+
+/**
+ * Props for the ReactFlowAwareOpenButton component
+ */
+export declare type ReactFlowAwareOpenButtonProps = {};
+
 /**
  * Removes an edge between two handles with type checking and inference
  *
@@ -1633,7 +1805,7 @@ export declare type ReactFlowAwareInputProps = {
  * @param enableComplexTypeChecking - Whether to enable complex type checking
  * @returns Object containing updated nodes, edges, and validation result
  */
-export declare function removeEdgeWithTypeChecking<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(removedEdge: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['edges'][number], state: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>, removedEdgeChange: EdgeChange<ConfigurableEdgeState>): {
+export declare function removeEdgeWithTypeChecking<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(removedEdge: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['edges'][number], state: Pick<State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>, 'nodes' | 'edges' | 'enableTypeInference' | 'enableComplexTypeChecking' | 'allowedConversionsBetweenDataTypes' | 'dataTypes' | 'typeOfNodes'>, removedEdgeChange: EdgeChange<ConfigurableEdgeState>): {
     updatedNodes: Nodes<UnderlyingType, NodeTypeUniqueId, ComplexSchemaType, DataTypeUniqueId>;
     updatedEdges: Edges;
     validation: ConnectionValidationResult;
@@ -1647,6 +1819,286 @@ export declare function removeEdgeWithTypeChecking<DataTypeUniqueId extends stri
  */
 export declare function sanitizeNumberToShowAsText(value: number, numberOfDecimals: number): string;
 
+export declare const ScrollableButtonContainer: ForwardRefExoticComponent<ScrollableButtonContainerProps & RefAttributes<HTMLDivElement>>;
+
+export declare type ScrollableButtonContainerProps = {
+    children?: React.ReactNode;
+    orientation?: Orientation;
+    className?: string;
+    scrollAreaClassName?: string;
+    showArrows?: boolean;
+    disabled?: boolean;
+    ariaLabel?: string;
+    scrollSpeedPxPerFrame?: number;
+    reserveArrowSpace?: boolean;
+    observeChildren?: boolean;
+};
+
+/**
+ * Root Select component that provides context for all sub-components
+ *
+ * This component manages the overall state and provides context for all
+ * Select sub-components. It supports both controlled and uncontrolled usage
+ * with proper accessibility features.
+ *
+ * @param props - The component props
+ * @returns JSX element containing the select context
+ */
+export declare const Select: FC<SelectPrimitive.SelectProps>;
+
+/**
+ * The dropdown content container that holds all select options
+ *
+ * This component renders the dropdown panel that contains all the selectable
+ * options. It includes proper positioning, scrolling, and keyboard navigation
+ * support with Blender-inspired styling.
+ *
+ * Features:
+ * - Automatic positioning and collision detection
+ * - Scrollable content with scroll indicators
+ * - Keyboard navigation support
+ * - Blender-inspired dark theme styling
+ * - Proper focus management
+ *
+ * @param props - The component props
+ * @param ref - Forwarded ref to the content element
+ * @returns JSX element containing the select content
+ *
+ * @example
+ * ```tsx
+ * <SelectContent>
+ *   <SelectGroup>
+ *     <SelectLabel>Fruits</SelectLabel>
+ *     <SelectItem value="apple">Apple</SelectItem>
+ *     <SelectItem value="banana">Banana</SelectItem>
+ *   </SelectGroup>
+ * </SelectContent>
+ * ```
+ */
+export declare const SelectContent: ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the SelectContent component
+ */
+export declare type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>;
+
+/**
+ * Container for grouping related select options with optional labels
+ *
+ * This component provides a semantic container for grouping related select
+ * options. It can include a SelectLabel for the group and helps organize
+ * options logically.
+ *
+ * Features:
+ * - Semantic grouping of options
+ * - Optional group labels
+ * - Proper accessibility structure
+ * - Blender-inspired styling
+ *
+ * @param props - The component props
+ * @returns JSX element containing the select group
+ *
+ * @example
+ * ```tsx
+ * <SelectGroup>
+ *   <SelectLabel>Fruits</SelectLabel>
+ *   <SelectItem value="apple">Apple</SelectItem>
+ *   <SelectItem value="banana">Banana</SelectItem>
+ * </SelectGroup>
+ * ```
+ */
+export declare const SelectGroup: ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Individual selectable option within the select dropdown
+ *
+ * This component represents a single selectable option within the select
+ * dropdown. It includes hover states, selection indicators, and proper
+ * keyboard navigation support.
+ *
+ * Features:
+ * - Hover and focus states
+ * - Selection indicator (checkmark)
+ * - Keyboard navigation support
+ * - Blender-inspired styling
+ * - Proper accessibility attributes
+ *
+ * @param props - The component props
+ * @param ref - Forwarded ref to the item element
+ * @returns JSX element containing the select item
+ *
+ * @example
+ * ```tsx
+ * <SelectItem value="apple">Apple</SelectItem>
+ * <SelectItem value="banana">Banana</SelectItem>
+ * ```
+ */
+export declare const SelectItem: ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the SelectItem component
+ */
+export declare type SelectItemProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>;
+
+/**
+ * Label component for grouping select options
+ *
+ * This component provides a label for grouping related select options.
+ * It's typically used within a SelectGroup to create visual separation
+ * and organization of options.
+ *
+ * Features:
+ * - Semantic grouping of options
+ * - Blender-inspired styling
+ * - Proper accessibility attributes
+ *
+ * @param props - The component props
+ * @param ref - Forwarded ref to the label element
+ * @returns JSX element containing the select label
+ *
+ * @example
+ * ```tsx
+ * <SelectGroup>
+ *   <SelectLabel>Fruits</SelectLabel>
+ *   <SelectItem value="apple">Apple</SelectItem>
+ *   <SelectItem value="banana">Banana</SelectItem>
+ * </SelectGroup>
+ * ```
+ */
+export declare const SelectLabel: ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the SelectLabel component
+ */
+export declare type SelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;
+
+/**
+ * Button for scrolling down in the select content when there are many options
+ *
+ * This component provides a scroll down button that appears when the select
+ * content is scrollable and there are more options below.
+ *
+ * @param props - The component props
+ * @param ref - Forwarded ref to the button element
+ * @returns JSX element containing the scroll down button
+ */
+export declare const SelectScrollDownButton: ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the SelectScrollDownButton component
+ */
+export declare type SelectScrollDownButtonProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>;
+
+/**
+ * Button for scrolling up in the select content when there are many options
+ *
+ * This component provides a scroll up button that appears when the select
+ * content is scrollable and the user has scrolled down.
+ *
+ * @param props - The component props
+ * @param ref - Forwarded ref to the button element
+ * @returns JSX element containing the scroll up button
+ */
+export declare const SelectScrollUpButton: ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the SelectScrollUpButton component
+ */
+export declare type SelectScrollUpButtonProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>;
+
+/**
+ * Visual separator between groups of select options
+ *
+ * This component provides a visual separator line between different groups
+ * of select options, helping to organize and visually separate related items.
+ *
+ * Features:
+ * - Visual separation between option groups
+ * - Blender-inspired styling
+ * - Proper accessibility attributes
+ *
+ * @param props - The component props
+ * @param ref - Forwarded ref to the separator element
+ * @returns JSX element containing the select separator
+ *
+ * @example
+ * ```tsx
+ * <SelectItem value="apple">Apple</SelectItem>
+ * <SelectSeparator />
+ * <SelectItem value="orange">Orange</SelectItem>
+ * ```
+ */
+export declare const SelectSeparator: ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the SelectSeparator component
+ */
+export declare type SelectSeparatorProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>;
+
+/**
+ * The trigger button that opens the select dropdown
+ *
+ * This component renders the button that users click to open the select dropdown.
+ * It displays the currently selected value or placeholder text and includes
+ * proper accessibility attributes.
+ *
+ * Features:
+ * - Displays selected value or placeholder
+ * - Keyboard navigation support
+ * - Blender-inspired dark theme styling
+ * - Proper ARIA attributes
+ *
+ * @param props - The component props
+ * @param ref - Forwarded ref to the button element
+ * @returns JSX element containing the select trigger
+ *
+ * @example
+ * ```tsx
+ * <SelectTrigger className="w-[180px]">
+ *   <SelectValue placeholder="Select a fruit" />
+ * </SelectTrigger>
+ * ```
+ */
+export declare const SelectTrigger: ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & RefAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Props for the SelectTrigger component
+ */
+export declare type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>;
+
+/**
+ * Component that displays the currently selected value or placeholder
+ *
+ * This component is used within SelectTrigger to display the currently
+ * selected value or a placeholder when no value is selected. It provides
+ * proper text handling and accessibility.
+ *
+ * Features:
+ * - Displays selected value or placeholder
+ * - Proper text truncation
+ * - Accessibility support
+ * - Blender-inspired styling
+ *
+ * @param props - The component props
+ * @param ref - Forwarded ref to the value element
+ * @returns JSX element containing the select value
+ *
+ * @example
+ * ```tsx
+ * <SelectTrigger>
+ *   <SelectValue placeholder="Select a fruit" />
+ * </SelectTrigger>
+ * ```
+ */
+export declare const SelectValue: ForwardRefExoticComponent<Omit<SelectPrimitive.SelectValueProps & RefAttributes<HTMLSpanElement>, "ref"> & RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Props for the SelectValue component
+ */
+export declare type SelectValueProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>;
+
+export declare function setCurrentNodesAndEdgesToStateWithMutatingState<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(state: Pick<State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>, 'nodes' | 'edges' | 'typeOfNodes' | 'openedNodeGroupStack' | 'dataTypes'>, nodes?: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['nodes'], edges?: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['edges']): State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>;
+
 /**
  * A combined slider and number input component with drag functionality
  *
@@ -1718,6 +2170,44 @@ export declare type SliderNumberInputProps = {
     step?: number;
 };
 
+export declare const standardDataTypeNames: readonly ["newGroupInput", "newGroupOutput"];
+
+export declare const standardDataTypeNamesMap: {
+    readonly newGroupInput: "newGroupInput";
+    readonly newGroupOutput: "newGroupOutput";
+};
+
+export declare const standardDataTypes: {
+    newGroupInput: {
+        name: string;
+        underlyingType: "inferFromConnection";
+        complexSchema?: undefined;
+        color: string;
+        shape?: HandleShape_2;
+        allowInput?: boolean;
+    };
+    newGroupOutput: {
+        name: string;
+        underlyingType: "inferFromConnection";
+        complexSchema?: undefined;
+        color: string;
+        shape?: HandleShape_2;
+        allowInput?: boolean;
+    };
+};
+
+export declare const standardNodeTypeNames: readonly ["groupInput", "groupOutput"];
+
+export declare const standardNodeTypeNamesMap: {
+    readonly groupInput: "groupInput";
+    readonly groupOutput: "groupOutput";
+};
+
+export declare const standardNodeTypes: {
+    groupInput: TypeOfNode_2<"newGroupInput" | "newGroupOutput", string, "string" | "number" | "complex" | "noEquivalent" | "inferFromConnection", never>;
+    groupOutput: TypeOfNode_2<"newGroupInput" | "newGroupOutput", string, "string" | "number" | "complex" | "noEquivalent" | "inferFromConnection", never>;
+};
+
 /**
  * Complete state definition for the graph system
  *
@@ -1727,10 +2217,23 @@ export declare type SliderNumberInputProps = {
  * @template ComplexSchemaType - Zod schema type for complex data types
  */
 export declare type State<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never> = {
+    openedNodeGroupStack?: ({
+        nodeType: NodeTypeUniqueId;
+        previousViewport?: Viewport;
+    } | {
+        nodeType: NodeTypeUniqueId;
+        /**
+         * If not provided, it means that this node group isn't instantiated yet and we are editing the original node group
+         */
+        nodeId: string;
+        previousViewport?: Viewport;
+    })[];
     /** Map of data type definitions */
     dataTypes: Record<DataTypeUniqueId, DataType<UnderlyingType, ComplexSchemaType>>;
+    /** Current viewport of the graph */
+    viewport?: Viewport;
     /** Map of node type definitions */
-    typeOfNodes: Record<NodeTypeUniqueId, TypeOfNode<DataTypeUniqueId>>;
+    typeOfNodes: Record<NodeTypeUniqueId, TypeOfNode<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>>;
     /** Array of nodes in the graph */
     nodes: Nodes<UnderlyingType, NodeTypeUniqueId, ComplexSchemaType, DataTypeUniqueId>;
     /** Array of edges in the graph */
@@ -1783,6 +2286,15 @@ export declare type State<DataTypeUniqueId extends string = string, NodeTypeUniq
      * @default undefined
      */
     enableCycleChecking?: boolean;
+    /**
+     * Whether to enable recursion checking
+     * - If not provided, is considered disabled
+     * - When disabled, the recursion is not checked, all nesting of node groups is allowed
+     * - When enabled, the recursion is checked, and nesting of node groups is not allowed if it creates a recursion
+     *
+     * @default undefined
+     */
+    enableRecursionChecking?: boolean;
 };
 
 /**
@@ -1837,7 +2349,7 @@ export declare type TypeOfInputPanel<DataTypeUniqueId extends string = string> =
  *
  * @template DataTypeUniqueId - Unique identifier type for data types
  */
-export declare type TypeOfNode<DataTypeUniqueId extends string = string> = {
+export declare type TypeOfNode<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never> = {
     /** Display name of the node type */
     name: string;
     /** Color used for the node header */
@@ -1846,7 +2358,28 @@ export declare type TypeOfNode<DataTypeUniqueId extends string = string> = {
     inputs: (TypeOfInput<DataTypeUniqueId> | TypeOfInputPanel<DataTypeUniqueId>)[];
     /** Array of outputs */
     outputs: TypeOfInput<DataTypeUniqueId>[];
-    subtree?: {};
+    /** Subtree of the node type (if this exists, this is a node group) */
+    subtree?: {
+        nodes: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['nodes'];
+        edges: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['edges'];
+        /**
+         * Number of references to this node group
+         * This subtree can only be edited or deleted if there are no references to it
+         */
+        numberOfReferences: number;
+        /**
+         * Input node id of the node group
+         * - It is used to connect the node group to the rest of the graph
+         * - Not allowed to be deleted or duplicated, must always be one
+         */
+        inputNodeId: string;
+        /**
+         * Output node id of the node group
+         * - It is used to connect the node group to the rest of the graph
+         * - Not allowed to be deleted or duplicated, must always be one
+         */
+        outputNodeId: string;
+    };
 };
 
 /**
@@ -2010,7 +2543,7 @@ export declare type UseDragReturn = {
  *
  * // Add a new node (type-safe!)
  * dispatch({
- *   type: 'ADD_NODE',
+ *   type: actionTypesMap.ADD_NODE,
  *   payload: { type: 'inputNode', position: { x: 100, y: 100 } },
  * });
  * ```