feat: updated the Resizer behavior to become more predicatable, introduced NodeFlowScope for inherited NodeFlowController access

feat: remove `Using Node Container Builder` section from docs for clarity and alignment with refactored node rendering
feat: separate `NodeWidget` and `NodeContainer` for improved modularity
feat: optimize rendering and performance with smart culling and improved connection logic

Author: pavanpodila

packages/vyuh_node_flow/README.md

@@ -41,7 +41,6 @@ minimap, and more.
 - [Building Nodes](#building-nodes)
   - [Basic Node Widget](#basic-node-widget)
   - [Custom Node Content](#custom-node-content)
-  - [Using Node Container Builder](#using-node-container-builder)
   - [Node Types and Data](#node-types-and-data)
 - [Working with Ports](#working-with-ports)
   - [Port Basics](#port-basics)
@@ -1068,34 +1067,6 @@ Widget _buildNode(BuildContext context, Node<Map<String, dynamic>> node) {
 
 </details>
 
-### Using Node Container Builder
-
-For complete control over node appearance:
-
-<details>
-<summary><strong>Custom Node Container Example</strong></summary>
-
-```dart
-NodeFlowEditor<MyData>(
-  controller: controller,
-  theme: theme,
-  nodeBuilder: (context, node) => _buildNodeContent(node),
-  nodeContainerBuilder: (context, node, content) {
-    // Return NodeWidget with custom styling
-    return NodeWidget<MyData>(
-      node: node,
-      child: content,
-      backgroundColor: _getNodeColor(node),
-      borderColor: node.isSelected ? Colors.blue : Colors.grey,
-      borderWidth: node.isSelected ? 3.0 : 1.0,
-      borderRadius: BorderRadius.circular(12),
-    );
-  },
-)
-```
-
-</details>
-
 ### Node Types and Data
 
 Create strongly-typed nodes using sealed classes for type safety and pattern

packages/vyuh_node_flow/lib/editor.dart

@@ -6,4 +6,5 @@ export 'src/editor/node_flow_behavior.dart';
 export 'src/editor/node_flow_config.dart';
 export 'src/editor/node_flow_editor.dart';
 export 'src/editor/node_flow_events.dart';
+export 'src/editor/node_flow_scope.dart';
 export 'src/editor/node_flow_viewer.dart';

packages/vyuh_node_flow/lib/src/connections/connections_canvas.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 
 import '../editor/controller/node_flow_controller.dart';
 import '../editor/themes/node_flow_theme.dart';
+import 'connection.dart';
 import 'connection_painter.dart';
 
 /// Custom painter for rendering all connections in the node flow canvas.
@@ -41,11 +42,13 @@ class ConnectionsCanvas<T> extends CustomPainter {
   /// - [store]: The node flow controller containing connection data
   /// - [theme]: The visual theme for rendering
   /// - [connectionPainter]: Shared painter instance for path caching
+  /// - [connections]: specific connections to render (defaults to all store.connections)
   /// - [animation]: Optional animation for animated connections
   const ConnectionsCanvas({
     required this.store,
     required this.theme,
     required this.connectionPainter,
+    this.connections,
     this.animation,
   }) : super(repaint: animation);
 
@@ -61,6 +64,10 @@ class ConnectionsCanvas<T> extends CustomPainter {
   /// painting and hit testing, improving performance.
   final ConnectionPainter connectionPainter;
 
+  /// Specific connections to render.
+  /// If null, renders all connections from the store.
+  final List<Connection>? connections;
+
   /// Optional animation for animated connections.
   ///
   /// When provided, the animation value will be passed to animated connections
@@ -81,9 +88,8 @@ class ConnectionsCanvas<T> extends CustomPainter {
     // Use the shared cached connection painter
     // This ensures paths are cached and reused for both painting and hit testing
 
-    // Always use all connections - let InteractiveViewer handle visibility
-    // This avoids expensive visibility computation during panning
-    final connectionsToRender = store.connections;
+    // Use provided list or fallback to all connections
+    final connectionsToRender = connections ?? store.connections;
 
     // Get current animation value
     final animationValue = animation?.value;

packages/vyuh_node_flow/lib/src/editor/controller/connection_api.dart

@@ -128,7 +128,13 @@ extension ConnectionApi<T> on NodeFlowController<T> {
   void addConnection(Connection connection) {
     runInAction(() {
       _connections.add(connection);
-      // Note: Spatial index is auto-synced via MobX reaction
+      // Update connection index for O(1) lookup
+      _connectionsByNodeId
+          .putIfAbsent(connection.sourceNodeId, () => {})
+          .add(connection.id);
+      _connectionsByNodeId
+          .putIfAbsent(connection.targetNodeId, () => {})
+          .add(connection.id);
     });
     // Fire event after successful addition
     events.connection?.onCreated?.call(connection);
@@ -151,6 +157,15 @@ extension ConnectionApi<T> on NodeFlowController<T> {
     runInAction(() {
       _connections.removeWhere((c) => c.id == connectionId);
       _selectedConnectionIds.remove(connectionId);
+
+      // Update connection index for O(1) lookup
+      _connectionsByNodeId[connectionToDelete.sourceNodeId]?.remove(
+        connectionId,
+      );
+      _connectionsByNodeId[connectionToDelete.targetNodeId]?.remove(
+        connectionId,
+      );
+
       // Remove from spatial index
       _spatialIndex.removeConnection(connectionId);
     });
@@ -215,6 +230,11 @@ extension ConnectionApi<T> on NodeFlowController<T> {
         // Remove from spatial index and path cache
         _spatialIndex.removeConnection(conn.id);
         _connectionPainter?.removeConnectionFromCache(conn.id);
+
+        // Update connection index for O(1) lookup
+        _connectionsByNodeId[conn.sourceNodeId]?.remove(conn.id);
+        _connectionsByNodeId[conn.targetNodeId]?.remove(conn.id);
+
         // Remove from connections list
         _connections.remove(conn);
       }

packages/vyuh_node_flow/lib/src/editor/controller/node_api.dart

@@ -1045,6 +1045,16 @@ extension NodeApi<T> on NodeFlowController<T> {
   void rebuildAllConnectionSegments() {
     if (!isConnectionPainterInitialized || _theme == null) return;
 
+    // Use the custom segment calculator if provided during initialization
+    // This allows tests and custom implementations to override the default path cache logic
+    if (_connectionSegmentCalculator != null) {
+      _spatialIndex.rebuildConnectionsWithSegments(
+        _connections,
+        _connectionSegmentCalculator!,
+      );
+      return;
+    }
+
     final pathCache = _connectionPainter!.pathCache;
     final connectionStyle = _theme!.connectionTheme.style;