autotrigger vs manual trigger

.envrc

@@ -0,0 +1 @@
+use flake

.gitignore

@@ -3,3 +3,4 @@
 /tantivy_indexes
 server/tantivy_indexes
 steel_decimal/tests/property_tests.proptest-regressions
+.direnv/

Cargo.lock

@@ -470,6 +470,23 @@ version = "1.10.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d71b6127be86fdcfddb610f7182ac57211d4b18a3e9c82eb2d17662f2227ad6a"
 
+[[package]]
+name = "canvas"
+version = "0.4.2"
+dependencies = [
+ "anyhow",
+ "common",
+ "crossterm",
+ "ratatui",
+ "serde",
+ "tokio",
+ "tokio-test",
+ "toml",
+ "tracing",
+ "tracing-subscriber",
+ "unicode-width 0.2.0",
+]
+
 [[package]]
 name = "cassowary"
 version = "0.3.0"
@@ -541,10 +558,11 @@ dependencies = [
 
 [[package]]
 name = "client"
-version = "0.3.13"
+version = "0.4.2"
 dependencies = [
  "anyhow",
  "async-trait",
+ "canvas",
  "common",
  "crossterm",
  "dirs",
@@ -591,7 +609,7 @@ dependencies = [
 
 [[package]]
 name = "common"
-version = "0.3.13"
+version = "0.4.2"
 dependencies = [
  "prost",
  "prost-types",
@@ -2877,7 +2895,7 @@ checksum = "1c107b6f4780854c8b126e228ea8869f4d7b71260f962fefb57b996b8959ba6b"
 
 [[package]]
 name = "search"
-version = "0.3.13"
+version = "0.4.2"
 dependencies = [
  "anyhow",
  "common",
@@ -2976,7 +2994,7 @@ dependencies = [
 
 [[package]]
 name = "server"
-version = "0.3.13"
+version = "0.4.2"
 dependencies = [
  "anyhow",
  "bcrypt",

Cargo.toml

@@ -1,11 +1,11 @@
 [workspace]
-members = ["client", "server", "common", "search"]
+members = ["client", "server", "common", "search", "canvas"]
 resolver = "2"
 
 [workspace.package]
 # TODO: idk how to do the name, fix later
 # name = "komp_ac"
-version = "0.3.13"
+version = "0.4.2"
 edition = "2021"
 license = "GPL-3.0-or-later"
 authors = ["Filip Priečinský <filippriec@gmail.com>"]
@@ -46,4 +46,10 @@ rust_decimal_macros = "1.37.1"
 thiserror = "2.0.12"
 regex = "1.11.1"
 
+# Canvas crate
+ratatui = { version = "0.29.0", features = ["crossterm"] }
+crossterm = "0.28.1"
+toml = "0.8.20"
+unicode-width = "0.2.0"
+
 common = { path = "./common" }

canvas/CANVAS_MIGRATION.md

@@ -0,0 +1,334 @@
+# Canvas Library Migration Guide
+
+## Overview
+
+This guide covers the migration from the legacy canvas library structure to the new clean, modular architecture. The new design separates core canvas functionality from autocomplete features, providing better type safety and maintainability.
+
+## Key Changes
+
+### 1. **Modular Architecture**
+```
+# Old Structure (LEGACY)
+src/
+├── state.rs              # Mixed canvas + autocomplete
+├── actions/edit.rs       # Mixed concerns
+├── gui/render.rs         # Everything together
+└── suggestions.rs        # Legacy file
+
+# New Structure (CLEAN)
+src/
+├── canvas/               # Core canvas functionality
+│   ├── state.rs         # CanvasState trait only
+│   ├── actions/edit.rs  # Canvas actions only
+│   └── gui.rs           # Canvas rendering
+├── autocomplete/         # Rich autocomplete features
+│   ├── state.rs         # AutocompleteCanvasState trait
+│   ├── types.rs         # SuggestionItem, AutocompleteState
+│   ├── actions.rs       # Autocomplete actions
+│   └── gui.rs           # Autocomplete dropdown rendering
+└── dispatcher.rs         # Action routing
+```
+
+### 2. **Trait Separation**
+- **CanvasState**: Core form functionality (navigation, input, validation)
+- **AutocompleteCanvasState**: Optional rich autocomplete features
+
+### 3. **Rich Suggestions**
+Replaced simple string suggestions with typed, rich suggestion objects.
+
+## Migration Steps
+
+### Step 1: Update Import Paths
+
+**Find and Replace these imports:**
+
+```rust
+# OLD IMPORTS
+use canvas::CanvasState;
+use canvas::CanvasAction;
+use canvas::ActionContext;
+use canvas::HighlightState;
+use canvas::CanvasTheme;
+use canvas::ActionDispatcher;
+use canvas::ActionResult;
+
+# NEW IMPORTS
+use canvas::canvas::CanvasState;
+use canvas::canvas::CanvasAction;
+use canvas::canvas::ActionContext;
+use canvas::canvas::HighlightState;
+use canvas::canvas::CanvasTheme;
+use canvas::dispatcher::ActionDispatcher;
+use canvas::canvas::ActionResult;
+```
+
+**Complex imports:**
+```rust
+# OLD
+use canvas::{CanvasAction, ActionDispatcher, ActionResult};
+
+# NEW
+use canvas::{canvas::CanvasAction, dispatcher::ActionDispatcher, canvas::ActionResult};
+```
+
+### Step 2: Clean Up State Implementation
+
+**Remove legacy methods from your CanvasState implementation:**
+
+```rust
+impl CanvasState for YourFormState {
+    // Keep all the core methods:
+    fn current_field(&self) -> usize { /* ... */ }
+    fn get_current_input(&self) -> &str { /* ... */ }
+    // ... etc
+
+    // ❌ REMOVE these legacy methods:
+    // fn get_suggestions(&self) -> Option<&[String]>
+    // fn get_selected_suggestion_index(&self) -> Option<usize>
+    // fn set_selected_suggestion_index(&mut self, index: Option<usize>)
+    // fn activate_suggestions(&mut self, suggestions: Vec<String>)
+    // fn deactivate_suggestions(&mut self)
+}
+```
+
+### Step 3: Implement Rich Autocomplete (Optional)
+
+**If you want rich autocomplete features:**
+
+```rust
+use canvas::autocomplete::{AutocompleteCanvasState, SuggestionItem, AutocompleteState};
+
+impl AutocompleteCanvasState for YourFormState {
+    type SuggestionData = YourDataType; // e.g., Hit, CustomRecord, etc.
+
+    fn supports_autocomplete(&self, field_index: usize) -> bool {
+        // Define which fields support autocomplete
+        matches!(field_index, 2 | 3 | 5) // Example: only certain fields
+    }
+
+    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)
+    }
+}
+```
+
+**Add autocomplete field to your state:**
+```rust
+pub struct YourFormState {
+    // ... existing fields
+    pub autocomplete: AutocompleteState<YourDataType>,
+}
+```
+
+### Step 4: Migrate Suggestions
+
+**Old way (simple strings):**
+```rust
+let suggestions = vec!["John".to_string(), "Jane".to_string()];
+form_state.activate_suggestions(suggestions);
+```
+
+**New way (rich objects):**
+```rust
+let suggestions = vec![
+    SuggestionItem::new(
+        hit1,                                    // Your data object
+        "John Doe (Manager) | ID: 123".to_string(), // What user sees
+        "123".to_string(),                       // What gets stored
+    ),
+    SuggestionItem::simple(hit2, "Jane".to_string()), // Simple version
+];
+form_state.set_autocomplete_suggestions(suggestions);
+```
+
+### Step 5: Update Rendering
+
+**Old rendering:**
+```rust
+// Manual autocomplete rendering
+if form_state.autocomplete_active {
+    render_autocomplete_dropdown(/* ... */);
+}
+```
+
+**New rendering:**
+```rust
+// Canvas handles everything
+use canvas::canvas::render_canvas;
+
+let active_field_rect = render_canvas(f, area, form_state, theme, edit_mode, highlight_state);
+
+// Optional: Rich autocomplete (if implementing AutocompleteCanvasState)
+if form_state.is_autocomplete_active() {
+    if let Some(autocomplete_state) = form_state.autocomplete_state() {
+        canvas::autocomplete::render_autocomplete_dropdown(
+            f, f.area(), active_field_rect.unwrap(), theme, autocomplete_state
+        );
+    }
+}
+```
+
+### Step 6: Update Method Calls
+
+**Replace legacy method calls:**
+```rust
+# OLD
+form_state.deactivate_suggestions();
+
+# NEW - Option A: Add your own method
+impl YourFormState {
+    pub fn deactivate_autocomplete(&mut self) {
+        self.autocomplete_active = false;
+        self.autocomplete_suggestions.clear();
+        self.selected_suggestion_index = None;
+    }
+}
+form_state.deactivate_autocomplete();
+
+# NEW - Option B: Use rich autocomplete trait
+form_state.deactivate_autocomplete(); // If implementing AutocompleteCanvasState
+```
+
+## Benefits of New Architecture
+
+### 1. **Clean Separation of Concerns**
+- Canvas: Form rendering, navigation, input handling
+- Autocomplete: Rich suggestions, dropdown management, async loading
+
+### 2. **Type Safety**
+```rust
+// Old: Stringly typed
+let suggestions: Vec<String> = vec!["user1".to_string()];
+
+// New: Fully typed with your domain objects
+let suggestions: Vec<SuggestionItem<UserRecord>> = vec![
+    SuggestionItem::new(user_record, display_text, stored_value)
+];
+```
+
+### 3. **Rich UX Capabilities**
+- **Display vs Storage**: Show "John Doe (Manager)" but store user ID
+- **Loading States**: Built-in spinner/loading indicators
+- **Async Support**: Designed for async suggestion fetching
+- **Display Overrides**: Show friendly text while storing normalized data
+
+### 4. **Future-Proof**
+- Easy to add new autocomplete features
+- Canvas features don't interfere with autocomplete
+- Modular: Use only what you need
+
+## Advanced Features
+
+### Display Overrides
+Perfect for foreign key relationships:
+
+```rust
+// User selects "John Doe (Manager) | ID: 123"
+// Field stores: "123" (for database)
+// User sees: "John Doe" (friendly display)
+
+impl CanvasState for FormState {
+    fn get_display_value_for_field(&self, index: usize) -> &str {
+        if let Some(display_text) = self.link_display_map.get(&index) {
+            return display_text.as_str(); // Shows "John Doe"
+        }
+        self.inputs().get(index).map(|s| s.as_str()).unwrap_or("") // Shows "123"
+    }
+    
+    fn has_display_override(&self, index: usize) -> bool {
+        self.link_display_map.contains_key(&index)
+    }
+}
+```
+
+### Progressive Enhancement
+Start simple, add features when needed:
+
+```rust
+// Week 1: Basic usage
+SuggestionItem::simple(data, "John".to_string());
+
+// Week 5: Rich display
+SuggestionItem::new(data, "John Doe (Manager)".to_string(), "John".to_string());
+
+// Week 10: Store IDs, show names
+SuggestionItem::new(user, "John Doe (Manager)".to_string(), "123".to_string());
+```
+
+## Breaking Changes Summary
+
+1. **Import paths changed**: Add `canvas::` or `dispatcher::` prefixes
+2. **Legacy suggestion methods removed**: Replace with rich autocomplete or custom methods
+3. **No more simple suggestions**: Use `SuggestionItem` for typed suggestions
+4. **Trait split**: `AutocompleteCanvasState` is now separate and optional
+
+## Troubleshooting
+
+### Common Compilation Errors
+
+**Error**: `no method named 'get_suggestions' found`
+**Fix**: Remove legacy method from `CanvasState` implementation
+
+**Error**: `no 'CanvasState' in the root`
+**Fix**: Change `use canvas::CanvasState` to `use canvas::canvas::CanvasState`
+
+**Error**: `trait bound 'FormState: CanvasState' is not satisfied`
+**Fix**: Make sure your state properly implements the new `CanvasState` trait
+
+### Migration Checklist
+
+- [ ] Updated all import paths
+- [ ] Removed legacy methods from CanvasState implementation
+- [ ] Added custom autocomplete methods if needed
+- [ ] Updated suggestion usage to SuggestionItem
+- [ ] Updated rendering calls
+- [ ] Tested form functionality
+- [ ] Tested autocomplete functionality (if using)
+
+## Example: Complete Migration
+
+**Before:**
+```rust
+use canvas::{CanvasState, CanvasAction};
+
+impl CanvasState for FormState {
+    fn get_suggestions(&self) -> Option<&[String]> { /* ... */ }
+    fn deactivate_suggestions(&mut self) { /* ... */ }
+    // ... other methods
+}
+```
+
+**After:**
+```rust
+use canvas::canvas::{CanvasState, CanvasAction};
+use canvas::autocomplete::{AutocompleteCanvasState, SuggestionItem};
+
+impl CanvasState for FormState {
+    // Only core canvas methods, no suggestion methods
+    fn current_field(&self) -> usize { /* ... */ }
+    fn get_current_input(&self) -> &str { /* ... */ }
+    // ... other core methods only
+}
+
+impl AutocompleteCanvasState for FormState {
+    type SuggestionData = Hit;
+    
+    fn supports_autocomplete(&self, field_index: usize) -> bool {
+        self.fields[field_index].is_link
+    }
+    
+    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)
+    }
+}
+```
+
+This migration results in cleaner, more maintainable, and more powerful code!

canvas/Cargo.toml

@@ -0,0 +1,30 @@
+[package]
+name = "canvas"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+description.workspace = true
+readme.workspace = true
+repository.workspace = true
+categories.workspace = true
+
+[dependencies]
+common = { path = "../common" }
+ratatui = { workspace = true, optional = true }
+crossterm = { workspace = true }
+anyhow = { workspace = true }
+tokio = { workspace = true }
+toml = { workspace = true }
+serde = { workspace = true }
+unicode-width.workspace = true
+
+tracing = "0.1.41"
+tracing-subscriber = "0.3.19"
+
+[dev-dependencies]
+tokio-test = "0.4.4"
+
+[features]
+default = []
+gui = ["ratatui"]

canvas/README.md

@@ -0,0 +1,337 @@
+# Canvas 🎨
+
+A reusable, type-safe canvas system for building form-based TUI applications with vim-like modal editing.
+
+## ✨ Features
+
+- **Type-Safe Actions**: No more string-based action names - everything is compile-time checked
+- **Generic Design**: Implement `CanvasState` once, get navigation, editing, and suggestions for free
+- **Vim-Like Experience**: Modal editing with familiar keybindings
+- **Suggestion System**: Built-in autocomplete and suggestions support
+- **Framework Agnostic**: Works with any TUI framework or raw terminal handling
+- **Async Ready**: Full async/await support for modern Rust applications
+- **Batch Operations**: Execute multiple actions atomically
+- **Extensible**: Custom actions and feature-specific handling
+
+## 🚀 Quick Start
+
+Add to your `Cargo.toml`:
+
+```toml
+cargo add canvas
+```
+
+Implement the `CanvasState` trait:
+
+```rust
+use canvas::prelude::*;
+
+#[derive(Debug)]
+struct LoginForm {
+    current_field: usize,
+    cursor_pos: usize,
+    username: String,
+    password: String,
+    has_changes: bool,
+}
+
+impl CanvasState for LoginForm {
+    fn current_field(&self) -> usize { self.current_field }
+    fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+    fn set_current_field(&mut self, index: usize) { self.current_field = index; }
+    fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+    fn get_current_input(&self) -> &str {
+        match self.current_field {
+            0 => &self.username,
+            1 => &self.password,
+            _ => "",
+        }
+    }
+
+    fn get_current_input_mut(&mut self) -> &mut String {
+        match self.current_field {
+            0 => &mut self.username,
+            1 => &mut self.password,
+            _ => unreachable!(),
+        }
+    }
+
+    fn inputs(&self) -> Vec<&String> { vec![&self.username, &self.password] }
+    fn fields(&self) -> Vec<&str> { vec!["Username", "Password"] }
+    fn has_unsaved_changes(&self) -> bool { self.has_changes }
+    fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+}
+```
+
+Use the type-safe action dispatcher:
+
+```rust
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    let mut form = LoginForm::new();
+    let mut ideal_cursor = 0;
+
+    // Type a character - compile-time safe!
+    ActionDispatcher::dispatch(
+        CanvasAction::InsertChar('h'),
+        &mut form,
+        &mut ideal_cursor,
+    ).await?;
+
+    // Move to next field
+    ActionDispatcher::dispatch(
+        CanvasAction::NextField,
+        &mut form,
+        &mut ideal_cursor,
+    ).await?;
+
+    // Batch operations
+    let actions = vec![
+        CanvasAction::InsertChar('p'),
+        CanvasAction::InsertChar('a'),
+        CanvasAction::InsertChar('s'),
+        CanvasAction::InsertChar('s'),
+    ];
+
+    ActionDispatcher::dispatch_batch(actions, &mut form, &mut ideal_cursor).await?;
+
+    Ok(())
+}
+```
+
+## 🎯 Type-Safe Actions
+
+The Canvas system uses strongly-typed actions instead of error-prone strings:
+
+```rust
+// ✅ Type-safe - impossible to make typos
+ActionDispatcher::dispatch(CanvasAction::MoveLeft, &mut form, &mut cursor).await?;
+
+// ❌ Old way - runtime errors waiting to happen
+execute_edit_action("move_left", key, &mut form, &mut cursor).await?;
+execute_edit_action("move_leftt", key, &mut form, &mut cursor).await?; // Oops!
+```
+
+### Available Actions
+
+```rust
+pub enum CanvasAction {
+    // Character input
+    InsertChar(char),
+    
+    // Deletion
+    DeleteBackward,
+    DeleteForward,
+    
+    // Movement
+    MoveLeft, MoveRight, MoveUp, MoveDown,
+    MoveLineStart, MoveLineEnd,
+    MoveWordNext, MoveWordPrev,
+    
+    // Navigation
+    NextField, PrevField,
+    MoveFirstLine, MoveLastLine,
+    
+    // Suggestions
+    SuggestionUp, SuggestionDown,
+    SelectSuggestion, ExitSuggestions,
+    
+    // Extensibility
+    Custom(String),
+}
+```
+
+## 🔧 Advanced Features
+
+### Suggestions and Autocomplete
+
+```rust
+impl CanvasState for MyForm {
+    fn get_suggestions(&self) -> Option<&[String]> {
+        if self.suggestions.is_active {
+            Some(&self.suggestions.suggestions)
+        } else {
+            None
+        }
+    }
+
+    fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+        match action {
+            CanvasAction::InsertChar('@') => {
+                // Trigger email suggestions
+                let suggestions = vec![
+                    format!("{}@gmail.com", self.username),
+                    format!("{}@company.com", self.username),
+                ];
+                self.activate_suggestions(suggestions);
+                None // Let generic handler insert the '@'
+            }
+            CanvasAction::SelectSuggestion => {
+                if let Some(suggestion) = self.suggestions.get_selected() {
+                    *self.get_current_input_mut() = suggestion.clone();
+                    self.deactivate_autocomplete();
+                    Some("Applied suggestion".to_string())
+                }
+                None
+            }
+            _ => None,
+        }
+    }
+}
+```
+
+### Custom Actions
+
+```rust
+fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+    match action {
+        CanvasAction::Custom(cmd) => match cmd.as_str() {
+            "uppercase" => {
+                *self.get_current_input_mut() = self.get_current_input().to_uppercase();
+                Some("Converted to uppercase".to_string())
+            }
+            "validate_email" => {
+                if self.get_current_input().contains('@') {
+                    Some("Email is valid".to_string())
+                } else {
+                    Some("Invalid email format".to_string())
+                }
+            }
+            _ => None,
+        },
+        _ => None,
+    }
+}
+```
+
+### Integration with TUI Frameworks
+
+Canvas is framework-agnostic and works with any TUI library:
+
+```rust
+// Works with crossterm (see examples)
+// Works with termion
+// Works with ratatui/tui-rs
+// Works with cursive
+// Works with raw terminal I/O
+```
+
+## 🏗️ Architecture
+
+Canvas follows a clean, layered architecture:
+
+```
+┌─────────────────────────────────────┐
+│           Your Application          │
+├─────────────────────────────────────┤
+│         ActionDispatcher            │  ← High-level API
+├─────────────────────────────────────┤
+│     CanvasAction (Type-Safe)        │  ← Type safety layer
+├─────────────────────────────────────┤
+│        Action Handlers              │  ← Core logic
+├─────────────────────────────────────┤
+│        CanvasState Trait            │  ← Your implementation
+└─────────────────────────────────────┘
+```
+
+## 🤝 Why Canvas?
+
+### Before Canvas
+```rust
+// ❌ Error-prone string actions
+execute_action("move_left", key, state)?;
+execute_action("move_leftt", key, state)?; // Runtime error!
+
+// ❌ Duplicate navigation logic everywhere
+impl MyLoginForm { /* navigation code */ }
+impl MyConfigForm { /* same navigation code */ }
+impl MyDataForm { /* same navigation code again */ }
+
+// ❌ Manual cursor and field management
+if key == Key::Tab {
+    current_field = (current_field + 1) % fields.len();
+    cursor_pos = cursor_pos.min(current_input.len());
+}
+```
+
+### With Canvas
+```rust
+// ✅ Type-safe actions
+ActionDispatcher::dispatch(CanvasAction::MoveLeft, state, cursor)?;
+// Typos are impossible - won't compile!
+
+// ✅ Implement once, use everywhere
+impl CanvasState for MyForm { /* minimal implementation */ }
+// All navigation, editing, suggestions work automatically!
+
+// ✅ High-level operations
+ActionDispatcher::dispatch_batch(actions, state, cursor)?;
+```
+
+## 📖 Documentation
+
+- **API Docs**: `cargo doc --open`
+- **Examples**: See `examples/` directory
+- **Migration Guide**: See `CANVAS_MIGRATION.md`
+
+## 🔄 Migration from String-Based Actions
+
+Canvas provides backwards compatibility during migration:
+
+```rust
+// Legacy support (deprecated)
+execute_edit_action("move_left", key, state, cursor).await?;
+
+// New type-safe way
+ActionDispatcher::dispatch(CanvasAction::MoveLeft, state, cursor).await?;
+```
+
+## 🧪 Testing
+
+```bash
+# Run all tests
+cargo test
+
+# Run specific example
+cargo run --example simple_login
+
+# Check type safety
+cargo check
+```
+
+## 📋 Requirements
+
+- Rust 1.70+
+- Terminal with cursor support
+- Optional: async runtime (tokio) for examples
+
+## 🤔 FAQ
+
+**Q: Does Canvas work with [my TUI framework]?**  
+A: Yes! Canvas is framework-agnostic. Just implement `CanvasState` and handle the key events.
+
+**Q: Can I extend Canvas with custom actions?**  
+A: Absolutely! Use `CanvasAction::Custom("my_action")` or implement `handle_feature_action`.
+
+**Q: Is Canvas suitable for complex forms?**  
+A: Yes! See the `config_screen` example for validation, suggestions, and multi-field forms.
+
+**Q: How do I migrate from string-based actions?**  
+A: Canvas provides backwards compatibility. Migrate incrementally using the type-safe APIs.
+
+## 📄 License
+
+Licensed under either of:
+- Apache License, Version 2.0 ([LICENSE-APACHE](LICENSE-APACHE))
+- MIT License ([LICENSE-MIT](LICENSE-MIT))
+
+at your option.
+
+## 🙏 Contributing
+
+Will write here something later on, too busy rn
+
+---
+
+Built with ❤️ for the Rust TUI community

canvas/canvas_config.toml

@@ -0,0 +1,58 @@
+# canvas_config.toml - Complete Canvas Configuration
+
+[behavior]
+wrap_around_fields = true
+auto_save_on_field_change = false
+word_chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_"
+max_suggestions = 6
+
+[appearance]
+cursor_style = "block"  # "block", "bar", "underline"
+show_field_numbers = false
+highlight_current_field = true
+
+# Read-only mode keybindings (vim-style)
+[keybindings.read_only]
+move_left = ["h"]
+move_right = ["l"] 
+move_up = ["k"]
+move_down = ["j"]
+move_word_next = ["w"]
+move_word_end = ["e"]
+move_word_prev = ["b"]
+move_word_end_prev = ["ge"]
+move_line_start = ["0"]
+move_line_end = ["$"]
+move_first_line = ["gg"]
+move_last_line = ["shift+g"]
+next_field = ["Tab"]
+prev_field = ["Shift+Tab"]
+
+# Edit mode keybindings
+[keybindings.edit]
+delete_char_backward = ["Backspace"]
+delete_char_forward = ["Delete"]
+move_left = ["Left"]
+move_right = ["Right"]
+move_up = ["Up"]
+move_down = ["Down"]
+move_line_start = ["Home"]
+move_line_end = ["End"]
+move_word_next = ["Ctrl+Right"]
+move_word_prev = ["Ctrl+Left"]
+next_field = ["Tab"]
+prev_field = ["Shift+Tab"]
+trigger_autocomplete = ["Ctrl+p"]
+
+
+# Suggestion/autocomplete keybindings
+[keybindings.suggestions]
+suggestion_up = ["Up", "Ctrl+p"]
+suggestion_down = ["Down", "Ctrl+n"]
+select_suggestion = ["Enter", "Tab"]
+exit_suggestions = ["Esc"]
+
+# Global keybindings (work in both modes)
+[keybindings.global]
+move_up = ["Up"]
+move_down = ["Down"]

canvas/integration_patterns.rs

@@ -0,0 +1,620 @@
+// examples/integration_patterns.rs
+//! Advanced integration patterns showing how Canvas works with:
+//! - State management patterns
+//! - Event-driven architectures
+//! - Validation systems
+//! - Custom rendering
+//!
+//! Run with: cargo run --example integration_patterns
+
+use canvas::prelude::*;
+use std::collections::HashMap;
+
+#[tokio::main]
+async fn main() {
+    println!("🔧 Canvas Integration Patterns");
+    println!("==============================\n");
+
+    // Pattern 1: State machine integration
+    state_machine_example().await;
+
+    // Pattern 2: Event-driven architecture
+    event_driven_example().await;
+
+    // Pattern 3: Validation pipeline
+    validation_pipeline_example().await;
+
+    // Pattern 4: Multi-form orchestration
+    multi_form_example().await;
+}
+
+// Pattern 1: Canvas with state machine
+async fn state_machine_example() {
+    println!("🔄 Pattern 1: State Machine Integration");
+
+    #[derive(Debug, Clone, PartialEq)]
+    enum FormState {
+        Initial,
+        Editing,
+        Validating,
+        Submitting,
+        Success,
+        Error(String),
+    }
+
+    #[derive(Debug)]
+    struct StateMachineForm {
+        // Canvas state
+        current_field: usize,
+        cursor_pos: usize,
+        username: String,
+        password: String,
+        has_changes: bool,
+
+        // State machine
+        state: FormState,
+    }
+
+    impl StateMachineForm {
+        fn new() -> Self {
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                username: String::new(),
+                password: String::new(),
+                has_changes: false,
+                state: FormState::Initial,
+            }
+        }
+
+        fn transition_to(&mut self, new_state: FormState) -> String {
+            let old_state = self.state.clone();
+            self.state = new_state;
+            format!("State transition: {:?} -> {:?}", old_state, self.state)
+        }
+
+        fn can_submit(&self) -> bool {
+            matches!(self.state, FormState::Editing) &&
+            !self.username.trim().is_empty() &&
+            !self.password.trim().is_empty()
+        }
+    }
+
+    impl CanvasState for StateMachineForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index.min(1); }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str {
+            match self.current_field {
+                0 => &self.username,
+                1 => &self.password,
+                _ => "",
+            }
+        }
+
+        fn get_current_input_mut(&mut self) -> &mut String {
+            match self.current_field {
+                0 => &mut self.username,
+                1 => &mut self.password,
+                _ => unreachable!(),
+            }
+        }
+
+        fn inputs(&self) -> Vec<&String> { vec![&self.username, &self.password] }
+        fn fields(&self) -> Vec<&str> { vec!["Username", "Password"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+
+        fn set_has_unsaved_changes(&mut self, changed: bool) {
+            self.has_changes = changed;
+            // Transition to editing state when user starts typing
+            if changed && self.state == FormState::Initial {
+                self.state = FormState::Editing;
+            }
+        }
+
+        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+            match action {
+                CanvasAction::Custom(cmd) => match cmd.as_str() {
+                    "submit" => {
+                        if self.can_submit() {
+                            let msg = self.transition_to(FormState::Submitting);
+                            // Simulate submission
+                            self.state = FormState::Success;
+                            Some(format!("{} -> Form submitted successfully", msg))
+                        } else {
+                            let msg = self.transition_to(FormState::Error("Invalid form data".to_string()));
+                            Some(msg)
+                        }
+                    }
+                    "reset" => {
+                        self.username.clear();
+                        self.password.clear();
+                        self.has_changes = false;
+                        Some(self.transition_to(FormState::Initial))
+                    }
+                    _ => None,
+                },
+                _ => None,
+            }
+        }
+    }
+
+    let mut form = StateMachineForm::new();
+    let mut ideal_cursor = 0;
+
+    println!("  Initial state: {:?}", form.state);
+
+    // Type some text to trigger state change
+    let _result = ActionDispatcher::dispatch(
+        CanvasAction::InsertChar('u'),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+    println!("  After typing: {:?}", form.state);
+
+    // Try to submit (should fail)
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("submit".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+    println!("  Submit result: {}", result.message().unwrap_or(""));
+    println!("  ✅ State machine integration works!\n");
+}
+
+// Pattern 2: Event-driven architecture
+async fn event_driven_example() {
+    println!("📡 Pattern 2: Event-Driven Architecture");
+
+    #[derive(Debug, Clone)]
+    enum FormEvent {
+        FieldChanged { field: usize, old_value: String, new_value: String },
+        ValidationTriggered { field: usize, is_valid: bool },
+        ActionExecuted { action: String, success: bool },
+    }
+
+    #[derive(Debug)]
+    struct EventDrivenForm {
+        current_field: usize,
+        cursor_pos: usize,
+        email: String,
+        has_changes: bool,
+        events: Vec<FormEvent>,
+    }
+
+    impl EventDrivenForm {
+        fn new() -> Self {
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                email: String::new(),
+                has_changes: false,
+                events: Vec::new(),
+            }
+        }
+
+        fn emit_event(&mut self, event: FormEvent) {
+            println!("  📡 Event: {:?}", event);
+            self.events.push(event);
+        }
+
+        fn validate_email(&self) -> bool {
+            self.email.contains('@') && self.email.contains('.')
+        }
+    }
+
+    impl CanvasState for EventDrivenForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index; }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str { &self.email }
+        fn get_current_input_mut(&mut self) -> &mut String { &mut self.email }
+        fn inputs(&self) -> Vec<&String> { vec![&self.email] }
+        fn fields(&self) -> Vec<&str> { vec!["Email"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+
+        fn set_has_unsaved_changes(&mut self, changed: bool) {
+            if changed != self.has_changes {
+                let old_value = if self.has_changes { "modified" } else { "unmodified" };
+                let new_value = if changed { "modified" } else { "unmodified" };
+
+                self.emit_event(FormEvent::FieldChanged {
+                    field: self.current_field,
+                    old_value: old_value.to_string(),
+                    new_value: new_value.to_string(),
+                });
+            }
+            self.has_changes = changed;
+        }
+
+        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+            match action {
+                CanvasAction::Custom(cmd) => match cmd.as_str() {
+                    "validate" => {
+                        let is_valid = self.validate_email();
+                        self.emit_event(FormEvent::ValidationTriggered {
+                            field: self.current_field,
+                            is_valid,
+                        });
+
+                        self.emit_event(FormEvent::ActionExecuted {
+                            action: "validate".to_string(),
+                            success: true,
+                        });
+
+                        if is_valid {
+                            Some("Email is valid!".to_string())
+                        } else {
+                            Some("Email is invalid".to_string())
+                        }
+                    }
+                    _ => None,
+                },
+                _ => None,
+            }
+        }
+    }
+
+    let mut form = EventDrivenForm::new();
+    let mut ideal_cursor = 0;
+
+    // Type an email address
+    let email = "user@example.com";
+    for c in email.chars() {
+        ActionDispatcher::dispatch(
+            CanvasAction::InsertChar(c),
+            &mut form,
+            &mut ideal_cursor,
+        ).await.unwrap();
+    }
+
+    // Validate the email
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("validate".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+
+    println!("  Final email: {}", form.email);
+    println!("  Validation result: {}", result.message().unwrap_or(""));
+    println!("  Total events captured: {}", form.events.len());
+    println!("  ✅ Event-driven architecture works!\n");
+}
+
+// Pattern 3: Validation pipeline
+async fn validation_pipeline_example() {
+    println!("✅ Pattern 3: Validation Pipeline");
+
+    type ValidationRule = Box<dyn Fn(&str) -> Result<(), String>>;
+
+    // Custom Debug implementation since function pointers don't implement Debug
+    struct ValidatedForm {
+        current_field: usize,
+        cursor_pos: usize,
+        password: String,
+        has_changes: bool,
+        validators: HashMap<usize, Vec<ValidationRule>>,
+    }
+
+    impl std::fmt::Debug for ValidatedForm {
+        fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+            f.debug_struct("ValidatedForm")
+                .field("current_field", &self.current_field)
+                .field("cursor_pos", &self.cursor_pos)
+                .field("password", &self.password)
+                .field("has_changes", &self.has_changes)
+                .field("validators", &format!("HashMap with {} entries", self.validators.len()))
+                .finish()
+        }
+    }
+
+    impl ValidatedForm {
+        fn new() -> Self {
+            let mut validators: HashMap<usize, Vec<ValidationRule>> = HashMap::new();
+
+            // Password validators
+            let mut password_validators: Vec<ValidationRule> = Vec::new();
+            password_validators.push(Box::new(|value| {
+                if value.len() < 8 {
+                    Err("Password must be at least 8 characters".to_string())
+                } else {
+                    Ok(())
+                }
+            }));
+            password_validators.push(Box::new(|value| {
+                if !value.chars().any(|c| c.is_uppercase()) {
+                    Err("Password must contain at least one uppercase letter".to_string())
+                } else {
+                    Ok(())
+                }
+            }));
+            password_validators.push(Box::new(|value| {
+                if !value.chars().any(|c| c.is_numeric()) {
+                    Err("Password must contain at least one number".to_string())
+                } else {
+                    Ok(())
+                }
+            }));
+
+            validators.insert(0, password_validators);
+
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                password: String::new(),
+                has_changes: false,
+                validators,
+            }
+        }
+
+        fn validate_field(&self, field_index: usize) -> Vec<String> {
+            let mut errors = Vec::new();
+
+            if let Some(validators) = self.validators.get(&field_index) {
+                let value = match field_index {
+                    0 => &self.password,
+                    _ => return errors,
+                };
+
+                for validator in validators {
+                    if let Err(error) = validator(value) {
+                        errors.push(error);
+                    }
+                }
+            }
+
+            errors
+        }
+    }
+
+    impl CanvasState for ValidatedForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index; }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str { &self.password }
+        fn get_current_input_mut(&mut self) -> &mut String { &mut self.password }
+        fn inputs(&self) -> Vec<&String> { vec![&self.password] }
+        fn fields(&self) -> Vec<&str> { vec!["Password"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+
+        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+            match action {
+                CanvasAction::Custom(cmd) => match cmd.as_str() {
+                    "validate" => {
+                        let errors = self.validate_field(self.current_field);
+                        if errors.is_empty() {
+                            Some("Password meets all requirements!".to_string())
+                        } else {
+                            Some(format!("Validation errors: {}", errors.join(", ")))
+                        }
+                    }
+                    _ => None,
+                },
+                _ => None,
+            }
+        }
+    }
+
+    let mut form = ValidatedForm::new();
+    let mut ideal_cursor = 0;
+
+    // Test with weak password
+    let weak_password = "abc";
+    for c in weak_password.chars() {
+        ActionDispatcher::dispatch(
+            CanvasAction::InsertChar(c),
+            &mut form,
+            &mut ideal_cursor,
+        ).await.unwrap();
+    }
+
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("validate".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+    println!("  Weak password '{}': {}", form.password, result.message().unwrap_or(""));
+
+    // Clear and test with strong password
+    form.password.clear();
+    form.cursor_pos = 0;
+
+    let strong_password = "StrongPass123";
+    for c in strong_password.chars() {
+        ActionDispatcher::dispatch(
+            CanvasAction::InsertChar(c),
+            &mut form,
+            &mut ideal_cursor,
+        ).await.unwrap();
+    }
+
+    let result = ActionDispatcher::dispatch(
+        CanvasAction::Custom("validate".to_string()),
+        &mut form,
+        &mut ideal_cursor,
+    ).await.unwrap();
+    println!("  Strong password '{}': {}", form.password, result.message().unwrap_or(""));
+    println!("  ✅ Validation pipeline works!\n");
+}
+
+// Pattern 4: Multi-form orchestration
+async fn multi_form_example() {
+    println!("🎭 Pattern 4: Multi-Form Orchestration");
+
+    #[derive(Debug)]
+    struct PersonalInfoForm {
+        current_field: usize,
+        cursor_pos: usize,
+        name: String,
+        age: String,
+        has_changes: bool,
+    }
+
+    #[derive(Debug)]
+    struct ContactInfoForm {
+        current_field: usize,
+        cursor_pos: usize,
+        email: String,
+        phone: String,
+        has_changes: bool,
+    }
+
+    // Implement CanvasState for both forms
+    impl CanvasState for PersonalInfoForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index.min(1); }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str {
+            match self.current_field {
+                0 => &self.name,
+                1 => &self.age,
+                _ => "",
+            }
+        }
+
+        fn get_current_input_mut(&mut self) -> &mut String {
+            match self.current_field {
+                0 => &mut self.name,
+                1 => &mut self.age,
+                _ => unreachable!(),
+            }
+        }
+
+        fn inputs(&self) -> Vec<&String> { vec![&self.name, &self.age] }
+        fn fields(&self) -> Vec<&str> { vec!["Name", "Age"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+    }
+
+    impl CanvasState for ContactInfoForm {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index.min(1); }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str {
+            match self.current_field {
+                0 => &self.email,
+                1 => &self.phone,
+                _ => "",
+            }
+        }
+
+        fn get_current_input_mut(&mut self) -> &mut String {
+            match self.current_field {
+                0 => &mut self.email,
+                1 => &mut self.phone,
+                _ => unreachable!(),
+            }
+        }
+
+        fn inputs(&self) -> Vec<&String> { vec![&self.email, &self.phone] }
+        fn fields(&self) -> Vec<&str> { vec!["Email", "Phone"] }
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+    }
+
+    // Form orchestrator
+    #[derive(Debug)]
+    struct FormOrchestrator {
+        personal_form: PersonalInfoForm,
+        contact_form: ContactInfoForm,
+        current_form: usize, // 0 = personal, 1 = contact
+    }
+
+    impl FormOrchestrator {
+        fn new() -> Self {
+            Self {
+                personal_form: PersonalInfoForm {
+                    current_field: 0,
+                    cursor_pos: 0,
+                    name: String::new(),
+                    age: String::new(),
+                    has_changes: false,
+                },
+                contact_form: ContactInfoForm {
+                    current_field: 0,
+                    cursor_pos: 0,
+                    email: String::new(),
+                    phone: String::new(),
+                    has_changes: false,
+                },
+                current_form: 0,
+            }
+        }
+
+        async fn execute_action(&mut self, action: CanvasAction) -> ActionResult {
+            let mut ideal_cursor = 0;
+
+            match self.current_form {
+                0 => ActionDispatcher::dispatch(action, &mut self.personal_form, &mut ideal_cursor).await.unwrap(),
+                1 => ActionDispatcher::dispatch(action, &mut self.contact_form, &mut ideal_cursor).await.unwrap(),
+                _ => ActionResult::error("Invalid form index"),
+            }
+        }
+
+        fn switch_form(&mut self) -> String {
+            self.current_form = (self.current_form + 1) % 2;
+            match self.current_form {
+                0 => "Switched to Personal Info form".to_string(),
+                1 => "Switched to Contact Info form".to_string(),
+                _ => "Unknown form".to_string(),
+            }
+        }
+
+        fn current_form_name(&self) -> &str {
+            match self.current_form {
+                0 => "Personal Info",
+                1 => "Contact Info",
+                _ => "Unknown",
+            }
+        }
+    }
+
+    let mut orchestrator = FormOrchestrator::new();
+
+    println!("  Current form: {}", orchestrator.current_form_name());
+
+    // Fill personal info
+    for &c in &['J', 'o', 'h', 'n'] {
+        orchestrator.execute_action(CanvasAction::InsertChar(c)).await;
+    }
+
+    orchestrator.execute_action(CanvasAction::NextField).await;
+
+    for &c in &['2', '5'] {
+        orchestrator.execute_action(CanvasAction::InsertChar(c)).await;
+    }
+
+    println!("  Personal form - Name: '{}', Age: '{}'",
+             orchestrator.personal_form.name,
+             orchestrator.personal_form.age);
+
+    // Switch to contact form
+    let switch_msg = orchestrator.switch_form();
+    println!("  {}", switch_msg);
+
+    // Fill contact info
+    for &c in &['j', 'o', 'h', 'n', '@', 'e', 'x', 'a', 'm', 'p', 'l', 'e', '.', 'c', 'o', 'm'] {
+        orchestrator.execute_action(CanvasAction::InsertChar(c)).await;
+    }
+
+    orchestrator.execute_action(CanvasAction::NextField).await;
+
+    for &c in &['5', '5', '5', '-', '1', '2', '3', '4'] {
+        orchestrator.execute_action(CanvasAction::InsertChar(c)).await;
+    }
+
+    println!("  Contact form - Email: '{}', Phone: '{}'",
+             orchestrator.contact_form.email,
+             orchestrator.contact_form.phone);
+}

canvas/src/autocomplete/actions.rs

@@ -0,0 +1,133 @@
+// canvas/src/autocomplete/actions.rs
+
+use crate::canvas::state::{CanvasState, ActionContext};
+use crate::autocomplete::state::AutocompleteCanvasState;
+use crate::canvas::actions::types::{CanvasAction, ActionResult};
+use crate::canvas::actions::edit::handle_generic_canvas_action;
+use crate::config::CanvasConfig;
+use anyhow::Result;
+
+/// Version for states that implement rich autocomplete
+pub async fn execute_canvas_action_with_autocomplete<S: CanvasState + AutocompleteCanvasState>(
+    action: CanvasAction,
+    state: &mut S,
+    ideal_cursor_column: &mut usize,
+    config: Option<&CanvasConfig>,
+) -> Result<ActionResult> {
+    // 1. Try feature-specific handler first
+    let context = ActionContext {
+        key_code: None,
+        ideal_cursor_column: *ideal_cursor_column,
+        current_input: state.get_current_input().to_string(),
+        current_field: state.current_field(),
+    };
+
+    if let Some(result) = handle_rich_autocomplete_action(action.clone(), state, &context) {
+        return Ok(result);
+    }
+
+    // 2. Handle generic actions and add auto-trigger logic
+    let result = handle_generic_canvas_action(action.clone(), state, ideal_cursor_column, config).await?;
+    
+    // 3. AUTO-TRIGGER LOGIC: Check if we should activate/deactivate autocomplete
+    if let Some(cfg) = config {
+        println!("{:?}, {}", action, cfg.should_auto_trigger_autocomplete());
+        if cfg.should_auto_trigger_autocomplete() {
+            println!("AUTO-TRIGGER");
+            match action {
+                CanvasAction::InsertChar(_) => {
+                    println!("AUTO-T on Ins");
+                    let current_field = state.current_field();
+                    let current_input = state.get_current_input();
+                    
+                    if state.supports_autocomplete(current_field)
+                        && !state.is_autocomplete_active()
+                        && current_input.len() >= 1 
+                    {
+                        println!("ACT AUTOC");
+                        state.activate_autocomplete();
+                    }
+                }
+                
+                CanvasAction::NextField | CanvasAction::PrevField => {
+                    println!("AUTO-T on nav");
+                    let current_field = state.current_field();
+                    
+                    if state.supports_autocomplete(current_field) && !state.is_autocomplete_active() {
+                        state.activate_autocomplete();
+                    } else if !state.supports_autocomplete(current_field) && state.is_autocomplete_active() {
+                        state.deactivate_autocomplete();
+                    }
+                }
+                
+                _ => {} // No auto-trigger for other actions
+            }
+        }
+    }
+
+    Ok(result)
+}
+
+/// Handle rich autocomplete actions for AutocompleteCanvasState
+fn handle_rich_autocomplete_action<S: CanvasState + AutocompleteCanvasState>(
+    action: CanvasAction,
+    state: &mut S,
+    _context: &ActionContext,
+) -> Option<ActionResult> {
+    match action {
+        CanvasAction::TriggerAutocomplete => {
+            let current_field = state.current_field();
+            if state.supports_autocomplete(current_field) {
+                state.activate_autocomplete();
+                Some(ActionResult::success_with_message("Autocomplete activated"))
+            } else {
+                Some(ActionResult::success_with_message("Autocomplete not supported for this field"))
+            }
+        }
+
+        CanvasAction::SuggestionUp => {
+            if state.is_autocomplete_ready() {
+                if let Some(autocomplete_state) = state.autocomplete_state_mut() {
+                    autocomplete_state.select_previous();
+                }
+                Some(ActionResult::success())
+            } else {
+                Some(ActionResult::success_with_message("No suggestions available"))
+            }
+        }
+
+        CanvasAction::SuggestionDown => {
+            if state.is_autocomplete_ready() {
+                if let Some(autocomplete_state) = state.autocomplete_state_mut() {
+                    autocomplete_state.select_next();
+                }
+                Some(ActionResult::success())
+            } else {
+                Some(ActionResult::success_with_message("No suggestions available"))
+            }
+        }
+
+        CanvasAction::SelectSuggestion => {
+            if state.is_autocomplete_ready() {
+                if let Some(msg) = state.apply_autocomplete_selection() {
+                    Some(ActionResult::success_with_message(&msg))
+                } else {
+                    Some(ActionResult::success_with_message("No suggestion selected"))
+                }
+            } else {
+                Some(ActionResult::success_with_message("No suggestions available"))
+            }
+        }
+
+        CanvasAction::ExitSuggestions => {
+            if state.is_autocomplete_active() {
+                state.deactivate_autocomplete();
+                Some(ActionResult::success_with_message("Exited autocomplete"))
+            } else {
+                Some(ActionResult::success())
+            }
+        }
+
+        _ => None, // Not a rich autocomplete action
+    }
+}

canvas/src/autocomplete/gui.rs

@@ -0,0 +1,191 @@
+// canvas/src/autocomplete/gui.rs
+
+#[cfg(feature = "gui")]
+use ratatui::{
+    layout::{Alignment, Rect},
+    style::{Modifier, Style},
+    widgets::{Block, Borders, List, ListItem, ListState, Paragraph},
+    Frame,
+};
+
+use crate::autocomplete::types::AutocompleteState;
+
+#[cfg(feature = "gui")]
+use crate::canvas::theme::CanvasTheme;
+
+#[cfg(feature = "gui")]
+use unicode_width::UnicodeWidthStr;
+
+/// Render autocomplete dropdown - call this AFTER rendering canvas
+#[cfg(feature = "gui")]
+pub fn render_autocomplete_dropdown<T: CanvasTheme>(
+    f: &mut Frame,
+    frame_area: Rect,
+    input_rect: Rect,
+    theme: &T,
+    autocomplete_state: &AutocompleteState<impl Clone + Send + 'static>,
+) {
+    if !autocomplete_state.is_active {
+        return;
+    }
+
+    if autocomplete_state.is_loading {
+        render_loading_indicator(f, frame_area, input_rect, theme);
+    } else if !autocomplete_state.suggestions.is_empty() {
+        render_suggestions_dropdown(f, frame_area, input_rect, theme, autocomplete_state);
+    }
+}
+
+/// Show loading spinner/text
+#[cfg(feature = "gui")]
+fn render_loading_indicator<T: CanvasTheme>(
+    f: &mut Frame,
+    frame_area: Rect,
+    input_rect: Rect,
+    theme: &T,
+) {
+    let loading_text = "Loading suggestions...";
+    let loading_width = loading_text.width() as u16 + 4; // +4 for borders and padding
+    let loading_height = 3;
+
+    let dropdown_area = calculate_dropdown_position(
+        input_rect,
+        frame_area,
+        loading_width,
+        loading_height,
+    );
+
+    let loading_block = Block::default()
+        .style(Style::default().bg(theme.bg()));
+
+    let loading_paragraph = Paragraph::new(loading_text)
+        .block(loading_block)
+        .style(Style::default().fg(theme.fg()))
+        .alignment(Alignment::Center);
+
+    f.render_widget(loading_paragraph, dropdown_area);
+}
+
+/// Show actual suggestions list
+#[cfg(feature = "gui")]
+fn render_suggestions_dropdown<T: CanvasTheme>(
+    f: &mut Frame,
+    frame_area: Rect,
+    input_rect: Rect,
+    theme: &T,
+    autocomplete_state: &AutocompleteState<impl Clone + Send + 'static>,
+) {
+    let display_texts: Vec<&str> = autocomplete_state.suggestions
+        .iter()
+        .map(|item| item.display_text.as_str())
+        .collect();
+
+    let dropdown_dimensions = calculate_dropdown_dimensions(&display_texts);
+    let dropdown_area = calculate_dropdown_position(
+        input_rect,
+        frame_area,
+        dropdown_dimensions.width,
+        dropdown_dimensions.height,
+    );
+
+    // Background
+    let dropdown_block = Block::default()
+        .style(Style::default().bg(theme.bg()));
+
+    // List items
+    let items = create_suggestion_list_items(
+        &display_texts,
+        autocomplete_state.selected_index,
+        dropdown_dimensions.width,
+        theme,
+    );
+
+    let list = List::new(items).block(dropdown_block);
+    let mut list_state = ListState::default();
+    list_state.select(autocomplete_state.selected_index);
+
+    f.render_stateful_widget(list, dropdown_area, &mut list_state);
+}
+
+/// Calculate dropdown size based on suggestions - updated to match client dimensions
+#[cfg(feature = "gui")]
+fn calculate_dropdown_dimensions(display_texts: &[&str]) -> DropdownDimensions {
+    let max_width = display_texts
+        .iter()
+        .map(|text| text.width())
+        .max()
+        .unwrap_or(0) as u16;
+
+    let horizontal_padding = 2; // Changed from 4 to 2 to match client
+    let width = (max_width + horizontal_padding).max(10); // Changed from 12 to 10 to match client
+    let height = (display_texts.len() as u16).min(5); // Removed +2 since no borders
+
+    DropdownDimensions { width, height }
+}
+
+/// Position dropdown to stay in bounds
+#[cfg(feature = "gui")]
+fn calculate_dropdown_position(
+    input_rect: Rect,
+    frame_area: Rect,
+    dropdown_width: u16,
+    dropdown_height: u16,
+) -> Rect {
+    let mut dropdown_area = Rect {
+        x: input_rect.x,
+        y: input_rect.y + 1, // below input field
+        width: dropdown_width,
+        height: dropdown_height,
+    };
+
+    // Keep in bounds
+    if dropdown_area.bottom() > frame_area.height {
+        dropdown_area.y = input_rect.y.saturating_sub(dropdown_height);
+    }
+    if dropdown_area.right() > frame_area.width {
+        dropdown_area.x = frame_area.width.saturating_sub(dropdown_width);
+    }
+    dropdown_area.x = dropdown_area.x.max(0);
+    dropdown_area.y = dropdown_area.y.max(0);
+
+    dropdown_area
+}
+
+/// Create styled list items - updated to match client spacing
+#[cfg(feature = "gui")]
+fn create_suggestion_list_items<'a, T: CanvasTheme>(
+    display_texts: &'a [&'a str],
+    selected_index: Option<usize>,
+    dropdown_width: u16,
+    theme: &T,
+) -> Vec<ListItem<'a>> {
+    let horizontal_padding = 2; // Changed from 4 to 2 to match client
+    let available_width = dropdown_width; // No border padding needed
+
+    display_texts
+        .iter()
+        .enumerate()
+        .map(|(i, text)| {
+            let is_selected = selected_index == Some(i);
+            let text_width = text.width() as u16;
+            let padding_needed = available_width.saturating_sub(text_width);
+            let padded_text = format!("{}{}", text, " ".repeat(padding_needed as usize));
+
+            ListItem::new(padded_text).style(if is_selected {
+                Style::default()
+                    .fg(theme.bg())
+                    .bg(theme.highlight())
+                    .add_modifier(Modifier::BOLD)
+            } else {
+                Style::default().fg(theme.fg()).bg(theme.bg())
+            })
+        })
+        .collect()
+}
+
+/// Helper struct for dropdown dimensions
+#[cfg(feature = "gui")]
+struct DropdownDimensions {
+    width: u16,
+    height: u16,
+}

