working colors in vim mode

canvas/examples/canvas_cursor_auto.rs

@@ -47,7 +47,6 @@ use canvas::{
 // Enhanced FormEditor that demonstrates automatic cursor management
 struct AutoCursorFormEditor<D: DataProvider> {
     editor: FormEditor<D>,
-    highlight_state: HighlightState,
     has_unsaved_changes: bool,
     debug_message: String,
     command_buffer: String, // For multi-key vim commands like "gg"
@@ -57,7 +56,6 @@ impl<D: DataProvider> AutoCursorFormEditor<D> {
     fn new(data_provider: D) -> Self {
         Self {
             editor: FormEditor::new(data_provider),
-            highlight_state: HighlightState::Off,
             has_unsaved_changes: false,
             debug_message: "🎯 Automatic Cursor Demo - cursor-style feature enabled!".to_string(),
             command_buffer: String::new(),
@@ -84,49 +82,41 @@ impl<D: DataProvider> AutoCursorFormEditor<D> {
 
     // === VISUAL/HIGHLIGHT MODE SUPPORT ===
 
+
     fn enter_visual_mode(&mut self) {
-        if ModeManager::can_enter_highlight_mode(self.editor.mode()) {
-            self.editor.set_mode(AppMode::Highlight);
-            self.highlight_state = HighlightState::Characterwise {
-                anchor: (
-                    self.editor.current_field(),
-                    self.editor.cursor_position(),
-                ),
-            };
+        // Use the library method instead of manual state setting
+        self.editor.enter_highlight_mode();
         self.debug_message = "🔥 VISUAL MODE - Cursor: Blinking Block █".to_string();
     }
-    }
 
     fn enter_visual_line_mode(&mut self) {
-        if ModeManager::can_enter_highlight_mode(self.editor.mode()) {
-            self.editor.set_mode(AppMode::Highlight);
-            self.highlight_state =
-                HighlightState::Linewise { anchor_line: self.editor.current_field() };
+        // Use the library method instead of manual state setting  
+        self.editor.enter_highlight_line_mode();
         self.debug_message = "🔥 VISUAL LINE MODE - Cursor: Blinking Block █".to_string();
     }
-    }
 
     fn exit_visual_mode(&mut self) {
-        self.highlight_state = HighlightState::Off;
-        if self.editor.mode() == AppMode::Highlight {
-            self.editor.set_mode(AppMode::ReadOnly);
+        // Use the library method
+        self.editor.exit_highlight_mode();
         self.debug_message = "🔒 NORMAL MODE - Cursor: Steady Block █".to_string();
     }
-    }
 
     fn update_visual_selection(&mut self) {
-        if self.editor.mode() == AppMode::Highlight {
-            match &self.highlight_state {
-                HighlightState::Characterwise { anchor: _ } => {
+        if self.editor.is_highlight_mode() {
+            use canvas::canvas::state::SelectionState;
+            match self.editor.selection_state() {
+                SelectionState::Characterwise { anchor } => {
                     self.debug_message = format!(
-                        "🎯 Visual selection: char {} in field {} - Cursor: Blinking Block █",
-                        self.editor.cursor_position(),
-                        self.editor.current_field()
+                        "🎯 Visual selection: anchor=({},{}) current=({},{}) - Cursor: Blinking Block █",
+                        anchor.0, anchor.1,
+                        self.editor.current_field(),
+                        self.editor.cursor_position()
                     );
                 }
-                HighlightState::Linewise { anchor_line: _ } => {
+                SelectionState::Linewise { anchor_field } => {
                     self.debug_message = format!(
-                        "🎯 Visual line selection: field {} - Cursor: Blinking Block █",
+                        "🎯 Visual LINE selection: anchor={} current={} - Cursor: Blinking Block █",
+                        anchor_field,
                         self.editor.current_field()
                     );
                 }
@@ -313,10 +303,6 @@ impl<D: DataProvider> AutoCursorFormEditor<D> {
         &self.debug_message
     }
 
-    fn highlight_state(&self) -> &HighlightState {
-        &self.highlight_state
-    }
-
     fn has_unsaved_changes(&self) -> bool {
         self.has_unsaved_changes
     }
@@ -409,19 +395,70 @@ fn handle_key_press(
             editor.set_debug_message("✏️  INSERT (open line) - Cursor: Steady Bar |".to_string());
             editor.clear_command_buffer();
         }
+
+        // From Normal Mode: Enter visual modes
         (AppMode::ReadOnly, KeyCode::Char('v'), _) => {
-            editor.enter_visual_mode(); // 🎯 Automatic: cursor becomes blinking block
+            editor.enter_visual_mode();
             editor.clear_command_buffer();
         }
         (AppMode::ReadOnly, KeyCode::Char('V'), _) => {
-            editor.enter_visual_line_mode(); // 🎯 Automatic: cursor becomes blinking block
+            editor.enter_visual_line_mode();
             editor.clear_command_buffer();
         }
-        (_, KeyCode::Esc, _) => {
-            editor.exit_edit_mode(); // 🎯 Automatic: cursor becomes steady block
+        
+        // From Visual Mode: Switch between visual modes or exit
+        (AppMode::Highlight, KeyCode::Char('v'), _) => {
+            use canvas::canvas::state::SelectionState;
+            match editor.editor.selection_state() {
+                SelectionState::Characterwise { .. } => {
+                    // Already in characterwise mode, exit visual mode (vim behavior)
+                    editor.exit_visual_mode();
+                    editor.set_debug_message("🔒 Exited visual mode".to_string());
+                }
+                _ => {
+                    // Switch from linewise to characterwise mode
+                    editor.editor.enter_highlight_mode();
+                    editor.update_visual_selection();
+                    editor.set_debug_message("🔥 Switched to VISUAL mode".to_string());
+                }
+            }
             editor.clear_command_buffer();
         }
         
+        (AppMode::Highlight, KeyCode::Char('V'), _) => {
+            use canvas::canvas::state::SelectionState;
+            match editor.editor.selection_state() {
+                SelectionState::Linewise { .. } => {
+                    // Already in linewise mode, exit visual mode (vim behavior)
+                    editor.exit_visual_mode();
+                    editor.set_debug_message("🔒 Exited visual mode".to_string());
+                }
+                _ => {
+                    // Switch from characterwise to linewise mode
+                    editor.editor.enter_highlight_line_mode();
+                    editor.update_visual_selection();
+                    editor.set_debug_message("🔥 Switched to VISUAL LINE mode".to_string());
+                }
+            }
+            editor.clear_command_buffer();
+        }
+        
+        // Escape: Exit any mode back to normal
+        (_, KeyCode::Esc, _) => {
+            match mode {
+                AppMode::Edit => {
+                    editor.exit_edit_mode(); // Exit insert mode
+                }
+                AppMode::Highlight => {
+                    editor.exit_visual_mode(); // Exit visual mode
+                }
+                _ => {
+                    // Already in normal mode, just clear command buffer
+                    editor.clear_command_buffer();
+                }
+            }
+        }
+
         // === CURSOR MANAGEMENT DEMONSTRATION ===
         (AppMode::ReadOnly, KeyCode::F(1), _) => {
             editor.demo_manual_cursor_control()?;
@@ -645,14 +682,18 @@ fn render_status_and_help(
         .constraints([Constraint::Length(3), Constraint::Length(7)])
         .split(area);
 
-    // Status bar with cursor information
+    // Status bar with cursor information - FIXED VERSION
     let mode_text = match editor.mode() {
         AppMode::Edit => "INSERT | (bar cursor)",
         AppMode::ReadOnly => "NORMAL █ (block cursor)",
-        AppMode::Highlight => match editor.highlight_state() {
-            HighlightState::Characterwise { .. } => "VISUAL █ (blinking block)",
-            HighlightState::Linewise { .. } => "VISUAL LINE █ (blinking block)",
+        AppMode::Highlight => {
+            // Use library selection state instead of editor.highlight_state()
+            use canvas::canvas::state::SelectionState;
+            match editor.editor.selection_state() {
+                SelectionState::Characterwise { .. } => "VISUAL █ (blinking block)",
+                SelectionState::Linewise { .. } => "VISUAL LINE █ (blinking block)",
                 _ => "VISUAL █ (blinking block)",
+            }
         },
         _ => "NORMAL █ (block cursor)",
     };
@@ -670,7 +711,7 @@ fn render_status_and_help(
 
     f.render_widget(status, chunks[0]);
 
-    // Enhanced help text
+    // Enhanced help text (no changes needed here)
     let help_text = match editor.mode() {
         AppMode::ReadOnly => {
             if editor.has_pending_command() {
@@ -681,7 +722,7 @@ fn render_status_and_help(
             } else {
                 "🎯 CURSOR-STYLE DEMO: Normal █ | Insert | | Visual blinking█\n\
                  Normal: hjkl/arrows=move, w/b/e=words, 0/$=line, gg/G=first/last\n\
-                 i/a/A=insert, v/V=visual, x/X=delete, ?=info\n\
+                 i/a/A=insert, v/b=visual, x/X=delete, ?=info\n\
                  F1=demo manual cursor, F2=restore automatic"
             }
         }

canvas/src/canvas/gui.rs

@@ -27,6 +27,20 @@ pub fn render_canvas<T: CanvasTheme, D: DataProvider>(
     area: Rect,
     editor: &FormEditor<D>,
     theme: &T,
+) -> Option<Rect> {
+    // Convert SelectionState to HighlightState
+    let highlight_state = convert_selection_to_highlight(editor.ui_state().selection_state());
+    render_canvas_with_highlight(f, area, editor, theme, &highlight_state)
+}
+
+/// Render canvas with explicit highlight state (for advanced use)
+#[cfg(feature = "gui")]
+pub fn render_canvas_with_highlight<T: CanvasTheme, D: DataProvider>(
+    f: &mut Frame,
+    area: Rect,
+    editor: &FormEditor<D>,
+    theme: &T,
+    highlight_state: &HighlightState,
 ) -> Option<Rect> {
     let ui_state = editor.ui_state();
     let data_provider = editor.data_provider();
@@ -44,9 +58,6 @@ pub fn render_canvas<T: CanvasTheme, D: DataProvider>(
     let current_field_idx = ui_state.current_field();
     let is_edit_mode = matches!(ui_state.mode(), crate::canvas::modes::AppMode::Edit);
 
-    // For now, create a default highlight state (TODO: get from editor state)
-    let highlight_state = HighlightState::Off;
-    
     render_canvas_fields(
         f,
         area,
@@ -55,7 +66,7 @@ pub fn render_canvas<T: CanvasTheme, D: DataProvider>(
         &inputs,
         theme,
         is_edit_mode,
-        &highlight_state,
+        highlight_state, // Now using the actual highlight state!
         ui_state.cursor_position(),
         false, // TODO: track unsaved changes in editor
         |i| {
@@ -65,6 +76,18 @@ pub fn render_canvas<T: CanvasTheme, D: DataProvider>(
     )
 }
 
+/// Convert SelectionState to HighlightState for rendering
+#[cfg(feature = "gui")]
+fn convert_selection_to_highlight(selection: &crate::canvas::state::SelectionState) -> HighlightState {
+    use crate::canvas::state::SelectionState;
+
+    match selection {
+        SelectionState::None => HighlightState::Off,
+        SelectionState::Characterwise { anchor } => HighlightState::Characterwise { anchor: *anchor },
+        SelectionState::Linewise { anchor_field } => HighlightState::Linewise { anchor_line: *anchor_field },
+    }
+}
+
 /// Core canvas field rendering
 #[cfg(feature = "gui")]
 fn render_canvas_fields<T: CanvasTheme, F1, F2>(
@@ -230,11 +253,7 @@ fn apply_highlighting<'a, T: CanvasTheme>(
         HighlightState::Off => {
             Line::from(Span::styled(
                 text,
-                if is_active {
-                    Style::default().fg(theme.highlight())
-                } else {
                 Style::default().fg(theme.fg())
-                },
             ))
         }
         HighlightState::Characterwise { anchor } => {
@@ -246,7 +265,7 @@ fn apply_highlighting<'a, T: CanvasTheme>(
     }
 }
 
-/// Apply characterwise highlighting
+/// Apply characterwise highlighting - PROPER VIM-LIKE VERSION
 #[cfg(feature = "gui")]
 fn apply_characterwise_highlighting<'a, T: CanvasTheme>(
     text: &'a str,
@@ -262,15 +281,19 @@ fn apply_characterwise_highlighting<'a, T: CanvasTheme>(
     let start_field = min(anchor_field, *current_field_idx);
     let end_field = max(anchor_field, *current_field_idx);
 
+    // Vim-like styling:
+    // - Selected text: contrasting color + background (like vim visual selection)
+    // - All other text: normal color (no special colors for active fields, etc.)
     let highlight_style = Style::default()
-        .fg(theme.highlight())
-        .bg(theme.highlight_bg())
+        .fg(theme.highlight())          // ✅ Contrasting text color for selected text
+        .bg(theme.highlight_bg())       // ✅ Background for selected text
         .add_modifier(Modifier::BOLD);
-    let normal_style_in_highlight = Style::default().fg(theme.highlight());
-    let normal_style_outside = Style::default().fg(theme.fg());
+
+    let normal_style = Style::default().fg(theme.fg()); // ✅ Normal text color everywhere else
 
     if field_index >= start_field && field_index <= end_field {
         if start_field == end_field {
+            // Single field selection
             let (start_char, end_char) = if anchor_field == *current_field_idx {
                 (min(anchor_char, current_cursor_pos), max(anchor_char, current_cursor_pos))
             } else if anchor_field < *current_field_idx {
@@ -290,23 +313,64 @@ fn apply_characterwise_highlighting<'a, T: CanvasTheme>(
             let after: String = text.chars().skip(clamped_end + 1).collect();
 
             Line::from(vec![
-                Span::styled(before, normal_style_in_highlight),
-                Span::styled(highlighted, highlight_style),
-                Span::styled(after, normal_style_in_highlight),
+                Span::styled(before, normal_style),         // Normal text color
+                Span::styled(highlighted, highlight_style), // Contrasting color + background
+                Span::styled(after, normal_style),          // Normal text color
             ])
         } else {
             // Multi-field selection
-            Line::from(Span::styled(text, highlight_style))
+            if field_index == anchor_field {
+                if anchor_field < *current_field_idx {
+                    let clamped_start = anchor_char.min(text_len);
+                    let before: String = text.chars().take(clamped_start).collect();
+                    let highlighted: String = text.chars().skip(clamped_start).collect();
+
+                    Line::from(vec![
+                        Span::styled(before, normal_style),
+                        Span::styled(highlighted, highlight_style),
+                    ])
+                } else {
+                    let clamped_end = anchor_char.min(text_len);
+                    let highlighted: String = text.chars().take(clamped_end + 1).collect();
+                    let after: String = text.chars().skip(clamped_end + 1).collect();
+
+                    Line::from(vec![
+                        Span::styled(highlighted, highlight_style),
+                        Span::styled(after, normal_style),
+                    ])
+                }
+            } else if field_index == *current_field_idx {
+                if anchor_field < *current_field_idx {
+                    let clamped_end = current_cursor_pos.min(text_len);
+                    let highlighted: String = text.chars().take(clamped_end + 1).collect();
+                    let after: String = text.chars().skip(clamped_end + 1).collect();
+
+                    Line::from(vec![
+                        Span::styled(highlighted, highlight_style),
+                        Span::styled(after, normal_style),
+                    ])
+                } else {
+                    let clamped_start = current_cursor_pos.min(text_len);
+                    let before: String = text.chars().take(clamped_start).collect();
+                    let highlighted: String = text.chars().skip(clamped_start).collect();
+
+                    Line::from(vec![
+                        Span::styled(before, normal_style),
+                        Span::styled(highlighted, highlight_style),
+                    ])
                 }
             } else {
-        Line::from(Span::styled(
-            text,
-            if is_active { normal_style_in_highlight } else { normal_style_outside }
-        ))
+                // Middle field: highlight entire field
+                Line::from(Span::styled(text, highlight_style))
+            }
+        }
+    } else {
+        // Outside selection: always normal text color (no special active field color)
+        Line::from(Span::styled(text, normal_style))
     }
 }
 
-/// Apply linewise highlighting
+/// Apply linewise highlighting - PROPER VIM-LIKE VERSION
 #[cfg(feature = "gui")]
 fn apply_linewise_highlighting<'a, T: CanvasTheme>(
     text: &'a str,
@@ -319,20 +383,22 @@ fn apply_linewise_highlighting<'a, T: CanvasTheme>(
     let start_field = min(*anchor_line, *current_field_idx);
     let end_field = max(*anchor_line, *current_field_idx);
 
+    // Vim-like styling:
+    // - Selected lines: contrasting text color + background
+    // - All other lines: normal text color (no special active field color)
     let highlight_style = Style::default()
-        .fg(theme.highlight())
-        .bg(theme.highlight_bg())
+        .fg(theme.highlight())          // ✅ Contrasting text color for selected text
+        .bg(theme.highlight_bg())       // ✅ Background for selected text
         .add_modifier(Modifier::BOLD);
-    let normal_style_in_highlight = Style::default().fg(theme.highlight());
-    let normal_style_outside = Style::default().fg(theme.fg());
+
+    let normal_style = Style::default().fg(theme.fg()); // ✅ Normal text color everywhere else
 
     if field_index >= start_field && field_index <= end_field {
+        // Selected line: contrasting text color + background
         Line::from(Span::styled(text, highlight_style))
     } else {
-        Line::from(Span::styled(
-            text,
-            if is_active { normal_style_in_highlight } else { normal_style_outside }
-        ))
+        // Normal line: normal text color (no special active field color)
+        Line::from(Span::styled(text, normal_style))
     }
 }
 

canvas/src/editor.rs

@@ -10,6 +10,7 @@ use anyhow::Result;
 use crate::canvas::state::EditorState;
 use crate::data_provider::{DataProvider, AutocompleteProvider, SuggestionItem};
 use crate::canvas::modes::AppMode;
+use crate::canvas::state::SelectionState;
 
 /// Main editor that manages UI state internally and delegates data to user
 pub struct FormEditor<D: DataProvider> {
@@ -150,31 +151,26 @@ impl<D: DataProvider> FormEditor<D> {
 
     /// Change mode (for vim compatibility)
     pub fn set_mode(&mut self, mode: AppMode) {
-        #[cfg(feature = "cursor-style")]
-        let old_mode = self.ui_state.current_mode;
-
-        self.ui_state.current_mode = mode;
-
-        // Clear autocomplete when changing modes
-        if mode != AppMode::Edit {
-            self.ui_state.deactivate_autocomplete();
+        match (self.ui_state.current_mode, mode) {
+            // Entering highlight mode from read-only
+            (AppMode::ReadOnly, AppMode::Highlight) => {
+                self.enter_highlight_mode();
+            }
+            // Exiting highlight mode
+            (AppMode::Highlight, AppMode::ReadOnly) => {
+                self.exit_highlight_mode();
+            }
+            // Other transitions
+            (_, new_mode) => {
+                self.ui_state.current_mode = new_mode;
+                if new_mode != AppMode::Highlight {
+                    self.ui_state.selection = SelectionState::None;
                 }
                 
-        // Update cursor style if mode changed and cursor-style feature is enabled
                 #[cfg(feature = "cursor-style")]
-        if old_mode != mode {
-            let _ = crate::canvas::CursorManager::update_for_mode(mode);
-            
-            // IMMEDIATELY update terminal cursor position for the new mode
-            // This prevents flicker by ensuring position and style change atomically
-            if let Ok((x, y)) = crossterm::cursor::position() {
-                let display_pos = self.display_cursor_position();
-                let current_text = self.current_text();
-                let adjusted_x = x.saturating_sub(current_text.len() as u16) + display_pos as u16;
-                let _ = crossterm::execute!(
-                    std::io::stdout(),
-                    crossterm::cursor::MoveTo(adjusted_x, y)
-                );
+                {
+                    let _ = CursorManager::update_for_mode(new_mode);
+                }
             }
         }
     }
@@ -597,6 +593,102 @@ impl<D: DataProvider> FormEditor<D> {
             Ok(())
         }
     }
+
+
+    // ===================================================================
+    // HIGHLIGHT MODE
+    // ===================================================================
+
+    /// Enter highlight mode (visual mode)
+    pub fn enter_highlight_mode(&mut self) {
+        if self.ui_state.current_mode == AppMode::ReadOnly {
+            self.ui_state.current_mode = AppMode::Highlight;
+            self.ui_state.selection = SelectionState::Characterwise {
+                anchor: (self.ui_state.current_field, self.ui_state.cursor_pos),
+            };
+            
+            #[cfg(feature = "cursor-style")]
+            {
+                let _ = CursorManager::update_for_mode(AppMode::Highlight);
+            }
+        }
+    }
+
+    /// Enter highlight line mode (visual line mode)
+    pub fn enter_highlight_line_mode(&mut self) {
+        if self.ui_state.current_mode == AppMode::ReadOnly {
+            self.ui_state.current_mode = AppMode::Highlight;
+            self.ui_state.selection = SelectionState::Linewise {
+                anchor_field: self.ui_state.current_field,
+            };
+            
+            #[cfg(feature = "cursor-style")]
+            {
+                let _ = CursorManager::update_for_mode(AppMode::Highlight);
+            }
+        }
+    }
+
+    /// Exit highlight mode back to read-only
+    pub fn exit_highlight_mode(&mut self) {
+        if self.ui_state.current_mode == AppMode::Highlight {
+            self.ui_state.current_mode = AppMode::ReadOnly;
+            self.ui_state.selection = SelectionState::None;
+            
+            #[cfg(feature = "cursor-style")]
+            {
+                let _ = CursorManager::update_for_mode(AppMode::ReadOnly);
+            }
+        }
+    }
+
+    /// Check if currently in highlight mode
+    pub fn is_highlight_mode(&self) -> bool {
+        self.ui_state.current_mode == AppMode::Highlight
+    }
+
+    /// Get current selection state
+    pub fn selection_state(&self) -> &SelectionState {
+        &self.ui_state.selection
+    }
+
+    /// Enhanced movement methods that update selection in highlight mode
+    pub fn move_left_with_selection(&mut self) {
+        self.move_left();
+        // Selection anchor stays in place, cursor position updates automatically
+    }
+
+    pub fn move_right_with_selection(&mut self) {
+        self.move_right();
+        // Selection anchor stays in place, cursor position updates automatically
+    }
+
+    pub fn move_up_with_selection(&mut self) {
+        self.move_up();
+        // Selection anchor stays in place, cursor position updates automatically
+    }
+
+    pub fn move_down_with_selection(&mut self) {
+        self.move_down();
+        // Selection anchor stays in place, cursor position updates automatically
+    }
+
+    // Add similar methods for word movement, line movement, etc.
+    pub fn move_word_next_with_selection(&mut self) {
+        self.move_word_next();
+    }
+
+    pub fn move_word_prev_with_selection(&mut self) {
+        self.move_word_prev();
+    }
+
+    pub fn move_line_start_with_selection(&mut self) {
+        self.move_line_start();
+    }
+
+    pub fn move_line_end_with_selection(&mut self) {
+        self.move_line_end();
+    }
 }
 
 // Add Drop implementation for automatic cleanup