usage of the canvas is fully implemented, time to fix bugs. Working now fully

client/canvas_config.toml

@@ -49,6 +49,7 @@ suggestion_up = ["Up", "Ctrl+p"]
 suggestion_down = ["Down", "Ctrl+n"]
 select_suggestion = ["Enter", "Tab"]
 exit_suggestions = ["Esc"]
+trigger_autocomplete = ["Tab"]
 
 # Global keybindings (work in both modes)
 [keybindings.global]

client/config.toml

@@ -69,11 +69,10 @@ prev_field = ["shift+enter"]
 exit = ["esc", "ctrl+e"]
 delete_char_forward = ["delete"]
 delete_char_backward = ["backspace"]
-move_left = [""]
+move_left = ["left"]
 move_right = ["right"]
 suggestion_down = ["ctrl+n", "tab"]
 suggestion_up = ["ctrl+p", "shift+tab"]
-trigger_autocomplete = ["left"]
 
 [keybindings.command]
 exit_command_mode = ["ctrl+g", "esc"]

client/src/components/auth/login.rs

@@ -13,6 +13,16 @@ use ratatui::{
     Frame,
 };
 use crate::state::app::highlight::HighlightState;
+use canvas::canvas::{render_canvas, HighlightState as CanvasHighlightState}; // Use canvas library's render function
+
+// Helper function to convert between HighlightState types
+fn convert_highlight_state(local: &HighlightState) -> CanvasHighlightState {
+    match local {
+        HighlightState::Off => CanvasHighlightState::Off,
+        HighlightState::Characterwise { anchor } => CanvasHighlightState::Characterwise { anchor: *anchor },
+        HighlightState::Linewise { anchor_line } => CanvasHighlightState::Linewise { anchor_line: *anchor_line },
+    }
+}
 
 pub fn render_login(
     f: &mut Frame,
@@ -48,17 +58,15 @@ pub fn render_login(
         ])
         .split(inner_area);
 
-    // --- FORM RENDERING ---
-    crate::components::handlers::canvas::render_canvas(
+    // --- FORM RENDERING (Using canvas library directly) ---
+    let canvas_highlight_state = convert_highlight_state(highlight_state);
+    render_canvas(
         f,
         chunks[0],
-        login_state,
-        &["Username/Email", "Password"],
-        &login_state.current_field,
-        &[&login_state.username, &login_state.password],
-        theme,
+        login_state,        // LoginState implements CanvasState
+        theme,              // Theme implements CanvasTheme
         is_edit_mode,
-        highlight_state,
+        &canvas_highlight_state,
     );
 
     // --- ERROR MESSAGE ---
@@ -71,7 +79,7 @@ pub fn render_login(
         );
     }
 
-    // --- BUTTONS ---
+    // --- BUTTONS (unchanged) ---
     let button_chunks = Layout::default()
         .direction(Direction::Horizontal)
         .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