canvas/src/autocomplete/mod.rs

@@ -0,0 +1,10 @@
+// src/autocomplete/mod.rs
+pub mod types;
+pub mod gui;
+pub mod state;
+pub mod actions;
+
+// Re-export autocomplete types
+pub use types::{SuggestionItem, AutocompleteState};
+pub use state::AutocompleteCanvasState;
+pub use actions::execute_canvas_action_with_autocomplete;

canvas/src/autocomplete/state.rs

@@ -0,0 +1,96 @@
+// canvas/src/state.rs
+
+use crate::canvas::state::CanvasState;
+
+/// OPTIONAL extension trait for states that want rich autocomplete functionality.
+/// Only implement this if you need the new autocomplete features.
+pub trait AutocompleteCanvasState: CanvasState {
+    /// Associated type for suggestion data (e.g., Hit, String, CustomType)
+    type SuggestionData: Clone + Send + 'static;
+
+    /// Check if a field supports autocomplete
+    fn supports_autocomplete(&self, _field_index: usize) -> bool {
+        false // Default: no autocomplete support
+    }
+
+    /// Get autocomplete state (read-only)
+    fn autocomplete_state(&self) -> Option<&crate::autocomplete::AutocompleteState<Self::SuggestionData>> {
+        None // Default: no autocomplete state
+    }
+
+    /// Get autocomplete state (mutable)
+    fn autocomplete_state_mut(&mut self) -> Option<&mut crate::autocomplete::AutocompleteState<Self::SuggestionData>> {
+        None // Default: no autocomplete state
+    }
+
+    /// CLIENT API: Activate autocomplete for current field
+    fn activate_autocomplete(&mut self) {
+        let current_field = self.current_field(); // Get field first
+        if let Some(state) = self.autocomplete_state_mut() {
+            state.activate(current_field); // Then use it
+        }
+    }
+
+    /// CLIENT API: Deactivate autocomplete
+    fn deactivate_autocomplete(&mut self) {
+        if let Some(state) = self.autocomplete_state_mut() {
+            state.deactivate();
+        }
+    }
+
+    /// CLIENT API: Set suggestions (called after async fetch completes)
+    fn set_autocomplete_suggestions(&mut self, suggestions: Vec<crate::autocomplete::SuggestionItem<Self::SuggestionData>>) {
+        if let Some(state) = self.autocomplete_state_mut() {
+            state.set_suggestions(suggestions);
+        }
+    }
+
+    /// CLIENT API: Set loading state
+    fn set_autocomplete_loading(&mut self, loading: bool) {
+        if let Some(state) = self.autocomplete_state_mut() {
+            state.is_loading = loading;
+        }
+    }
+
+    /// Check if autocomplete is currently active
+    fn is_autocomplete_active(&self) -> bool {
+        self.autocomplete_state()
+            .map(|state| state.is_active)
+            .unwrap_or(false)
+    }
+
+    /// Check if autocomplete is ready for interaction
+    fn is_autocomplete_ready(&self) -> bool {
+        self.autocomplete_state()
+            .map(|state| state.is_ready())
+            .unwrap_or(false)
+    }
+
+    /// INTERNAL: Apply selected autocomplete value to current field
+    fn apply_autocomplete_selection(&mut self) -> Option<String> {
+        // First, get the selected value and display text (if any)
+        let selection_info = if let Some(state) = self.autocomplete_state() {
+            state.get_selected().map(|selected| {
+                (selected.value_to_store.clone(), selected.display_text.clone())
+            })
+        } else {
+            None
+        };
+
+        // Apply the selection if we have one
+        if let Some((value, display)) = selection_info {
+            // Apply the value to current field
+            *self.get_current_input_mut() = value;
+            self.set_has_unsaved_changes(true);
+
+            // Deactivate autocomplete
+            if let Some(state_mut) = self.autocomplete_state_mut() {
+                state_mut.deactivate();
+            }
+
+            Some(format!("Selected: {}", display))
+        } else {
+            None
+        }
+    }
+}

canvas/src/autocomplete/types.rs

@@ -0,0 +1,126 @@
+// canvas/src/autocomplete.rs
+
+/// Generic suggestion item that clients push to canvas
+#[derive(Debug, Clone)]
+pub struct SuggestionItem<T> {
+    /// The underlying data (client-specific, e.g., Hit, String, etc.)
+    pub data: T,
+    /// Text to display in the dropdown
+    pub display_text: String,
+    /// Value to store in the form field when selected
+    pub value_to_store: String,
+}
+
+impl<T> SuggestionItem<T> {
+    pub fn new(data: T, display_text: String, value_to_store: String) -> Self {
+        Self {
+            data,
+            display_text,
+            value_to_store,
+        }
+    }
+    
+    /// Convenience constructor for simple string suggestions
+    pub fn simple(data: T, text: String) -> Self {
+        Self {
+            data,
+            display_text: text.clone(),
+            value_to_store: text,
+        }
+    }
+}
+
+/// Autocomplete state managed by canvas
+#[derive(Debug, Clone)]
+pub struct AutocompleteState<T> {
+    /// Whether autocomplete is currently active/visible
+    pub is_active: bool,
+    /// Whether suggestions are being loaded (for spinner/loading indicator)
+    pub is_loading: bool,
+    /// Current suggestions to display
+    pub suggestions: Vec<SuggestionItem<T>>,
+    /// Currently selected suggestion index
+    pub selected_index: Option<usize>,
+    /// Field index that triggered autocomplete (for context)
+    pub active_field: Option<usize>,
+}
+
+impl<T> Default for AutocompleteState<T> {
+    fn default() -> Self {
+        Self {
+            is_active: false,
+            is_loading: false,
+            suggestions: Vec::new(),
+            selected_index: None,
+            active_field: None,
+        }
+    }
+}
+
+impl<T> AutocompleteState<T> {
+    pub fn new() -> Self {
+        Self::default()
+    }
+    
+    /// Activate autocomplete for a specific field
+    pub fn activate(&mut self, field_index: usize) {
+        self.is_active = true;
+        self.active_field = Some(field_index);
+        self.selected_index = None;
+        self.suggestions.clear();
+        self.is_loading = true;
+    }
+    
+    /// Deactivate autocomplete and clear state
+    pub fn deactivate(&mut self) {
+        self.is_active = false;
+        self.is_loading = false;
+        self.suggestions.clear();
+        self.selected_index = None;
+        self.active_field = None;
+    }
+    
+    /// Set suggestions and stop loading
+    pub fn set_suggestions(&mut self, suggestions: Vec<SuggestionItem<T>>) {
+        self.suggestions = suggestions;
+        self.is_loading = false;
+        self.selected_index = if self.suggestions.is_empty() { 
+            None 
+        } else { 
+            Some(0) 
+        };
+    }
+    
+    /// Move selection down
+    pub fn select_next(&mut self) {
+        if !self.suggestions.is_empty() {
+            let current = self.selected_index.unwrap_or(0);
+            self.selected_index = Some((current + 1) % self.suggestions.len());
+        }
+    }
+    
+    /// Move selection up
+    pub fn select_previous(&mut self) {
+        if !self.suggestions.is_empty() {
+            let current = self.selected_index.unwrap_or(0);
+            self.selected_index = Some(
+                if current == 0 { 
+                    self.suggestions.len() - 1 
+                } else { 
+                    current - 1 
+                }
+            );
+        }
+    }
+    
+    /// Get currently selected suggestion
+    pub fn get_selected(&self) -> Option<&SuggestionItem<T>> {
+        self.selected_index
+            .and_then(|idx| self.suggestions.get(idx))
+    }
+    
+    /// Check if autocomplete is ready for interaction (active and has suggestions)
+    pub fn is_ready(&self) -> bool {
+        self.is_active && !self.suggestions.is_empty() && !self.is_loading
+    }
+}

canvas/src/canvas/actions/edit.rs

