I've created a comprehensive style editor component that combines the functionality from both screenshots into a single interface. The component features:

1. A three-column layout:

   • Left: Visualization type selector with icons
   • Middle: Style settings with tabs and controls
   • Right: Custom breaks table with drag-and-drop reordering

2. Key features:

   • Responsive design that works on different screen sizes
   • No modal dialogs - all controls are directly accessible
   • Real-time style updates
   • Drag-and-drop reordering of custom breaks
   • Complete style customization options

3. The interface uses shadcn/ui components for a consistent look and feel, including:

   • Tabs for navigation
   • Select dropdowns for options
   • Sliders for numeric inputs
   • Table for custom breaks
   • Buttons and inputs for various controls

You can further customize the styling and add more functionality as needed. Would you like me to add any specific features or make any adjustments to the current implementation?

I've updated the UI to integrate the point symbology settings directly into the Style tab instead of showing them in a modal. The changes include:

1. Added a larger point symbol preview button

2. Organized settings into clear sections:

   • Basic point symbol with size and rotation
   • Fill settings with color and opacity
   • Outline settings with size, style, color, and opacity
3. Maintained all the functionality from the modal while fitting into the existing layout
4. Used a grid layout for better organization of related controls

The controls are now directly accessible in the main interface while maintaining the same functionality as before. Would you like me to make any adjustments to the layout or add any additional features?