@@ -83,7 +91,7 @@ pub fn render_login(
         app_state.focused_button_index== login_button_index
     } else {
         false
-    };    
+    };
     let mut login_style = Style::default().fg(theme.fg);
     let mut login_border = Style::default().fg(theme.border);
     if login_active {
@@ -105,12 +113,12 @@ pub fn render_login(
     );
 
     // Return Button
-    let return_button_index = 1; // Assuming Return is the second general element
+    let return_button_index = 1;
     let return_active = if app_state.ui.focus_outside_canvas {
         app_state.focused_button_index== return_button_index
     } else {
-        false // Not active if focus is in canvas or other modes
-    };    
+        false
+    };
     let mut return_style = Style::default().fg(theme.fg);
     let mut return_border = Style::default().fg(theme.border);
     if return_active {
@@ -132,17 +140,15 @@ pub fn render_login(
     );
 
     // --- DIALOG ---
-    // Check the correct field name for showing the dialog
     if app_state.ui.dialog.dialog_show {
-        // Pass all 7 arguments correctly
         dialog::render_dialog(
             f,
             f.area(),
             theme,
             &app_state.ui.dialog.dialog_title,
             &app_state.ui.dialog.dialog_message,
-            &app_state.ui.dialog.dialog_buttons, // Pass buttons slice
-            app_state.ui.dialog.dialog_active_button_index, 
+            &app_state.ui.dialog.dialog_buttons,
+            app_state.ui.dialog.dialog_active_button_index,
             app_state.ui.dialog.is_loading,
         );
     }

client/src/components/auth/register.rs

@@ -2,10 +2,9 @@
 
 use crate::{
     config::colors::themes::Theme,
-    state::pages::auth::RegisterState, // Use RegisterState
-    components::common::{dialog, autocomplete},    
+    state::pages::auth::RegisterState,
+    components::common::dialog,
     state::app::state::AppState,
-    state::pages::canvas_state::CanvasState,
     modes::handlers::mode_manager::AppMode,
 };
 use ratatui::{
@@ -15,12 +14,24 @@ use ratatui::{
     Frame,
 };
 use crate::state::app::highlight::HighlightState;
+use canvas::canvas::{render_canvas, HighlightState as CanvasHighlightState}; // Use canvas library's render function
+use canvas::autocomplete::gui::render_autocomplete_dropdown;
+use canvas::autocomplete::AutocompleteCanvasState;
+
+// Helper function to convert between HighlightState types
+fn convert_highlight_state(local: &HighlightState) -> CanvasHighlightState {
+    match local {
+        HighlightState::Off => CanvasHighlightState::Off,
+        HighlightState::Characterwise { anchor } => CanvasHighlightState::Characterwise { anchor: *anchor },
+        HighlightState::Linewise { anchor_line } => CanvasHighlightState::Linewise { anchor_line: *anchor_line },
+    }
+}
 
 pub fn render_register(
     f: &mut Frame,
     area: Rect,
     theme: &Theme,
-    state: &RegisterState, // Use RegisterState
+    state: &RegisterState,
     app_state: &AppState,
     is_edit_mode: bool,
     highlight_state: &HighlightState,
@@ -29,7 +40,7 @@ pub fn render_register(
         .borders(Borders::ALL)
         .border_type(BorderType::Plain)
         .border_style(Style::default().fg(theme.border))
-        .title(" Register ") // Update title
+        .title(" Register ")
         .style(Style::default().bg(theme.bg));
 
     f.render_widget(block, area);
@@ -39,7 +50,6 @@ pub fn render_register(
         vertical: 1,
     });
 
-    // Adjust constraints for 4 fields + error + buttons
     let chunks = Layout::default()
         .direction(Direction::Vertical)
         .constraints([
@@ -50,23 +60,15 @@ pub fn render_register(
         ])
         .split(inner_area);
 
-    // --- FORM RENDERING (Using render_canvas) ---
-    let active_field_rect = crate::components::handlers::canvas::render_canvas(
+    // --- FORM RENDERING (Using canvas library directly) ---
+    let canvas_highlight_state = convert_highlight_state(highlight_state);
+    let input_rect = render_canvas(
         f,
-        chunks[0], // Area for the canvas
-        state,     // The state object (RegisterState)
-        &[         // Field labels
-            "Username",
-            "Email*",
-            "Password*",
-            "Confirm Password",
-            "Role* (Tab)",
-        ],
-        &state.current_field(), // Pass current field index
-        &state.inputs().iter().map(|s| *s).collect::<Vec<&String>>(), // Pass inputs directly
-        theme,
+        chunks[0],
+        state,              // RegisterState implements CanvasState
+        theme,              // Theme implements CanvasTheme
         is_edit_mode,
-        highlight_state,
+        &canvas_highlight_state,
     );
 
     // --- HELP TEXT ---
@@ -75,7 +77,6 @@ pub fn render_register(
         .alignment(Alignment::Center);
     f.render_widget(help_text, chunks[1]);
 
-   
     // --- ERROR MESSAGE ---
     if let Some(err) = &state.error_message {
         f.render_widget(
@@ -107,7 +108,7 @@ pub fn render_register(
     }
 
     f.render_widget(
-        Paragraph::new("Register") // Update button text
+        Paragraph::new("Register")
             .style(register_style)
             .alignment(Alignment::Center)
             .block(
@@ -119,7 +120,7 @@ pub fn render_register(
         button_chunks[0],
     );
 
-    // Return Button (logic remains similar)
+    // Return Button
     let return_button_index = 1;
     let return_active = if app_state.ui.focus_outside_canvas {
         app_state.focused_button_index== return_button_index
@@ -146,19 +147,22 @@ pub fn render_register(
         button_chunks[1],
     );
 
-    // --- Render Autocomplete Dropdown (Draw AFTER buttons) ---
+    // --- AUTOCOMPLETE DROPDOWN (Using canvas library directly) ---
     if app_state.current_mode == AppMode::Edit {
-        if let Some(suggestions) = state.get_suggestions() {
-            let selected = state.get_selected_suggestion_index();
-            if !suggestions.is_empty() {
-                if let Some(input_rect) = active_field_rect {
-                    autocomplete::render_autocomplete_dropdown(f, input_rect, f.area(), theme, suggestions, selected);
-                }    
+        if let Some(autocomplete_state) = state.autocomplete_state() {
+            if let Some(input_rect) = input_rect {
+                render_autocomplete_dropdown(
+                    f,
+                    f.area(),        // Frame area
+                    input_rect,      // Current input field rect
+                    theme,           // Theme implements CanvasTheme
+                    autocomplete_state,
+                );
             }
         }
     }
 
-    // --- DIALOG --- (Keep dialog logic)
+    // --- DIALOG ---
     if app_state.ui.dialog.dialog_show {
         dialog::render_dialog(
             f,

client/src/functions/modes/edit/auth_e.rs

@@ -1,12 +1,13 @@
 // src/functions/modes/edit/auth_e.rs
 
 use crate::services::grpc_client::GrpcClient;
-use crate::state::pages::canvas_state::CanvasState;
 use crate::state::pages::form::FormState;
 use crate::state::pages::auth::RegisterState;
 use crate::state::app::state::AppState;
 use crate::tui::functions::common::form::{revert, save};
 use crossterm::event::{KeyCode, KeyEvent};
+use canvas::autocomplete::AutocompleteCanvasState;
+use canvas::canvas::CanvasState;
 use std::any::Any;
 use anyhow::Result;
 
@@ -295,53 +296,42 @@ pub async fn execute_edit_action<S: CanvasState + Any + Send>(
         "suggestion_down" | "suggestion_up" | "select_suggestion" | "exit_suggestion_mode" => {
             // Attempt to downcast to RegisterState to handle suggestion logic here
             if let Some(register_state) = (state as &mut dyn Any).downcast_mut::<RegisterState>() {
-                // Only handle if it's the role field (index 4)
-                if register_state.current_field() == 4 {
+                // Only handle if it's the role field (index 4) and autocomplete is active
+                if register_state.current_field() == 4 && register_state.is_autocomplete_active() {
                     match action {
-                        "suggestion_down" if register_state.in_suggestion_mode => {
-                            let max_index = register_state.role_suggestions.len().saturating_sub(1);
-                            let current_index = register_state.selected_suggestion_index.unwrap_or(0);
-                            register_state.selected_suggestion_index = Some(if current_index >= max_index { 0 } else { current_index + 1 });
-                            Ok("Suggestion changed down".to_string())
+                        "suggestion_down" => {
+                            if let Some(autocomplete_state) = register_state.autocomplete_state_mut() {
+                                autocomplete_state.select_next();
+                                Ok("Suggestion changed down".to_string())
+                            } else {
+                                Ok("No autocomplete state".to_string())
+                            }
                         }
-                        "suggestion_up" if register_state.in_suggestion_mode => {
-                            let max_index = register_state.role_suggestions.len().saturating_sub(1);
-                            let current_index = register_state.selected_suggestion_index.unwrap_or(0);
-                            register_state.selected_suggestion_index = Some(if current_index == 0 { max_index } else { current_index.saturating_sub(1) });
-                            Ok("Suggestion changed up".to_string())
+                        "suggestion_up" => {
+                            if let Some(autocomplete_state) = register_state.autocomplete_state_mut() {
+                                autocomplete_state.select_previous();
+                                Ok("Suggestion changed up".to_string())
+                            } else {
+                                Ok("No autocomplete state".to_string())
+                            }
                         }
-                        "select_suggestion" if register_state.in_suggestion_mode => {
-                            if let Some(index) = register_state.selected_suggestion_index {
-                                if let Some(selected_role) = register_state.role_suggestions.get(index).cloned() {
-                                    register_state.role = selected_role.clone(); // Update the role field
-                                    register_state.in_suggestion_mode = false; // Exit suggestion mode
-                                    register_state.show_role_suggestions = false; // Hide suggestions
-                                    register_state.selected_suggestion_index = None; // Clear selection
-                                    Ok(format!("Selected role: {}", selected_role)) // Return success message
-                                } else {
-                                    Ok("Selected suggestion index out of bounds.".to_string()) // Error case
-                                }
+                        "select_suggestion" => {
+                            if let Some(message) = register_state.apply_autocomplete_selection() {
+                                Ok(message)
                             } else {
                                 Ok("No suggestion selected".to_string())
                             }
                         }
-                        "exit_suggestion_mode" => { // Handle Esc or other conditions
-                            register_state.show_role_suggestions = false;
-                            register_state.selected_suggestion_index = None;
-                            register_state.in_suggestion_mode = false;
+                        "exit_suggestion_mode" => {
+                            register_state.deactivate_autocomplete();
                             Ok("Suggestions hidden".to_string())
                         }
-                        _ => {
-                            // Action is suggestion-related but state doesn't match (e.g., not in suggestion mode)
-                            Ok("Suggestion action ignored: State mismatch.".to_string())
-                        }
+                        _ => Ok("Suggestion action ignored: State mismatch.".to_string())
                     }
                 } else {
-                    // It's RegisterState, but not the role field
-                    Ok("Suggestion action ignored: Not on role field.".to_string())
-                 }
+                    Ok("Suggestion action ignored: Not on role field or autocomplete not active.".to_string())
+                }
             } else {
-                // Downcast failed - this action is only for RegisterState
                 Ok(format!("Action '{}' not applicable for this state type.", action))
             }
         }

client/src/functions/modes/read_only/auth_ro.rs

@@ -1,8 +1,8 @@
 // src/functions/modes/read_only/auth_ro.rs
 
 use crate::config::binds::key_sequences::KeySequenceTracker;
-use crate::state::pages::canvas_state::CanvasState;
 use crate::state::app::state::AppState;
+use canvas::canvas::CanvasState;
 use anyhow::Result;
 
 #[derive(PartialEq)]

client/src/modes/canvas/read_only.rs

@@ -3,14 +3,15 @@
 use crate::config::binds::config::Config;
 use crate::config::binds::key_sequences::KeySequenceTracker;
 use crate::services::grpc_client::GrpcClient;
-use crate::state::pages::{canvas_state::CanvasState, auth::RegisterState};
 use crate::state::pages::auth::LoginState;
+use crate::state::pages::auth::RegisterState;
+use crate::state::pages::canvas_state::CanvasState as LocalCanvasState;
 use crate::state::pages::form::FormState;
 use crate::state::pages::add_logic::AddLogicState;
 use crate::state::pages::add_table::AddTableState;
 use crate::state::app::state::AppState;
 use crate::functions::modes::read_only::{add_logic_ro, auth_ro, form_ro, add_table_ro};
-use canvas::{canvas::CanvasAction, dispatcher::ActionDispatcher, canvas::ActionResult};
+use canvas::{canvas::{CanvasAction, CanvasState, ActionResult}, dispatcher::ActionDispatcher};
 use crossterm::event::KeyEvent;
 use anyhow::Result;
 

client/src/modes/common/commands.rs

@@ -2,7 +2,7 @@
 use crate::tui::terminal::core::TerminalCore;
 use crate::state::app::state::AppState;
 use crate::state::pages::{form::FormState, auth::LoginState, auth::RegisterState};
-use crate::state::pages::canvas_state::CanvasState;
+use canvas::canvas::CanvasState;
 use anyhow::Result;
 
 pub struct CommandHandler;

client/src/modes/general/navigation.rs

@@ -8,10 +8,10 @@ use crate::state::pages::auth::LoginState;
 use crate::state::pages::auth::RegisterState;
 use crate::state::pages::intro::IntroState;
 use crate::state::pages::admin::AdminState;
-use crate::state::pages::canvas_state::CanvasState;
 use crate::ui::handlers::context::UiContext;
 use crate::modes::handlers::event::EventOutcome;
 use crate::modes::general::command_navigation::{handle_command_navigation_event, NavigationState};
+use canvas::canvas::CanvasState;
 use anyhow::Result;
 
 pub async fn handle_navigation_event(

client/src/state/pages/auth.rs

@@ -1,5 +1,6 @@
 // src/state/pages/auth.rs
-use crate::state::pages::canvas_state::CanvasState;
+use canvas::canvas::{CanvasState, ActionContext, CanvasAction};
+use canvas::autocomplete::{AutocompleteCanvasState, AutocompleteState, SuggestionItem};
 use lazy_static::lazy_static;
 
 lazy_static! {
@@ -44,91 +45,61 @@ pub struct RegisterState {
     pub current_field: usize,
     pub current_cursor_pos: usize,
     pub has_unsaved_changes: bool,
-    pub show_role_suggestions: bool,
-    pub role_suggestions: Vec<String>,
-    pub selected_suggestion_index: Option<usize>,
-    pub in_suggestion_mode: bool,
+    // NEW: Replace old autocomplete with external library's system
+    pub autocomplete: AutocompleteState<String>,
 }
 
 impl AuthState {
-    /// Creates a new empty AuthState (unauthenticated)
     pub fn new() -> Self {
-        Self {
-            auth_token: None,
-            user_id: None,
-            role: None,
-            decoded_username: None,
-        }
+        Self::default()
     }
 }
 
 impl LoginState {
-    /// Creates a new empty LoginState
     pub fn new() -> Self {
-        Self {
-            username: String::new(),
-            password: String::new(),
-            error_message: None,
-            current_field: 0,
-            current_cursor_pos: 0,
-            has_unsaved_changes: false,
-            login_request_pending: false,
-        }
+        Self::default()
     }
 }
 
 impl RegisterState {
-    /// Creates a new empty RegisterState
     pub fn new() -> Self {
-        Self {
-            username: String::new(),
-            email: String::new(),
-            password: String::new(),
-            password_confirmation: String::new(),
-            role: String::new(),
-            error_message: None,
-            current_field: 0,
-            current_cursor_pos: 0,
-            has_unsaved_changes: false,
-            show_role_suggestions: false,
-            role_suggestions: Vec::new(),
-            selected_suggestion_index: None,
-            in_suggestion_mode: false,
-        }
-    }
-
-    /// Updates role suggestions based on current input
-    pub fn update_role_suggestions(&mut self) {
-        let current_input = self.role.to_lowercase();
-        self.role_suggestions = AVAILABLE_ROLES
+        let mut state = Self {
+            autocomplete: AutocompleteState::new(),
+            ..Default::default()
+        };
+        
+        // Initialize autocomplete with role suggestions
+        let suggestions: Vec<SuggestionItem<String>> = AVAILABLE_ROLES
             .iter()
-            .filter(|role| role.to_lowercase().contains(&current_input))
-            .cloned()
+            .map(|role| SuggestionItem::simple(role.clone(), role.clone()))
             .collect();
-        self.show_role_suggestions = !self.role_suggestions.is_empty();
+        
+        // Set suggestions but keep inactive initially
+        state.autocomplete.set_suggestions(suggestions);
+        state.autocomplete.is_active = false; // Not active by default
+        
+        state
     }
 }
 
+// Implement external library's CanvasState for LoginState
 impl CanvasState for LoginState {
     fn current_field(&self) -> usize {
         self.current_field
     }
 
     fn current_cursor_pos(&self) -> usize {
-        let len = match self.current_field {
-            0 => self.username.len(),
-            1 => self.password.len(),
-            _ => 0,
-        };
-        self.current_cursor_pos.min(len)
+        self.current_cursor_pos
     }
 
-    fn has_unsaved_changes(&self) -> bool {
-        self.has_unsaved_changes
+    fn set_current_field(&mut self, index: usize) {
+        if index < 2 {
+            self.current_field = index;
+        }
     }
 
-    fn inputs(&self) -> Vec<&String> {
-        vec![&self.username, &self.password]
+    fn set_current_cursor_pos(&mut self, pos: usize) {
+        self.current_cursor_pos = pos;
     }
 
     fn get_current_input(&self) -> &str {
@@ -147,73 +118,61 @@ impl CanvasState for LoginState {
         }
     }
 
+    fn inputs(&self) -> Vec<&String> {
+        vec![&self.username, &self.password]
+    }
+
     fn fields(&self) -> Vec<&str> {
         vec!["Username/Email", "Password"]
     }
 
-    fn set_current_field(&mut self, index: usize) {
-        if index < 2 {
-            self.current_field = index;
-            let len = match self.current_field {
-                0 => self.username.len(),
-                1 => self.password.len(),
-                _ => 0,
-            };
-            self.current_cursor_pos = self.current_cursor_pos.min(len);
-        }
-    }
-
-    fn set_current_cursor_pos(&mut self, pos: usize) {
-        let len = match self.current_field {
-            0 => self.username.len(),
-            1 => self.password.len(),
-            _ => 0,
-        };
-        self.current_cursor_pos = pos.min(len);
-    }
-
-    fn set_has_unsaved_changes(&mut self, changed: bool) {
-        self.has_unsaved_changes = changed;
-    }
-
-    fn get_suggestions(&self) -> Option<&[String]> {
-        None
-    }
-
-    fn get_selected_suggestion_index(&self) -> Option<usize> {
-        None
-    }
-}
-
-impl CanvasState for RegisterState {
-    fn current_field(&self) -> usize {
-        self.current_field
-    }
-
-    fn current_cursor_pos(&self) -> usize {
-        let len = match self.current_field {
-            0 => self.username.len(),
-            1 => self.email.len(),
-            2 => self.password.len(),
-            3 => self.password_confirmation.len(),
-            4 => self.role.len(),
-            _ => 0,
-        };
-        self.current_cursor_pos.min(len)
-    }
-
     fn has_unsaved_changes(&self) -> bool {
         self.has_unsaved_changes
     }
 
-    fn inputs(&self) -> Vec<&String> {
-        vec![
-            &self.username,
-            &self.email,
-            &self.password,
-            &self.password_confirmation,
-            &self.role,
-        ]
+    fn set_has_unsaved_changes(&mut self, changed: bool) {
+        self.has_unsaved_changes = changed;
+    }
+
+    fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+        match action {
+            CanvasAction::Custom(action_str) if action_str == "submit" => {
+                if !self.username.is_empty() && !self.password.is_empty() {
+                    Some(format!("Submitting login for: {}", self.username))
+                } else {
+                    Some("Please fill in all required fields".to_string())
+                }
+            }
+            _ => None,
+        }
+    }
+}
+
+// Implement external library's CanvasState for RegisterState
+impl CanvasState for RegisterState {
+    fn current_field(&self) -> usize {
+        self.current_field
+    }
+
+    fn current_cursor_pos(&self) -> usize {
+        self.current_cursor_pos
+    }
+
+    fn set_current_field(&mut self, index: usize) {
+        if index < 5 {
+            self.current_field = index;
+            
+            // Auto-activate autocomplete when moving to role field (index 4)
+            if index == 4 && !self.autocomplete.is_active {
+                self.activate_autocomplete();
+            } else if index != 4 && self.autocomplete.is_active {
+                self.deactivate_autocomplete();
+            }
+        }
+    }
+
+    fn set_current_cursor_pos(&mut self, pos: usize) {
+        self.current_cursor_pos = pos;
     }
 
     fn get_current_input(&self) -> &str {
@@ -238,6 +197,16 @@ impl CanvasState for RegisterState {
         }
     }
 
+    fn inputs(&self) -> Vec<&String> {
+        vec![
+            &self.username,
+            &self.email,
+            &self.password,
+            &self.password_confirmation,
+            &self.role,
+        ]
+    }
+
     fn fields(&self) -> Vec<&str> {
         vec![
             "Username",
@@ -248,50 +217,99 @@ impl CanvasState for RegisterState {
         ]
     }
 
-    fn set_current_field(&mut self, index: usize) {
-        if index < 5 {
-            self.current_field = index;
-            let len = match self.current_field {
-                0 => self.username.len(),
-                1 => self.email.len(),
-                2 => self.password.len(),
-                3 => self.password_confirmation.len(),
-                4 => self.role.len(),
-                _ => 0,
-            };
-            self.current_cursor_pos = self.current_cursor_pos.min(len);
-        }
-    }
-
-    fn set_current_cursor_pos(&mut self, pos: usize) {
-        let len = match self.current_field {
-            0 => self.username.len(),
-            1 => self.email.len(),
-            2 => self.password.len(),
-            3 => self.password_confirmation.len(),
-            4 => self.role.len(),
-            _ => 0,
-        };
-        self.current_cursor_pos = pos.min(len);
+    fn has_unsaved_changes(&self) -> bool {
+        self.has_unsaved_changes
     }
 
     fn set_has_unsaved_changes(&mut self, changed: bool) {
         self.has_unsaved_changes = changed;
     }
 
-    fn get_suggestions(&self) -> Option<&[String]> {
-        if self.current_field == 4 && self.in_suggestion_mode && self.show_role_suggestions {
-            Some(&self.role_suggestions)
+    fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+        match action {
+            CanvasAction::Custom(action_str) if action_str == "submit" => {
+                if !self.username.is_empty() {
+                    Some(format!("Submitting registration for: {}", self.username))
+                } else {
+                    Some("Username is required".to_string())
+                }
+            }
+            _ => None,
+        }
+    }
+}
+
+// Add autocomplete support for RegisterState
+impl AutocompleteCanvasState for RegisterState {
+    type SuggestionData = String;
+
+    fn supports_autocomplete(&self, field_index: usize) -> bool {
+        field_index == 4 // Only role field supports autocomplete
+    }
+
+    fn autocomplete_state(&self) -> Option<&AutocompleteState<Self::SuggestionData>> {
+        Some(&self.autocomplete)
+    }
+
+    fn autocomplete_state_mut(&mut self) -> Option<&mut AutocompleteState<Self::SuggestionData>> {
+        Some(&mut self.autocomplete)
+    }
+
+    fn activate_autocomplete(&mut self) {
+        let current_field = self.current_field();
+        if self.supports_autocomplete(current_field) {
+            self.autocomplete.activate(current_field);
+            
+            // Re-filter suggestions based on current input
+            let current_input = self.role.to_lowercase();
+            let filtered_suggestions: Vec<SuggestionItem<String>> = AVAILABLE_ROLES
+                .iter()
+                .filter(|role| role.to_lowercase().contains(&current_input))
+                .map(|role| SuggestionItem::simple(role.clone(), role.clone()))
+                .collect();
+            
+            self.autocomplete.set_suggestions(filtered_suggestions);
+        }
+    }
+
+    fn deactivate_autocomplete(&mut self) {
+        self.autocomplete.deactivate();
+    }
+
+    fn is_autocomplete_active(&self) -> bool {
+        self.autocomplete.is_active
+    }
+
+    fn is_autocomplete_ready(&self) -> bool {
+        self.autocomplete.is_ready()
+    }
+
+    fn apply_autocomplete_selection(&mut self) -> Option<String> {
+        // First, get the data we need and clone it to avoid borrowing conflicts
+        let selection_info = self.autocomplete.get_selected().map(|selected| {
+            (selected.value_to_store.clone(), selected.display_text.clone())
+        });
+
+        // Now do the mutable operations
+        if let Some((value, display_text)) = selection_info {
+            self.role = value;
+            self.set_has_unsaved_changes(true);
+            self.deactivate_autocomplete();
+            Some(format!("Selected role: {}", display_text))
         } else {
             None
         }
     }
 
-    fn get_selected_suggestion_index(&self) -> Option<usize> {
-        if self.current_field == 4 && self.in_suggestion_mode && self.show_role_suggestions {
-            self.selected_suggestion_index
-        } else {
-            None
+    fn set_autocomplete_suggestions(&mut self, suggestions: Vec<SuggestionItem<Self::SuggestionData>>) {
+        if let Some(state) = self.autocomplete_state_mut() {
+            state.set_suggestions(suggestions);
+        }
+    }
+
+    fn set_autocomplete_loading(&mut self, loading: bool) {
+        if let Some(state) = self.autocomplete_state_mut() {
+            state.is_loading = loading;
         }
     }
 }

client/src/tui/functions/common/login.rs

@@ -6,9 +6,9 @@ use crate::state::pages::auth::LoginState;
 use crate::state::app::state::AppState;
 use crate::state::app::buffer::{AppView, BufferState};
 use crate::config::storage::storage::{StoredAuthData, save_auth_data};
-use crate::state::pages::canvas_state::CanvasState;
 use crate::ui::handlers::context::DialogPurpose;
 use common::proto::komp_ac::auth::LoginResponse;
+use canvas::canvas::CanvasState;
 use anyhow::{Context, Result};
 use tokio::spawn;
 use tokio::sync::mpsc;

client/src/tui/functions/common/register.rs

@@ -4,11 +4,11 @@ use crate::services::auth::AuthClient;
 use crate::state::{
     pages::auth::RegisterState,
     app::state::AppState,
-    pages::canvas_state::CanvasState,
 };
 use crate::ui::handlers::context::DialogPurpose;
 use crate::state::app::buffer::{AppView, BufferState};
 use common::proto::komp_ac::auth::AuthResponse;
+use canvas::canvas::CanvasState;
 use anyhow::Context;
 use tokio::spawn;
 use tokio::sync::mpsc;

client/src/ui/handlers/render.rs

@@ -16,7 +16,8 @@ use crate::components::{
 };
 use crate::config::colors::themes::Theme;
 use crate::modes::general::command_navigation::NavigationState;
-use crate::state::pages::canvas_state::CanvasState;
+use crate::state::pages::canvas_state::CanvasState as LocalCanvasState; // Keep local one with alias
+use canvas::canvas::CanvasState; // Import external library's CanvasState trait
 use crate::state::app::buffer::BufferState;
 use crate::state::app::highlight::HighlightState as LocalHighlightState; // CHANGED: Alias local version
 use canvas::canvas::HighlightState as CanvasHighlightState; // CHANGED: Import canvas version with alias
@@ -136,7 +137,7 @@ pub fn render_ui(
             theme,
             register_state,
             app_state,
-            register_state.current_field() < 4,
+            register_state.current_field() < 4, // Now using CanvasState trait method
             highlight_state, // Uses local version
         );
     } else if app_state.ui.show_add_table {
@@ -166,7 +167,7 @@ pub fn render_ui(
             theme,
             login_state,
             app_state,
-            login_state.current_field() < 2,
+            login_state.current_field() < 2, // Now using CanvasState trait method
             highlight_state, // Uses local version
         );
     } else if app_state.ui.show_admin {
@@ -208,7 +209,7 @@ pub fn render_ui(
                 ])
                 .split(form_actual_area)[1]
         };
-        
+
         // CHANGED: Convert local HighlightState to canvas HighlightState for FormState
         let canvas_highlight_state = convert_highlight_state(highlight_state);
         form_state.render(

client/src/ui/handlers/ui.rs

@@ -8,7 +8,8 @@ use crate::config::storage::storage::load_auth_data;
 use crate::modes::common::commands::CommandHandler;
 use crate::modes::handlers::event::{EventHandler, EventOutcome};
 use crate::modes::handlers::mode_manager::{AppMode, ModeManager};
-use crate::state::pages::canvas_state::CanvasState;
+use crate::state::pages::canvas_state::CanvasState as LocalCanvasState; // Keep local one with alias
+use canvas::canvas::CanvasState; // Import external library's CanvasState trait
 use crate::state::pages::form::{FormState, FieldDefinition}; // Import FieldDefinition
 use crate::state::pages::auth::AuthState;
 use crate::state::pages::auth::LoginState;
@@ -38,6 +39,7 @@ use crate::state::app::state::DebugState;
 #[cfg(feature = "ui-debug")]
 use crate::utils::debug_logger::pop_next_debug_message;
 
+// Rest of the file remains the same...
 pub async fn run_ui() -> Result<()> {
     let config = Config::load().context("Failed to load configuration")?;
     let theme = Theme::from_str(&config.colors.theme);
@@ -346,25 +348,25 @@ pub async fn run_ui() -> Result<()> {
             }
         }
 
+        // Continue with the rest of the function...
+        // (The rest remains the same, but now CanvasState trait methods are available)
+        
         if app_state.ui.show_form {
             let current_view_profile = app_state.current_view_profile_name.clone();
             let current_view_table = app_state.current_view_table_name.clone();
 
-            // This condition correctly detects a table switch.
             if prev_view_profile_name != current_view_profile
                 || prev_view_table_name != current_view_table
             {
                 if let (Some(prof_name), Some(tbl_name)) =
                     (current_view_profile.as_ref(), current_view_table.as_ref())
                 {
-                    // --- START OF REFACTORED LOGIC ---
                     app_state.show_loading_dialog(
                         "Loading Table",
                         &format!("Fetching data for {}.{}...", prof_name, tbl_name),
                     );
                     needs_redraw = true;
 
-                    // 1. Call our new, central function. It handles fetching AND caching.
                     match UiService::load_table_view(
                         &mut grpc_client,
                         &mut app_state,
@@ -374,72 +376,62 @@ pub async fn run_ui() -> Result<()> {
                     .await
                     {
                         Ok(mut new_form_state) => {
-                            // 2. The function succeeded, we have a new FormState.
-                            //    Now, fetch its data.
                             if let Err(e) = UiService::fetch_and_set_table_count(
                                 &mut grpc_client,
                                 &mut new_form_state,
                             )
                             .await
                             {
-                                // Handle count fetching error
                                 app_state.update_dialog_content(
                                     &format!("Error fetching count: {}", e),
                                     vec!["OK".to_string()],
-                                    DialogPurpose::LoginFailed, // Or a more appropriate purpose
+                                    DialogPurpose::LoginFailed,
                                 );
                             } else if new_form_state.total_count > 0 {
-                                // If there are records, load the first/last one
                                 if let Err(e) = UiService::load_table_data_by_position(
                                     &mut grpc_client,
                                     &mut new_form_state,
                                 )
                                 .await
                                 {
-                                    // Handle data loading error
                                     app_state.update_dialog_content(
                                         &format!("Error loading data: {}", e),
                                         vec!["OK".to_string()],
-                                        DialogPurpose::LoginFailed, // Or a more appropriate purpose
+                                        DialogPurpose::LoginFailed,
                                     );
                                 } else {
-                                    // Success! Hide the loading dialog.
                                     app_state.hide_dialog();
                                 }
                             } else {
-                                // No records, so just reset to an empty form.
                                 new_form_state.reset_to_empty();
                                 app_state.hide_dialog();
                             }
 
-                            // 3. CRITICAL: Replace the old form_state with the new one.
                             form_state = new_form_state;
-
-                            // 4. Update our tracking variables.
                             prev_view_profile_name = current_view_profile;
                             prev_view_table_name = current_view_table;
                             table_just_switched = true;
                         }
                         Err(e) => {
-                            // This handles errors from load_table_view (e.g., schema fetch failed)
                             app_state.update_dialog_content(
                                 &format!("Error loading table: {}", e),
                                 vec!["OK".to_string()],
-                                DialogPurpose::LoginFailed, // Or a more appropriate purpose
+                                DialogPurpose::LoginFailed,
                             );
-                            // Revert the view change in app_state to avoid a loop
                             app_state.current_view_profile_name =
                                 prev_view_profile_name.clone();
                             app_state.current_view_table_name =
                                 prev_view_table_name.clone();
                         }
                     }
-                    // --- END OF REFACTORED LOGIC ---
                 }
                 needs_redraw = true;
             }
         }
 
+        // Continue with the rest of the positioning logic...
+        // Now we can use CanvasState methods like get_current_input(), current_field(), etc.
+        
         if let Some((profile_name, table_name)) = app_state.pending_table_structure_fetch.take() {
             if app_state.ui.show_add_logic {
                 if admin_state.add_logic_state.profile_name == profile_name &&