@@ -0,0 +1,253 @@
+// canvas/src/canvas/actions/edit.rs
+
+use crate::canvas::state::{CanvasState, ActionContext};
+use crate::canvas::actions::types::{CanvasAction, ActionResult};
+use crate::config::CanvasConfig;
+use anyhow::Result;
+
+/// Execute a typed canvas action on any CanvasState implementation
+pub async fn execute_canvas_action<S: CanvasState>(
+    action: CanvasAction,
+    state: &mut S,
+    ideal_cursor_column: &mut usize,
+    config: Option<&CanvasConfig>,
+) -> Result<ActionResult> {
+    let context = ActionContext {
+        key_code: None,
+        ideal_cursor_column: *ideal_cursor_column,
+        current_input: state.get_current_input().to_string(),
+        current_field: state.current_field(),
+    };
+
+    if let Some(result) = state.handle_feature_action(&action, &context) {
+        return Ok(ActionResult::HandledByFeature(result));
+    }
+
+    handle_generic_canvas_action(action, state, ideal_cursor_column, config).await
+}
+
+/// Handle core canvas actions with full type safety
+pub async fn handle_generic_canvas_action<S: CanvasState>(
+    action: CanvasAction,
+    state: &mut S,
+    ideal_cursor_column: &mut usize,
+    config: Option<&CanvasConfig>,
+) -> Result<ActionResult> {
+    match action {
+        CanvasAction::InsertChar(c) => {
+            let cursor_pos = state.current_cursor_pos();
+            let input = state.get_current_input_mut();
+            input.insert(cursor_pos, c);
+            state.set_current_cursor_pos(cursor_pos + 1);
+            state.set_has_unsaved_changes(true);
+            *ideal_cursor_column = cursor_pos + 1;
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::NextField | CanvasAction::PrevField => {
+            let old_field = state.current_field();
+            let total_fields = state.fields().len();
+
+            // Perform field navigation
+            let new_field = match action {
+                CanvasAction::NextField => {
+                    if config.map_or(true, |c| c.behavior.wrap_around_fields) {
+                        (old_field + 1) % total_fields
+                    } else {
+                        (old_field + 1).min(total_fields - 1)
+                    }
+                }
+                CanvasAction::PrevField => {
+                    if config.map_or(true, |c| c.behavior.wrap_around_fields) {
+                        if old_field == 0 { total_fields - 1 } else { old_field - 1 }
+                    } else {
+                        old_field.saturating_sub(1)
+                    }
+                }
+                _ => unreachable!(),
+            };
+
+            state.set_current_field(new_field);
+            *ideal_cursor_column = state.current_cursor_pos();
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::DeleteBackward => {
+            let cursor_pos = state.current_cursor_pos();
+            if cursor_pos > 0 {
+                let input = state.get_current_input_mut();
+                input.remove(cursor_pos - 1);
+                state.set_current_cursor_pos(cursor_pos - 1);
+                state.set_has_unsaved_changes(true);
+                *ideal_cursor_column = cursor_pos - 1;
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::DeleteForward => {
+            let cursor_pos = state.current_cursor_pos();
+            let input = state.get_current_input_mut();
+            if cursor_pos < input.len() {
+                input.remove(cursor_pos);
+                state.set_has_unsaved_changes(true);
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveLeft => {
+            let cursor_pos = state.current_cursor_pos();
+            if cursor_pos > 0 {
+                state.set_current_cursor_pos(cursor_pos - 1);
+                *ideal_cursor_column = cursor_pos - 1;
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveRight => {
+            let cursor_pos = state.current_cursor_pos();
+            let current_input = state.get_current_input();
+            if cursor_pos < current_input.len() {
+                state.set_current_cursor_pos(cursor_pos + 1);
+                *ideal_cursor_column = cursor_pos + 1;
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveLineStart => {
+            state.set_current_cursor_pos(0);
+            *ideal_cursor_column = 0;
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveLineEnd => {
+            let end_pos = state.get_current_input().len();
+            state.set_current_cursor_pos(end_pos);
+            *ideal_cursor_column = end_pos;
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveUp => {
+            // For single-line fields, move to previous field
+            let current_field = state.current_field();
+            if current_field > 0 {
+                state.set_current_field(current_field - 1);
+                *ideal_cursor_column = state.current_cursor_pos();
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveDown => {
+            // For single-line fields, move to next field
+            let current_field = state.current_field();
+            let total_fields = state.fields().len();
+            if current_field < total_fields - 1 {
+                state.set_current_field(current_field + 1);
+                *ideal_cursor_column = state.current_cursor_pos();
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveFirstLine => {
+            state.set_current_field(0);
+            state.set_current_cursor_pos(0);
+            *ideal_cursor_column = 0;
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveLastLine => {
+            let last_field = state.fields().len() - 1;
+            state.set_current_field(last_field);
+            let end_pos = state.get_current_input().len();
+            state.set_current_cursor_pos(end_pos);
+            *ideal_cursor_column = end_pos;
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveWordNext => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_next_word_start(current_input, state.current_cursor_pos());
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveWordEnd => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_word_end(current_input, state.current_cursor_pos());
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::MoveWordPrev => {
+            let current_input = state.get_current_input();
+            if !current_input.is_empty() {
+                let new_pos = find_prev_word_start(current_input, state.current_cursor_pos());
+                state.set_current_cursor_pos(new_pos);
+                *ideal_cursor_column = new_pos;
+            }
+            Ok(ActionResult::success())
+        }
+
+        CanvasAction::Custom(action_str) => {
+            Ok(ActionResult::success_with_message(&format!("Custom action: {}", action_str)))
+        }
+
+        _ => Ok(ActionResult::success_with_message("Action not implemented")),
+    }
+}
+
+// Helper functions for word navigation
+fn find_next_word_start(text: &str, cursor_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let mut pos = cursor_pos;
+    
+    // Skip current word
+    while pos < chars.len() && chars[pos].is_alphanumeric() {
+        pos += 1;
+    }
+    
+    // Skip whitespace
+    while pos < chars.len() && chars[pos].is_whitespace() {
+        pos += 1;
+    }
+    
+    pos
+}
+
+fn find_word_end(text: &str, cursor_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    let mut pos = cursor_pos;
+    
+    // Move to end of current word
+    while pos < chars.len() && chars[pos].is_alphanumeric() {
+        pos += 1;
+    }
+    
+    pos
+}
+
+fn find_prev_word_start(text: &str, cursor_pos: usize) -> usize {
+    if cursor_pos == 0 {
+        return 0;
+    }
+    
+    let chars: Vec<char> = text.chars().collect();
+    let mut pos = cursor_pos.saturating_sub(1);
+    
+    // Skip whitespace
+    while pos > 0 && chars[pos].is_whitespace() {
+        pos -= 1;
+    }
+    
+    // Skip to start of word
+    while pos > 0 && chars[pos - 1].is_alphanumeric() {
+        pos -= 1;
+    }
+    
+    pos
+}

canvas/src/canvas/actions/mod.rs

@@ -0,0 +1,7 @@
+// canvas/src/canvas/actions/mod.rs
+pub mod types;
+pub mod edit;
+
+// Re-export the main types for convenience
+pub use types::{CanvasAction, ActionResult};
+pub use edit::execute_canvas_action;

canvas/src/canvas/actions/types.rs

@@ -0,0 +1,123 @@
+// src/canvas/actions/types.rs
+
+#[derive(Debug, Clone, PartialEq)]
+pub enum CanvasAction {
+    // Character input
+    InsertChar(char),
+
+    // Deletion
+    DeleteBackward,
+    DeleteForward,
+
+    // Basic cursor movement
+    MoveLeft,
+    MoveRight,
+    MoveUp,
+    MoveDown,
+
+    // Line movement
+    MoveLineStart,
+    MoveLineEnd,
+    MoveFirstLine,
+    MoveLastLine,
+
+    // Word movement
+    MoveWordNext,
+    MoveWordEnd,
+    MoveWordPrev,
+
+    // Field navigation
+    NextField,
+    PrevField,
+
+    // Autocomplete actions
+    TriggerAutocomplete,
+    SuggestionUp,
+    SuggestionDown,
+    SelectSuggestion,
+    ExitSuggestions,
+
+    // Custom actions
+    Custom(String),
+}
+
+impl CanvasAction {
+    pub fn from_key(key: crossterm::event::KeyCode) -> Option<Self> {
+        match key {
+            crossterm::event::KeyCode::Char(c) => Some(Self::InsertChar(c)),
+            crossterm::event::KeyCode::Backspace => Some(Self::DeleteBackward),
+            crossterm::event::KeyCode::Delete => Some(Self::DeleteForward),
+            crossterm::event::KeyCode::Left => Some(Self::MoveLeft),
+            crossterm::event::KeyCode::Right => Some(Self::MoveRight),
+            crossterm::event::KeyCode::Up => Some(Self::MoveUp),
+            crossterm::event::KeyCode::Down => Some(Self::MoveDown),
+            crossterm::event::KeyCode::Home => Some(Self::MoveLineStart),
+            crossterm::event::KeyCode::End => Some(Self::MoveLineEnd),
+            crossterm::event::KeyCode::Tab => Some(Self::NextField),
+            crossterm::event::KeyCode::BackTab => Some(Self::PrevField),
+            _ => None,
+        }
+    }
+
+    // Backward compatibility method
+    pub fn from_string(action: &str) -> Self {
+        match action {
+            "delete_char_backward" => Self::DeleteBackward,
+            "delete_char_forward" => Self::DeleteForward,
+            "move_left" => Self::MoveLeft,
+            "move_right" => Self::MoveRight,
+            "move_up" => Self::MoveUp,
+            "move_down" => Self::MoveDown,
+            "move_line_start" => Self::MoveLineStart,
+            "move_line_end" => Self::MoveLineEnd,
+            "move_first_line" => Self::MoveFirstLine,
+            "move_last_line" => Self::MoveLastLine,
+            "move_word_next" => Self::MoveWordNext,
+            "move_word_end" => Self::MoveWordEnd,
+            "move_word_prev" => Self::MoveWordPrev,
+            "next_field" => Self::NextField,
+            "prev_field" => Self::PrevField,
+            "trigger_autocomplete" => Self::TriggerAutocomplete,
+            "suggestion_up" => Self::SuggestionUp,
+            "suggestion_down" => Self::SuggestionDown,
+            "select_suggestion" => Self::SelectSuggestion,
+            "exit_suggestions" => Self::ExitSuggestions,
+            _ => Self::Custom(action.to_string()),
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub enum ActionResult {
+    Success(Option<String>),
+    HandledByFeature(String),
+    RequiresContext(String),
+    Error(String),
+}
+
+impl ActionResult {
+    pub fn success() -> Self {
+        Self::Success(None)
+    }
+
+    pub fn success_with_message(msg: &str) -> Self {
+        Self::Success(Some(msg.to_string()))
+    }
+
+    pub fn error(msg: &str) -> Self {
+        Self::Error(msg.into())
+    }
+
+    pub fn is_success(&self) -> bool {
+        matches!(self, Self::Success(_) | Self::HandledByFeature(_))
+    }
+
+    pub fn message(&self) -> Option<&str> {
+        match self {
+            Self::Success(msg) => msg.as_deref(),
+            Self::HandledByFeature(msg) => Some(msg),
+            Self::RequiresContext(msg) => Some(msg),
+            Self::Error(msg) => Some(msg),
+        }
+    }
+}

canvas/src/canvas/gui.rs

@@ -0,0 +1,338 @@
+// canvas/src/canvas/gui.rs
+
+#[cfg(feature = "gui")]
+use ratatui::{
+    layout::{Alignment, Constraint, Direction, Layout, Rect},
+    style::{Modifier, Style},
+    text::{Line, Span},
+    widgets::{Block, Borders, BorderType, Paragraph},
+    Frame,
+};
+
+use crate::canvas::state::CanvasState;
+use crate::canvas::modes::HighlightState;
+
+#[cfg(feature = "gui")]
+use crate::canvas::theme::CanvasTheme;
+
+#[cfg(feature = "gui")]
+use std::cmp::{max, min};
+
+/// Render ONLY the canvas form fields - no autocomplete
+#[cfg(feature = "gui")]
+pub fn render_canvas<T: CanvasTheme>(
+    f: &mut Frame,
+    area: Rect,
+    form_state: &impl CanvasState,
+    theme: &T,
+    is_edit_mode: bool,
+    highlight_state: &HighlightState,
+) -> Option<Rect> {
+    let fields: Vec<&str> = form_state.fields();
+    let current_field_idx = form_state.current_field();
+    let inputs: Vec<&String> = form_state.inputs();
+
+    render_canvas_fields(
+        f,
+        area,
+        &fields,
+        &current_field_idx,
+        &inputs,
+        theme,
+        is_edit_mode,
+        highlight_state,
+        form_state.current_cursor_pos(),
+        form_state.has_unsaved_changes(),
+        |i| form_state.get_display_value_for_field(i).to_string(),
+        |i| form_state.has_display_override(i),
+    )
+}
+
+/// Core canvas field rendering
+#[cfg(feature = "gui")]
+fn render_canvas_fields<T: CanvasTheme, F1, F2>(
+    f: &mut Frame,
+    area: Rect,
+    fields: &[&str],
+    current_field_idx: &usize,
+    inputs: &[&String],
+    theme: &T,
+    is_edit_mode: bool,
+    highlight_state: &HighlightState,
+    current_cursor_pos: usize,
+    has_unsaved_changes: bool,
+    get_display_value: F1,
+    has_display_override: F2,
+) -> Option<Rect>
+where
+    F1: Fn(usize) -> String,
+    F2: Fn(usize) -> bool,
+{
+    // Create layout
+    let columns = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([Constraint::Percentage(30), Constraint::Percentage(70)])
+        .split(area);
+
+    // Border style based on state
+    let border_style = if has_unsaved_changes {
+        Style::default().fg(theme.warning())
+    } else if is_edit_mode {
+        Style::default().fg(theme.accent())
+    } else {
+        Style::default().fg(theme.secondary())
+    };
+
+    // Input container
+    let input_container = Block::default()
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(border_style)
+        .style(Style::default().bg(theme.bg()));
+
+    let input_block = Rect {
+        x: columns[1].x,
+        y: columns[1].y,
+        width: columns[1].width,
+        height: fields.len() as u16 + 2,
+    };
+
+    f.render_widget(&input_container, input_block);
+
+    // Input area layout
+    let input_area = input_container.inner(input_block);
+    let input_rows = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(vec![Constraint::Length(1); fields.len()])
+        .split(input_area);
+
+    // Render field labels
+    render_field_labels(f, columns[0], input_block, fields, theme);
+
+    // Render field values and return active field rect
+    render_field_values(
+        f,
+        input_rows.to_vec(), // Fix: Convert Rc<[Rect]> to Vec<Rect>
+        inputs,
+        current_field_idx,
+        theme,
+        highlight_state,
+        current_cursor_pos,
+        get_display_value,
+        has_display_override,
+    )
+}
+
+/// Render field labels
+#[cfg(feature = "gui")]
+fn render_field_labels<T: CanvasTheme>(
+    f: &mut Frame,
+    label_area: Rect,
+    input_block: Rect,
+    fields: &[&str],
+    theme: &T,
+) {
+    for (i, field) in fields.iter().enumerate() {
+        let label = Paragraph::new(Line::from(Span::styled(
+            format!("{}:", field),
+            Style::default().fg(theme.fg()),
+        )));
+        f.render_widget(
+            label,
+            Rect {
+                x: label_area.x,
+                y: input_block.y + 1 + i as u16,
+                width: label_area.width,
+                height: 1,
+            },
+        );
+    }
+}
+
+/// Render field values with highlighting
+#[cfg(feature = "gui")]
+fn render_field_values<T: CanvasTheme, F1, F2>(
+    f: &mut Frame,
+    input_rows: Vec<Rect>,
+    inputs: &[&String],
+    current_field_idx: &usize,
+    theme: &T,
+    highlight_state: &HighlightState,
+    current_cursor_pos: usize,
+    get_display_value: F1,
+    has_display_override: F2,
+) -> Option<Rect>
+where
+    F1: Fn(usize) -> String,
+    F2: Fn(usize) -> bool,
+{
+    let mut active_field_input_rect = None;
+
+    for (i, _input) in inputs.iter().enumerate() {
+        let is_active = i == *current_field_idx;
+        let text = get_display_value(i);
+        
+        // Apply highlighting
+        let line = apply_highlighting(
+            &text,
+            i,
+            current_field_idx,
+            current_cursor_pos,
+            highlight_state,
+            theme,
+            is_active,
+        );
+
+        let input_display = Paragraph::new(line).alignment(Alignment::Left);
+        f.render_widget(input_display, input_rows[i]);
+
+        // Set cursor for active field
+        if is_active {
+            active_field_input_rect = Some(input_rows[i]);
+            set_cursor_position(f, input_rows[i], &text, current_cursor_pos, has_display_override(i));
+        }
+    }
+
+    active_field_input_rect
+}
+
+/// Apply highlighting based on highlight state
+#[cfg(feature = "gui")]
+fn apply_highlighting<'a, T: CanvasTheme>(
+    text: &'a str,
+    field_index: usize,
+    current_field_idx: &usize,
+    current_cursor_pos: usize,
+    highlight_state: &HighlightState,
+    theme: &T,
+    is_active: bool,
+) -> Line<'a> {
+    let text_len = text.chars().count();
+
+    match highlight_state {
+        HighlightState::Off => {
+            Line::from(Span::styled(
+                text,
+                if is_active {
+                    Style::default().fg(theme.highlight())
+                } else {
+                    Style::default().fg(theme.fg())
+                },
+            ))
+        }
+        HighlightState::Characterwise { anchor } => {
+            apply_characterwise_highlighting(text, text_len, field_index, current_field_idx, current_cursor_pos, anchor, theme, is_active)
+        }
+        HighlightState::Linewise { anchor_line } => {
+            apply_linewise_highlighting(text, field_index, current_field_idx, anchor_line, theme, is_active)
+        }
+    }
+}
+
+/// Apply characterwise highlighting
+#[cfg(feature = "gui")]
+fn apply_characterwise_highlighting<'a, T: CanvasTheme>(
+    text: &'a str,
+    text_len: usize,
+    field_index: usize,
+    current_field_idx: &usize,
+    current_cursor_pos: usize,
+    anchor: &(usize, usize),
+    theme: &T,
+    is_active: bool,
+) -> Line<'a> {
+    let (anchor_field, anchor_char) = *anchor;
+    let start_field = min(anchor_field, *current_field_idx);
+    let end_field = max(anchor_field, *current_field_idx);
+
+    let highlight_style = Style::default()
+        .fg(theme.highlight())
+        .bg(theme.highlight_bg())
+        .add_modifier(Modifier::BOLD);
+    let normal_style_in_highlight = Style::default().fg(theme.highlight());
+    let normal_style_outside = Style::default().fg(theme.fg());
+
+    if field_index >= start_field && field_index <= end_field {
+        if start_field == end_field {
+            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 {
+                (anchor_char, current_cursor_pos)
+            } else {
+                (current_cursor_pos, anchor_char)
+            };
+
+            let clamped_start = start_char.min(text_len);
+            let clamped_end = end_char.min(text_len);
+
+            let before: String = text.chars().take(clamped_start).collect();
+            let highlighted: String = text.chars()
+                .skip(clamped_start)
+                .take(clamped_end.saturating_sub(clamped_start) + 1)
+                .collect();
+            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),
+            ])
+        } else {
+            // Multi-field selection
+            Line::from(Span::styled(text, highlight_style))
+        }
+    } else {
+        Line::from(Span::styled(
+            text,
+            if is_active { normal_style_in_highlight } else { normal_style_outside }
+        ))
+    }
+}
+
+/// Apply linewise highlighting
+#[cfg(feature = "gui")]
+fn apply_linewise_highlighting<'a, T: CanvasTheme>(
+    text: &'a str,
+    field_index: usize,
+    current_field_idx: &usize,
+    anchor_line: &usize,
+    theme: &T,
+    is_active: bool,
+) -> Line<'a> {
+    let start_field = min(*anchor_line, *current_field_idx);
+    let end_field = max(*anchor_line, *current_field_idx);
+    
+    let highlight_style = Style::default()
+        .fg(theme.highlight())
+        .bg(theme.highlight_bg())
+        .add_modifier(Modifier::BOLD);
+    let normal_style_in_highlight = Style::default().fg(theme.highlight());
+    let normal_style_outside = Style::default().fg(theme.fg());
+
+    if field_index >= start_field && field_index <= end_field {
+        Line::from(Span::styled(text, highlight_style))
+    } else {
+        Line::from(Span::styled(
+            text,
+            if is_active { normal_style_in_highlight } else { normal_style_outside }
+        ))
+    }
+}
+
+/// Set cursor position
+#[cfg(feature = "gui")]
+fn set_cursor_position(
+    f: &mut Frame,
+    field_rect: Rect,
+    text: &str,
+    current_cursor_pos: usize,
+    has_display_override: bool,
+) {
+    let cursor_x = if has_display_override {
+        field_rect.x + text.chars().count() as u16
+    } else {
+        field_rect.x + current_cursor_pos as u16
+    };
+    let cursor_y = field_rect.y;
+    f.set_cursor_position((cursor_x, cursor_y));
+}

canvas/src/canvas/mod.rs

@@ -0,0 +1,17 @@
+// src/canvas/mod.rs
+pub mod actions;
+pub mod modes; 
+pub mod gui;
+pub mod theme;
+pub mod state;
+
+// Re-export commonly used canvas types
+pub use actions::{CanvasAction, ActionResult};
+pub use modes::{AppMode, ModeManager, HighlightState};
+pub use state::{CanvasState, ActionContext};
+
+#[cfg(feature = "gui")]
+pub use theme::CanvasTheme;
+
+#[cfg(feature = "gui")]
+pub use gui::render_canvas;

canvas/src/canvas/modes/highlight.rs

@@ -0,0 +1,15 @@
+// src/state/app/highlight.rs
+// canvas/src/modes/highlight.rs
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum HighlightState {
+    Off,
+    Characterwise { anchor: (usize, usize) }, // (field_index, char_position)
+    Linewise { anchor_line: usize },          // field_index
+}
+
+impl Default for HighlightState {
+    fn default() -> Self {
+        HighlightState::Off
+    }
+}

canvas/src/canvas/modes/manager.rs

@@ -0,0 +1,33 @@
+// src/modes/handlers/mode_manager.rs
+// canvas/src/modes/manager.rs
+
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum AppMode {
+    General,   // For intro and admin screens
+    ReadOnly,  // Canvas read-only mode
+    Edit,      // Canvas edit mode
+    Highlight, // Canvas highlight/visual mode
+    Command,   // Command mode overlay
+}
+
+pub struct ModeManager;
+
+impl ModeManager {
+    // Mode transition rules
+    pub fn can_enter_command_mode(current_mode: AppMode) -> bool {
+        !matches!(current_mode, AppMode::Edit)
+    }
+
+    pub fn can_enter_edit_mode(current_mode: AppMode) -> bool {
+        matches!(current_mode, AppMode::ReadOnly)
+    }
+
+    pub fn can_enter_read_only_mode(current_mode: AppMode) -> bool {
+        matches!(current_mode, AppMode::Edit | AppMode::Command | AppMode::Highlight)
+    }
+
+    pub fn can_enter_highlight_mode(current_mode: AppMode) -> bool {
+        matches!(current_mode, AppMode::ReadOnly)
+    }
+}

canvas/src/canvas/modes/mod.rs

@@ -0,0 +1,7 @@
+// canvas/src/modes/mod.rs
+
+pub mod highlight;
+pub mod manager;
+
+pub use highlight::HighlightState;
+pub use manager::{AppMode, ModeManager};

canvas/src/canvas/state.rs

@@ -0,0 +1,52 @@
+// canvas/src/state.rs
+
+use crate::canvas::actions::CanvasAction;
+
+/// Context passed to feature-specific action handlers
+#[derive(Debug)]
+pub struct ActionContext {
+    pub key_code: Option<crossterm::event::KeyCode>, // Kept for backwards compatibility
+    pub ideal_cursor_column: usize,
+    pub current_input: String,
+    pub current_field: usize,
+}
+
+/// Core trait that any form-like state must implement to work with the canvas system.
+/// This enables the same mode behaviors (edit, read-only, highlight) to work across
+/// any implementation - login forms, data entry forms, configuration screens, etc.
+pub trait CanvasState {
+    // --- Core Navigation ---
+    fn current_field(&self) -> usize;
+    fn current_cursor_pos(&self) -> usize;
+    fn set_current_field(&mut self, index: usize);
+    fn set_current_cursor_pos(&mut self, pos: usize);
+
+    // --- Data Access ---
+    fn get_current_input(&self) -> &str;
+    fn get_current_input_mut(&mut self) -> &mut String;
+    fn inputs(&self) -> Vec<&String>;
+    fn fields(&self) -> Vec<&str>;
+
+    // --- State Management ---
+    fn has_unsaved_changes(&self) -> bool;
+    fn set_has_unsaved_changes(&mut self, changed: bool);
+
+    // --- Feature-specific action handling ---
+
+    /// Feature-specific action handling (NEW: Type-safe)
+    fn handle_feature_action(&mut self, _action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+        None // Default: no feature-specific handling
+    }
+
+    // --- Display Overrides (for links, computed values, etc.) ---
+    fn get_display_value_for_field(&self, index: usize) -> &str {
+        self.inputs()
+            .get(index)
+            .map(|s| s.as_str())
+            .unwrap_or("")
+    }
+
+    fn has_display_override(&self, _index: usize) -> bool {
+        false
+    }
+}

canvas/src/canvas/theme.rs

@@ -0,0 +1,17 @@
+// canvas/src/gui/theme.rs
+
+#[cfg(feature = "gui")]
+use ratatui::style::Color;
+
+/// Theme trait that must be implemented by applications using the canvas GUI
+#[cfg(feature = "gui")]
+pub trait CanvasTheme {
+    fn bg(&self) -> Color;
+    fn fg(&self) -> Color;
+    fn border(&self) -> Color;
+    fn accent(&self) -> Color;
+    fn secondary(&self) -> Color;
+    fn highlight(&self) -> Color;
+    fn highlight_bg(&self) -> Color;
+    fn warning(&self) -> Color;
+}

canvas/src/config.rs

@@ -0,0 +1,494 @@
+// canvas/src/config.rs
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use crossterm::event::{KeyCode, KeyModifiers};
+use anyhow::{Context, Result};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct CanvasConfig {
+    #[serde(default)]
+    pub keybindings: CanvasKeybindings,
+    #[serde(default)]
+    pub behavior: CanvasBehavior,
+    #[serde(default)]
+    pub appearance: CanvasAppearance,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default)]
+pub struct CanvasKeybindings {
+    #[serde(default)]
+    pub read_only: HashMap<String, Vec<String>>,
+    #[serde(default)]
+    pub edit: HashMap<String, Vec<String>>,
+    #[serde(default)]
+    pub suggestions: HashMap<String, Vec<String>>,
+    #[serde(default)]
+    pub global: HashMap<String, Vec<String>>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct CanvasBehavior {
+    #[serde(default = "default_wrap_around")]
+    pub wrap_around_fields: bool,
+    #[serde(default = "default_auto_save")]
+    pub auto_save_on_field_change: bool,
+    #[serde(default = "default_word_chars")]
+    pub word_chars: String,
+    #[serde(default = "default_suggestion_limit")]
+    pub max_suggestions: usize,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct CanvasAppearance {
+    #[serde(default = "default_cursor_style")]
+    pub cursor_style: String, // "block", "bar", "underline"
+    #[serde(default = "default_show_field_numbers")]
+    pub show_field_numbers: bool,
+    #[serde(default = "default_highlight_current_field")]
+    pub highlight_current_field: bool,
+}
+
+// Default values
+fn default_wrap_around() -> bool { true }
+fn default_auto_save() -> bool { false }
+fn default_word_chars() -> String { "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_".to_string() }
+fn default_suggestion_limit() -> usize { 10 }
+fn default_cursor_style() -> String { "block".to_string() }
+fn default_show_field_numbers() -> bool { false }
+fn default_highlight_current_field() -> bool { true }
+
+impl Default for CanvasBehavior {
+    fn default() -> Self {
+        Self {
+            wrap_around_fields: default_wrap_around(),
+            auto_save_on_field_change: default_auto_save(),
+            word_chars: default_word_chars(),
+            max_suggestions: default_suggestion_limit(),
+        }
+    }
+}
+
+impl Default for CanvasAppearance {
+    fn default() -> Self {
+        Self {
+            cursor_style: default_cursor_style(),
+            show_field_numbers: default_show_field_numbers(),
+            highlight_current_field: default_highlight_current_field(),
+        }
+    }
+}
+
+impl Default for CanvasConfig {
+    fn default() -> Self {
+        Self {
+            keybindings: CanvasKeybindings::with_vim_defaults(),
+            behavior: CanvasBehavior::default(),
+            appearance: CanvasAppearance::default(),
+        }
+    }
+}
+
+impl CanvasKeybindings {
+    pub fn with_vim_defaults() -> Self {
+        let mut keybindings = Self::default();
+
+        // Read-only mode (vim-style navigation)
+        keybindings.read_only.insert("move_left".to_string(), vec!["h".to_string()]);
+        keybindings.read_only.insert("move_right".to_string(), vec!["l".to_string()]);
+        keybindings.read_only.insert("move_up".to_string(), vec!["k".to_string()]);
+        keybindings.read_only.insert("move_down".to_string(), vec!["j".to_string()]);
+        keybindings.read_only.insert("move_word_next".to_string(), vec!["w".to_string()]);
+        keybindings.read_only.insert("move_word_end".to_string(), vec!["e".to_string()]);
+        keybindings.read_only.insert("move_word_prev".to_string(), vec!["b".to_string()]);
+        keybindings.read_only.insert("move_word_end_prev".to_string(), vec!["ge".to_string()]);
+        keybindings.read_only.insert("move_line_start".to_string(), vec!["0".to_string()]);
+        keybindings.read_only.insert("move_line_end".to_string(), vec!["$".to_string()]);
+        keybindings.read_only.insert("move_first_line".to_string(), vec!["gg".to_string()]);
+        keybindings.read_only.insert("move_last_line".to_string(), vec!["G".to_string()]);
+        keybindings.read_only.insert("next_field".to_string(), vec!["Tab".to_string()]);
+        keybindings.read_only.insert("prev_field".to_string(), vec!["Shift+Tab".to_string()]);
+
+        // Edit mode
+        keybindings.edit.insert("delete_char_backward".to_string(), vec!["Backspace".to_string()]);
+        keybindings.edit.insert("delete_char_forward".to_string(), vec!["Delete".to_string()]);
+        keybindings.edit.insert("move_left".to_string(), vec!["Left".to_string()]);
+        keybindings.edit.insert("move_right".to_string(), vec!["Right".to_string()]);
+        keybindings.edit.insert("move_up".to_string(), vec!["Up".to_string()]);
+        keybindings.edit.insert("move_down".to_string(), vec!["Down".to_string()]);
+        keybindings.edit.insert("move_line_start".to_string(), vec!["Home".to_string()]);
+        keybindings.edit.insert("move_line_end".to_string(), vec!["End".to_string()]);
+        keybindings.edit.insert("move_word_next".to_string(), vec!["Ctrl+Right".to_string()]);
+        keybindings.edit.insert("move_word_prev".to_string(), vec!["Ctrl+Left".to_string()]);
+        keybindings.edit.insert("next_field".to_string(), vec!["Tab".to_string()]);
+        keybindings.edit.insert("prev_field".to_string(), vec!["Shift+Tab".to_string()]);
+
+        // Suggestions
+        keybindings.suggestions.insert("suggestion_up".to_string(), vec!["Up".to_string(), "Ctrl+p".to_string()]);
+        keybindings.suggestions.insert("suggestion_down".to_string(), vec!["Down".to_string(), "Ctrl+n".to_string()]);
+        keybindings.suggestions.insert("select_suggestion".to_string(), vec!["Enter".to_string(), "Tab".to_string()]);
+        keybindings.suggestions.insert("exit_suggestions".to_string(), vec!["Esc".to_string()]);
+
+        // Global (works in both modes)
+        keybindings.global.insert("move_up".to_string(), vec!["Up".to_string()]);
+        keybindings.global.insert("move_down".to_string(), vec!["Down".to_string()]);
+
+        keybindings
+    }
+
+    pub fn with_emacs_defaults() -> Self {
+        let mut keybindings = Self::default();
+
+        // Emacs-style bindings
+        keybindings.read_only.insert("move_left".to_string(), vec!["Ctrl+b".to_string()]);
+        keybindings.read_only.insert("move_right".to_string(), vec!["Ctrl+f".to_string()]);
+        keybindings.read_only.insert("move_up".to_string(), vec!["Ctrl+p".to_string()]);
+        keybindings.read_only.insert("move_down".to_string(), vec!["Ctrl+n".to_string()]);
+        keybindings.read_only.insert("move_word_next".to_string(), vec!["Alt+f".to_string()]);
+        keybindings.read_only.insert("move_word_prev".to_string(), vec!["Alt+b".to_string()]);
+        keybindings.read_only.insert("move_line_start".to_string(), vec!["Ctrl+a".to_string()]);
+        keybindings.read_only.insert("move_line_end".to_string(), vec!["Ctrl+e".to_string()]);
+
+        keybindings.edit.insert("delete_char_backward".to_string(), vec!["Ctrl+h".to_string(), "Backspace".to_string()]);
+        keybindings.edit.insert("delete_char_forward".to_string(), vec!["Ctrl+d".to_string(), "Delete".to_string()]);
+
+        keybindings
+    }
+}
+
+impl CanvasConfig {
+    /// Load from canvas_config.toml or fallback to vim defaults
+    pub fn load() -> Self {
+        // Try to load canvas_config.toml from current directory
+        if let Ok(config) = Self::from_file(std::path::Path::new("canvas_config.toml")) {
+            return config;
+        }
+        
+        // Fallback to vim defaults
+        Self::default()
+    }
+
+    /// Load from TOML string
+    pub fn from_toml(toml_str: &str) -> Result<Self> {
+        toml::from_str(toml_str)
+            .with_context(|| "Failed to parse canvas config TOML")
+    }
+
+    /// Load from file
+    pub fn from_file(path: &std::path::Path) -> Result<Self> {
+        let contents = std::fs::read_to_string(path)
+            .with_context(|| format!("Failed to read config file: {:?}", path))?;
+        Self::from_toml(&contents)
+    }
+
+    /// NEW: Check if autocomplete should auto-trigger (simple logic)
+    pub fn should_auto_trigger_autocomplete(&self) -> bool {
+        // If trigger_autocomplete keybinding exists anywhere, use manual mode only
+        // If no trigger_autocomplete keybinding, use auto-trigger mode
+        !self.has_trigger_autocomplete_keybinding()
+    }
+
+    /// NEW: Check if user has configured manual trigger keybinding
+    pub fn has_trigger_autocomplete_keybinding(&self) -> bool {
+        self.keybindings.edit.contains_key("trigger_autocomplete") ||
+        self.keybindings.read_only.contains_key("trigger_autocomplete") ||
+        self.keybindings.global.contains_key("trigger_autocomplete")
+    }
+
+    /// Get action for key in read-only mode
+    pub fn get_read_only_action(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
+        self.get_action_in_mode(&self.keybindings.read_only, key, modifiers)
+            .or_else(|| self.get_action_in_mode(&self.keybindings.global, key, modifiers))
+    }
+
+    /// Get action for key in edit mode
+    pub fn get_edit_action(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
+        self.get_action_in_mode(&self.keybindings.edit, key, modifiers)
+            .or_else(|| self.get_action_in_mode(&self.keybindings.global, key, modifiers))
+    }
+
+    /// Get action for key in suggestions mode
+    pub fn get_suggestion_action(&self, key: KeyCode, modifiers: KeyModifiers) -> Option<&str> {
+        self.get_action_in_mode(&self.keybindings.suggestions, key, modifiers)
+    }
+
+    /// Get action for key (mode-aware)
+    pub fn get_action_for_key(&self, key: KeyCode, modifiers: KeyModifiers, is_edit_mode: bool, has_suggestions: bool) -> Option<&str> {
+        // Suggestions take priority when active
+        if has_suggestions {
+            if let Some(action) = self.get_suggestion_action(key, modifiers) {
+                return Some(action);
+            }
+        }
+
+        // Then check mode-specific
+        if is_edit_mode {
+            self.get_edit_action(key, modifiers)
+        } else {
+            self.get_read_only_action(key, modifiers)
+        }
+    }
+
+    fn get_action_in_mode<'a>(&self, mode_bindings: &'a HashMap<String, Vec<String>>, key: KeyCode, modifiers: KeyModifiers) -> Option<&'a str> {
+        for (action, bindings) in mode_bindings {
+            for binding in bindings {
+                if self.matches_keybinding(binding, key, modifiers) {
+                    return Some(action);
+                }
+            }
+        }
+        None
+    }
+
+    fn matches_keybinding(&self, binding: &str, key: KeyCode, modifiers: KeyModifiers) -> bool {
+        // Special handling for shift+character combinations
+        if binding.to_lowercase().starts_with("shift+") {
+            let parts: Vec<&str> = binding.split('+').collect();
+            if parts.len() == 2 && parts[1].len() == 1 {
+                let expected_lowercase = parts[1].chars().next().unwrap().to_lowercase().next().unwrap();
+                let expected_uppercase = expected_lowercase.to_uppercase().next().unwrap();
+                if let KeyCode::Char(actual_char) = key {
+                    if actual_char == expected_uppercase && modifiers.contains(KeyModifiers::SHIFT) {
+                        return true;
+                    }
+                }
+            }
+        }
+
+        // Handle Shift+Tab -> BackTab
+        if binding.to_lowercase() == "shift+tab" && key == KeyCode::BackTab && modifiers.is_empty() {
+            return true;
+        }
+
+        // Handle multi-character bindings (all standard keys without modifiers)
+        if binding.len() > 1 && !binding.contains('+') {
+            return match binding.to_lowercase().as_str() {
+                // Navigation keys
+                "left" => key == KeyCode::Left,
+                "right" => key == KeyCode::Right,
+                "up" => key == KeyCode::Up,
+                "down" => key == KeyCode::Down,
+                "home" => key == KeyCode::Home,
+                "end" => key == KeyCode::End,
+                "pageup" | "pgup" => key == KeyCode::PageUp,
+                "pagedown" | "pgdn" => key == KeyCode::PageDown,
+                
+                // Editing keys
+                "insert" | "ins" => key == KeyCode::Insert,
+                "delete" | "del" => key == KeyCode::Delete,
+                "backspace" => key == KeyCode::Backspace,
+                
+                // Tab keys
+                "tab" => key == KeyCode::Tab,
+                "backtab" => key == KeyCode::BackTab,
+                
+                // Special keys
+                "enter" | "return" => key == KeyCode::Enter,
+                "escape" | "esc" => key == KeyCode::Esc,
+                "space" => key == KeyCode::Char(' '),
+                
+                // Function keys F1-F24
+                "f1" => key == KeyCode::F(1),
+                "f2" => key == KeyCode::F(2),
+                "f3" => key == KeyCode::F(3),
+                "f4" => key == KeyCode::F(4),
+                "f5" => key == KeyCode::F(5),
+                "f6" => key == KeyCode::F(6),
+                "f7" => key == KeyCode::F(7),
+                "f8" => key == KeyCode::F(8),
+                "f9" => key == KeyCode::F(9),
+                "f10" => key == KeyCode::F(10),
+                "f11" => key == KeyCode::F(11),
+                "f12" => key == KeyCode::F(12),
+                "f13" => key == KeyCode::F(13),
+                "f14" => key == KeyCode::F(14),
+                "f15" => key == KeyCode::F(15),
+                "f16" => key == KeyCode::F(16),
+                "f17" => key == KeyCode::F(17),
+                "f18" => key == KeyCode::F(18),
+                "f19" => key == KeyCode::F(19),
+                "f20" => key == KeyCode::F(20),
+                "f21" => key == KeyCode::F(21),
+                "f22" => key == KeyCode::F(22),
+                "f23" => key == KeyCode::F(23),
+                "f24" => key == KeyCode::F(24),
+                
+                // Lock keys (may not work reliably in all terminals)
+                "capslock" => key == KeyCode::CapsLock,
+                "scrolllock" => key == KeyCode::ScrollLock,
+                "numlock" => key == KeyCode::NumLock,
+                
+                // System keys
+                "printscreen" => key == KeyCode::PrintScreen,
+                "pause" => key == KeyCode::Pause,
+                "menu" => key == KeyCode::Menu,
+                "keypadbegin" => key == KeyCode::KeypadBegin,
+                
+                // Media keys (rarely supported but included for completeness)
+                "mediaplay" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Play),
+                "mediapause" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Pause),
+                "mediaplaypause" => key == KeyCode::Media(crossterm::event::MediaKeyCode::PlayPause),
+                "mediareverse" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Reverse),
+                "mediastop" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Stop),
+                "mediafastforward" => key == KeyCode::Media(crossterm::event::MediaKeyCode::FastForward),
+                "mediarewind" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Rewind),
+                "mediatracknext" => key == KeyCode::Media(crossterm::event::MediaKeyCode::TrackNext),
+                "mediatrackprevious" => key == KeyCode::Media(crossterm::event::MediaKeyCode::TrackPrevious),
+                "mediarecord" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Record),
+                "medialowervolume" => key == KeyCode::Media(crossterm::event::MediaKeyCode::LowerVolume),
+                "mediaraisevolume" => key == KeyCode::Media(crossterm::event::MediaKeyCode::RaiseVolume),
+                "mediamutevolume" => key == KeyCode::Media(crossterm::event::MediaKeyCode::MuteVolume),
+                
+                // Modifier keys (these work better as part of combinations)
+                "leftshift" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::LeftShift),
+                "leftcontrol" | "leftctrl" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::LeftControl),
+                "leftalt" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::LeftAlt),
+                "leftsuper" | "leftwindows" | "leftcmd" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::LeftSuper),
+                "lefthyper" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::LeftHyper),
+                "leftmeta" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::LeftMeta),
+                "rightshift" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::RightShift),
+                "rightcontrol" | "rightctrl" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::RightControl),
+                "rightalt" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::RightAlt),
+                "rightsuper" | "rightwindows" | "rightcmd" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::RightSuper),
+                "righthyper" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::RightHyper),
+                "rightmeta" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::RightMeta),
+                "isolevel3shift" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::IsoLevel3Shift),
+                "isolevel5shift" => key == KeyCode::Modifier(crossterm::event::ModifierKeyCode::IsoLevel5Shift),
+                
+                // Multi-key sequences need special handling
+                "gg" => false, // This needs sequence handling
+                _ => {
+                    // Handle single characters and punctuation
+                    if binding.len() == 1 {
+                        if let Some(c) = binding.chars().next() {
+                            key == KeyCode::Char(c)
+                        } else {
+                            false
+                        }
+                    } else {
+                        false
+                    }
+                }
+            };
+        }
+
+        // Handle modifier combinations (like "Ctrl+F5", "Alt+Shift+A")
+        let parts: Vec<&str> = binding.split('+').collect();
+        let mut expected_modifiers = KeyModifiers::empty();
+        let mut expected_key = None;
+
+        for part in parts {
+            match part.to_lowercase().as_str() {
+                // Modifiers
+                "ctrl" | "control" => expected_modifiers |= KeyModifiers::CONTROL,
+                "shift" => expected_modifiers |= KeyModifiers::SHIFT,
+                "alt" => expected_modifiers |= KeyModifiers::ALT,
+                "super" | "windows" | "cmd" => expected_modifiers |= KeyModifiers::SUPER,
+                "hyper" => expected_modifiers |= KeyModifiers::HYPER,
+                "meta" => expected_modifiers |= KeyModifiers::META,
+                
+                // Navigation keys
+                "left" => expected_key = Some(KeyCode::Left),
+                "right" => expected_key = Some(KeyCode::Right),
+                "up" => expected_key = Some(KeyCode::Up),
+                "down" => expected_key = Some(KeyCode::Down),
+                "home" => expected_key = Some(KeyCode::Home),
+                "end" => expected_key = Some(KeyCode::End),
+                "pageup" | "pgup" => expected_key = Some(KeyCode::PageUp),
+                "pagedown" | "pgdn" => expected_key = Some(KeyCode::PageDown),
+                
+                // Editing keys
+                "insert" | "ins" => expected_key = Some(KeyCode::Insert),
+                "delete" | "del" => expected_key = Some(KeyCode::Delete),
+                "backspace" => expected_key = Some(KeyCode::Backspace),
+                
+                // Tab keys
+                "tab" => expected_key = Some(KeyCode::Tab),
+                "backtab" => expected_key = Some(KeyCode::BackTab),
+                
+                // Special keys
+                "enter" | "return" => expected_key = Some(KeyCode::Enter),
+                "escape" | "esc" => expected_key = Some(KeyCode::Esc),
+                "space" => expected_key = Some(KeyCode::Char(' ')),
+                
+                // Function keys
+                "f1" => expected_key = Some(KeyCode::F(1)),
+                "f2" => expected_key = Some(KeyCode::F(2)),
+                "f3" => expected_key = Some(KeyCode::F(3)),
+                "f4" => expected_key = Some(KeyCode::F(4)),
+                "f5" => expected_key = Some(KeyCode::F(5)),
+                "f6" => expected_key = Some(KeyCode::F(6)),
+                "f7" => expected_key = Some(KeyCode::F(7)),
+                "f8" => expected_key = Some(KeyCode::F(8)),
+                "f9" => expected_key = Some(KeyCode::F(9)),
+                "f10" => expected_key = Some(KeyCode::F(10)),
+                "f11" => expected_key = Some(KeyCode::F(11)),
+                "f12" => expected_key = Some(KeyCode::F(12)),
+                "f13" => expected_key = Some(KeyCode::F(13)),
+                "f14" => expected_key = Some(KeyCode::F(14)),
+                "f15" => expected_key = Some(KeyCode::F(15)),
+                "f16" => expected_key = Some(KeyCode::F(16)),
+                "f17" => expected_key = Some(KeyCode::F(17)),
+                "f18" => expected_key = Some(KeyCode::F(18)),
+                "f19" => expected_key = Some(KeyCode::F(19)),
+                "f20" => expected_key = Some(KeyCode::F(20)),
+                "f21" => expected_key = Some(KeyCode::F(21)),
+                "f22" => expected_key = Some(KeyCode::F(22)),
+                "f23" => expected_key = Some(KeyCode::F(23)),
+                "f24" => expected_key = Some(KeyCode::F(24)),
+                
+                // Lock keys
+                "capslock" => expected_key = Some(KeyCode::CapsLock),
+                "scrolllock" => expected_key = Some(KeyCode::ScrollLock),
+                "numlock" => expected_key = Some(KeyCode::NumLock),
+                
+                // System keys
+                "printscreen" => expected_key = Some(KeyCode::PrintScreen),
+                "pause" => expected_key = Some(KeyCode::Pause),
+                "menu" => expected_key = Some(KeyCode::Menu),
+                "keypadbegin" => expected_key = Some(KeyCode::KeypadBegin),
+                
+                // Single character (letters, numbers, punctuation)
+                part => {
+                    if part.len() == 1 {
+                        if let Some(c) = part.chars().next() {
+                            expected_key = Some(KeyCode::Char(c));
+                        }
+                    }
+                }
+            }
+        }
+
+        modifiers == expected_modifiers && Some(key) == expected_key
+    }
+
+    /// Convenience method to create vim preset
+    pub fn vim_preset() -> Self {
+        Self {
+            keybindings: CanvasKeybindings::with_vim_defaults(),
+            behavior: CanvasBehavior::default(),
+            appearance: CanvasAppearance::default(),
+        }
+    }
+    
+    /// Convenience method to create emacs preset
+    pub fn emacs_preset() -> Self {
+        Self {
+            keybindings: CanvasKeybindings::with_emacs_defaults(),
+            behavior: CanvasBehavior::default(),
+            appearance: CanvasAppearance::default(),
+        }
+    }
+
+    /// Debug method to print loaded keybindings
+    pub fn debug_keybindings(&self) {
+        println!("📋 Canvas keybindings loaded:");
+        println!("  Read-only: {} actions", self.keybindings.read_only.len());
+        println!("  Edit: {} actions", self.keybindings.edit.len());
+        println!("  Suggestions: {} actions", self.keybindings.suggestions.len());
+        println!("  Global: {} actions", self.keybindings.global.len());
+    }
+}
+
+// Re-export for convenience
+pub use crate::canvas::actions::CanvasAction;
+pub use crate::dispatcher::ActionDispatcher;

canvas/src/dispatcher.rs

@@ -0,0 +1,183 @@
+// canvas/src/dispatcher.rs
+
+use crate::canvas::state::CanvasState;
+use crate::canvas::actions::{CanvasAction, ActionResult, execute_canvas_action};
+use crate::config::CanvasConfig;
+
+/// High-level action dispatcher that coordinates between different action types
+pub struct ActionDispatcher;
+
+impl ActionDispatcher {
+    /// Dispatch any action to the appropriate handler
+    pub async fn dispatch<S: CanvasState>(
+        action: CanvasAction,
+        state: &mut S,
+        ideal_cursor_column: &mut usize,
+    ) -> anyhow::Result<ActionResult> {
+
+        // Load config once here instead of threading it everywhere
+        execute_canvas_action(action, state, ideal_cursor_column, Some(&CanvasConfig::load())).await
+    }
+
+    /// Quick action dispatch from KeyCode
+    pub async fn dispatch_key<S: CanvasState>(
+        key: crossterm::event::KeyCode,
+        state: &mut S,
+        ideal_cursor_column: &mut usize,
+    ) -> anyhow::Result<Option<ActionResult>> {
+        if let Some(action) = CanvasAction::from_key(key) {
+            let result = Self::dispatch(action, state, ideal_cursor_column).await?;
+            Ok(Some(result))
+        } else {
+            Ok(None)
+        }
+    }
+
+    /// Batch dispatch multiple actions
+    pub async fn dispatch_batch<S: CanvasState>(
+        actions: Vec<CanvasAction>,
+        state: &mut S,
+        ideal_cursor_column: &mut usize,
+    ) -> anyhow::Result<Vec<ActionResult>> {
+        let mut results = Vec::new();
+        for action in actions {
+            let result = Self::dispatch(action, state, ideal_cursor_column).await?;
+            let is_success = result.is_success(); // Check success before moving
+            results.push(result);
+
+            // Stop on first error
+            if !is_success {
+                break;
+            }
+        }
+        Ok(results)
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::actions::CanvasAction;
+
+    // Simple test implementation
+    struct TestFormState {
+        current_field: usize,
+        cursor_pos: usize,
+        inputs: Vec<String>,
+        field_names: Vec<String>,
+        has_changes: bool,
+    }
+
+    impl TestFormState {
+        fn new() -> Self {
+            Self {
+                current_field: 0,
+                cursor_pos: 0,
+                inputs: vec!["".to_string(), "".to_string()],
+                field_names: vec!["username".to_string(), "password".to_string()],
+                has_changes: false,
+            }
+        }
+    }
+
+    impl CanvasState for TestFormState {
+        fn current_field(&self) -> usize { self.current_field }
+        fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+        fn set_current_field(&mut self, index: usize) { self.current_field = index; }
+        fn set_current_cursor_pos(&mut self, pos: usize) { self.cursor_pos = pos; }
+
+        fn get_current_input(&self) -> &str { &self.inputs[self.current_field] }
+        fn get_current_input_mut(&mut self) -> &mut String { &mut self.inputs[self.current_field] }
+        fn inputs(&self) -> Vec<&String> { self.inputs.iter().collect() }
+        fn fields(&self) -> Vec<&str> { self.field_names.iter().map(|s| s.as_str()).collect() }
+
+        fn has_unsaved_changes(&self) -> bool { self.has_changes }
+        fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+
+        // Custom action handling for testing
+        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &crate::state::ActionContext) -> Option<String> {
+            match action {
+                CanvasAction::Custom(s) if s == "test_custom" => {
+                    Some("Custom action handled".to_string())
+                }
+                _ => None,
+            }
+        }
+    }
+
+    #[tokio::test]
+    async fn test_typed_action_dispatch() {
+        let mut state = TestFormState::new();
+        let mut ideal_cursor = 0;
+
+        // Test character insertion
+        let result = ActionDispatcher::dispatch(
+            CanvasAction::InsertChar('a'),
+            &mut state,
+            &mut ideal_cursor,
+        ).await.unwrap();
+
+        assert!(result.is_success());
+        assert_eq!(state.get_current_input(), "a");
+        assert_eq!(state.cursor_pos, 1);
+        assert!(state.has_changes);
+    }
+
+    #[tokio::test]
+    async fn test_key_dispatch() {
+        let mut state = TestFormState::new();
+        let mut ideal_cursor = 0;
+
+        let result = ActionDispatcher::dispatch_key(
+            crossterm::event::KeyCode::Char('b'),
+            &mut state,
+            &mut ideal_cursor,
+        ).await.unwrap();
+
+        assert!(result.is_some());
+        assert!(result.unwrap().is_success());
+        assert_eq!(state.get_current_input(), "b");
+    }
+
+    #[tokio::test]
+    async fn test_custom_action() {
+        let mut state = TestFormState::new();
+        let mut ideal_cursor = 0;
+
+        let result = ActionDispatcher::dispatch(
+            CanvasAction::Custom("test_custom".to_string()),
+            &mut state,
+            &mut ideal_cursor,
+        ).await.unwrap();
+
+        match result {
+            ActionResult::HandledByFeature(msg) => {
+                assert_eq!(msg, "Custom action handled");
+            }
+            _ => panic!("Expected HandledByFeature result"),
+        }
+    }
+
+    #[tokio::test]
+    async fn test_batch_dispatch() {
+        let mut state = TestFormState::new();
+        let mut ideal_cursor = 0;
+
+        let actions = vec![
+            CanvasAction::InsertChar('h'),
+            CanvasAction::InsertChar('i'),
+            CanvasAction::MoveLeft,
+            CanvasAction::InsertChar('e'),
+        ];
+
+        let results = ActionDispatcher::dispatch_batch(
+            actions,
+            &mut state,
+            &mut ideal_cursor,
+        ).await.unwrap();
+
+        assert_eq!(results.len(), 4);
+        assert!(results.iter().all(|r| r.is_success()));
+        assert_eq!(state.get_current_input(), "hei");
+    }
+}

canvas/src/lib.rs

@@ -0,0 +1,5 @@
+// src/lib.rs
+pub mod canvas;
+pub mod autocomplete;
+pub mod config;
+pub mod dispatcher;

client/Cargo.toml

@@ -5,28 +5,29 @@ edition.workspace = true
 license.workspace = true
 
 [dependencies]
-anyhow = "1.0.98"
+anyhow = { workspace = true }
 async-trait = "0.1.88"
 common = { path = "../common" }
+canvas = { path = "../canvas", features = ["gui"] }
 
+ratatui = { workspace = true }
+crossterm = { workspace = true }
 prost-types = { workspace = true }
-crossterm = "0.28.1"
 dirs = "6.0.0"
 dotenvy = "0.15.7"
 lazy_static = "1.5.0"
 prost = "0.13.5"
-ratatui = { version = "0.29.0", features = ["crossterm"] }
 serde = { version = "1.0.219", features = ["derive"] }
 serde_json = "1.0.140"
 time = "0.3.41"
 tokio = { version = "1.44.2", features = ["full", "macros"] }
-toml = "0.8.20"
+toml = { workspace = true }
 tonic = "0.13.0"
 tracing = "0.1.41"
 tracing-subscriber = "0.3.19"
 tui-textarea = { version = "0.7.0", features = ["crossterm", "ratatui", "search"] }
 unicode-segmentation = "1.12.0"
-unicode-width = "0.2.0"
+unicode-width.workspace = true
 
 [features]
 default = []

client/canvas_config.toml

@@ -0,0 +1,58 @@
+# canvas_config.toml - Complete Canvas Configuration
+
+[behavior]
+wrap_around_fields = true
+auto_save_on_field_change = false
+word_chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_"
+max_suggestions = 6
+
+[appearance]
+cursor_style = "block"  # "block", "bar", "underline"
+show_field_numbers = false
+highlight_current_field = true
+
+# Read-only mode keybindings (vim-style)
+[keybindings.read_only]
+move_left = ["h"]
+move_right = ["l"] 
+move_up = ["k"]
+move_down = ["j"]
+move_word_next = ["w"]
+move_word_end = ["e"]
+move_word_prev = ["b"]
+move_word_end_prev = ["ge"]
+move_line_start = ["0"]
+move_line_end = ["$"]
+move_first_line = ["gg"]
+move_last_line = ["shift+g"]
+next_field = ["Tab"]
+prev_field = ["Shift+Tab"]
+
+# Edit mode keybindings
+[keybindings.edit]
+delete_char_backward = ["Backspace"]
+delete_char_forward = ["Delete"]
+move_left = ["Left"]
+move_right = ["Right"]
+move_up = ["Up"]
+move_down = ["Down"]
+move_line_start = ["Home"]
+move_line_end = ["End"]
+move_word_next = ["Ctrl+Right"]
+move_word_prev = ["Ctrl+Left"]
+next_field = ["Tab"]
+prev_field = ["Shift+Tab"]
+trigger_autocomplete = ["Ctrl+p"]
+
+# Suggestion/autocomplete keybindings
+[keybindings.suggestions]
+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]
+move_up = ["Up"]
+move_down = ["Down"]

client/config.toml

@@ -2,9 +2,9 @@
 [keybindings]
 
 enter_command_mode = [":", "ctrl+;"]
-next_buffer = ["ctrl+l"]
-previous_buffer = ["ctrl+h"] 
-close_buffer = ["ctrl+k"]
+next_buffer = ["space+b+n"]
+previous_buffer = ["space+b+p"] 
+close_buffer = ["space+b+d"]
 
 [keybindings.general]
 move_up = ["k", "Up"]
@@ -22,8 +22,6 @@ open_search = ["ctrl+f"]
 [keybindings.common]
 save = ["ctrl+s"]
 quit = ["ctrl+q"]
-# !!!change to space b r in the future and from edit mode 
-revert = ["ctrl+r"]
 
 force_quit = ["ctrl+shift+q"]
 save_and_quit = ["ctrl+shift+s"]
@@ -31,6 +29,7 @@ move_up = ["Up"]
 move_down = ["Down"]
 toggle_sidebar = ["ctrl+t"]
 toggle_buffer_list = ["ctrl+b"]
+revert = ["space+b+r"]
 
 # MODE SPECIFIC
 # READ ONLY MODE
@@ -70,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/docs/canvas_add_functionality.md

@@ -0,0 +1,124 @@
+## How Canvas Library Custom Functionality Works
+
+### 1. **The Canvas Library Calls YOUR Custom Code First**
+
+When you call `ActionDispatcher::dispatch()`, here's what happens:
+
+```rust
+// Inside canvas library (canvas/src/actions/edit.rs):
+pub async fn execute_canvas_action<S: CanvasState>(
+    action: CanvasAction,
+    state: &mut S,
+    ideal_cursor_column: &mut usize,
+) -> Result<ActionResult> {
+    // 1. FIRST: Canvas library calls YOUR custom handler
+    if let Some(result) = state.handle_feature_action(&action, &context) {
+        return Ok(ActionResult::HandledByFeature(result)); // YOUR code handled it
+    }
+
+    // 2. ONLY IF your code returns None: Canvas handles generic actions
+    handle_generic_canvas_action(action, state, ideal_cursor_column).await
+}
+```
+
+### 2. **Your Extension Point: `handle_feature_action`**
+
+You add custom functionality by implementing `handle_feature_action` in your states:
+
+```rust
+// In src/state/pages/auth.rs
+impl CanvasState for LoginState {
+    // ... other methods ...
+
+    fn handle_feature_action(&mut self, action: &CanvasAction, context: &ActionContext) -> Option<String> {
+        match action {
+            // Custom login-specific actions
+            CanvasAction::Custom(action_str) if action_str == "submit_login" => {
+                if self.username.is_empty() || self.password.is_empty() {
+                    Some("Please fill in all required fields".to_string())
+                } else {
+                    // Trigger login process
+                    Some(format!("Logging in user: {}", self.username))
+                }
+            }
+            
+            CanvasAction::Custom(action_str) if action_str == "clear_form" => {
+                self.username.clear();
+                self.password.clear();
+                self.set_has_unsaved_changes(false);
+                Some("Login form cleared".to_string())
+            }
+
+            // Custom behavior for standard actions
+            CanvasAction::NextField => {
+                // Custom validation when moving between fields
+                if self.current_field == 0 && self.username.is_empty() {
+                    Some("Username cannot be empty".to_string())
+                } else {
+                    None // Let canvas library handle the normal field movement
+                }
+            }
+
+            // Let canvas library handle everything else
+            _ => None,
+        }
+    }
+}
+```
+
+### 3. **Multiple Ways to Add Custom Functionality**
+
+#### A) **Custom Actions via Config**
+```toml
+# In config.toml
+[keybindings.edit]
+submit_login = ["ctrl+enter"]
+clear_form = ["ctrl+r"]
+```
+
+#### B) **Override Standard Actions**
+```rust
+fn handle_feature_action(&mut self, action: &CanvasAction, context: &ActionContext) -> Option<String> {
+    match action {
+        CanvasAction::InsertChar('p') if self.current_field == 1 => {
+            // Custom behavior when typing 'p' in password field
+            Some("Password field - use secure input".to_string())
+        }
+        _ => None, // Let canvas handle normally
+    }
+}
+```
+
+#### C) **Context-Aware Logic**
+```rust
+fn handle_feature_action(&mut self, action: &CanvasAction, context: &ActionContext) -> Option<String> {
+    match action {
+        CanvasAction::MoveDown => {
+            // Custom logic based on current state
+            if context.current_field == 1 && context.current_input.len() < 8 {
+                Some("Password should be at least 8 characters".to_string())
+            } else {
+                None // Normal field movement
+            }
+        }
+        _ => None,
+    }
+}
+```
+
+## The Canvas Library Philosophy
+
+**Canvas Library = Generic behavior + Your extension points**
+
+- ✅ **Canvas handles**: Character insertion, cursor movement, field navigation, etc.
+- ✅ **You handle**: Validation, submission, clearing, app-specific logic
+- ✅ **You decide**: Return `Some(message)` to override, `None` to use canvas default
+
+## Summary
+
+You **don't communicate with the library elsewhere**. Instead:
+
+1. **Canvas library calls your code first** via `handle_feature_action`
+2. **Your code decides** whether to handle the action or let canvas handle it
+3. **Canvas library handles** generic form behavior when you return `None`
+

client/src/components/admin/add_table.rs

@@ -3,8 +3,7 @@ use crate::config::colors::themes::Theme;
 use crate::state::app::highlight::HighlightState;
 use crate::state::app::state::AppState;
 use crate::state::pages::add_table::{AddTableFocus, AddTableState};
-use crate::state::pages::canvas_state::CanvasState;
-// use crate::state::pages::add_table::{ColumnDefinition, LinkDefinition}; // Not directly used here
+use canvas::canvas::{render_canvas, CanvasState, HighlightState as CanvasHighlightState}; // Use canvas library
 use ratatui::{
     layout::{Alignment, Constraint, Direction, Layout, Rect},
     style::{Modifier, Style},
@@ -12,16 +11,24 @@ use ratatui::{
     widgets::{Block, BorderType, Borders, Cell, Paragraph, Row, Table},
     Frame,
 };
-use crate::components::handlers::canvas::render_canvas;
 use crate::components::common::dialog;
 
+// 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 },
+    }
+}
+
 /// Renders the Add New Table page layout, structuring the display of table information,
 /// input fields, and action buttons. Adapts layout based on terminal width.
 pub fn render_add_table(
     f: &mut Frame,
     area: Rect,
     theme: &Theme,
-    app_state: &AppState, // Currently unused, might be needed later
+    app_state: &AppState,
     add_table_state: &mut AddTableState,
     is_edit_mode: bool, // Determines if canvas inputs are in edit mode
     highlight_state: &HighlightState, // For text highlighting in canvas
@@ -349,17 +356,15 @@ pub fn render_add_table(
         &mut add_table_state.column_table_state,
     );
 
-    // --- Canvas Rendering (Column Definition Input) ---
+    // --- Canvas Rendering (Column Definition Input) - USING CANVAS LIBRARY ---
+    let canvas_highlight_state = convert_highlight_state(highlight_state);
     let _active_field_rect = render_canvas(
         f,
         canvas_area,
-        add_table_state,
-        &add_table_state.fields(),
-        &add_table_state.current_field(),
-        &add_table_state.inputs(),
-        theme,
+        add_table_state,        // AddTableState implements CanvasState
+        theme,                  // Theme implements CanvasTheme
         is_edit_mode && focus_on_canvas_inputs,
-        highlight_state,
+        &canvas_highlight_state,
     );
 
     // --- Button Style Helpers ---
@@ -557,7 +562,7 @@ pub fn render_add_table(
 
     // --- DIALOG ---
     // Render the dialog overlay if it's active
-    if app_state.ui.dialog.dialog_show { // Use the passed-in app_state
+    if app_state.ui.dialog.dialog_show {
         dialog::render_dialog(
             f,
             f.area(), // Render over the whole frame area

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/components/common/search_palette.rs

@@ -55,10 +55,10 @@ pub fn render_search_palette(
         .style(Style::default().fg(theme.fg));
     f.render_widget(input_text, inner_chunks[0]);
     // Set cursor position
-    f.set_cursor(
+    f.set_cursor_position((
         inner_chunks[0].x + state.cursor_position as u16 + 1,
         inner_chunks[0].y + 1,
-    );
+    ));
 
     // --- Render Results List ---
     if state.is_loading {

client/src/components/common/status_line.rs

@@ -5,9 +5,10 @@ use ratatui::{
     layout::Rect,
     style::Style,
     text::{Line, Span, Text},
-    widgets::{Paragraph, Wrap}, // Make sure Wrap is imported
+    widgets::Paragraph,
     Frame,
 };
+use ratatui::widgets::Wrap;
 use std::path::Path;
 use unicode_width::UnicodeWidthStr;
 

client/src/components/form/form.rs

@@ -1,9 +1,7 @@
 // src/components/form/form.rs
 use crate::components::common::autocomplete;
-use crate::components::handlers::canvas::render_canvas;
 use crate::config::colors::themes::Theme;
-use crate::state::app::highlight::HighlightState;
-use crate::state::pages::canvas_state::CanvasState;
+use canvas::canvas::{CanvasState, render_canvas, HighlightState};
 use crate::state::pages::form::FormState;
 use ratatui::{
     layout::{Alignment, Constraint, Direction, Layout, Margin, Rect},
@@ -15,7 +13,7 @@ use ratatui::{
 pub fn render_form(
     f: &mut Frame,
     area: Rect,
-    form_state: &FormState, // <--- CHANGE THIS to the concrete type
+    form_state: &FormState,
     fields: &[&str],
     current_field_idx: &usize,
     inputs: &[&String],
@@ -58,32 +56,31 @@ pub fn render_form(
             total_count, current_position, total_count
         )
     };
+    
     let count_para = Paragraph::new(count_position_text)
         .style(Style::default().fg(theme.fg))
         .alignment(Alignment::Left);
     f.render_widget(count_para, main_layout[0]);
 
-    // Get the active field's rect from render_canvas
+    // Use the canvas library's render_canvas function
     let active_field_rect = render_canvas(
         f,
         main_layout[1],
         form_state,
-        fields,
-        current_field_idx,
-        inputs,
         theme,
         is_edit_mode,
         highlight_state,
     );
 
-    // --- NEW: RENDER AUTOCOMPLETE ---
+    // --- RENDER RICH AUTOCOMPLETE ONLY ---
     if form_state.autocomplete_active {
         if let Some(active_rect) = active_field_rect {
-            let selected_index = form_state.get_selected_suggestion_index();
+            // Get selected index directly from form_state
+            let selected_index = form_state.selected_suggestion_index;
 
+            // Only render rich suggestions (your Hit objects)
             if let Some(rich_suggestions) = form_state.get_rich_suggestions() {
                 if !rich_suggestions.is_empty() {
-                    // CHANGE THIS to call the renamed function
                     autocomplete::render_hit_autocomplete_dropdown(
                         f,
                         active_rect,
@@ -95,21 +92,7 @@ pub fn render_form(
                     );
                 }
             }
-            // The fallback to simple suggestions is now correctly handled
-            // because the original render_autocomplete_dropdown exists again.
-            else if let Some(simple_suggestions) = form_state.get_suggestions() {
-                if !simple_suggestions.is_empty() {
-                    autocomplete::render_autocomplete_dropdown(
-                        f,
-                        active_rect,
-                        f.area(),
-                        theme,
-                        simple_suggestions,
-                        selected_index,
-                    );
-                }
-            }
+            // Removed simple suggestions - we only use rich ones now!
         }
     }
 }
-

client/src/components/handlers/canvas.rs

@@ -9,13 +9,15 @@ use ratatui::{
 };
 use crate::config::colors::themes::Theme;
 use crate::state::app::highlight::HighlightState;
-use crate::state::pages::canvas_state::CanvasState;
+use crate::state::pages::canvas_state::CanvasState as LegacyCanvasState;
+use canvas::canvas::CanvasState as LibraryCanvasState;
 use std::cmp::{max, min};
 
+/// Render canvas for legacy CanvasState (AddTableState, LoginState, RegisterState, AddLogicState)
 pub fn render_canvas(
     f: &mut Frame,
     area: Rect,
-    form_state: &impl CanvasState,
+    form_state: &impl LegacyCanvasState,
     fields: &[&str],
     current_field_idx: &usize,
     inputs: &[&String],
@@ -23,12 +25,75 @@ pub fn render_canvas(
     is_edit_mode: bool,
     highlight_state: &HighlightState,
 ) -> Option<Rect> {
+    render_canvas_impl(
+        f,
+        area,
+        fields,
+        current_field_idx,
+        inputs,
+        theme,
+        is_edit_mode,
+        highlight_state,
+        form_state.current_cursor_pos(),
+        form_state.has_unsaved_changes(),
+        |i| form_state.get_display_value_for_field(i).to_string(),
+        |i| form_state.has_display_override(i),
+    )
+}
+
+/// Render canvas for library CanvasState (FormState)
+pub fn render_canvas_library(
+    f: &mut Frame,
+    area: Rect,
+    form_state: &impl LibraryCanvasState,
+    fields: &[&str],
+    current_field_idx: &usize,
+    inputs: &[&String],
+    theme: &Theme,
+    is_edit_mode: bool,
+    highlight_state: &HighlightState,
+) -> Option<Rect> {
+    render_canvas_impl(
+        f,
+        area,
+        fields,
+        current_field_idx,
+        inputs,
+        theme,
+        is_edit_mode,
+        highlight_state,
+        form_state.current_cursor_pos(),
+        form_state.has_unsaved_changes(),
+        |i| form_state.get_display_value_for_field(i).to_string(),
+        |i| form_state.has_display_override(i),
+    )
+}
+
+/// Internal implementation shared by both render functions
+fn render_canvas_impl<F1, F2>(
+    f: &mut Frame,
+    area: Rect,
+    fields: &[&str],
+    current_field_idx: &usize,
+    inputs: &[&String],
+    theme: &Theme,
+    is_edit_mode: bool,
+    highlight_state: &HighlightState,
+    current_cursor_pos: usize,
+    has_unsaved_changes: bool,
+    get_display_value: F1,
+    has_display_override: F2,
+) -> Option<Rect>
+where
+    F1: Fn(usize) -> String,
+    F2: Fn(usize) -> bool,
+{
     let columns = Layout::default()
         .direction(Direction::Horizontal)
         .constraints([Constraint::Percentage(30), Constraint::Percentage(70)])
         .split(area);
 
-    let border_style = if form_state.has_unsaved_changes() {
+    let border_style = if has_unsaved_changes {
         Style::default().fg(theme.warning)
     } else if is_edit_mode {
         Style::default().fg(theme.accent)
@@ -75,17 +140,16 @@ pub fn render_canvas(
 
     for (i, _input) in inputs.iter().enumerate() {
         let is_active = i == *current_field_idx;
-        let current_cursor_pos = form_state.current_cursor_pos();
 
-        // Use the trait method to get display value
-        let text = form_state.get_display_value_for_field(i);
+        // Use the provided closure to get display value
+        let text = get_display_value(i);
         let text_len = text.chars().count();
         let line: Line;
 
         match highlight_state {
             HighlightState::Off => {
                 line = Line::from(Span::styled(
-                    text,
+                    &text,
                     if is_active {
                         Style::default().fg(theme.highlight)
                     } else {
@@ -141,11 +205,11 @@ pub fn render_canvas(
                             Span::styled(after, normal_style_in_highlight),
                         ]);
                     } else {
-                        line = Line::from(Span::styled(text, highlight_style));
+                        line = Line::from(Span::styled(&text, highlight_style));
                     }
                 } else {
                     line = Line::from(Span::styled(
-                        text,
+                        &text,
                         if is_active { normal_style_in_highlight } else { normal_style_outside }
                     ));
                 }
@@ -158,10 +222,10 @@ pub fn render_canvas(
                 let normal_style_outside = Style::default().fg(theme.fg);
 
                 if i >= start_field && i <= end_field {
-                    line = Line::from(Span::styled(text, highlight_style));
+                    line = Line::from(Span::styled(&text, highlight_style));
                 } else {
                     line = Line::from(Span::styled(
-                        text,
+                        &text,
                         if is_active { normal_style_in_highlight } else { normal_style_outside }
                     ));
                 }
@@ -174,14 +238,13 @@ pub fn render_canvas(
         if is_active {
             active_field_input_rect = Some(input_rows[i]);
 
-            // --- CORRECTED CURSOR POSITIONING LOGIC ---
-            // Use the new generic trait method to check for an override.
-            let cursor_x = if form_state.has_display_override(i) {
+            // Use the provided closure to check for display override
+            let cursor_x = if has_display_override(i) {
                 // If an override exists, place the cursor at the end.
                 input_rows[i].x + text.chars().count() as u16
             } else {
                 // Otherwise, use the real cursor position.
-                input_rows[i].x + form_state.current_cursor_pos() as u16
+                input_rows[i].x + current_cursor_pos as u16
             };
             let cursor_y = input_rows[i].y;
             f.set_cursor_position((cursor_x, cursor_y));

client/src/config/binds/config.rs

@@ -251,47 +251,206 @@ impl Config {
         key: KeyCode,
         modifiers: KeyModifiers,
     ) -> bool {
-        // For multi-character bindings without modifiers, handle them in matches_key_sequence.
+        // Special handling for shift+character combinations
+        if binding.to_lowercase().starts_with("shift+") {
+            let parts: Vec<&str> = binding.split('+').collect();
+            if parts.len() == 2 && parts[1].len() == 1 {
+                let expected_lowercase = parts[1].chars().next().unwrap().to_lowercase().next().unwrap();
+                let expected_uppercase = expected_lowercase.to_uppercase().next().unwrap();
+                if let KeyCode::Char(actual_char) = key {
+                    if actual_char == expected_uppercase && modifiers.contains(KeyModifiers::SHIFT) {
+                        return true;
+                    }
+                }
+            }
+        }
+
+        // Handle Shift+Tab -> BackTab
+        if binding.to_lowercase() == "shift+tab" && key == KeyCode::BackTab && modifiers.is_empty() {
+            return true;
+        }
+
+        // Handle multi-character bindings (all standard keys without modifiers)
         if binding.len() > 1 && !binding.contains('+') {
             return match binding.to_lowercase().as_str() {
+                // Navigation keys
                 "left" => key == KeyCode::Left,
                 "right" => key == KeyCode::Right,
                 "up" => key == KeyCode::Up,
                 "down" => key == KeyCode::Down,
-                "esc" => key == KeyCode::Esc,
-                "enter" => key == KeyCode::Enter,
-                "delete" => key == KeyCode::Delete,
+                "home" => key == KeyCode::Home,
+                "end" => key == KeyCode::End,
+                "pageup" | "pgup" => key == KeyCode::PageUp,
+                "pagedown" | "pgdn" => key == KeyCode::PageDown,
+                
+                // Editing keys
+                "insert" | "ins" => key == KeyCode::Insert,
+                "delete" | "del" => key == KeyCode::Delete,
                 "backspace" => key == KeyCode::Backspace,
+                
+                // Tab keys
                 "tab" => key == KeyCode::Tab,
                 "backtab" => key == KeyCode::BackTab,
-                _ => false,
+                
+                // Special keys
+                "enter" | "return" => key == KeyCode::Enter,
+                "escape" | "esc" => key == KeyCode::Esc,
+                "space" => key == KeyCode::Char(' '),
+                
+                // Function keys F1-F24
+                "f1" => key == KeyCode::F(1),
+                "f2" => key == KeyCode::F(2),
+                "f3" => key == KeyCode::F(3),
+                "f4" => key == KeyCode::F(4),
+                "f5" => key == KeyCode::F(5),
+                "f6" => key == KeyCode::F(6),
+                "f7" => key == KeyCode::F(7),
+                "f8" => key == KeyCode::F(8),
+                "f9" => key == KeyCode::F(9),
+                "f10" => key == KeyCode::F(10),
+                "f11" => key == KeyCode::F(11),
+                "f12" => key == KeyCode::F(12),
+                "f13" => key == KeyCode::F(13),
+                "f14" => key == KeyCode::F(14),
+                "f15" => key == KeyCode::F(15),
+                "f16" => key == KeyCode::F(16),
+                "f17" => key == KeyCode::F(17),
+                "f18" => key == KeyCode::F(18),
+                "f19" => key == KeyCode::F(19),
+                "f20" => key == KeyCode::F(20),
+                "f21" => key == KeyCode::F(21),
+                "f22" => key == KeyCode::F(22),
+                "f23" => key == KeyCode::F(23),
+                "f24" => key == KeyCode::F(24),
+                
+                // Lock keys
+                "capslock" => key == KeyCode::CapsLock,
+                "scrolllock" => key == KeyCode::ScrollLock,
+                "numlock" => key == KeyCode::NumLock,
+                
+                // System keys
+                "printscreen" => key == KeyCode::PrintScreen,
+                "pause" => key == KeyCode::Pause,
+                "menu" => key == KeyCode::Menu,
+                "keypadbegin" => key == KeyCode::KeypadBegin,
+                
+                // Media keys
+                "mediaplay" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Play),
+                "mediapause" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Pause),
+                "mediaplaypause" => key == KeyCode::Media(crossterm::event::MediaKeyCode::PlayPause),
+                "mediareverse" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Reverse),
+                "mediastop" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Stop),
+                "mediafastforward" => key == KeyCode::Media(crossterm::event::MediaKeyCode::FastForward),
+                "mediarewind" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Rewind),
+                "mediatracknext" => key == KeyCode::Media(crossterm::event::MediaKeyCode::TrackNext),
+                "mediatrackprevious" => key == KeyCode::Media(crossterm::event::MediaKeyCode::TrackPrevious),
+                "mediarecord" => key == KeyCode::Media(crossterm::event::MediaKeyCode::Record),
+                "medialowervolume" => key == KeyCode::Media(crossterm::event::MediaKeyCode::LowerVolume),
+                "mediaraisevolume" => key == KeyCode::Media(crossterm::event::MediaKeyCode::RaiseVolume),
+                "mediamutevolume" => key == KeyCode::Media(crossterm::event::MediaKeyCode::MuteVolume),
+                
+                // Multi-key sequences need special handling
+                "gg" => false, // This needs sequence handling
+                _ => {
+                    // Handle single characters and punctuation
+                    if binding.len() == 1 {
+                        if let Some(c) = binding.chars().next() {
+                            key == KeyCode::Char(c)
+                        } else {
+                            false
+                        }
+                    } else {
+                        false
+                    }
+                }
             };
         }
 
+        // Handle modifier combinations (like "Ctrl+F5", "Alt+Shift+A")
         let parts: Vec<&str> = binding.split('+').collect();
         let mut expected_modifiers = KeyModifiers::empty();
         let mut expected_key = None;
 
         for part in parts {
             match part.to_lowercase().as_str() {
-                "ctrl" => expected_modifiers |= KeyModifiers::CONTROL,
+                // Modifiers
+                "ctrl" | "control" => expected_modifiers |= KeyModifiers::CONTROL,
                 "shift" => expected_modifiers |= KeyModifiers::SHIFT,
                 "alt" => expected_modifiers |= KeyModifiers::ALT,
+                "super" | "windows" | "cmd" => expected_modifiers |= KeyModifiers::SUPER,
+                "hyper" => expected_modifiers |= KeyModifiers::HYPER,
+                "meta" => expected_modifiers |= KeyModifiers::META,
+                
+                // Navigation keys
                 "left" => expected_key = Some(KeyCode::Left),
                 "right" => expected_key = Some(KeyCode::Right),
                 "up" => expected_key = Some(KeyCode::Up),
                 "down" => expected_key = Some(KeyCode::Down),
-                "esc" => expected_key = Some(KeyCode::Esc),
-                "enter" => expected_key = Some(KeyCode::Enter),
-                "delete" => expected_key = Some(KeyCode::Delete),
+                "home" => expected_key = Some(KeyCode::Home),
+                "end" => expected_key = Some(KeyCode::End),
+                "pageup" | "pgup" => expected_key = Some(KeyCode::PageUp),
+                "pagedown" | "pgdn" => expected_key = Some(KeyCode::PageDown),
+                
+                // Editing keys
+                "insert" | "ins" => expected_key = Some(KeyCode::Insert),
+                "delete" | "del" => expected_key = Some(KeyCode::Delete),
                 "backspace" => expected_key = Some(KeyCode::Backspace),
+                
+                // Tab keys
                 "tab" => expected_key = Some(KeyCode::Tab),
                 "backtab" => expected_key = Some(KeyCode::BackTab),
+                
+                // Special keys
+                "enter" | "return" => expected_key = Some(KeyCode::Enter),
+                "escape" | "esc" => expected_key = Some(KeyCode::Esc),
+                "space" => expected_key = Some(KeyCode::Char(' ')),
+                
+                // Function keys
+                "f1" => expected_key = Some(KeyCode::F(1)),
+                "f2" => expected_key = Some(KeyCode::F(2)),
+                "f3" => expected_key = Some(KeyCode::F(3)),
+                "f4" => expected_key = Some(KeyCode::F(4)),
+                "f5" => expected_key = Some(KeyCode::F(5)),
+                "f6" => expected_key = Some(KeyCode::F(6)),
+                "f7" => expected_key = Some(KeyCode::F(7)),
+                "f8" => expected_key = Some(KeyCode::F(8)),
+                "f9" => expected_key = Some(KeyCode::F(9)),
+                "f10" => expected_key = Some(KeyCode::F(10)),
+                "f11" => expected_key = Some(KeyCode::F(11)),
+                "f12" => expected_key = Some(KeyCode::F(12)),
+                "f13" => expected_key = Some(KeyCode::F(13)),
+                "f14" => expected_key = Some(KeyCode::F(14)),
+                "f15" => expected_key = Some(KeyCode::F(15)),
+                "f16" => expected_key = Some(KeyCode::F(16)),
+                "f17" => expected_key = Some(KeyCode::F(17)),
+                "f18" => expected_key = Some(KeyCode::F(18)),
+                "f19" => expected_key = Some(KeyCode::F(19)),
+                "f20" => expected_key = Some(KeyCode::F(20)),
+                "f21" => expected_key = Some(KeyCode::F(21)),
+                "f22" => expected_key = Some(KeyCode::F(22)),
+                "f23" => expected_key = Some(KeyCode::F(23)),
+                "f24" => expected_key = Some(KeyCode::F(24)),
+                
+                // Lock keys
+                "capslock" => expected_key = Some(KeyCode::CapsLock),
+                "scrolllock" => expected_key = Some(KeyCode::ScrollLock),
+                "numlock" => expected_key = Some(KeyCode::NumLock),
+                
+                // System keys
+                "printscreen" => expected_key = Some(KeyCode::PrintScreen),
+                "pause" => expected_key = Some(KeyCode::Pause),
+                "menu" => expected_key = Some(KeyCode::Menu),
+                "keypadbegin" => expected_key = Some(KeyCode::KeypadBegin),
+                
+                // Special characters and colon (legacy support)
                 ":" => expected_key = Some(KeyCode::Char(':')),
+                
+                // Single character (letters, numbers, punctuation)
                 part => {
                     if part.len() == 1 {
-                        let c = part.chars().next().unwrap();
-                        expected_key = Some(KeyCode::Char(c));
+                        if let Some(c) = part.chars().next() {
+                            expected_key = Some(KeyCode::Char(c));
+                        }
                     }
                 }
             }

client/src/config/binds/key_sequences.rs

@@ -149,14 +149,17 @@ fn parse_key_part(part: &str) -> Option<ParsedKey> {
     let mut code = None;
 
     if part.contains('+') {
-        // This handles modifiers like "ctrl+s"
+        // This handles modifiers like "ctrl+s", "super+shift+f5"
         let components: Vec<&str> = part.split('+').collect();
 
         for component in components {
             match component.to_lowercase().as_str() {
-                "ctrl" => modifiers |= KeyModifiers::CONTROL,
+                "ctrl" | "control" => modifiers |= KeyModifiers::CONTROL,
                 "shift" => modifiers |= KeyModifiers::SHIFT,
                 "alt" => modifiers |= KeyModifiers::ALT,
+                "super" | "windows" | "cmd" => modifiers |= KeyModifiers::SUPER,
+                "hyper" => modifiers |= KeyModifiers::HYPER,
+                "meta" => modifiers |= KeyModifiers::META,
                 _ => {
                     // Last component is the key
                     code = string_to_keycode(component);

client/src/config/colors/themes.rs

@@ -1,5 +1,6 @@
-// src/client/themes/colors.rs
+// src/config/colors/themes.rs
 use ratatui::style::Color;
+use canvas::canvas::CanvasTheme;
 
 #[derive(Debug, Clone)]
 pub struct Theme {
@@ -74,3 +75,37 @@ impl Default for Theme {
         Self::light() // Default to light theme
     }
 }
+
+impl CanvasTheme for Theme {
+    fn bg(&self) -> Color {
+        self.bg
+    }
+
+    fn fg(&self) -> Color {
+        self.fg
+    }
+
+    fn border(&self) -> Color {
+        self.border
+    }
+
+    fn accent(&self) -> Color {
+        self.accent
+    }
+
+    fn secondary(&self) -> Color {
+        self.secondary
+    }
+
+    fn highlight(&self) -> Color {
+        self.highlight
+    }
+
+    fn highlight_bg(&self) -> Color {
+        self.highlight_bg
+    }
+
+    fn warning(&self) -> Color {
+        self.warning
+    }
+}

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

@@ -1,7 +1,7 @@
 // src/functions/modes/edit/add_table_e.rs
 use crate::state::pages::add_table::AddTableState;
-use crate::state::pages::canvas_state::CanvasState; // Use trait
 use crossterm::event::{KeyCode, KeyEvent};
+use canvas::canvas::CanvasState;
 use anyhow::Result;
 
 #[derive(PartialEq)]

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/edit/form_e.rs

@@ -1,13 +1,13 @@
 // src/functions/modes/edit/form_e.rs
 
 use crate::services::grpc_client::GrpcClient;
-use crate::state::pages::canvas_state::CanvasState;
 use crate::state::pages::form::FormState;
 use crate::state::app::state::AppState;
 use crate::tui::functions::common::form::{revert, save};
 use crate::tui::functions::common::form::SaveOutcome;
 use crate::modes::handlers::event::EventOutcome;
 use crossterm::event::{KeyCode, KeyEvent};
+use canvas::canvas::CanvasState;
 use std::any::Any;
 use anyhow::Result;
 

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

@@ -1,8 +1,8 @@
 // src/functions/modes/read_only/add_table_ro.rs
 use crate::config::binds::key_sequences::KeySequenceTracker;
 use crate::state::pages::add_table::AddTableState;
-use crate::state::pages::canvas_state::CanvasState;
 use crate::state::app::state::AppState;
+use canvas::canvas::CanvasState;
 use anyhow::Result;
 
 // Re-use word navigation helpers if they are public or move them to a common module

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/functions/modes/read_only/form_ro.rs

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

client/src/modes/canvas/edit.rs

@@ -1,7 +1,7 @@
 // src/modes/canvas/edit.rs
 use crate::config::binds::config::Config;
 use crate::functions::modes::edit::{
-    add_logic_e, add_table_e, auth_e, form_e,
+    add_logic_e, add_table_e, form_e,
 };
 use crate::modes::handlers::event::EventHandler;
 use crate::services::grpc_client::GrpcClient;
@@ -9,14 +9,15 @@ use crate::state::app::state::AppState;
 use crate::state::pages::admin::AdminState;
 use crate::state::pages::{
     auth::{LoginState, RegisterState},
-    canvas_state::CanvasState,
     form::FormState,
 };
+use canvas::canvas::CanvasState;
+use canvas::{canvas::CanvasAction, dispatcher::ActionDispatcher, canvas::ActionResult};
 use anyhow::Result;
 use common::proto::komp_ac::search::search_response::Hit;
 use crossterm::event::{KeyCode, KeyEvent};
 use tokio::sync::mpsc;
-use tracing::{debug, info};
+use tracing::info;
 
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub enum EditEventOutcome {
@@ -74,6 +75,111 @@ async fn trigger_form_autocomplete_search(
     }
 }
 
+pub async fn handle_form_edit_with_canvas(
+    key_event: KeyEvent,
+    config: &Config,
+    form_state: &mut FormState,
+    ideal_cursor_column: &mut usize,
+) -> Result<String> {
+    // Try canvas action from key first
+    if let Some(canvas_action) = CanvasAction::from_key(key_event.code) {
+        match ActionDispatcher::dispatch(canvas_action, form_state, ideal_cursor_column).await {
+            Ok(ActionResult::Success(msg)) => {
+                return Ok(msg.unwrap_or_default());
+            }
+            Ok(ActionResult::HandledByFeature(msg)) => {
+                return Ok(msg);
+            }
+            Ok(ActionResult::Error(msg)) => {
+                return Ok(format!("Error: {}", msg));
+            }
+            Ok(ActionResult::RequiresContext(msg)) => {
+                return Ok(format!("Context needed: {}", msg));
+            }
+            Err(_) => {
+                // Fall through to try config mapping
+            }
+        }
+    }
+
+    // Try config-mapped action
+    if let Some(action_str) = config.get_edit_action_for_key(key_event.code, key_event.modifiers) {
+        let canvas_action = CanvasAction::from_string(&action_str);
+        match ActionDispatcher::dispatch(canvas_action, form_state, ideal_cursor_column).await {
+            Ok(ActionResult::Success(msg)) => {
+                return Ok(msg.unwrap_or_default());
+            }
+            Ok(ActionResult::HandledByFeature(msg)) => {
+                return Ok(msg);
+            }
+            Ok(ActionResult::Error(msg)) => {
+                return Ok(format!("Error: {}", msg));
+            }
+            Ok(ActionResult::RequiresContext(msg)) => {
+                return Ok(format!("Context needed: {}", msg));
+            }
+            Err(e) => {
+                return Ok(format!("Action failed: {}", e));
+            }
+        }
+    }
+
+    Ok(String::new())
+}
+
+/// NEW: Unified canvas action handler for any CanvasState (LoginState, RegisterState, etc.)
+/// This replaces the old auth_e::execute_edit_action calls with the new canvas library
+async fn handle_canvas_state_edit<S: CanvasState>(
+    key: KeyEvent,
+    config: &Config,
+    state: &mut S,
+    ideal_cursor_column: &mut usize,
+) -> Result<String> {
+    // Try direct key mapping first (same pattern as FormState)
+    if let Some(canvas_action) = CanvasAction::from_key(key.code) {
+        match ActionDispatcher::dispatch(canvas_action, state, ideal_cursor_column).await {
+            Ok(ActionResult::Success(msg)) => {
+                return Ok(msg.unwrap_or_default());
+            }
+            Ok(ActionResult::HandledByFeature(msg)) => {
+                return Ok(msg);
+            }
+            Ok(ActionResult::Error(msg)) => {
+                return Ok(format!("Error: {}", msg));
+            }
+            Ok(ActionResult::RequiresContext(msg)) => {
+                return Ok(format!("Context needed: {}", msg));
+            }
+            Err(_) => {
+                // Fall through to try config mapping
+            }
+        }
+    }
+
+    // Try config-mapped action (same pattern as FormState)
+    if let Some(action_str) = config.get_edit_action_for_key(key.code, key.modifiers) {
+        let canvas_action = CanvasAction::from_string(&action_str);
+        match ActionDispatcher::dispatch(canvas_action, state, ideal_cursor_column).await {
+            Ok(ActionResult::Success(msg)) => {
+                return Ok(msg.unwrap_or_default());
+            }
+            Ok(ActionResult::HandledByFeature(msg)) => {
+                return Ok(msg);
+            }
+            Ok(ActionResult::Error(msg)) => {
+                return Ok(format!("Error: {}", msg));
+            }
+            Ok(ActionResult::RequiresContext(msg)) => {
+                return Ok(format!("Context needed: {}", msg));
+            }
+            Err(e) => {
+                return Ok(format!("Action failed: {}", e));
+            }
+        }
+    }
+
+    Ok(String::new())
+}
 
 #[allow(clippy::too_many_arguments)]
 pub async fn handle_edit_event(
@@ -231,21 +337,21 @@ pub async fn handle_edit_event(
             return Ok(EditEventOutcome::ExitEditMode);
         }
 
-        // Handle all other edit actions
+        // Handle all other edit actions - NOW USING CANVAS LIBRARY
         let msg = if app_state.ui.show_login {
-            // FIX: Pass &mut event_handler.ideal_cursor_column
-            auth_e::execute_edit_action(
-                action_str,
+            // NEW: Use unified canvas handler instead of auth_e::execute_edit_action
+            handle_canvas_state_edit(
                 key,
+                config,
                 login_state,
                 &mut event_handler.ideal_cursor_column,
             )
             .await?
         } else if app_state.ui.show_add_table {
-            // FIX: Pass &mut event_handler.ideal_cursor_column
-            add_table_e::execute_edit_action(
-                action_str,
+            // NEW: Use unified canvas handler instead of add_table_e::execute_edit_action
+            handle_canvas_state_edit(
                 key,
+                config,
                 &mut admin_state.add_table_state,
                 &mut event_handler.ideal_cursor_column,
             )
@@ -260,10 +366,10 @@ pub async fn handle_edit_event(
             )
             .await?
         } else if app_state.ui.show_register {
-            // FIX: Pass &mut event_handler.ideal_cursor_column
-            auth_e::execute_edit_action(
-                action_str,
+            // NEW: Use unified canvas handler instead of auth_e::execute_edit_action
+            handle_canvas_state_edit(
                 key,
+                config,
                 register_state,
                 &mut event_handler.ideal_cursor_column,
             )
@@ -284,19 +390,19 @@ pub async fn handle_edit_event(
     // --- FALLBACK FOR CHARACTER INSERTION (IF NO OTHER BINDING MATCHED) ---
     if let KeyCode::Char(_) = key.code {
         let msg = if app_state.ui.show_login {
-            // FIX: Pass &mut event_handler.ideal_cursor_column
-            auth_e::execute_edit_action(
-                "insert_char",
+            // NEW: Use unified canvas handler instead of auth_e::execute_edit_action
+            handle_canvas_state_edit(
                 key,
+                config,
                 login_state,
                 &mut event_handler.ideal_cursor_column,
             )
             .await?
         } else if app_state.ui.show_add_table {
-            // FIX: Pass &mut event_handler.ideal_cursor_column
-            add_table_e::execute_edit_action(
-                "insert_char",
+            // NEW: Use unified canvas handler instead of add_table_e::execute_edit_action
+            handle_canvas_state_edit(
                 key,
+                config,
                 &mut admin_state.add_table_state,
                 &mut event_handler.ideal_cursor_column,
             )
@@ -311,10 +417,10 @@ pub async fn handle_edit_event(
             )
             .await?
         } else if app_state.ui.show_register {
-            // FIX: Pass &mut event_handler.ideal_cursor_column
-            auth_e::execute_edit_action(
-                "insert_char",
+            // NEW: Use unified canvas handler instead of auth_e::execute_edit_action
+            handle_canvas_state_edit(
                 key,
+                config,
                 register_state,
                 &mut event_handler.ideal_cursor_column,
             )

client/src/modes/canvas/read_only.rs

@@ -3,16 +3,70 @@
 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, CanvasState, ActionResult}, dispatcher::ActionDispatcher};
 use crossterm::event::KeyEvent;
 use anyhow::Result;
 
+pub async fn handle_form_readonly_with_canvas(
+    key_event: KeyEvent,
+    config: &Config,
+    form_state: &mut FormState,
+    ideal_cursor_column: &mut usize,
+) -> Result<String> {
+    // Try canvas action from key first
+    if let Some(canvas_action) = CanvasAction::from_key(key_event.code) {
+        match ActionDispatcher::dispatch(canvas_action, form_state, ideal_cursor_column).await {
+            Ok(ActionResult::Success(msg)) => {
+                return Ok(msg.unwrap_or_default());
+            }
+            Ok(ActionResult::HandledByFeature(msg)) => {
+                return Ok(msg);
+            }
+            Ok(ActionResult::Error(msg)) => {
+                return Ok(format!("Error: {}", msg));
+            }
+            Ok(ActionResult::RequiresContext(msg)) => {
+                return Ok(format!("Context needed: {}", msg));
+            }
+            Err(_) => {
+                // Fall through to try config mapping
+            }
+        }
+    }
+
+    // Try config-mapped action
+    if let Some(action_str) = config.get_read_only_action_for_key(key_event.code, key_event.modifiers) {
+        let canvas_action = CanvasAction::from_string(&action_str);
+        match ActionDispatcher::dispatch(canvas_action, form_state, ideal_cursor_column).await {
+            Ok(ActionResult::Success(msg)) => {
+                return Ok(msg.unwrap_or_default());
+            }
+            Ok(ActionResult::HandledByFeature(msg)) => {
+                return Ok(msg);
+            }
+            Ok(ActionResult::Error(msg)) => {
+                return Ok(format!("Error: {}", msg));
+            }
+            Ok(ActionResult::RequiresContext(msg)) => {
+                return Ok(format!("Context needed: {}", msg));
+            }
+            Err(e) => {
+                return Ok(format!("Action failed: {}", e));
+            }
+        }
+    }
+
+    Ok(String::new())
+}
+
 pub async fn handle_read_only_event(
     app_state: &mut AppState,
     key: KeyEvent,
@@ -36,18 +90,46 @@ pub async fn handle_read_only_event(
 
     if config.is_enter_edit_mode_after(key.code, key.modifiers) {
         // Determine target state to adjust cursor
-        let target_state: &mut dyn CanvasState = if app_state.ui.show_login { login_state }
-            else if app_state.ui.show_add_logic { add_logic_state }
-            else if app_state.ui.show_register { register_state }
-            else if app_state.ui.show_add_table { add_table_state }
-            else { form_state };
-        let current_input = target_state.get_current_input();
-        let current_pos = target_state.current_cursor_pos();
 
-        if !current_input.is_empty() && current_pos < current_input.len() {
-            target_state.set_current_cursor_pos(current_pos + 1);
-            *ideal_cursor_column = target_state.current_cursor_pos();
+        if app_state.ui.show_login {
+            let current_input = login_state.get_current_input();
+            let current_pos = login_state.current_cursor_pos();
+            if !current_input.is_empty() && current_pos < current_input.len() {
+                login_state.set_current_cursor_pos(current_pos + 1);
+                *ideal_cursor_column = login_state.current_cursor_pos();
+            }
+        } else if app_state.ui.show_add_logic {
+            let current_input = add_logic_state.get_current_input();
+            let current_pos = add_logic_state.current_cursor_pos();
+            if !current_input.is_empty() && current_pos < current_input.len() {
+                add_logic_state.set_current_cursor_pos(current_pos + 1);
+                *ideal_cursor_column = add_logic_state.current_cursor_pos();
+            }
+        } else if app_state.ui.show_register {
+            let current_input = register_state.get_current_input();
+            let current_pos = register_state.current_cursor_pos();
+            if !current_input.is_empty() && current_pos < current_input.len() {
+                register_state.set_current_cursor_pos(current_pos + 1);
+                *ideal_cursor_column = register_state.current_cursor_pos();
+            }
+        } else if app_state.ui.show_add_table {
+            let current_input = add_table_state.get_current_input();
+            let current_pos = add_table_state.current_cursor_pos();
+            if !current_input.is_empty() && current_pos < current_input.len() {
+                add_table_state.set_current_cursor_pos(current_pos + 1);
+                *ideal_cursor_column = add_table_state.current_cursor_pos();
+            }
+        } else {
+            // Handle FormState (uses library CanvasState)
+            use canvas::canvas::CanvasState as LibraryCanvasState;  // Import at the top of the function
+            let current_input = form_state.get_current_input();
+            let current_pos = form_state.current_cursor_pos();
+            if !current_input.is_empty() && current_pos < current_input.len() {
+                form_state.set_current_cursor_pos(current_pos + 1);
+                *ideal_cursor_column = form_state.current_cursor_pos();
+            }
         }
+
         *edit_mode_cooldown = true;
         *command_message = "Entering Edit mode (after cursor)".to_string();
         return Ok((false, command_message.clone()));

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/modes/handlers.rs

@@ -1,3 +1,4 @@
-// src/client/modes/handlers.rs
+// src/modes/handlers.rs
 pub mod event;
+pub mod event_helper;
 pub mod mode_manager;

client/src/modes/handlers/event.rs

@@ -15,8 +15,12 @@ use crate::modes::{
     general::{dialog, navigation},
     handlers::mode_manager::{AppMode, ModeManager},
 };
+use crate::state::pages::canvas_state::CanvasState as LegacyCanvasState;
 use crate::services::auth::AuthClient;
 use crate::services::grpc_client::GrpcClient;
+use canvas::{canvas::CanvasAction, dispatcher::ActionDispatcher};
+use canvas::canvas::CanvasState as LibraryCanvasState;
+use super::event_helper::*;
 use crate::state::{
     app::{
         buffer::{AppView, BufferState},
@@ -573,55 +577,106 @@ impl EventHandler {
                 }
 
                 AppMode::ReadOnly => {
-                    if config.get_read_only_action_for_key(key_code, modifiers) == Some("enter_highlight_mode_linewise") && ModeManager::can_enter_highlight_mode(current_mode) {
-                        let current_field_index = if app_state.ui.show_login { login_state.current_field() } else if app_state.ui.show_register { register_state.current_field() } else { form_state.current_field() };
-                        self.highlight_state = HighlightState::Linewise { anchor_line: current_field_index };
+                    // Handle highlight mode transitions
+                    if config.get_read_only_action_for_key(key_code, modifiers) == Some("enter_highlight_mode_linewise")
+                        && ModeManager::can_enter_highlight_mode(current_mode)
+                    {
+                        let current_field_index = get_current_field_for_state(
+                            app_state,
+                            login_state,
+                            register_state,
+                            form_state
+                        );
+                        self.highlight_state = HighlightState::Linewise {
+                            anchor_line: current_field_index
+                        };
                         self.command_message = "-- LINE HIGHLIGHT --".to_string();
                         return Ok(EventOutcome::Ok(self.command_message.clone()));
-                    } else if config.get_read_only_action_for_key(key_code, modifiers) == Some("enter_highlight_mode") && ModeManager::can_enter_highlight_mode(current_mode) {
-                        let current_field_index = if app_state.ui.show_login { login_state.current_field() } else if app_state.ui.show_register { register_state.current_field() } else { form_state.current_field() };
-                        let current_cursor_pos = if app_state.ui.show_login { login_state.current_cursor_pos() } else if app_state.ui.show_register { register_state.current_cursor_pos() } else { form_state.current_cursor_pos() };
+                    }
+                    else if config.get_read_only_action_for_key(key_code, modifiers) == Some("enter_highlight_mode")
+                        && ModeManager::can_enter_highlight_mode(current_mode)
+                    {
+                        let current_field_index = get_current_field_for_state(
+                            app_state,
+                            login_state,
+                            register_state,
+                            form_state
+                        );
+                        let current_cursor_pos = get_current_cursor_pos_for_state(
+                            app_state,
+                            login_state,
+                            register_state,
+                            form_state
+                        );
                         let anchor = (current_field_index, current_cursor_pos);
                         self.highlight_state = HighlightState::Characterwise { anchor };
                         self.command_message = "-- HIGHLIGHT --".to_string();
                         return Ok(EventOutcome::Ok(self.command_message.clone()));
-                    } else if config.get_read_only_action_for_key(key_code, modifiers).as_deref() == Some("enter_edit_mode_before") && ModeManager::can_enter_edit_mode(current_mode) {
+                    }
+
+                    // Handle edit mode transitions
+                    else if config.get_read_only_action_for_key(key_code, modifiers).as_deref() == Some("enter_edit_mode_before")
+                        && ModeManager::can_enter_edit_mode(current_mode)
+                    {
                         self.is_edit_mode = true;
                         self.edit_mode_cooldown = true;
                         self.command_message = "Edit mode".to_string();
                         terminal.set_cursor_style(SetCursorStyle::BlinkingBar)?;
                         return Ok(EventOutcome::Ok(self.command_message.clone()));
-                    } else if config.get_read_only_action_for_key(key_code, modifiers).as_deref() == Some("enter_edit_mode_after") && ModeManager::can_enter_edit_mode(current_mode) {
-                        let current_input = if app_state.ui.show_login || app_state.ui.show_register { login_state.get_current_input() } else { form_state.get_current_input() };
-                        let current_cursor_pos = if app_state.ui.show_login || app_state.ui.show_register { login_state.current_cursor_pos() } else { form_state.current_cursor_pos() };
+                    }
+                    else if config.get_read_only_action_for_key(key_code, modifiers).as_deref() == Some("enter_edit_mode_after")
+                        && ModeManager::can_enter_edit_mode(current_mode)
+                    {
+                        let current_input = get_current_input_for_state(
+                            app_state,
+                            login_state,
+                            register_state,
+                            form_state
+                        );
+                        let current_cursor_pos = get_cursor_pos_for_mixed_state(
+                            app_state,
+                            login_state,
+                            form_state
+                        );
+
+                        // Move cursor forward if possible
                         if !current_input.is_empty() && current_cursor_pos < current_input.len() {
-                            if app_state.ui.show_login || app_state.ui.show_register {
-                                login_state.set_current_cursor_pos(current_cursor_pos + 1);
-                                self.ideal_cursor_column = login_state.current_cursor_pos();
-                            } else {
-                                form_state.set_current_cursor_pos(current_cursor_pos + 1);
-                                self.ideal_cursor_column = form_state.current_cursor_pos();
-                            }
+                            let new_cursor_pos = current_cursor_pos + 1;
+                            set_current_cursor_pos_for_state(
+                                app_state,
+                                login_state,
+                                register_state,
+                                form_state,
+                                new_cursor_pos
+                            );
+                            self.ideal_cursor_column = get_current_cursor_pos_for_state(
+                                app_state,
+                                login_state,
+                                register_state,
+                                form_state
+                            );
                         }
+
                         self.is_edit_mode = true;
                         self.edit_mode_cooldown = true;
                         app_state.ui.focus_outside_canvas = false;
                         self.command_message = "Edit mode (after cursor)".to_string();
                         terminal.set_cursor_style(SetCursorStyle::BlinkingBar)?;
                         return Ok(EventOutcome::Ok(self.command_message.clone()));
-                    } else if config.get_read_only_action_for_key(key_code, modifiers) == Some("enter_command_mode") && ModeManager::can_enter_command_mode(current_mode) {
+                    }
+                    else if config.get_read_only_action_for_key(key_code, modifiers) == Some("enter_command_mode")
+                        && ModeManager::can_enter_command_mode(current_mode)
+                    {
                         self.command_mode = true;
                         self.command_input.clear();
                         self.command_message.clear();
                         return Ok(EventOutcome::Ok(String::new()));
                     }
 
-                    if let Some(action) =
-                        config.get_common_action(key_code, modifiers)
-                    {
+                    // Handle common actions (save, quit, etc.)
+                    if let Some(action) = config.get_common_action(key_code, modifiers) {
                         match action {
-                            "save" | "force_quit" | "save_and_quit"
-                            | "revert" => {
+                            "save" | "force_quit" | "save_and_quit" | "revert" => {
                                 return common_mode::handle_core_action(
                                     action,
                                     form_state,
@@ -639,23 +694,36 @@ impl EventHandler {
                         }
                     }
 
-                    let (_should_exit, message) =
-                        read_only::handle_read_only_event(
-                            app_state,
+                    // Try canvas action for form first (NEW: Canvas library integration)
+                    if app_state.ui.show_form {
+                        if let Ok(Some(canvas_message)) = self.handle_form_canvas_action(
                             key_event,
                             config,
                             form_state,
-                            login_state,
-                            register_state,
-                            &mut admin_state.add_table_state,
-                            &mut admin_state.add_logic_state,
-                            &mut self.key_sequence_tracker,
-                            &mut self.grpc_client, // <-- FIX 1
-                            &mut self.command_message,
-                            &mut self.edit_mode_cooldown,
-                            &mut self.ideal_cursor_column,
-                        )
-                        .await?;
+                            false, // not edit mode
+                        ).await {
+                            return Ok(EventOutcome::Ok(canvas_message));
+                        }
+                    }
+
+                    // Fallback to legacy read-only event handling
+                    let (_should_exit, message) = read_only::handle_read_only_event(
+                        app_state,
+                        key_event,
+                        config,
+                        form_state,
+                        login_state,
+                        register_state,
+                        &mut admin_state.add_table_state,
+                        &mut admin_state.add_logic_state,
+                        &mut self.key_sequence_tracker,
+                        &mut self.grpc_client,
+                        &mut self.command_message,
+                        &mut self.edit_mode_cooldown,
+                        &mut self.ideal_cursor_column,
+                    )
+                    .await?;
+
                     return Ok(EventOutcome::Ok(message));
                 }
 
@@ -695,12 +763,10 @@ impl EventHandler {
                 }
 
                 AppMode::Edit => {
-                    if let Some(action) =
-                        config.get_common_action(key_code, modifiers)
-                    {
+                    // Handle common actions (save, quit, etc.)
+                    if let Some(action) = config.get_common_action(key_code, modifiers) {
                         match action {
-                            "save" | "force_quit" | "save_and_quit"
-                            | "revert" => {
+                            "save" | "force_quit" | "save_and_quit" | "revert" => {
                                 return common_mode::handle_core_action(
                                     action,
                                     form_state,
@@ -718,9 +784,25 @@ impl EventHandler {
                         }
                     }
 
+                    // Try canvas action for form first (NEW: Canvas library integration)
+                    if app_state.ui.show_form {
+                        if let Ok(Some(canvas_message)) = self.handle_form_canvas_action(
+                            key_event,
+                            config,
+                            form_state,
+                            true, // edit mode
+                        ).await {
+                            if !canvas_message.is_empty() {
+                                self.command_message = canvas_message.clone();
+                            }
+                            return Ok(EventOutcome::Ok(canvas_message));
+                        }
+                    }
+
+                    // Handle legacy edit events
                     let mut current_position = form_state.current_position;
                     let total_count = form_state.total_count;
-                    // --- MODIFIED: Pass `self` instead of `grpc_client` ---
+
                     let edit_result = edit::handle_edit_event(
                         key_event,
                         config,
@@ -739,30 +821,62 @@ impl EventHandler {
                         Ok(edit::EditEventOutcome::ExitEditMode) => {
                             self.is_edit_mode = false;
                             self.edit_mode_cooldown = true;
-                            let has_changes = if app_state.ui.show_login { login_state.has_unsaved_changes() } else if app_state.ui.show_register { register_state.has_unsaved_changes() } else { form_state.has_unsaved_changes() };
-                            self.command_message = if has_changes { "Exited edit mode (unsaved changes remain)".to_string() } else { "Read-only mode".to_string() };
+
+                            // Check for unsaved changes across all states
+                            let has_changes = get_has_unsaved_changes_for_state(
+                                app_state,
+                                login_state,
+                                register_state,
+                                form_state
+                            );
+
+                            // Set appropriate message based on changes
+                            self.command_message = if has_changes {
+                                "Exited edit mode (unsaved changes remain)".to_string()
+                            } else {
+                                "Read-only mode".to_string()
+                            };
+
                             terminal.set_cursor_style(SetCursorStyle::SteadyBlock)?;
-                            let current_input = if app_state.ui.show_login { login_state.get_current_input() } else if app_state.ui.show_register { register_state.get_current_input() } else { form_state.get_current_input() };
-                            let current_cursor_pos = if app_state.ui.show_login { login_state.current_cursor_pos() } else if app_state.ui.show_register { register_state.current_cursor_pos() } else { form_state.current_cursor_pos() };
+
+                            // Get current input and cursor position
+                            let current_input = get_current_input_for_state(
+                                app_state,
+                                login_state,
+                                register_state,
+                                form_state
+                            );
+                            let current_cursor_pos = get_current_cursor_pos_for_state(
+                                app_state,
+                                login_state,
+                                register_state,
+                                form_state
+                            );
+
+                            // Adjust cursor if it's beyond the input length
                             if !current_input.is_empty() && current_cursor_pos >= current_input.len() {
                                 let new_pos = current_input.len() - 1;
-                                let target_state: &mut dyn CanvasState = if app_state.ui.show_login { login_state } else if app_state.ui.show_register { register_state } else { form_state };
-                                target_state.set_current_cursor_pos(new_pos);
+                                set_current_cursor_pos_for_state(
+                                    app_state,
+                                    login_state,
+                                    register_state,
+                                    form_state,
+                                    new_pos
+                                );
                                 self.ideal_cursor_column = new_pos;
                             }
-                            return Ok(EventOutcome::Ok(
-                                self.command_message.clone(),
-                            ));
+
+                            return Ok(EventOutcome::Ok(self.command_message.clone()));
                         }
+
                         Ok(edit::EditEventOutcome::Message(msg)) => {
                             if !msg.is_empty() {
                                 self.command_message = msg;
                             }
                             self.key_sequence_tracker.reset();
-                            return Ok(EventOutcome::Ok(
-                                self.command_message.clone(),
-                            ));
+                            return Ok(EventOutcome::Ok(self.command_message.clone()));
                         }
+
                         Err(e) => {
                             return Err(e.into());
                         }
@@ -906,4 +1020,180 @@ impl EventHandler {
     fn is_processed_command(&self, command: &str) -> bool {
         matches!(command, "w" | "q" | "q!" | "wq" | "r")
     }
+
+    async fn handle_form_canvas_action(
+        &mut self,
+        key_event: KeyEvent,
+        _config: &Config, // Not used anymore - canvas has its own config
+        form_state: &mut FormState,
+        is_edit_mode: bool,
+    ) -> Result<Option<String>> {
+        // Load canvas config (canvas_config.toml or vim defaults)
+        let canvas_config = canvas::config::CanvasConfig::load();
+
+        // Handle suggestion actions first if suggestions are active
+        if form_state.autocomplete_active {
+            if let Some(action_str) = canvas_config.get_suggestion_action(key_event.code, key_event.modifiers) {
+                let canvas_action = CanvasAction::from_string(&action_str);
+                match ActionDispatcher::dispatch(canvas_action, form_state, &mut self.ideal_cursor_column).await {
+                    Ok(result) => return Ok(Some(result.message().unwrap_or("").to_string())),
+                    Err(_) => return Ok(Some("Suggestion action failed".to_string())),
+                }
+            }
+
+            // Fallback hardcoded suggestion handling
+            match key_event.code {
+                KeyCode::Up => {
+                    if let Ok(result) = ActionDispatcher::dispatch(
+                        CanvasAction::SuggestionUp,
+                        form_state,
+                        &mut self.ideal_cursor_column,
+                    ).await {
+                        return Ok(Some(result.message().unwrap_or("").to_string()));
+                    }
+                }
+                KeyCode::Down => {
+                    if let Ok(result) = ActionDispatcher::dispatch(
+                        CanvasAction::SuggestionDown,
+                        form_state,
+                        &mut self.ideal_cursor_column,
+                    ).await {
+                        return Ok(Some(result.message().unwrap_or("").to_string()));
+                    }
+                }
+                KeyCode::Enter => {
+                    if let Ok(result) = ActionDispatcher::dispatch(
+                        CanvasAction::SelectSuggestion,
+                        form_state,
+                        &mut self.ideal_cursor_column,
+                    ).await {
+                        return Ok(Some(result.message().unwrap_or("").to_string()));
+                    }
+                }
+                KeyCode::Esc => {
+                    if let Ok(result) = ActionDispatcher::dispatch(
+                        CanvasAction::ExitSuggestions,
+                        form_state,
+                        &mut self.ideal_cursor_column,
+                    ).await {
+                        return Ok(Some(result.message().unwrap_or("").to_string()));
+                    }
+                }
+                _ => {}
+            }
+        }
+
+        // FIXED: Use canvas config instead of client config
+        let action_str = canvas_config.get_action_for_key(
+            key_event.code,
+            key_event.modifiers,
+            is_edit_mode,
+            form_state.autocomplete_active
+        );
+
+        if let Some(action_str) = action_str {
+            // Filter out mode transition actions - let legacy handlers deal with these
+            if Self::is_mode_transition_action(action_str) {
+                return Ok(None); // Let legacy handler handle mode transitions
+            }
+
+            let canvas_action = CanvasAction::from_string(&action_str);
+            match ActionDispatcher::dispatch(
+                canvas_action,
+                form_state,
+                &mut self.ideal_cursor_column,
+            ).await {
+                Ok(result) => {
+                    return Ok(Some(result.message().unwrap_or("").to_string()));
+                }
+                Err(_) => {
+                    return Ok(Some("Canvas action failed".to_string()));
+                }
+            }
+        }
+
+        // Fallback to automatic key handling for edit mode
+        if is_edit_mode {
+            if let Some(canvas_action) = CanvasAction::from_key(key_event.code) {
+                match ActionDispatcher::dispatch(
+                    canvas_action,
+                    form_state,
+                    &mut self.ideal_cursor_column,
+                ).await {
+                    Ok(result) => {
+                        return Ok(Some(result.message().unwrap_or("").to_string()));
+                    }
+                    Err(_) => {
+                        return Ok(Some("Auto action failed".to_string()));
+                    }
+                }
+            }
+        } else {
+            // In read-only mode, only handle non-character keys
+            let canvas_action = match key_event.code {
+                // Only handle special keys that don't conflict with vim bindings
+                KeyCode::Left => Some(CanvasAction::MoveLeft),
+                KeyCode::Right => Some(CanvasAction::MoveRight),
+                KeyCode::Up => Some(CanvasAction::MoveUp),
+                KeyCode::Down => Some(CanvasAction::MoveDown),
+                KeyCode::Home => Some(CanvasAction::MoveLineStart),
+                KeyCode::End => Some(CanvasAction::MoveLineEnd),
+                KeyCode::Tab => Some(CanvasAction::NextField),
+                KeyCode::BackTab => Some(CanvasAction::PrevField),
+                KeyCode::Delete => Some(CanvasAction::DeleteForward),
+                KeyCode::Backspace => Some(CanvasAction::DeleteBackward),
+                _ => None,
+            };
+
+            if let Some(canvas_action) = canvas_action {
+                match ActionDispatcher::dispatch(
+                    canvas_action,
+                    form_state,
+                    &mut self.ideal_cursor_column,
+                ).await {
+                    Ok(result) => {
+                        return Ok(Some(result.message().unwrap_or("").to_string()));
+                    }
+                    Err(_) => {
+                        return Ok(Some("Action failed".to_string()));
+                    }
+                }
+            }
+        }
+
+        Ok(None)
+    }
+
+    // ADDED: Helper function to identify mode transition actions
+    fn is_mode_transition_action(action: &str) -> bool {
+        matches!(action,
+            "exit" |
+            "exit_edit_mode" |
+            "enter_edit_mode_before" |
+            "enter_edit_mode_after" |
+            "enter_command_mode" |
+            "exit_command_mode" |
+            "enter_highlight_mode" |
+            "enter_highlight_mode_linewise" |
+            "exit_highlight_mode" |
+            "save" |
+            "quit" |
+            "force_quit" |
+            "save_and_quit" |
+            "revert" |
+            "enter_decider" |  // This is also handled specially by legacy system
+            "trigger_autocomplete" |  // This is handled specially by legacy system
+            "suggestion_up" |  // These are handled above in suggestion logic
+            "suggestion_down" |
+            "previous_entry" |  // Navigation between records
+            "next_entry" |
+            "toggle_sidebar" |
+            "toggle_buffer_list" |
+            "next_buffer" |
+            "previous_buffer" |
+            "close_buffer" |
+            "open_search" |
+            "find_file_palette_toggle"
+        )
+    }
 }

client/src/modes/handlers/event_helper.rs

@@ -0,0 +1,105 @@
+
+// src/modes/handlers/event_helper.rs
+//! Helper functions to handle the differences between legacy and library CanvasState traits
+
+use crate::state::app::state::AppState;
+use crate::state::pages::{
+    form::FormState,
+    auth::{LoginState, RegisterState},
+};
+use crate::state::pages::canvas_state::CanvasState as LegacyCanvasState;
+use canvas::canvas::CanvasState as LibraryCanvasState;
+
+/// Get the current field index from the appropriate state based on which UI is active
+pub fn get_current_field_for_state(
+    app_state: &AppState,
+    login_state: &LoginState,
+    register_state: &RegisterState,
+    form_state: &FormState,
+) -> usize {
+    if app_state.ui.show_login {
+        login_state.current_field() // Uses LegacyCanvasState
+    } else if app_state.ui.show_register {
+        register_state.current_field() // Uses LegacyCanvasState
+    } else {
+        form_state.current_field() // Uses LibraryCanvasState
+    }
+}
+
+/// Get the current cursor position from the appropriate state based on which UI is active
+pub fn get_current_cursor_pos_for_state(
+    app_state: &AppState,
+    login_state: &LoginState,
+    register_state: &RegisterState,
+    form_state: &FormState,
+) -> usize {
+    if app_state.ui.show_login {
+        login_state.current_cursor_pos() // Uses LegacyCanvasState
+    } else if app_state.ui.show_register {
+        register_state.current_cursor_pos() // Uses LegacyCanvasState
+    } else {
+        form_state.current_cursor_pos() // Uses LibraryCanvasState
+    }
+}
+
+/// Check if the appropriate state has unsaved changes based on which UI is active
+pub fn get_has_unsaved_changes_for_state(
+    app_state: &AppState,
+    login_state: &LoginState,
+    register_state: &RegisterState,
+    form_state: &FormState,
+) -> bool {
+    if app_state.ui.show_login {
+        login_state.has_unsaved_changes() // Uses LegacyCanvasState
+    } else if app_state.ui.show_register {
+        register_state.has_unsaved_changes() // Uses LegacyCanvasState
+    } else {
+        form_state.has_unsaved_changes() // Uses LibraryCanvasState
+    }
+}
+
+/// Get the current input from the appropriate state based on which UI is active
+pub fn get_current_input_for_state<'a>(
+    app_state: &AppState,
+    login_state: &'a LoginState,
+    register_state: &'a RegisterState,
+    form_state: &'a FormState,
+) -> &'a str {
+    if app_state.ui.show_login {
+        login_state.get_current_input() // Uses LegacyCanvasState
+    } else if app_state.ui.show_register {
+        register_state.get_current_input() // Uses LegacyCanvasState
+    } else {
+        form_state.get_current_input() // Uses LibraryCanvasState
+    }
+}
+
+/// Set the cursor position for the appropriate state based on which UI is active
+pub fn set_current_cursor_pos_for_state(
+    app_state: &AppState,
+    login_state: &mut LoginState,
+    register_state: &mut RegisterState,
+    form_state: &mut FormState,
+    pos: usize,
+) {
+    if app_state.ui.show_login {
+        login_state.set_current_cursor_pos(pos); // Uses LegacyCanvasState
+    } else if app_state.ui.show_register {
+        register_state.set_current_cursor_pos(pos); // Uses LegacyCanvasState
+    } else {
+        form_state.set_current_cursor_pos(pos); // Uses LibraryCanvasState
+    }
+}
+
+/// Get cursor position for mixed login/register vs form logic
+pub fn get_cursor_pos_for_mixed_state(
+    app_state: &AppState,
+    login_state: &LoginState,
+    form_state: &FormState,
+) -> usize {
+    if app_state.ui.show_login || app_state.ui.show_register {
+        login_state.current_cursor_pos() // Uses LegacyCanvasState
+    } else {
+        form_state.current_cursor_pos() // Uses LibraryCanvasState
+    }
+}

client/src/services/ui_service.rs

@@ -176,7 +176,7 @@ impl UiService {
         }
     }
 
-    // REFACTOR THIS FUNCTION
+    // TODO REFACTOR (maybe)
     pub async fn initialize_app_state_and_form(
         grpc_client: &mut GrpcClient,
         app_state: &mut AppState,
@@ -185,28 +185,27 @@ impl UiService {
             .get_profile_tree()
             .await
             .context("Failed to get profile tree")?;
+
         app_state.profile_tree = profile_tree;
 
-        let initial_profile_name = app_state
+        // Find first profile that contains tables
+        let (initial_profile_name, initial_table_name) = app_state
             .profile_tree
             .profiles
-            .first()
-            .map(|p| p.name.clone())
-            .unwrap_or_else(|| "default".to_string());
-
-        let initial_table_name = app_state
-            .profile_tree
-            .profiles
-            .first()
-            .and_then(|p| p.tables.first().map(|t| t.name.clone()))
-            .unwrap_or_else(|| "2025_company_data1".to_string());
+            .iter()
+            .find(|profile| !profile.tables.is_empty())
+            .and_then(|profile| {
+                profile.tables.first().map(|table| {
+                    (profile.name.clone(), table.name.clone())
+                })
+            })
+            .ok_or_else(|| anyhow!("No profiles with tables found. Create a table first."))?;
 
         app_state.set_current_view_table(
             initial_profile_name.clone(),
             initial_table_name.clone(),
         );
 
-        // NOW, just call our new central function. This avoids code duplication.
         let form_state = Self::load_table_view(
             grpc_client,
             app_state,
@@ -215,7 +214,6 @@ impl UiService {
         )
         .await?;
 
-        // The field names for the UI are derived from the new form_state
         let field_names = form_state.fields.iter().map(|f| f.display_name.clone()).collect();
 
         Ok((initial_profile_name, initial_table_name, field_names))

client/src/state/pages/add_table.rs

@@ -1,5 +1,5 @@
 // src/state/pages/add_table.rs
-use crate::state::pages::canvas_state::CanvasState;
+use canvas::canvas::{CanvasState, ActionContext, CanvasAction}; // External library
 use ratatui::widgets::TableState;
 use serde::{Deserialize, Serialize};
 
@@ -67,7 +67,6 @@ pub struct AddTableState {
 
 impl Default for AddTableState {
     fn default() -> Self {
-        // Initialize with some dummy data for demonstration
         AddTableState {
             profile_name: "default".to_string(),
             table_name: String::new(),
@@ -92,16 +91,91 @@ impl Default for AddTableState {
 
 impl AddTableState {
     pub const INPUT_FIELD_COUNT: usize = 3;
+
+    /// Helper method to add a column from current inputs
+    pub fn add_column_from_inputs(&mut self) -> Option<String> {
+        if self.column_name_input.trim().is_empty() || self.column_type_input.trim().is_empty() {
+            return Some("Both column name and type are required".to_string());
+        }
+
+        // Check for duplicate column names
+        if self.columns.iter().any(|col| col.name == self.column_name_input.trim()) {
+            return Some("Column name already exists".to_string());
+        }
+
+        // Add the column
+        self.columns.push(ColumnDefinition {
+            name: self.column_name_input.trim().to_string(),
+            data_type: self.column_type_input.trim().to_string(),
+            selected: false,
+        });
+
+        // Clear inputs and reset focus to column name for next entry
+        self.column_name_input.clear();
+        self.column_type_input.clear();
+        self.column_name_cursor_pos = 0;
+        self.column_type_cursor_pos = 0;
+        self.current_focus = AddTableFocus::InputColumnName;
+        self.last_canvas_field = 1;
+        self.has_unsaved_changes = true;
+
+        Some(format!("Column '{}' added successfully", self.columns.last().unwrap().name))
+    }
+
+    /// Helper method to delete selected items
+    pub fn delete_selected_items(&mut self) -> Option<String> {
+        let mut deleted_items = Vec::new();
+
+        // Remove selected columns
+        let initial_column_count = self.columns.len();
+        self.columns.retain(|col| {
+            if col.selected {
+                deleted_items.push(format!("column '{}'", col.name));
+                false
+            } else {
+                true
+            }
+        });
+
+        // Remove selected indexes
+        let initial_index_count = self.indexes.len();
+        self.indexes.retain(|idx| {
+            if idx.selected {
+                deleted_items.push(format!("index '{}'", idx.name));
+                false
+            } else {
+                true
+            }
+        });
+
+        // Remove selected links
+        let initial_link_count = self.links.len();
+        self.links.retain(|link| {
+            if link.selected {
+                deleted_items.push(format!("link to '{}'", link.linked_table_name));
+                false
+            } else {
+                true
+            }
+        });
+
+        if deleted_items.is_empty() {
+            Some("No items selected for deletion".to_string())
+        } else {
+            self.has_unsaved_changes = true;
+            Some(format!("Deleted: {}", deleted_items.join(", ")))
+        }
+    }
 }
 
-// Implement CanvasState for the input fields
+// Implement external library's CanvasState for AddTableState
 impl CanvasState for AddTableState {
     fn current_field(&self) -> usize {
         match self.current_focus {
             AddTableFocus::InputTableName => 0,
             AddTableFocus::InputColumnName => 1,
             AddTableFocus::InputColumnType => 2,
-            // If focus is elsewhere, default to the first field for canvas rendering logic
+            // If focus is elsewhere, return the last canvas field used
             _ => self.last_canvas_field,
         }
     }
@@ -115,37 +189,6 @@ impl CanvasState for AddTableState {
         }
     }
 
-    fn has_unsaved_changes(&self) -> bool {
-        self.has_unsaved_changes
-    }
-
-    fn inputs(&self) -> Vec<&String> {
-        vec![&self.table_name_input, &self.column_name_input, &self.column_type_input]
-    }
-
-    fn get_current_input(&self) -> &str {
-        match self.current_focus {
-            AddTableFocus::InputTableName => &self.table_name_input,
-            AddTableFocus::InputColumnName => &self.column_name_input,
-            AddTableFocus::InputColumnType => &self.column_type_input,
-            _ => "", // Should not happen if called correctly
-        }
-    }
-
-    fn get_current_input_mut(&mut self) -> &mut String {
-        match self.current_focus {
-            AddTableFocus::InputTableName => &mut self.table_name_input,
-            AddTableFocus::InputColumnName => &mut self.column_name_input,
-            AddTableFocus::InputColumnType => &mut self.column_type_input,
-            _ => &mut self.table_name_input,
-        }
-    }
-
-    fn fields(&self) -> Vec<&str> {
-        // These must match the order used in render_add_table
-        vec!["Table name", "Name", "Type"]
-    }
-
     fn set_current_field(&mut self, index: usize) {
         // Update both current focus and last canvas field
         self.current_focus = match index {
@@ -174,17 +217,84 @@ impl CanvasState for AddTableState {
         }
     }
 
+    fn get_current_input(&self) -> &str {
+        match self.current_focus {
+            AddTableFocus::InputTableName => &self.table_name_input,
+            AddTableFocus::InputColumnName => &self.column_name_input,
+            AddTableFocus::InputColumnType => &self.column_type_input,
+            _ => "", // Should not happen if called correctly
+        }
+    }
+
+    fn get_current_input_mut(&mut self) -> &mut String {
+        match self.current_focus {
+            AddTableFocus::InputTableName => &mut self.table_name_input,
+            AddTableFocus::InputColumnName => &mut self.column_name_input,
+            AddTableFocus::InputColumnType => &mut self.column_type_input,
+            _ => &mut self.table_name_input, // Fallback
+        }
+    }
+
+    fn inputs(&self) -> Vec<&String> {
+        vec![&self.table_name_input, &self.column_name_input, &self.column_type_input]
+    }
+
+    fn fields(&self) -> Vec<&str> {
+        // These must match the order used in render_add_table
+        vec!["Table name", "Name", "Type"]
+    }
+
+    fn has_unsaved_changes(&self) -> bool {
+        self.has_unsaved_changes
+    }
+
     fn set_has_unsaved_changes(&mut self, changed: bool) {
         self.has_unsaved_changes = changed;
     }
 
-    // --- Autocomplete Support (Not needed for this form yet) ---
-    fn get_suggestions(&self) -> Option<&[String]> {
-        None
-    }
+    fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+        match action {
+            // Handle adding column when user presses Enter on the Add button or uses specific action
+            CanvasAction::Custom(action_str) if action_str == "add_column" => {
+                self.add_column_from_inputs()
+            }
 
-    fn get_selected_suggestion_index(&self) -> Option<usize> {
-        None
+            // Handle table saving
+            CanvasAction::Custom(action_str) if action_str == "save_table" => {
+                if self.table_name_input.trim().is_empty() {
+                    Some("Table name is required".to_string())
+                } else if self.columns.is_empty() {
+                    Some("At least one column is required".to_string())
+                } else {
+                    Some(format!("Saving table: {}", self.table_name_input))
+                }
+            }
+
+            // Handle deleting selected items
+            CanvasAction::Custom(action_str) if action_str == "delete_selected" => {
+                self.delete_selected_items()
+            }
+
+            // Handle canceling (clear form)
+            CanvasAction::Custom(action_str) if action_str == "cancel" => {
+                // Reset to defaults but keep profile_name
+                let profile = self.profile_name.clone();
+                *self = Self::default();
+                self.profile_name = profile;
+                Some("Form cleared".to_string())
+            }
+
+            // Custom validation when moving between fields
+            CanvasAction::NextField => {
+                // When leaving table name field, update the table_name for display
+                if self.current_field() == 0 && !self.table_name_input.trim().is_empty() {
+                    self.table_name = self.table_name_input.trim().to_string();
+                }
+                None // Let canvas library handle the normal field movement
+            }
+
+            // Let canvas library handle everything else
+            _ => None,
+        }
     }
 }
-

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/state/pages/form.rs

@@ -1,8 +1,7 @@
 // src/state/pages/form.rs
 
 use crate::config::colors::themes::Theme;
-use crate::state::app::highlight::HighlightState;
-use crate::state::pages::canvas_state::CanvasState;
+use canvas::canvas::{CanvasState, CanvasAction, ActionContext, HighlightState};
 use common::proto::komp_ac::search::search_response::Hit;
 use ratatui::layout::Rect;
 use ratatui::Frame;
@@ -45,6 +44,14 @@ pub struct FormState {
 }
 
 impl FormState {
+    // Add this method
+    pub fn deactivate_autocomplete(&mut self) {
+        self.autocomplete_active = false;
+        self.autocomplete_suggestions.clear();
+        self.selected_suggestion_index = None;
+        self.autocomplete_loading = false;
+    }
+
     pub fn new(
         profile_name: String,
         table_name: String,
@@ -113,7 +120,7 @@ impl FormState {
         area: Rect,
         theme: &Theme,
         is_edit_mode: bool,
-        highlight_state: &HighlightState,
+        highlight_state: &HighlightState, // Now using canvas::HighlightState
     ) {
         let fields_str_slice: Vec<&str> =
             self.fields().iter().map(|s| *s).collect();
@@ -209,10 +216,19 @@ impl FormState {
         self.link_display_map.clear();
     }
 
-    pub fn deactivate_autocomplete(&mut self) {
-        self.autocomplete_active = false;
-        self.autocomplete_suggestions.clear();
-        self.selected_suggestion_index = None;
+    // NEW: Keep the rich suggestions methods for compatibility
+    pub fn get_rich_suggestions(&self) -> Option<&[Hit]> {
+        if self.autocomplete_active {
+            Some(&self.autocomplete_suggestions)
+        } else {
+            None
+        }
+    }
+
+    pub fn activate_rich_suggestions(&mut self, suggestions: Vec<Hit>) {
+        self.autocomplete_suggestions = suggestions;
+        self.autocomplete_active = !self.autocomplete_suggestions.is_empty();
+        self.selected_suggestion_index = if self.autocomplete_active { Some(0) } else { None };
         self.autocomplete_loading = false;
     }
 }
@@ -221,54 +237,73 @@ impl CanvasState for FormState {
     fn current_field(&self) -> usize {
         self.current_field
     }
+
     fn current_cursor_pos(&self) -> usize {
         self.current_cursor_pos
     }
+
     fn has_unsaved_changes(&self) -> bool {
         self.has_unsaved_changes
     }
+
     fn inputs(&self) -> Vec<&String> {
         self.values.iter().collect()
     }
+
     fn get_current_input(&self) -> &str {
         FormState::get_current_input(self)
     }
+
     fn get_current_input_mut(&mut self) -> &mut String {
         FormState::get_current_input_mut(self)
     }
+
     fn fields(&self) -> Vec<&str> {
         self.fields
             .iter()
             .map(|f| f.display_name.as_str())
             .collect()
     }
+
     fn set_current_field(&mut self, index: usize) {
         if index < self.fields.len() {
             self.current_field = index;
         }
         self.deactivate_autocomplete();
     }
+
     fn set_current_cursor_pos(&mut self, pos: usize) {
         self.current_cursor_pos = pos;
     }
+
     fn set_has_unsaved_changes(&mut self, changed: bool) {
         self.has_unsaved_changes = changed;
     }
-    fn get_suggestions(&self) -> Option<&[String]> {
-        None
-    }
-    fn get_rich_suggestions(&self) -> Option<&[Hit]> {
-        if self.autocomplete_active {
-            Some(&self.autocomplete_suggestions)
-        } else {
-            None
-        }
-    }
-    fn get_selected_suggestion_index(&self) -> Option<usize> {
-        if self.autocomplete_active {
-            self.selected_suggestion_index
-        } else {
-            None
+
+    // --- FEATURE-SPECIFIC ACTION HANDLING ---
+    fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+        match action {
+            CanvasAction::SelectSuggestion => {
+                if let Some(selected_idx) = self.selected_suggestion_index {
+                    if let Some(hit) = self.autocomplete_suggestions.get(selected_idx).cloned() {
+                        // Extract the value from the selected suggestion
+                        if let Ok(content_map) = serde_json::from_str::<HashMap<String, serde_json::Value>>(&hit.content_json) {
+                            let current_field_def = &self.fields[self.current_field];
+                            if let Some(value) = content_map.get(&current_field_def.data_key) {
+                                let new_value = json_value_to_string(value);
+                                let display_name = self.get_display_name_for_hit(&hit);
+                                *self.get_current_input_mut() = new_value.clone();
+                                self.set_current_cursor_pos(new_value.len());
+                                self.set_has_unsaved_changes(true);
+                                self.deactivate_autocomplete();
+                                return Some(format!("Selected: {}", display_name));
+                            }
+                        }
+                    }
+                }
+                None
+            }
+            _ => None, // Let canvas handle other actions
         }
     }
 
@@ -282,7 +317,6 @@ impl CanvasState for FormState {
             .unwrap_or("")
     }
 
-    // --- IMPLEMENT THE NEW TRAIT METHOD ---
     fn has_display_override(&self, index: usize) -> bool {
         self.link_display_map.contains_key(&index)
     }

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/tui/functions/form.rs

@@ -1,7 +1,7 @@
 // src/tui/functions/form.rs
-use crate::state::pages::canvas_state::CanvasState;
 use crate::state::pages::form::FormState;
 use crate::services::grpc_client::GrpcClient;
+use canvas::canvas::CanvasState;
 use anyhow::{anyhow, Result};
 
 pub async fn handle_action(

client/src/ui/handlers/render.rs

@@ -7,7 +7,6 @@ use crate::components::{
     common::dialog::render_dialog,
     common::find_file_palette,
     common::search_palette::render_search_palette,
-    form::form::render_form,
     handlers::sidebar::{self, calculate_sidebar_layout},
     intro::intro::render_intro,
     render_background,
@@ -17,9 +16,11 @@ 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;
+use crate::state::app::highlight::HighlightState as LocalHighlightState; // CHANGED: Alias local version
+use canvas::canvas::HighlightState as CanvasHighlightState; // CHANGED: Import canvas version with alias
 use crate::state::app::state::AppState;
 use crate::state::pages::admin::AdminState;
 use crate::state::pages::auth::AuthState;
@@ -32,6 +33,15 @@ use ratatui::{
     Frame,
 };
 
+// Helper function to convert between HighlightState types
+fn convert_highlight_state(local: &LocalHighlightState) -> CanvasHighlightState {
+    match local {
+        LocalHighlightState::Off => CanvasHighlightState::Off,
+        LocalHighlightState::Characterwise { anchor } => CanvasHighlightState::Characterwise { anchor: *anchor },
+        LocalHighlightState::Linewise { anchor_line } => CanvasHighlightState::Linewise { anchor_line: *anchor_line },
+    }
+}
+
 #[allow(clippy::too_many_arguments)]
 pub fn render_ui(
     f: &mut Frame,
@@ -44,7 +54,7 @@ pub fn render_ui(
     buffer_state: &BufferState,
     theme: &Theme,
     is_event_handler_edit_mode: bool,
-    highlight_state: &HighlightState,
+    highlight_state: &LocalHighlightState, // Keep using local version
     event_handler_command_input: &str,
     event_handler_command_mode_active: bool,
     event_handler_command_message: &str,
@@ -69,7 +79,6 @@ pub fn render_ui(
 
     const PALETTE_OPTIONS_HEIGHT_FOR_LAYOUT: u16 = 15;
 
-
     let mut bottom_area_constraints: Vec<Constraint> = vec![Constraint::Length(status_line_height)];
     let command_palette_area_height = if navigation_state.active {
         1 + PALETTE_OPTIONS_HEIGHT_FOR_LAYOUT
@@ -128,8 +137,8 @@ pub fn render_ui(
             theme,
             register_state,
             app_state,
-            register_state.current_field() < 4,
-            highlight_state,
+            register_state.current_field() < 4, // Now using CanvasState trait method
+            highlight_state, // Uses local version
         );
     } else if app_state.ui.show_add_table {
         render_add_table(
@@ -139,7 +148,7 @@ pub fn render_ui(
             app_state,
             &mut admin_state.add_table_state,
             is_event_handler_edit_mode,
-            highlight_state,
+            highlight_state, // Uses local version
         );
     } else if app_state.ui.show_add_logic {
         render_add_logic(
@@ -149,7 +158,7 @@ pub fn render_ui(
             app_state,
             &mut admin_state.add_logic_state,
             is_event_handler_edit_mode,
-            highlight_state,
+            highlight_state, // Uses local version
         );
     } else if app_state.ui.show_login {
         render_login(
@@ -158,8 +167,8 @@ pub fn render_ui(
             theme,
             login_state,
             app_state,
-            login_state.current_field() < 2,
-            highlight_state,
+            login_state.current_field() < 2, // Now using CanvasState trait method
+            highlight_state, // Uses local version
         );
     } else if app_state.ui.show_admin {
         crate::components::admin::admin_panel::render_admin_panel(
@@ -200,13 +209,15 @@ 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(
             f,
             form_render_area,
             theme,
             is_event_handler_edit_mode,
-            highlight_state,
+            &canvas_highlight_state, // Use converted version
         );
     }
 

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;
@@ -27,17 +28,18 @@ use crate::ui::handlers::context::DialogPurpose;
 use crate::tui::functions::common::login;
 use crate::tui::functions::common::register;
 use crate::utils::columns::filter_user_columns;
-use anyhow::{anyhow, Context, Result};
+use anyhow::{Context, Result};
 use crossterm::cursor::SetCursorStyle;
 use crossterm::event as crossterm_event;
 use tracing::{error, info, warn};
 use tokio::sync::mpsc;
-use std::time::{Duration, Instant};
+use std::time::{Instant, Duration};
 #[cfg(feature = "ui-debug")]
 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 &&

client/tests/form/gui/form_tests.rs

@@ -2,6 +2,7 @@
 use rstest::{fixture, rstest};
 use std::collections::HashMap;
 use client::state::pages::form::{FormState, FieldDefinition};
+use canvas::state::CanvasState
 use client::state::pages::canvas_state::CanvasState;
 
 #[fixture]

flake.lock

@@ -0,0 +1,61 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1753549186,
+        "narHash": "sha256-Znl7rzuxKg/Mdm6AhimcKynM7V3YeNDIcLjBuoBcmNs=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "17f6bd177404d6d43017595c5264756764444ab8",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,52 @@
+{
+  description = "Komp AC - Kompress Accounting";
+
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+    flake-utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs = { self, nixpkgs, flake-utils }:
+    flake-utils.lib.eachDefaultSystem (system:
+      let
+        pkgs = nixpkgs.legacyPackages.${system};
+      in
+      {
+        devShells.default = pkgs.mkShell {
+          buildInputs = with pkgs; [
+            # Rust toolchain
+            rustc
+            cargo
+            rustfmt
+            clippy
+	    cargo-watch
+
+            # C build tools (for your linker issue)
+            gcc
+            binutils
+            pkg-config
+            
+            # OpenSSL for crypto dependencies
+            openssl
+            openssl.dev
+            
+            # PostgreSQL for sqlx
+            postgresql
+	    sqlx-cli
+            
+            # Protocol Buffers compiler for gRPC
+            protobuf
+          ];
+
+          shellHook = ''
+            export PKG_CONFIG_PATH="${pkgs.openssl.dev}/lib/pkgconfig:$PKG_CONFIG_PATH"
+            export OPENSSL_DIR="${pkgs.openssl.dev}"
+            export OPENSSL_LIB_DIR="${pkgs.openssl.out}/lib"
+            export OPENSSL_INCLUDE_DIR="${pkgs.openssl.dev}/include"
+            echo "🦀 Rust development environment loaded"
+            echo "OpenSSL and PostgreSQL available"
+          '';
+        };
+      }
+    );
+}

server/docs-prod/book.toml

@@ -0,0 +1,14 @@
+[book]
+authors = ["Priec"]
+language = "en"
+src = "src"
+title = "Server API Documentation"
+
+[output.html.search]
+enable = true
+limit-results = 30
+teaser-word-count = 30
+use-boolean-and = true
+boost-title = 2
+boost-hierarchy = 1
+boost-paragraph = 1

server/docs-prod/book/.nojekyll

@@ -0,0 +1 @@
+This file makes sure that Github Pages doesn't process mdBook's output.

server/docs-prod/book/404.html

@@ -0,0 +1,216 @@
+<!DOCTYPE HTML>
+<html lang="en" class="light sidebar-visible" dir="ltr">
+    <head>
+        <!-- Book generated using mdBook -->
+        <meta charset="UTF-8">
+        <title>Page not found - Server API Documentation</title>
+        <base href="/">
+
+
+        <!-- Custom HTML head -->
+
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="theme-color" content="#ffffff">
+
+        <link rel="icon" href="favicon.svg">
+        <link rel="shortcut icon" href="favicon.png">
+        <link rel="stylesheet" href="css/variables.css">
+        <link rel="stylesheet" href="css/general.css">
+        <link rel="stylesheet" href="css/chrome.css">
+        <link rel="stylesheet" href="css/print.css" media="print">
+
+        <!-- Fonts -->
+        <link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
+        <link rel="stylesheet" href="fonts/fonts.css">
+
+        <!-- Highlight.js Stylesheets -->
+        <link rel="stylesheet" id="highlight-css" href="highlight.css">
+        <link rel="stylesheet" id="tomorrow-night-css" href="tomorrow-night.css">
+        <link rel="stylesheet" id="ayu-highlight-css" href="ayu-highlight.css">
+
+        <!-- Custom theme stylesheets -->
+
+
+        <!-- Provide site root and default themes to javascript -->
+        <script>
+            const path_to_root = "";
+            const default_light_theme = "light";
+            const default_dark_theme = "navy";
+        </script>
+        <!-- Start loading toc.js asap -->
+        <script src="toc.js"></script>
+    </head>
+    <body>
+    <div id="body-container">
+        <!-- Work around some values being stored in localStorage wrapped in quotes -->
+        <script>
+            try {
+                let theme = localStorage.getItem('mdbook-theme');
+                let sidebar = localStorage.getItem('mdbook-sidebar');
+
+                if (theme.startsWith('"') && theme.endsWith('"')) {
+                    localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
+                }
+
+                if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
+                    localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
+                }
+            } catch (e) { }
+        </script>
+
+        <!-- Set the theme before any content is loaded, prevents flash -->
+        <script>
+            const default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? default_dark_theme : default_light_theme;
+            let theme;
+            try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
+            if (theme === null || theme === undefined) { theme = default_theme; }
+            const html = document.documentElement;
+            html.classList.remove('light')
+            html.classList.add(theme);
+            html.classList.add("js");
+        </script>
+
+        <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
+
+        <!-- Hide / unhide sidebar before it is displayed -->
+        <script>
+            let sidebar = null;
+            const sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
+            if (document.body.clientWidth >= 1080) {
+                try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
+                sidebar = sidebar || 'visible';
+            } else {
+                sidebar = 'hidden';
+            }
+            sidebar_toggle.checked = sidebar === 'visible';
+            html.classList.remove('sidebar-visible');
+            html.classList.add("sidebar-" + sidebar);
+        </script>
+
+        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
+            <!-- populated by js -->
+            <mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox>
+            <noscript>
+                <iframe class="sidebar-iframe-outer" src="toc.html"></iframe>
+            </noscript>
+            <div id="sidebar-resize-handle" class="sidebar-resize-handle">
+                <div class="sidebar-resize-indicator"></div>
+            </div>
+        </nav>
+
+        <div id="page-wrapper" class="page-wrapper">
+
+            <div class="page">
+                <div id="menu-bar-hover-placeholder"></div>
+                <div id="menu-bar" class="menu-bar sticky">
+                    <div class="left-buttons">
+                        <label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
+                            <i class="fa fa-bars"></i>
+                        </label>
+                        <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
+                            <i class="fa fa-paint-brush"></i>
+                        </button>
+                        <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
+                            <li role="none"><button role="menuitem" class="theme" id="default_theme">Auto</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
+                        </ul>
+                        <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
+                            <i class="fa fa-search"></i>
+                        </button>
+                    </div>
+
+                    <h1 class="menu-title">Server API Documentation</h1>
+
+                    <div class="right-buttons">
+                        <a href="print.html" title="Print this book" aria-label="Print this book">
+                            <i id="print-button" class="fa fa-print"></i>
+                        </a>
+
+                    </div>
+                </div>
+
+                <div id="search-wrapper" class="hidden">
+                    <form id="searchbar-outer" class="searchbar-outer">
+                        <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
+                    </form>
+                    <div id="searchresults-outer" class="searchresults-outer hidden">
+                        <div id="searchresults-header" class="searchresults-header"></div>
+                        <ul id="searchresults">
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
+                <script>
+                    document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
+                    document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
+                    Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
+                        link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
+                    });
+                </script>
+
+                <div id="content" class="content">
+                    <main>
+                        <h1 id="document-not-found-404"><a class="header" href="#document-not-found-404">Document not found (404)</a></h1>
+<p>This URL is invalid, sorry. Please use the navigation bar or search to continue.</p>
+
+                    </main>
+
+                    <nav class="nav-wrapper" aria-label="Page navigation">
+                        <!-- Mobile navigation buttons -->
+
+
+                        <div style="clear: both"></div>
+                    </nav>
+                </div>
+            </div>
+
+            <nav class="nav-wide-wrapper" aria-label="Page navigation">
+
+            </nav>
+
+        </div>
+
+        <!-- Livereload script (if served using the cli tool) -->
+        <script>
+            const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload";
+            const socket = new WebSocket(wsAddress);
+            socket.onmessage = function (event) {
+                if (event.data === "reload") {
+                    socket.close();
+                    location.reload();
+                }
+            };
+
+            window.onbeforeunload = function() {
+                socket.close();
+            }
+        </script>
+
+
+
+        <script>
+            window.playground_copyable = true;
+        </script>
+
+
+        <script src="elasticlunr.min.js"></script>
+        <script src="mark.min.js"></script>
+        <script src="searcher.js"></script>
+
+        <script src="clipboard.min.js"></script>
+        <script src="highlight.js"></script>
+        <script src="book.js"></script>
+
+        <!-- Custom JS scripts -->
+
+
+    </div>
+    </body>
+</html>

server/docs-prod/book/ayu-highlight.css

@@ -0,0 +1,78 @@
+/*
+Based off of the Ayu theme
+Original by Dempfi (https://github.com/dempfi/ayu)
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #191f26;
+  color: #e6e1cf;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #5c6773;
+  font-style: italic;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-attr,
+.hljs-regexp,
+.hljs-link,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #ff7733;
+}
+
+.hljs-number,
+.hljs-meta,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #ffee99;
+}
+
+.hljs-string,
+.hljs-bullet {
+  color: #b8cc52;
+}
+
+.hljs-title,
+.hljs-built_in,
+.hljs-section {
+  color: #ffb454;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-symbol {
+  color: #ff7733;
+}
+
+.hljs-name {
+    color: #36a3d9;
+}
+
+.hljs-tag {
+    color: #00568d;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-addition {
+  color: #91b362;
+}
+
+.hljs-deletion {
+  color: #d96c75;
+}

server/docs-prod/book/book.js

@@ -0,0 +1,769 @@
+'use strict';
+
+/* global default_theme, default_dark_theme, default_light_theme, hljs, ClipboardJS */
+
+// Fix back button cache problem
+window.onunload = function() { };
+
+// Global variable, shared between modules
+function playground_text(playground, hidden = true) {
+    const code_block = playground.querySelector('code');
+
+    if (window.ace && code_block.classList.contains('editable')) {
+        const editor = window.ace.edit(code_block);
+        return editor.getValue();
+    } else if (hidden) {
+        return code_block.textContent;
+    } else {
+        return code_block.innerText;
+    }
+}
+
+(function codeSnippets() {
+    function fetch_with_timeout(url, options, timeout = 6000) {
+        return Promise.race([
+            fetch(url, options),
+            new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), timeout)),
+        ]);
+    }
+
+    const playgrounds = Array.from(document.querySelectorAll('.playground'));
+    if (playgrounds.length > 0) {
+        fetch_with_timeout('https://play.rust-lang.org/meta/crates', {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            method: 'POST',
+            mode: 'cors',
+        })
+            .then(response => response.json())
+            .then(response => {
+            // get list of crates available in the rust playground
+                const playground_crates = response.crates.map(item => item['id']);
+                playgrounds.forEach(block => handle_crate_list_update(block, playground_crates));
+            });
+    }
+
+    function handle_crate_list_update(playground_block, playground_crates) {
+        // update the play buttons after receiving the response
+        update_play_button(playground_block, playground_crates);
+
+        // and install on change listener to dynamically update ACE editors
+        if (window.ace) {
+            const code_block = playground_block.querySelector('code');
+            if (code_block.classList.contains('editable')) {
+                const editor = window.ace.edit(code_block);
+                editor.addEventListener('change', () => {
+                    update_play_button(playground_block, playground_crates);
+                });
+                // add Ctrl-Enter command to execute rust code
+                editor.commands.addCommand({
+                    name: 'run',
+                    bindKey: {
+                        win: 'Ctrl-Enter',
+                        mac: 'Ctrl-Enter',
+                    },
+                    exec: _editor => run_rust_code(playground_block),
+                });
+            }
+        }
+    }
+
+    // updates the visibility of play button based on `no_run` class and
+    // used crates vs ones available on https://play.rust-lang.org
+    function update_play_button(pre_block, playground_crates) {
+        const play_button = pre_block.querySelector('.play-button');
+
+        // skip if code is `no_run`
+        if (pre_block.querySelector('code').classList.contains('no_run')) {
+            play_button.classList.add('hidden');
+            return;
+        }
+
+        // get list of `extern crate`'s from snippet
+        const txt = playground_text(pre_block);
+        const re = /extern\s+crate\s+([a-zA-Z_0-9]+)\s*;/g;
+        const snippet_crates = [];
+        let item;
+        // eslint-disable-next-line no-cond-assign
+        while (item = re.exec(txt)) {
+            snippet_crates.push(item[1]);
+        }
+
+        // check if all used crates are available on play.rust-lang.org
+        const all_available = snippet_crates.every(function(elem) {
+            return playground_crates.indexOf(elem) > -1;
+        });
+
+        if (all_available) {
+            play_button.classList.remove('hidden');
+        } else {
+            play_button.classList.add('hidden');
+        }
+    }
+
+    function run_rust_code(code_block) {
+        let result_block = code_block.querySelector('.result');
+        if (!result_block) {
+            result_block = document.createElement('code');
+            result_block.className = 'result hljs language-bash';
+
+            code_block.append(result_block);
+        }
+
+        const text = playground_text(code_block);
+        const classes = code_block.querySelector('code').classList;
+        let edition = '2015';
+        classes.forEach(className => {
+            if (className.startsWith('edition')) {
+                edition = className.slice(7);
+            }
+        });
+        const params = {
+            version: 'stable',
+            optimize: '0',
+            code: text,
+            edition: edition,
+        };
+
+        if (text.indexOf('#![feature') !== -1) {
+            params.version = 'nightly';
+        }
+
+        result_block.innerText = 'Running...';
+
+        fetch_with_timeout('https://play.rust-lang.org/evaluate.json', {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            method: 'POST',
+            mode: 'cors',
+            body: JSON.stringify(params),
+        })
+            .then(response => response.json())
+            .then(response => {
+                if (response.result.trim() === '') {
+                    result_block.innerText = 'No output';
+                    result_block.classList.add('result-no-output');
+                } else {
+                    result_block.innerText = response.result;
+                    result_block.classList.remove('result-no-output');
+                }
+            })
+            .catch(error => result_block.innerText = 'Playground Communication: ' + error.message);
+    }
+
+    // Syntax highlighting Configuration
+    hljs.configure({
+        tabReplace: '    ', // 4 spaces
+        languages: [], // Languages used for auto-detection
+    });
+
+    const code_nodes = Array
+        .from(document.querySelectorAll('code'))
+        // Don't highlight `inline code` blocks in headers.
+        .filter(function(node) {
+            return !node.parentElement.classList.contains('header');
+        });
+
+    if (window.ace) {
+        // language-rust class needs to be removed for editable
+        // blocks or highlightjs will capture events
+        code_nodes
+            .filter(function(node) {
+                return node.classList.contains('editable');
+            })
+            .forEach(function(block) {
+                block.classList.remove('language-rust');
+            });
+
+        code_nodes
+            .filter(function(node) {
+                return !node.classList.contains('editable');
+            })
+            .forEach(function(block) {
+                hljs.highlightBlock(block);
+            });
+    } else {
+        code_nodes.forEach(function(block) {
+            hljs.highlightBlock(block);
+        });
+    }
+
+    // Adding the hljs class gives code blocks the color css
+    // even if highlighting doesn't apply
+    code_nodes.forEach(function(block) {
+        block.classList.add('hljs');
+    });
+
+    Array.from(document.querySelectorAll('code.hljs')).forEach(function(block) {
+
+        const lines = Array.from(block.querySelectorAll('.boring'));
+        // If no lines were hidden, return
+        if (!lines.length) {
+            return;
+        }
+        block.classList.add('hide-boring');
+
+        const buttons = document.createElement('div');
+        buttons.className = 'buttons';
+        buttons.innerHTML = '<button class="fa fa-eye" title="Show hidden lines" \
+aria-label="Show hidden lines"></button>';
+
+        // add expand button
+        const pre_block = block.parentNode;
+        pre_block.insertBefore(buttons, pre_block.firstChild);
+
+        pre_block.querySelector('.buttons').addEventListener('click', function(e) {
+            if (e.target.classList.contains('fa-eye')) {
+                e.target.classList.remove('fa-eye');
+                e.target.classList.add('fa-eye-slash');
+                e.target.title = 'Hide lines';
+                e.target.setAttribute('aria-label', e.target.title);
+
+                block.classList.remove('hide-boring');
+            } else if (e.target.classList.contains('fa-eye-slash')) {
+                e.target.classList.remove('fa-eye-slash');
+                e.target.classList.add('fa-eye');
+                e.target.title = 'Show hidden lines';
+                e.target.setAttribute('aria-label', e.target.title);
+
+                block.classList.add('hide-boring');
+            }
+        });
+    });
+
+    if (window.playground_copyable) {
+        Array.from(document.querySelectorAll('pre code')).forEach(function(block) {
+            const pre_block = block.parentNode;
+            if (!pre_block.classList.contains('playground')) {
+                let buttons = pre_block.querySelector('.buttons');
+                if (!buttons) {
+                    buttons = document.createElement('div');
+                    buttons.className = 'buttons';
+                    pre_block.insertBefore(buttons, pre_block.firstChild);
+                }
+
+                const clipButton = document.createElement('button');
+                clipButton.className = 'clip-button';
+                clipButton.title = 'Copy to clipboard';
+                clipButton.setAttribute('aria-label', clipButton.title);
+                clipButton.innerHTML = '<i class="tooltiptext"></i>';
+
+                buttons.insertBefore(clipButton, buttons.firstChild);
+            }
+        });
+    }
+
+    // Process playground code blocks
+    Array.from(document.querySelectorAll('.playground')).forEach(function(pre_block) {
+        // Add play button
+        let buttons = pre_block.querySelector('.buttons');
+        if (!buttons) {
+            buttons = document.createElement('div');
+            buttons.className = 'buttons';
+            pre_block.insertBefore(buttons, pre_block.firstChild);
+        }
+
+        const runCodeButton = document.createElement('button');
+        runCodeButton.className = 'fa fa-play play-button';
+        runCodeButton.hidden = true;
+        runCodeButton.title = 'Run this code';
+        runCodeButton.setAttribute('aria-label', runCodeButton.title);
+
+        buttons.insertBefore(runCodeButton, buttons.firstChild);
+        runCodeButton.addEventListener('click', () => {
+            run_rust_code(pre_block);
+        });
+
+        if (window.playground_copyable) {
+            const copyCodeClipboardButton = document.createElement('button');
+            copyCodeClipboardButton.className = 'clip-button';
+            copyCodeClipboardButton.innerHTML = '<i class="tooltiptext"></i>';
+            copyCodeClipboardButton.title = 'Copy to clipboard';
+            copyCodeClipboardButton.setAttribute('aria-label', copyCodeClipboardButton.title);
+
+            buttons.insertBefore(copyCodeClipboardButton, buttons.firstChild);
+        }
+
+        const code_block = pre_block.querySelector('code');
+        if (window.ace && code_block.classList.contains('editable')) {
+            const undoChangesButton = document.createElement('button');
+            undoChangesButton.className = 'fa fa-history reset-button';
+            undoChangesButton.title = 'Undo changes';
+            undoChangesButton.setAttribute('aria-label', undoChangesButton.title);
+
+            buttons.insertBefore(undoChangesButton, buttons.firstChild);
+
+            undoChangesButton.addEventListener('click', function() {
+                const editor = window.ace.edit(code_block);
+                editor.setValue(editor.originalCode);
+                editor.clearSelection();
+            });
+        }
+    });
+})();
+
+(function themes() {
+    const html = document.querySelector('html');
+    const themeToggleButton = document.getElementById('theme-toggle');
+    const themePopup = document.getElementById('theme-list');
+    const themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
+    const themeIds = [];
+    themePopup.querySelectorAll('button.theme').forEach(function(el) {
+        themeIds.push(el.id);
+    });
+    const stylesheets = {
+        ayuHighlight: document.querySelector('#ayu-highlight-css'),
+        tomorrowNight: document.querySelector('#tomorrow-night-css'),
+        highlight: document.querySelector('#highlight-css'),
+    };
+
+    function showThemes() {
+        themePopup.style.display = 'block';
+        themeToggleButton.setAttribute('aria-expanded', true);
+        themePopup.querySelector('button#' + get_theme()).focus();
+    }
+
+    function updateThemeSelected() {
+        themePopup.querySelectorAll('.theme-selected').forEach(function(el) {
+            el.classList.remove('theme-selected');
+        });
+        const selected = get_saved_theme() ?? 'default_theme';
+        let element = themePopup.querySelector('button#' + selected);
+        if (element === null) {
+            // Fall back in case there is no "Default" item.
+            element = themePopup.querySelector('button#' + get_theme());
+        }
+        element.classList.add('theme-selected');
+    }
+
+    function hideThemes() {
+        themePopup.style.display = 'none';
+        themeToggleButton.setAttribute('aria-expanded', false);
+        themeToggleButton.focus();
+    }
+
+    function get_saved_theme() {
+        let theme = null;
+        try {
+            theme = localStorage.getItem('mdbook-theme');
+        } catch (e) {
+            // ignore error.
+        }
+        return theme;
+    }
+
+    function delete_saved_theme() {
+        localStorage.removeItem('mdbook-theme');
+    }
+
+    function get_theme() {
+        const theme = get_saved_theme();
+        if (theme === null || theme === undefined || !themeIds.includes(theme)) {
+            if (typeof default_dark_theme === 'undefined') {
+                // A customized index.hbs might not define this, so fall back to
+                // old behavior of determining the default on page load.
+                return default_theme;
+            }
+            return window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? default_dark_theme
+                : default_light_theme;
+        } else {
+            return theme;
+        }
+    }
+
+    let previousTheme = default_theme;
+    function set_theme(theme, store = true) {
+        let ace_theme;
+
+        if (theme === 'coal' || theme === 'navy') {
+            stylesheets.ayuHighlight.disabled = true;
+            stylesheets.tomorrowNight.disabled = false;
+            stylesheets.highlight.disabled = true;
+
+            ace_theme = 'ace/theme/tomorrow_night';
+        } else if (theme === 'ayu') {
+            stylesheets.ayuHighlight.disabled = false;
+            stylesheets.tomorrowNight.disabled = true;
+            stylesheets.highlight.disabled = true;
+            ace_theme = 'ace/theme/tomorrow_night';
+        } else {
+            stylesheets.ayuHighlight.disabled = true;
+            stylesheets.tomorrowNight.disabled = true;
+            stylesheets.highlight.disabled = false;
+            ace_theme = 'ace/theme/dawn';
+        }
+
+        setTimeout(function() {
+            themeColorMetaTag.content = getComputedStyle(document.documentElement).backgroundColor;
+        }, 1);
+
+        if (window.ace && window.editors) {
+            window.editors.forEach(function(editor) {
+                editor.setTheme(ace_theme);
+            });
+        }
+
+        if (store) {
+            try {
+                localStorage.setItem('mdbook-theme', theme);
+            } catch (e) {
+                // ignore error.
+            }
+        }
+
+        html.classList.remove(previousTheme);
+        html.classList.add(theme);
+        previousTheme = theme;
+        updateThemeSelected();
+    }
+
+    const query = window.matchMedia('(prefers-color-scheme: dark)');
+    query.onchange = function() {
+        set_theme(get_theme(), false);
+    };
+
+    // Set theme.
+    set_theme(get_theme(), false);
+
+    themeToggleButton.addEventListener('click', function() {
+        if (themePopup.style.display === 'block') {
+            hideThemes();
+        } else {
+            showThemes();
+        }
+    });
+
+    themePopup.addEventListener('click', function(e) {
+        let theme;
+        if (e.target.className === 'theme') {
+            theme = e.target.id;
+        } else if (e.target.parentElement.className === 'theme') {
+            theme = e.target.parentElement.id;
+        } else {
+            return;
+        }
+        if (theme === 'default_theme' || theme === null) {
+            delete_saved_theme();
+            set_theme(get_theme(), false);
+        } else {
+            set_theme(theme);
+        }
+    });
+
+    themePopup.addEventListener('focusout', function(e) {
+        // e.relatedTarget is null in Safari and Firefox on macOS (see workaround below)
+        if (!!e.relatedTarget &&
+            !themeToggleButton.contains(e.relatedTarget) &&
+            !themePopup.contains(e.relatedTarget)
+        ) {
+            hideThemes();
+        }
+    });
+
+    // Should not be needed, but it works around an issue on macOS & iOS:
+    // https://github.com/rust-lang/mdBook/issues/628
+    document.addEventListener('click', function(e) {
+        if (themePopup.style.display === 'block' &&
+            !themeToggleButton.contains(e.target) &&
+            !themePopup.contains(e.target)
+        ) {
+            hideThemes();
+        }
+    });
+
+    document.addEventListener('keydown', function(e) {
+        if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+            return;
+        }
+        if (!themePopup.contains(e.target)) {
+            return;
+        }
+
+        let li;
+        switch (e.key) {
+        case 'Escape':
+            e.preventDefault();
+            hideThemes();
+            break;
+        case 'ArrowUp':
+            e.preventDefault();
+            li = document.activeElement.parentElement;
+            if (li && li.previousElementSibling) {
+                li.previousElementSibling.querySelector('button').focus();
+            }
+            break;
+        case 'ArrowDown':
+            e.preventDefault();
+            li = document.activeElement.parentElement;
+            if (li && li.nextElementSibling) {
+                li.nextElementSibling.querySelector('button').focus();
+            }
+            break;
+        case 'Home':
+            e.preventDefault();
+            themePopup.querySelector('li:first-child button').focus();
+            break;
+        case 'End':
+            e.preventDefault();
+            themePopup.querySelector('li:last-child button').focus();
+            break;
+        }
+    });
+})();
+
+(function sidebar() {
+    const body = document.querySelector('body');
+    const sidebar = document.getElementById('sidebar');
+    const sidebarLinks = document.querySelectorAll('#sidebar a');
+    const sidebarToggleButton = document.getElementById('sidebar-toggle');
+    const sidebarToggleAnchor = document.getElementById('sidebar-toggle-anchor');
+    const sidebarResizeHandle = document.getElementById('sidebar-resize-handle');
+    let firstContact = null;
+
+    function showSidebar() {
+        body.classList.remove('sidebar-hidden');
+        body.classList.add('sidebar-visible');
+        Array.from(sidebarLinks).forEach(function(link) {
+            link.setAttribute('tabIndex', 0);
+        });
+        sidebarToggleButton.setAttribute('aria-expanded', true);
+        sidebar.setAttribute('aria-hidden', false);
+        try {
+            localStorage.setItem('mdbook-sidebar', 'visible');
+        } catch (e) {
+            // Ignore error.
+        }
+    }
+
+    function hideSidebar() {
+        body.classList.remove('sidebar-visible');
+        body.classList.add('sidebar-hidden');
+        Array.from(sidebarLinks).forEach(function(link) {
+            link.setAttribute('tabIndex', -1);
+        });
+        sidebarToggleButton.setAttribute('aria-expanded', false);
+        sidebar.setAttribute('aria-hidden', true);
+        try {
+            localStorage.setItem('mdbook-sidebar', 'hidden');
+        } catch (e) {
+            // Ignore error.
+        }
+    }
+
+    // Toggle sidebar
+    sidebarToggleAnchor.addEventListener('change', function sidebarToggle() {
+        if (sidebarToggleAnchor.checked) {
+            const current_width = parseInt(
+                document.documentElement.style.getPropertyValue('--sidebar-target-width'), 10);
+            if (current_width < 150) {
+                document.documentElement.style.setProperty('--sidebar-target-width', '150px');
+            }
+            showSidebar();
+        } else {
+            hideSidebar();
+        }
+    });
+
+    sidebarResizeHandle.addEventListener('mousedown', initResize, false);
+
+    function initResize() {
+        window.addEventListener('mousemove', resize, false);
+        window.addEventListener('mouseup', stopResize, false);
+        body.classList.add('sidebar-resizing');
+    }
+    function resize(e) {
+        let pos = e.clientX - sidebar.offsetLeft;
+        if (pos < 20) {
+            hideSidebar();
+        } else {
+            if (body.classList.contains('sidebar-hidden')) {
+                showSidebar();
+            }
+            pos = Math.min(pos, window.innerWidth - 100);
+            document.documentElement.style.setProperty('--sidebar-target-width', pos + 'px');
+        }
+    }
+    //on mouseup remove windows functions mousemove & mouseup
+    function stopResize() {
+        body.classList.remove('sidebar-resizing');
+        window.removeEventListener('mousemove', resize, false);
+        window.removeEventListener('mouseup', stopResize, false);
+    }
+
+    document.addEventListener('touchstart', function(e) {
+        firstContact = {
+            x: e.touches[0].clientX,
+            time: Date.now(),
+        };
+    }, { passive: true });
+
+    document.addEventListener('touchmove', function(e) {
+        if (!firstContact) {
+            return;
+        }
+
+        const curX = e.touches[0].clientX;
+        const xDiff = curX - firstContact.x,
+            tDiff = Date.now() - firstContact.time;
+
+        if (tDiff < 250 && Math.abs(xDiff) >= 150) {
+            if (xDiff >= 0 && firstContact.x < Math.min(document.body.clientWidth * 0.25, 300)) {
+                showSidebar();
+            } else if (xDiff < 0 && curX < 300) {
+                hideSidebar();
+            }
+
+            firstContact = null;
+        }
+    }, { passive: true });
+})();
+
+(function chapterNavigation() {
+    document.addEventListener('keydown', function(e) {
+        if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+            return;
+        }
+        if (window.search && window.search.hasFocus()) {
+            return;
+        }
+        const html = document.querySelector('html');
+
+        function next() {
+            const nextButton = document.querySelector('.nav-chapters.next');
+            if (nextButton) {
+                window.location.href = nextButton.href;
+            }
+        }
+        function prev() {
+            const previousButton = document.querySelector('.nav-chapters.previous');
+            if (previousButton) {
+                window.location.href = previousButton.href;
+            }
+        }
+        switch (e.key) {
+        case 'ArrowRight':
+            e.preventDefault();
+            if (html.dir === 'rtl') {
+                prev();
+            } else {
+                next();
+            }
+            break;
+        case 'ArrowLeft':
+            e.preventDefault();
+            if (html.dir === 'rtl') {
+                next();
+            } else {
+                prev();
+            }
+            break;
+        }
+    });
+})();
+
+(function clipboard() {
+    const clipButtons = document.querySelectorAll('.clip-button');
+
+    function hideTooltip(elem) {
+        elem.firstChild.innerText = '';
+        elem.className = 'clip-button';
+    }
+
+    function showTooltip(elem, msg) {
+        elem.firstChild.innerText = msg;
+        elem.className = 'clip-button tooltipped';
+    }
+
+    const clipboardSnippets = new ClipboardJS('.clip-button', {
+        text: function(trigger) {
+            hideTooltip(trigger);
+            const playground = trigger.closest('pre');
+            return playground_text(playground, false);
+        },
+    });
+
+    Array.from(clipButtons).forEach(function(clipButton) {
+        clipButton.addEventListener('mouseout', function(e) {
+            hideTooltip(e.currentTarget);
+        });
+    });
+
+    clipboardSnippets.on('success', function(e) {
+        e.clearSelection();
+        showTooltip(e.trigger, 'Copied!');
+    });
+
+    clipboardSnippets.on('error', function(e) {
+        showTooltip(e.trigger, 'Clipboard error!');
+    });
+})();
+
+(function scrollToTop() {
+    const menuTitle = document.querySelector('.menu-title');
+
+    menuTitle.addEventListener('click', function() {
+        document.scrollingElement.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+})();
+
+(function controllMenu() {
+    const menu = document.getElementById('menu-bar');
+
+    (function controllPosition() {
+        let scrollTop = document.scrollingElement.scrollTop;
+        let prevScrollTop = scrollTop;
+        const minMenuY = -menu.clientHeight - 50;
+        // When the script loads, the page can be at any scroll (e.g. if you reforesh it).
+        menu.style.top = scrollTop + 'px';
+        // Same as parseInt(menu.style.top.slice(0, -2), but faster
+        let topCache = menu.style.top.slice(0, -2);
+        menu.classList.remove('sticky');
+        let stickyCache = false; // Same as menu.classList.contains('sticky'), but faster
+        document.addEventListener('scroll', function() {
+            scrollTop = Math.max(document.scrollingElement.scrollTop, 0);
+            // `null` means that it doesn't need to be updated
+            let nextSticky = null;
+            let nextTop = null;
+            const scrollDown = scrollTop > prevScrollTop;
+            const menuPosAbsoluteY = topCache - scrollTop;
+            if (scrollDown) {
+                nextSticky = false;
+                if (menuPosAbsoluteY > 0) {
+                    nextTop = prevScrollTop;
+                }
+            } else {
+                if (menuPosAbsoluteY > 0) {
+                    nextSticky = true;
+                } else if (menuPosAbsoluteY < minMenuY) {
+                    nextTop = prevScrollTop + minMenuY;
+                }
+            }
+            if (nextSticky === true && stickyCache === false) {
+                menu.classList.add('sticky');
+                stickyCache = true;
+            } else if (nextSticky === false && stickyCache === true) {
+                menu.classList.remove('sticky');
+                stickyCache = false;
+            }
+            if (nextTop !== null) {
+                menu.style.top = nextTop + 'px';
+                topCache = nextTop;
+            }
+            prevScrollTop = scrollTop;
+        }, { passive: true });
+    })();
+    (function controllBorder() {
+        function updateBorder() {
+            if (menu.offsetTop === 0) {
+                menu.classList.remove('bordered');
+            } else {
+                menu.classList.add('bordered');
+            }
+        }
+        updateBorder();
+        document.addEventListener('scroll', updateBorder, { passive: true });
+    })();
+})();

server/docs-prod/book/chapter_1.html

@@ -0,0 +1,214 @@
+<!DOCTYPE HTML>
+<html lang="en" class="light sidebar-visible" dir="ltr">
+    <head>
+        <!-- Book generated using mdBook -->
+        <meta charset="UTF-8">
+        <title>Chapter 1 - Server API Documentation</title>
+
+
+        <!-- Custom HTML head -->
+
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="theme-color" content="#ffffff">
+
+        <link rel="icon" href="favicon.svg">
+        <link rel="shortcut icon" href="favicon.png">
+        <link rel="stylesheet" href="css/variables.css">
+        <link rel="stylesheet" href="css/general.css">
+        <link rel="stylesheet" href="css/chrome.css">
+        <link rel="stylesheet" href="css/print.css" media="print">
+
+        <!-- Fonts -->
+        <link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
+        <link rel="stylesheet" href="fonts/fonts.css">
+
+        <!-- Highlight.js Stylesheets -->
+        <link rel="stylesheet" id="highlight-css" href="highlight.css">
+        <link rel="stylesheet" id="tomorrow-night-css" href="tomorrow-night.css">
+        <link rel="stylesheet" id="ayu-highlight-css" href="ayu-highlight.css">
+
+        <!-- Custom theme stylesheets -->
+
+
+        <!-- Provide site root and default themes to javascript -->
+        <script>
+            const path_to_root = "";
+            const default_light_theme = "light";
+            const default_dark_theme = "navy";
+        </script>
+        <!-- Start loading toc.js asap -->
+        <script src="toc.js"></script>
+    </head>
+    <body>
+    <div id="body-container">
+        <!-- Work around some values being stored in localStorage wrapped in quotes -->
+        <script>
+            try {
+                let theme = localStorage.getItem('mdbook-theme');
+                let sidebar = localStorage.getItem('mdbook-sidebar');
+
+                if (theme.startsWith('"') && theme.endsWith('"')) {
+                    localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
+                }
+
+                if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
+                    localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
+                }
+            } catch (e) { }
+        </script>
+
+        <!-- Set the theme before any content is loaded, prevents flash -->
+        <script>
+            const default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? default_dark_theme : default_light_theme;
+            let theme;
+            try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
+            if (theme === null || theme === undefined) { theme = default_theme; }
+            const html = document.documentElement;
+            html.classList.remove('light')
+            html.classList.add(theme);
+            html.classList.add("js");
+        </script>
+
+        <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
+
+        <!-- Hide / unhide sidebar before it is displayed -->
+        <script>
+            let sidebar = null;
+            const sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
+            if (document.body.clientWidth >= 1080) {
+                try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
+                sidebar = sidebar || 'visible';
+            } else {
+                sidebar = 'hidden';
+            }
+            sidebar_toggle.checked = sidebar === 'visible';
+            html.classList.remove('sidebar-visible');
+            html.classList.add("sidebar-" + sidebar);
+        </script>
+
+        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
+            <!-- populated by js -->
+            <mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox>
+            <noscript>
+                <iframe class="sidebar-iframe-outer" src="toc.html"></iframe>
+            </noscript>
+            <div id="sidebar-resize-handle" class="sidebar-resize-handle">
+                <div class="sidebar-resize-indicator"></div>
+            </div>
+        </nav>
+
+        <div id="page-wrapper" class="page-wrapper">
+
+            <div class="page">
+                <div id="menu-bar-hover-placeholder"></div>
+                <div id="menu-bar" class="menu-bar sticky">
+                    <div class="left-buttons">
+                        <label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
+                            <i class="fa fa-bars"></i>
+                        </label>
+                        <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
+                            <i class="fa fa-paint-brush"></i>
+                        </button>
+                        <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
+                            <li role="none"><button role="menuitem" class="theme" id="default_theme">Auto</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
+                        </ul>
+                        <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
+                            <i class="fa fa-search"></i>
+                        </button>
+                    </div>
+
+                    <h1 class="menu-title">Server API Documentation</h1>
+
+                    <div class="right-buttons">
+                        <a href="print.html" title="Print this book" aria-label="Print this book">
+                            <i id="print-button" class="fa fa-print"></i>
+                        </a>
+
+                    </div>
+                </div>
+
+                <div id="search-wrapper" class="hidden">
+                    <form id="searchbar-outer" class="searchbar-outer">
+                        <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
+                    </form>
+                    <div id="searchresults-outer" class="searchresults-outer hidden">
+                        <div id="searchresults-header" class="searchresults-header"></div>
+                        <ul id="searchresults">
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
+                <script>
+                    document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
+                    document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
+                    Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
+                        link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
+                    });
+                </script>
+
+                <div id="content" class="content">
+                    <main>
+                        <h1 id="chapter-1"><a class="header" href="#chapter-1">Chapter 1</a></h1>
+
+                    </main>
+
+                    <nav class="nav-wrapper" aria-label="Page navigation">
+                        <!-- Mobile navigation buttons -->
+
+
+                        <div style="clear: both"></div>
+                    </nav>
+                </div>
+            </div>
+
+            <nav class="nav-wide-wrapper" aria-label="Page navigation">
+
+            </nav>
+
+        </div>
+
+        <!-- Livereload script (if served using the cli tool) -->
+        <script>
+            const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload";
+            const socket = new WebSocket(wsAddress);
+            socket.onmessage = function (event) {
+                if (event.data === "reload") {
+                    socket.close();
+                    location.reload();
+                }
+            };
+
+            window.onbeforeunload = function() {
+                socket.close();
+            }
+        </script>
+
+
+
+        <script>
+            window.playground_copyable = true;
+        </script>
+
+
+        <script src="elasticlunr.min.js"></script>
+        <script src="mark.min.js"></script>
+        <script src="searcher.js"></script>
+
+        <script src="clipboard.min.js"></script>
+        <script src="highlight.js"></script>
+        <script src="book.js"></script>
+
+        <!-- Custom JS scripts -->
+
+
+    </div>
+    </body>
+</html>

server/docs-prod/book/css/chrome.css

@@ -0,0 +1,643 @@
+/* CSS for UI elements (a.k.a. chrome) */
+
+html {
+    scrollbar-color: var(--scrollbar) var(--bg);
+}
+#searchresults a,
+.content a:link,
+a:visited,
+a > .hljs {
+    color: var(--links);
+}
+
+/*
+    body-container is necessary because mobile browsers don't seem to like
+    overflow-x on the body tag when there is a <meta name="viewport"> tag.
+*/
+#body-container {
+    /*
+        This is used when the sidebar pushes the body content off the side of
+        the screen on small screens. Without it, dragging on mobile Safari
+        will want to reposition the viewport in a weird way.
+    */
+    overflow-x: clip;
+}
+
+/* Menu Bar */
+
+#menu-bar,
+#menu-bar-hover-placeholder {
+    z-index: 101;
+    margin: auto calc(0px - var(--page-padding));
+}
+#menu-bar {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    background-color: var(--bg);
+    border-block-end-color: var(--bg);
+    border-block-end-width: 1px;
+    border-block-end-style: solid;
+}
+#menu-bar.sticky,
+#menu-bar-hover-placeholder:hover + #menu-bar,
+#menu-bar:hover,
+html.sidebar-visible #menu-bar {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0 !important;
+}
+#menu-bar-hover-placeholder {
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    height: var(--menu-bar-height);
+}
+#menu-bar.bordered {
+    border-block-end-color: var(--table-border-color);
+}
+#menu-bar i, #menu-bar .icon-button {
+    position: relative;
+    padding: 0 8px;
+    z-index: 10;
+    line-height: var(--menu-bar-height);
+    cursor: pointer;
+    transition: color 0.5s;
+}
+@media only screen and (max-width: 420px) {
+    #menu-bar i, #menu-bar .icon-button {
+        padding: 0 5px;
+    }
+}
+
+.icon-button {
+    border: none;
+    background: none;
+    padding: 0;
+    color: inherit;
+}
+.icon-button i {
+    margin: 0;
+}
+
+.right-buttons {
+    margin: 0 15px;
+}
+.right-buttons a {
+    text-decoration: none;
+}
+
+.left-buttons {
+    display: flex;
+    margin: 0 5px;
+}
+html:not(.js) .left-buttons button {
+    display: none;
+}
+
+.menu-title {
+    display: inline-block;
+    font-weight: 200;
+    font-size: 2.4rem;
+    line-height: var(--menu-bar-height);
+    text-align: center;
+    margin: 0;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.menu-title {
+    cursor: pointer;
+}
+
+.menu-bar,
+.menu-bar:visited,
+.nav-chapters,
+.nav-chapters:visited,
+.mobile-nav-chapters,
+.mobile-nav-chapters:visited,
+.menu-bar .icon-button,
+.menu-bar a i {
+    color: var(--icons);
+}
+
+.menu-bar i:hover,
+.menu-bar .icon-button:hover,
+.nav-chapters:hover,
+.mobile-nav-chapters i:hover {
+    color: var(--icons-hover);
+}
+
+/* Nav Icons */
+
+.nav-chapters {
+    font-size: 2.5em;
+    text-align: center;
+    text-decoration: none;
+
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    margin: 0;
+    max-width: 150px;
+    min-width: 90px;
+
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-direction: column;
+
+    transition: color 0.5s, background-color 0.5s;
+}
+
+.nav-chapters:hover {
+    text-decoration: none;
+    background-color: var(--theme-hover);
+    transition: background-color 0.15s, color 0.15s;
+}
+
+.nav-wrapper {
+    margin-block-start: 50px;
+    display: none;
+}
+
+.mobile-nav-chapters {
+    font-size: 2.5em;
+    text-align: center;
+    text-decoration: none;
+    width: 90px;
+    border-radius: 5px;
+    background-color: var(--sidebar-bg);
+}
+
+/* Only Firefox supports flow-relative values */
+.previous { float: left; }
+[dir=rtl] .previous { float: right; }
+
+/* Only Firefox supports flow-relative values */
+.next {
+    float: right;
+    right: var(--page-padding);
+}
+[dir=rtl] .next {
+    float: left;
+    right: unset;
+    left: var(--page-padding);
+}
+
+/* Use the correct buttons for RTL layouts*/
+[dir=rtl] .previous i.fa-angle-left:before {content:"\f105";}
+[dir=rtl] .next i.fa-angle-right:before { content:"\f104"; }
+
+@media only screen and (max-width: 1080px) {
+    .nav-wide-wrapper { display: none; }
+    .nav-wrapper { display: block; }
+}
+
+/* sidebar-visible */
+@media only screen and (max-width: 1380px) {
+    #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
+    #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
+}
+
+/* Inline code */
+
+:not(pre) > .hljs {
+    display: inline;
+    padding: 0.1em 0.3em;
+    border-radius: 3px;
+}
+
+:not(pre):not(a) > .hljs {
+    color: var(--inline-code-color);
+    overflow-x: initial;
+}
+
+a:hover > .hljs {
+    text-decoration: underline;
+}
+
+pre {
+    position: relative;
+}
+pre > .buttons {
+    position: absolute;
+    z-index: 100;
+    right: 0px;
+    top: 2px;
+    margin: 0px;
+    padding: 2px 0px;
+
+    color: var(--sidebar-fg);
+    cursor: pointer;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0.1s linear, opacity 0.1s linear;
+}
+pre:hover > .buttons {
+    visibility: visible;
+    opacity: 1
+}
+pre > .buttons :hover {
+    color: var(--sidebar-active);
+    border-color: var(--icons-hover);
+    background-color: var(--theme-hover);
+}
+pre > .buttons i {
+    margin-inline-start: 8px;
+}
+pre > .buttons button {
+    cursor: inherit;
+    margin: 0px 5px;
+    padding: 4px 4px 3px 5px;
+    font-size: 23px;
+
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 4px;
+    border-color: var(--icons);
+    background-color: var(--theme-popup-bg);
+    transition: 100ms;
+    transition-property: color,border-color,background-color;
+    color: var(--icons);
+}
+
+pre > .buttons button.clip-button {
+    padding: 2px 4px 0px 6px;
+}
+pre > .buttons button.clip-button::before {
+    /* clipboard image from octicons (https://github.com/primer/octicons/tree/v2.0.0) MIT license
+     */
+    content: url('data:image/svg+xml,<svg width="21" height="20" viewBox="0 0 24 25" \
+xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\
+<path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 \
+0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 \
+7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 \
+2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\
+<path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/>\
+</svg>');
+    filter: var(--copy-button-filter);
+}
+pre > .buttons button.clip-button:hover::before {
+    filter: var(--copy-button-filter-hover);
+}
+
+@media (pointer: coarse) {
+    pre > .buttons button {
+        /* On mobile, make it easier to tap buttons. */
+        padding: 0.3rem 1rem;
+    }
+
+    .sidebar-resize-indicator {
+        /* Hide resize indicator on devices with limited accuracy */
+        display: none;
+    }
+}
+pre > code {
+    display: block;
+    padding: 1rem;
+}
+
+/* FIXME: ACE editors overlap their buttons because ACE does absolute
+   positioning within the code block which breaks padding. The only solution I
+   can think of is to move the padding to the outer pre tag (or insert a div
+   wrapper), but that would require fixing a whole bunch of CSS rules.
+*/
+.hljs.ace_editor {
+  padding: 0rem 0rem;
+}
+
+pre > .result {
+    margin-block-start: 10px;
+}
+
+/* Search */
+
+#searchresults a {
+    text-decoration: none;
+}
+
+mark {
+    border-radius: 2px;
+    padding-block-start: 0;
+    padding-block-end: 1px;
+    padding-inline-start: 3px;
+    padding-inline-end: 3px;
+    margin-block-start: 0;
+    margin-block-end: -1px;
+    margin-inline-start: -3px;
+    margin-inline-end: -3px;
+    background-color: var(--search-mark-bg);
+    transition: background-color 300ms linear;
+    cursor: pointer;
+}
+
+mark.fade-out {
+    background-color: rgba(0,0,0,0) !important;
+    cursor: auto;
+}
+
+.searchbar-outer {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    max-width: var(--content-max-width);
+}
+
+#searchbar {
+    width: 100%;
+    margin-block-start: 5px;
+    margin-block-end: 0;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    padding: 10px 16px;
+    transition: box-shadow 300ms ease-in-out;
+    border: 1px solid var(--searchbar-border-color);
+    border-radius: 3px;
+    background-color: var(--searchbar-bg);
+    color: var(--searchbar-fg);
+}
+#searchbar:focus,
+#searchbar.active {
+    box-shadow: 0 0 3px var(--searchbar-shadow-color);
+}
+
+.searchresults-header {
+    font-weight: bold;
+    font-size: 1em;
+    padding-block-start: 18px;
+    padding-block-end: 0;
+    padding-inline-start: 5px;
+    padding-inline-end: 0;
+    color: var(--searchresults-header-fg);
+}
+
+.searchresults-outer {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    max-width: var(--content-max-width);
+    border-block-end: 1px dashed var(--searchresults-border-color);
+}
+
+ul#searchresults {
+    list-style: none;
+    padding-inline-start: 20px;
+}
+ul#searchresults li {
+    margin: 10px 0px;
+    padding: 2px;
+    border-radius: 2px;
+}
+ul#searchresults li.focus {
+    background-color: var(--searchresults-li-bg);
+}
+ul#searchresults span.teaser {
+    display: block;
+    clear: both;
+    margin-block-start: 5px;
+    margin-block-end: 0;
+    margin-inline-start: 20px;
+    margin-inline-end: 0;
+    font-size: 0.8em;
+}
+ul#searchresults span.teaser em {
+    font-weight: bold;
+    font-style: normal;
+}
+
+/* Sidebar */
+
+.sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--sidebar-width);
+    font-size: 0.875em;
+    box-sizing: border-box;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-y: contain;
+    background-color: var(--sidebar-bg);
+    color: var(--sidebar-fg);
+}
+.sidebar-iframe-inner {
+    --padding: 10px;
+
+    background-color: var(--sidebar-bg);
+    padding: var(--padding);
+    margin: 0;
+    font-size: 1.4rem;
+    color: var(--sidebar-fg);
+    min-height: calc(100vh - var(--padding) * 2);
+}
+.sidebar-iframe-outer {
+    border: none;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+[dir=rtl] .sidebar { left: unset; right: 0; }
+.sidebar-resizing {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+html:not(.sidebar-resizing) .sidebar {
+    transition: transform 0.3s; /* Animation: slide away */
+}
+.sidebar code {
+    line-height: 2em;
+}
+.sidebar .sidebar-scrollbox {
+    overflow-y: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 10px 10px;
+}
+.sidebar .sidebar-resize-handle {
+    position: absolute;
+    cursor: col-resize;
+    width: 0;
+    right: calc(var(--sidebar-resize-indicator-width) * -1);
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+}
+
+.sidebar-resize-handle .sidebar-resize-indicator {
+    width: 100%;
+    height: 12px;
+    background-color: var(--icons);
+    margin-inline-start: var(--sidebar-resize-indicator-space);
+}
+
+[dir=rtl] .sidebar .sidebar-resize-handle {
+    left: calc(var(--sidebar-resize-indicator-width) * -1);
+    right: unset;
+}
+.js .sidebar .sidebar-resize-handle {
+    cursor: col-resize;
+    width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
+}
+/* sidebar-hidden */
+#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
+    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
+    z-index: -1;
+}
+[dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
+    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
+}
+.sidebar::-webkit-scrollbar {
+    background: var(--sidebar-bg);
+}
+.sidebar::-webkit-scrollbar-thumb {
+    background: var(--scrollbar);
+}
+
+/* sidebar-visible */
+#sidebar-toggle-anchor:checked ~ .page-wrapper {
+    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
+}
+[dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
+    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
+}
+@media only screen and (min-width: 620px) {
+    #sidebar-toggle-anchor:checked ~ .page-wrapper {
+        transform: none;
+        margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
+    }
+    [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
+        transform: none;
+    }
+}
+
+.chapter {
+    list-style: none outside none;
+    padding-inline-start: 0;
+    line-height: 2.2em;
+}
+
+.chapter ol {
+    width: 100%;
+}
+
+.chapter li {
+    display: flex;
+    color: var(--sidebar-non-existant);
+}
+.chapter li a {
+    display: block;
+    padding: 0;
+    text-decoration: none;
+    color: var(--sidebar-fg);
+}
+
+.chapter li a:hover {
+    color: var(--sidebar-active);
+}
+
+.chapter li a.active {
+    color: var(--sidebar-active);
+}
+
+.chapter li > a.toggle {
+    cursor: pointer;
+    display: block;
+    margin-inline-start: auto;
+    padding: 0 10px;
+    user-select: none;
+    opacity: 0.68;
+}
+
+.chapter li > a.toggle div {
+    transition: transform 0.5s;
+}
+
+/* collapse the section */
+.chapter li:not(.expanded) + li > ol {
+    display: none;
+}
+
+.chapter li.chapter-item {
+    line-height: 1.5em;
+    margin-block-start: 0.6em;
+}
+
+.chapter li.expanded > a.toggle div {
+    transform: rotate(90deg);
+}
+
+.spacer {
+    width: 100%;
+    height: 3px;
+    margin: 5px 0px;
+}
+.chapter .spacer {
+    background-color: var(--sidebar-spacer);
+}
+
+@media (-moz-touch-enabled: 1), (pointer: coarse) {
+    .chapter li a { padding: 5px 0; }
+    .spacer { margin: 10px 0; }
+}
+
+.section {
+    list-style: none outside none;
+    padding-inline-start: 20px;
+    line-height: 1.9em;
+}
+
+/* Theme Menu Popup */
+
+.theme-popup {
+    position: absolute;
+    left: 10px;
+    top: var(--menu-bar-height);
+    z-index: 1000;
+    border-radius: 4px;
+    font-size: 0.7em;
+    color: var(--fg);
+    background: var(--theme-popup-bg);
+    border: 1px solid var(--theme-popup-border);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: none;
+    /* Don't let the children's background extend past the rounded corners. */
+    overflow: hidden;
+}
+[dir=rtl] .theme-popup { left: unset;  right: 10px; }
+.theme-popup .default {
+    color: var(--icons);
+}
+.theme-popup .theme {
+    width: 100%;
+    border: 0;
+    margin: 0;
+    padding: 2px 20px;
+    line-height: 25px;
+    white-space: nowrap;
+    text-align: start;
+    cursor: pointer;
+    color: inherit;
+    background: inherit;
+    font-size: inherit;
+}
+.theme-popup .theme:hover {
+    background-color: var(--theme-hover);
+}
+
+.theme-selected::before {
+    display: inline-block;
+    content: "✓";
+    margin-inline-start: -14px;
+    width: 14px;
+}

server/docs-prod/book/css/general.css

@@ -0,0 +1,279 @@
+/* Base styles and content styles */
+
+:root {
+    /* Browser default font-size is 16px, this way 1 rem = 10px */
+    font-size: 62.5%;
+    color-scheme: var(--color-scheme);
+}
+
+html {
+    font-family: "Open Sans", sans-serif;
+    color: var(--fg);
+    background-color: var(--bg);
+    text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+}
+
+body {
+    margin: 0;
+    font-size: 1.6rem;
+    overflow-x: hidden;
+}
+
+code {
+    font-family: var(--mono-font) !important;
+    font-size: var(--code-font-size);
+    direction: ltr !important;
+}
+
+/* make long words/inline code not x overflow */
+main {
+    overflow-wrap: break-word;
+}
+
+/* make wide tables scroll if they overflow */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+/* Don't change font size in headers. */
+h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
+    font-size: unset;
+}
+
+.left { float: left; }
+.right { float: right; }
+.boring { opacity: 0.6; }
+.hide-boring .boring { display: none; }
+.hidden { display: none !important; }
+
+h2, h3 { margin-block-start: 2.5em; }
+h4, h5 { margin-block-start: 2em; }
+
+.header + .header h3,
+.header + .header h4,
+.header + .header h5 {
+    margin-block-start: 1em;
+}
+
+h1:target::before,
+h2:target::before,
+h3:target::before,
+h4:target::before,
+h5:target::before,
+h6:target::before {
+    display: inline-block;
+    content: "»";
+    margin-inline-start: -30px;
+    width: 30px;
+}
+
+/* This is broken on Safari as of version 14, but is fixed
+   in Safari Technology Preview 117 which I think will be Safari 14.2.
+   https://bugs.webkit.org/show_bug.cgi?id=218076
+*/
+:target {
+    /* Safari does not support logical properties */
+    scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
+}
+
+.page {
+    outline: 0;
+    padding: 0 var(--page-padding);
+    margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
+}
+.page-wrapper {
+    box-sizing: border-box;
+    background-color: var(--bg);
+}
+.no-js .page-wrapper,
+.js:not(.sidebar-resizing) .page-wrapper {
+    transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
+}
+[dir=rtl] .js:not(.sidebar-resizing) .page-wrapper {
+    transition: margin-right 0.3s ease, transform 0.3s ease; /* Animation: slide away */
+}
+
+.content {
+    overflow-y: auto;
+    padding: 0 5px 50px 5px;
+}
+.content main {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    max-width: var(--content-max-width);
+}
+.content p { line-height: 1.45em; }
+.content ol { line-height: 1.45em; }
+.content ul { line-height: 1.45em; }
+.content a { text-decoration: none; }
+.content a:hover { text-decoration: underline; }
+.content img, .content video { max-width: 100%; }
+.content .header:link,
+.content .header:visited {
+    color: var(--fg);
+}
+.content .header:link,
+.content .header:visited:hover {
+    text-decoration: none;
+}
+
+table {
+    margin: 0 auto;
+    border-collapse: collapse;
+}
+table td {
+    padding: 3px 20px;
+    border: 1px var(--table-border-color) solid;
+}
+table thead {
+    background: var(--table-header-bg);
+}
+table thead td {
+    font-weight: 700;
+    border: none;
+}
+table thead th {
+    padding: 3px 20px;
+}
+table thead tr {
+    border: 1px var(--table-header-bg) solid;
+}
+/* Alternate background colors for rows */
+table tbody tr:nth-child(2n) {
+    background: var(--table-alternate-bg);
+}
+
+
+blockquote {
+    margin: 20px 0;
+    padding: 0 20px;
+    color: var(--fg);
+    background-color: var(--quote-bg);
+    border-block-start: .1em solid var(--quote-border);
+    border-block-end: .1em solid var(--quote-border);
+}
+
+.warning {
+    margin: 20px;
+    padding: 0 20px;
+    border-inline-start: 2px solid var(--warning-border);
+}
+
+.warning:before {
+    position: absolute;
+    width: 3rem;
+    height: 3rem;
+    margin-inline-start: calc(-1.5rem - 21px);
+    content: "ⓘ";
+    text-align: center;
+    background-color: var(--bg);
+    color: var(--warning-border);
+    font-weight: bold;
+    font-size: 2rem;
+}
+
+blockquote .warning:before {
+    background-color: var(--quote-bg);
+}
+
+kbd {
+    background-color: var(--table-border-color);
+    border-radius: 4px;
+    border: solid 1px var(--theme-popup-border);
+    box-shadow: inset 0 -1px 0 var(--theme-hover);
+    display: inline-block;
+    font-size: var(--code-font-size);
+    font-family: var(--mono-font);
+    line-height: 10px;
+    padding: 4px 5px;
+    vertical-align: middle;
+}
+
+sup {
+    /* Set the line-height for superscript and footnote references so that there
+       isn't an awkward space appearing above lines that contain the footnote.
+
+       See https://github.com/rust-lang/mdBook/pull/2443#discussion_r1813773583
+       for an explanation.
+    */
+    line-height: 0;
+}
+
+.footnote-definition {
+    font-size: 0.9em;
+}
+/* The default spacing for a list is a little too large. */
+.footnote-definition ul,
+.footnote-definition ol {
+    padding-left: 20px;
+}
+.footnote-definition > li {
+    /* Required to position the ::before target */
+    position: relative;
+}
+.footnote-definition > li:target {
+    scroll-margin-top: 50vh;
+}
+.footnote-reference:target {
+    scroll-margin-top: 50vh;
+}
+/* Draws a border around the footnote (including the marker) when it is selected.
+   TODO: If there are multiple linkbacks, highlight which one you just came
+   from so you know which one to click.
+*/
+.footnote-definition > li:target::before {
+    border: 2px solid var(--footnote-highlight);
+    border-radius: 6px;
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    bottom: -8px;
+    left: -32px;
+    pointer-events: none;
+    content: "";
+}
+/* Pulses the footnote reference so you can quickly see where you left off reading.
+   This could use some improvement.
+*/
+@media not (prefers-reduced-motion) {
+    .footnote-reference:target  {
+        animation: fn-highlight 0.8s;
+        border-radius: 2px;
+    }
+
+    @keyframes fn-highlight {
+        from {
+            background-color: var(--footnote-highlight);
+        }
+    }
+}
+
+.tooltiptext {
+    position: absolute;
+    visibility: hidden;
+    color: #fff;
+    background-color: #333;
+    transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */
+    left: -8px; /* Half of the width of the icon */
+    top: -35px;
+    font-size: 0.8em;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 8px;
+    margin: 5px;
+    z-index: 1000;
+}
+.tooltipped .tooltiptext {
+    visibility: visible;
+}
+
+.chapter li.part-title {
+    color: var(--sidebar-fg);
+    margin: 5px 0px;
+    font-weight: bold;
+}
+
+.result-no-output {
+    font-style: italic;
+}

server/docs-prod/book/css/print.css

@@ -0,0 +1,50 @@
+
+#sidebar,
+#menu-bar,
+.nav-chapters,
+.mobile-nav-chapters {
+    display: none;
+}
+
+#page-wrapper.page-wrapper {
+    transform: none !important;
+    margin-inline-start: 0px;
+    overflow-y: initial;
+}
+
+#content {
+    max-width: none;
+    margin: 0;
+    padding: 0;
+}
+
+.page {
+    overflow-y: initial;
+}
+
+code {
+    direction: ltr !important;
+}
+
+pre > .buttons {
+    z-index: 2;
+}
+
+a, a:visited, a:active, a:hover {
+    color: #4183c4;
+    text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    page-break-inside: avoid;
+    page-break-after: avoid;
+}
+
+pre, code {
+    page-break-inside: avoid;
+    white-space: pre-wrap;
+}
+
+.fa {
+    display: none !important;
+}

server/docs-prod/book/css/variables.css

@@ -0,0 +1,320 @@
+
+/* Globals */
+
+:root {
+    --sidebar-target-width: 300px;
+    --sidebar-width: min(var(--sidebar-target-width), 80vw);
+    --sidebar-resize-indicator-width: 8px;
+    --sidebar-resize-indicator-space: 2px;
+    --page-padding: 15px;
+    --content-max-width: 750px;
+    --menu-bar-height: 50px;
+    --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
+    --code-font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
+}
+
+/* Themes */
+
+.ayu {
+    --bg: hsl(210, 25%, 8%);
+    --fg: #c5c5c5;
+
+    --sidebar-bg: #14191f;
+    --sidebar-fg: #c8c9db;
+    --sidebar-non-existant: #5c6773;
+    --sidebar-active: #ffb454;
+    --sidebar-spacer: #2d334f;
+
+    --scrollbar: var(--sidebar-fg);
+
+    --icons: #737480;
+    --icons-hover: #b7b9cc;
+
+    --links: #0096cf;
+
+    --inline-code-color: #ffb454;
+
+    --theme-popup-bg: #14191f;
+    --theme-popup-border: #5c6773;
+    --theme-hover: #191f26;
+
+    --quote-bg: hsl(226, 15%, 17%);
+    --quote-border: hsl(226, 15%, 22%);
+
+    --warning-border: #ff8e00;
+
+    --table-border-color: hsl(210, 25%, 13%);
+    --table-header-bg: hsl(210, 25%, 28%);
+    --table-alternate-bg: hsl(210, 25%, 11%);
+
+    --searchbar-border-color: #848484;
+    --searchbar-bg: #424242;
+    --searchbar-fg: #fff;
+    --searchbar-shadow-color: #d4c89f;
+    --searchresults-header-fg: #666;
+    --searchresults-border-color: #888;
+    --searchresults-li-bg: #252932;
+    --search-mark-bg: #e3b171;
+
+    --color-scheme: dark;
+
+    /* Same as `--icons` */
+    --copy-button-filter: invert(45%) sepia(6%) saturate(621%) hue-rotate(198deg) brightness(99%) contrast(85%);
+    /* Same as `--sidebar-active` */
+    --copy-button-filter-hover: invert(68%) sepia(55%) saturate(531%) hue-rotate(341deg) brightness(104%) contrast(101%);
+
+    --footnote-highlight: #2668a6;
+}
+
+.coal {
+    --bg: hsl(200, 7%, 8%);
+    --fg: #98a3ad;
+
+    --sidebar-bg: #292c2f;
+    --sidebar-fg: #a1adb8;
+    --sidebar-non-existant: #505254;
+    --sidebar-active: #3473ad;
+    --sidebar-spacer: #393939;
+
+    --scrollbar: var(--sidebar-fg);
+
+    --icons: #43484d;
+    --icons-hover: #b3c0cc;
+
+    --links: #2b79a2;
+
+    --inline-code-color: #c5c8c6;
+
+    --theme-popup-bg: #141617;
+    --theme-popup-border: #43484d;
+    --theme-hover: #1f2124;
+
+    --quote-bg: hsl(234, 21%, 18%);
+    --quote-border: hsl(234, 21%, 23%);
+
+    --warning-border: #ff8e00;
+
+    --table-border-color: hsl(200, 7%, 13%);
+    --table-header-bg: hsl(200, 7%, 28%);
+    --table-alternate-bg: hsl(200, 7%, 11%);
+
+    --searchbar-border-color: #aaa;
+    --searchbar-bg: #b7b7b7;
+    --searchbar-fg: #000;
+    --searchbar-shadow-color: #aaa;
+    --searchresults-header-fg: #666;
+    --searchresults-border-color: #98a3ad;
+    --searchresults-li-bg: #2b2b2f;
+    --search-mark-bg: #355c7d;
+
+    --color-scheme: dark;
+
+    /* Same as `--icons` */
+    --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%);
+    /* Same as `--sidebar-active` */
+    --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%);
+
+    --footnote-highlight: #4079ae;
+}
+
+.light, html:not(.js) {
+    --bg: hsl(0, 0%, 100%);
+    --fg: hsl(0, 0%, 0%);
+
+    --sidebar-bg: #fafafa;
+    --sidebar-fg: hsl(0, 0%, 0%);
+    --sidebar-non-existant: #aaaaaa;
+    --sidebar-active: #1f1fff;
+    --sidebar-spacer: #f4f4f4;
+
+    --scrollbar: #8F8F8F;
+
+    --icons: #747474;
+    --icons-hover: #000000;
+
+    --links: #20609f;
+
+    --inline-code-color: #301900;
+
+    --theme-popup-bg: #fafafa;
+    --theme-popup-border: #cccccc;
+    --theme-hover: #e6e6e6;
+
+    --quote-bg: hsl(197, 37%, 96%);
+    --quote-border: hsl(197, 37%, 91%);
+
+    --warning-border: #ff8e00;
+
+    --table-border-color: hsl(0, 0%, 95%);
+    --table-header-bg: hsl(0, 0%, 80%);
+    --table-alternate-bg: hsl(0, 0%, 97%);
+
+    --searchbar-border-color: #aaa;
+    --searchbar-bg: #fafafa;
+    --searchbar-fg: #000;
+    --searchbar-shadow-color: #aaa;
+    --searchresults-header-fg: #666;
+    --searchresults-border-color: #888;
+    --searchresults-li-bg: #e4f2fe;
+    --search-mark-bg: #a2cff5;
+
+    --color-scheme: light;
+
+    /* Same as `--icons` */
+    --copy-button-filter: invert(45.49%);
+    /* Same as `--sidebar-active` */
+    --copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%) hue-rotate(243deg) brightness(99%) contrast(130%);
+
+    --footnote-highlight: #7e7eff;
+}
+
+.navy {
+    --bg: hsl(226, 23%, 11%);
+    --fg: #bcbdd0;
+
+    --sidebar-bg: #282d3f;
+    --sidebar-fg: #c8c9db;
+    --sidebar-non-existant: #505274;
+    --sidebar-active: #2b79a2;
+    --sidebar-spacer: #2d334f;
+
+    --scrollbar: var(--sidebar-fg);
+
+    --icons: #737480;
+    --icons-hover: #b7b9cc;
+
+    --links: #2b79a2;
+
+    --inline-code-color: #c5c8c6;
+
+    --theme-popup-bg: #161923;
+    --theme-popup-border: #737480;
+    --theme-hover: #282e40;
+
+    --quote-bg: hsl(226, 15%, 17%);
+    --quote-border: hsl(226, 15%, 22%);
+
+    --warning-border: #ff8e00;
+
+    --table-border-color: hsl(226, 23%, 16%);
+    --table-header-bg: hsl(226, 23%, 31%);
+    --table-alternate-bg: hsl(226, 23%, 14%);
+
+    --searchbar-border-color: #aaa;
+    --searchbar-bg: #aeaec6;
+    --searchbar-fg: #000;
+    --searchbar-shadow-color: #aaa;
+    --searchresults-header-fg: #5f5f71;
+    --searchresults-border-color: #5c5c68;
+    --searchresults-li-bg: #242430;
+    --search-mark-bg: #a2cff5;
+
+    --color-scheme: dark;
+
+    /* Same as `--icons` */
+    --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%) contrast(87%);
+    /* Same as `--sidebar-active` */
+    --copy-button-filter-hover: invert(46%) sepia(20%) saturate(1537%) hue-rotate(156deg) brightness(85%) contrast(90%);
+
+    --footnote-highlight: #4079ae;
+}
+
+.rust {
+    --bg: hsl(60, 9%, 87%);
+    --fg: #262625;
+
+    --sidebar-bg: #3b2e2a;
+    --sidebar-fg: #c8c9db;
+    --sidebar-non-existant: #505254;
+    --sidebar-active: #e69f67;
+    --sidebar-spacer: #45373a;
+
+    --scrollbar: var(--sidebar-fg);
+
+    --icons: #737480;
+    --icons-hover: #262625;
+
+    --links: #2b79a2;
+
+    --inline-code-color: #6e6b5e;
+
+    --theme-popup-bg: #e1e1db;
+    --theme-popup-border: #b38f6b;
+    --theme-hover: #99908a;
+
+    --quote-bg: hsl(60, 5%, 75%);
+    --quote-border: hsl(60, 5%, 70%);
+
+    --warning-border: #ff8e00;
+
+    --table-border-color: hsl(60, 9%, 82%);
+    --table-header-bg: #b3a497;
+    --table-alternate-bg: hsl(60, 9%, 84%);
+
+    --searchbar-border-color: #aaa;
+    --searchbar-bg: #fafafa;
+    --searchbar-fg: #000;
+    --searchbar-shadow-color: #aaa;
+    --searchresults-header-fg: #666;
+    --searchresults-border-color: #888;
+    --searchresults-li-bg: #dec2a2;
+    --search-mark-bg: #e69f67;
+
+    /* Same as `--icons` */
+    --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%) contrast(87%);
+    /* Same as `--sidebar-active` */
+    --copy-button-filter-hover: invert(77%) sepia(16%) saturate(1798%) hue-rotate(328deg) brightness(98%) contrast(83%);
+
+    --footnote-highlight: #d3a17a;
+}
+
+@media (prefers-color-scheme: dark) {
+    html:not(.js) {
+        --bg: hsl(200, 7%, 8%);
+        --fg: #98a3ad;
+
+        --sidebar-bg: #292c2f;
+        --sidebar-fg: #a1adb8;
+        --sidebar-non-existant: #505254;
+        --sidebar-active: #3473ad;
+        --sidebar-spacer: #393939;
+
+        --scrollbar: var(--sidebar-fg);
+
+        --icons: #43484d;
+        --icons-hover: #b3c0cc;
+
+        --links: #2b79a2;
+
+        --inline-code-color: #c5c8c6;
+
+        --theme-popup-bg: #141617;
+        --theme-popup-border: #43484d;
+        --theme-hover: #1f2124;
+
+        --quote-bg: hsl(234, 21%, 18%);
+        --quote-border: hsl(234, 21%, 23%);
+
+        --warning-border: #ff8e00;
+
+        --table-border-color: hsl(200, 7%, 13%);
+        --table-header-bg: hsl(200, 7%, 28%);
+        --table-alternate-bg: hsl(200, 7%, 11%);
+
+        --searchbar-border-color: #aaa;
+        --searchbar-bg: #b7b7b7;
+        --searchbar-fg: #000;
+        --searchbar-shadow-color: #aaa;
+        --searchresults-header-fg: #666;
+        --searchresults-border-color: #98a3ad;
+        --searchresults-li-bg: #2b2b2f;
+        --search-mark-bg: #355c7d;
+
+        --color-scheme: dark;
+
+        /* Same as `--icons` */
+        --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%);
+        /* Same as `--sidebar-active` */
+        --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%);
+    }
+}

server/docs-prod/book/favicon.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 199.7 184.2">
+  <style>
+    @media (prefers-color-scheme: dark) {
+      svg { fill: white; }
+    }
+  </style>
+<path d="M189.5,36.8c0.2,2.8,0,5.1-0.6,6.8L153,162c-0.6,2.1-2,3.7-4.2,5c-2.2,1.2-4.4,1.9-6.7,1.9H31.4c-9.6,0-15.3-2.8-17.3-8.4
+  c-0.8-2.2-0.8-3.9,0.1-5.2c0.9-1.2,2.4-1.8,4.6-1.8H123c7.4,0,12.6-1.4,15.4-4.1s5.7-8.9,8.6-18.4l32.9-108.6
+  c1.8-5.9,1-11.1-2.2-15.6S169.9,0,164,0H72.7c-1,0-3.1,0.4-6.1,1.1l0.1-0.4C64.5,0.2,62.6,0,61,0.1s-3,0.5-4.3,1.4
+  c-1.3,0.9-2.4,1.8-3.2,2.8S52,6.5,51.2,8.1c-0.8,1.6-1.4,3-1.9,4.3s-1.1,2.7-1.8,4.2c-0.7,1.5-1.3,2.7-2,3.7c-0.5,0.6-1.2,1.5-2,2.5
+  s-1.6,2-2.2,2.8s-0.9,1.5-1.1,2.2c-0.2,0.7-0.1,1.8,0.2,3.2c0.3,1.4,0.4,2.4,0.4,3.1c-0.3,3-1.4,6.9-3.3,11.6
+  c-1.9,4.7-3.6,8.1-5.1,10.1c-0.3,0.4-1.2,1.3-2.6,2.7c-1.4,1.4-2.3,2.6-2.6,3.7c-0.3,0.4-0.3,1.5-0.1,3.4c0.3,1.8,0.4,3.1,0.3,3.8
+  c-0.3,2.7-1.3,6.3-3,10.8c-1.7,4.5-3.4,8.2-5,11c-0.2,0.5-0.9,1.4-2,2.8c-1.1,1.4-1.8,2.5-2,3.4c-0.2,0.6-0.1,1.8,0.1,3.4
+  c0.2,1.6,0.2,2.8-0.1,3.6c-0.6,3-1.8,6.7-3.6,11c-1.8,4.3-3.6,7.9-5.4,11c-0.5,0.8-1.1,1.7-2,2.8c-0.8,1.1-1.5,2-2,2.8
+  s-0.8,1.6-1,2.5c-0.1,0.5,0,1.3,0.4,2.3c0.3,1.1,0.4,1.9,0.4,2.6c-0.1,1.1-0.2,2.6-0.5,4.4c-0.2,1.8-0.4,2.9-0.4,3.2
+  c-1.8,4.8-1.7,9.9,0.2,15.2c2.2,6.2,6.2,11.5,11.9,15.8c5.7,4.3,11.7,6.4,17.8,6.4h110.7c5.2,0,10.1-1.7,14.7-5.2s7.7-7.8,9.2-12.9
+  l33-108.6c1.8-5.8,1-10.9-2.2-15.5C194.9,39.7,192.6,38,189.5,36.8z M59.6,122.8L73.8,80c0,0,7,0,10.8,0s28.8-1.7,25.4,17.5
+  c-3.4,19.2-18.8,25.2-36.8,25.4S59.6,122.8,59.6,122.8z M78.6,116.8c4.7-0.1,18.9-2.9,22.1-17.1S89.2,86.3,89.2,86.3l-8.9,0
+  l-10.2,30.5C70.2,116.9,74,116.9,78.6,116.8z M75.3,68.7L89,26.2h9.8l0.8,34l23.6-34h9.9l-13.6,42.5h-7.1l12.5-35.4l-24.5,35.4h-6.8
+  l-0.8-35L82,68.7H75.3z"/>
+</svg>
+<!-- Original image Copyright Dave Gandy — CC BY 4.0 License -->

server/docs-prod/book/fonts/OPEN-SANS-LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

server/docs-prod/book/fonts/SOURCE-CODE-PRO-LICENSE.txt

@@ -0,0 +1,93 @@
+Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

server/docs-prod/book/fonts/fonts.css

@@ -0,0 +1,100 @@
+/* Open Sans is licensed under the Apache License, Version 2.0. See http://www.apache.org/licenses/LICENSE-2.0 */
+/* Source Code Pro is under the Open Font License. See https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL */
+
+/* open-sans-300 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'),
+       url('../fonts/open-sans-v17-all-charsets-300.woff2') format('woff2');
+}
+
+/* open-sans-300italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
+       url('../fonts/open-sans-v17-all-charsets-300italic.woff2') format('woff2');
+}
+
+/* open-sans-regular - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+       url('../fonts/open-sans-v17-all-charsets-regular.woff2') format('woff2');
+}
+
+/* open-sans-italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Open Sans Italic'), local('OpenSans-Italic'),
+       url('../fonts/open-sans-v17-all-charsets-italic.woff2') format('woff2');
+}
+
+/* open-sans-600 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+       url('../fonts/open-sans-v17-all-charsets-600.woff2') format('woff2');
+}
+
+/* open-sans-600italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
+       url('../fonts/open-sans-v17-all-charsets-600italic.woff2') format('woff2');
+}
+
+/* open-sans-700 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'),
+       url('../fonts/open-sans-v17-all-charsets-700.woff2') format('woff2');
+}
+
+/* open-sans-700italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
+       url('../fonts/open-sans-v17-all-charsets-700italic.woff2') format('woff2');
+}
+
+/* open-sans-800 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 800;
+  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
+       url('../fonts/open-sans-v17-all-charsets-800.woff2') format('woff2');
+}
+
+/* open-sans-800italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 800;
+  src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
+       url('../fonts/open-sans-v17-all-charsets-800italic.woff2') format('woff2');
+}
+
+/* source-code-pro-500 - latin_vietnamese_latin-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/source-code-pro-v11-all-charsets-500.woff2') format('woff2');
+}