reverted core actions in canvas

compiled
fixes 9
2025-08-20 16:33:19 +02:00 · 2025-08-20 16:28:31 +02:00 · 2025-08-20 11:36:56 +02:00 · 2025-08-20 11:33:34 +02:00 · 2025-08-19 22:14:43 +02:00 · 2025-08-19 22:02:00 +02:00
97 changed files with 11371 additions and 5380 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ server/tantivy_indexes
 steel_decimal/tests/property_tests.proptest-regressions
 .direnv/
 canvas/*.toml
+.aider*
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -324,6 +324,27 @@ dependencies = [
 "serde",
 ]

+[[package]]
+name = "bit-set"
+version = "0.5.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0700ddab506f33b20a03b13996eccd309a48e5ff77d0d95926aa0210fb4e95f1"
+dependencies = [
+ "bit-vec",
+]
+
+[[package]]
+name = "bit-vec"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "349f9b6a179ed607305526ca489b34ad0a41aed5f7980fa90eb03160b69598fb"
+
+[[package]]
+name = "bitflags"
+version = "1.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
+
 [[package]]
 name = "bitflags"
 version = "2.9.1"
@@ -476,12 +497,14 @@ version = "0.4.2"
 dependencies = [
 "anyhow",
 "async-trait",
- "common",
 "crossterm",
+ "once_cell",
 "ratatui",
 "regex",
+ "ropey",
 "serde",
- "thiserror",
+ "syntect",
+ "thiserror 2.0.12",
 "tokio",
 "tokio-test",
 "toml",
@@ -771,7 +794,7 @@ version = "0.28.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "829d955a0bb380ef178a640b91779e3987da38c9aea133b20614cfed8cdea9c6"
 dependencies = [
- "bitflags",
+ "bitflags 2.9.1",
 "crossterm_winapi",
 "mio",
 "parking_lot",
@@ -995,7 +1018,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "778e2ac28f6c47af28e4907f13ffd1e1ddbd400980a9abd7c8df189bf578a5ad"
 dependencies = [
 "libc",
- "windows-sys 0.52.0",
+ "windows-sys 0.60.2",
 ]

 [[package]]
@@ -1020,6 +1043,16 @@ dependencies = [
 "pin-project-lite",
 ]

+[[package]]
+name = "fancy-regex"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b95f7c0680e4142284cf8b22c14a476e87d61b004a3a0861872b32ef7ead40a2"
+dependencies = [
+ "bit-set",
+ "regex",
+]
+
 [[package]]
 name = "fastdivide"
 version = "0.4.2"
@@ -1038,6 +1071,16 @@ version = "0.5.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1d674e81391d1e1ab681a28d99df07927c6d4aa5b027d7da16ba32d1d21ecd99"

+[[package]]
+name = "flate2"
+version = "1.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4a3d7db9596fecd151c5f638c0ee5d5bd487b6e0ea232e5dc96d5250f6f94b1d"
+dependencies = [
+ "crc32fast",
+ "miniz_oxide",
+]
+
 [[package]]
 name = "flume"
 version = "0.11.1"
@@ -1724,7 +1767,7 @@ version = "0.7.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d93587f37623a1a17d94ef2bc9ada592f5465fe7732084ab7beefabe5c77c0c4"
 dependencies = [
- "bitflags",
+ "bitflags 2.9.1",
 "cfg-if",
 "libc",
 ]
@@ -1843,7 +1886,7 @@ version = "0.1.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4488594b9328dee448adb906d8b126d9b7deb7cf5c22161ee591610bb1be83c0"
 dependencies = [
- "bitflags",
+ "bitflags 2.9.1",
 "libc",
 ]

@@ -1857,6 +1900,12 @@ dependencies = [
 "vcpkg",
 ]

+[[package]]
+name = "linked-hash-map"
+version = "0.5.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0717cef1bc8b636c6e1c1bbdefc09e6322da8a9321966e8928ef80d20f7f770f"
+
 [[package]]
 name = "linux-raw-sys"
 version = "0.4.15"
@@ -2139,7 +2188,7 @@ version = "0.10.73"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8505734d46c8ab1e19a1dce3aef597ad87dcb4c37e7188231769bd6bd51cebf8"
 dependencies = [
- "bitflags",
+ "bitflags 2.9.1",
 "cfg-if",
 "foreign-types",
 "libc",
@@ -2327,6 +2376,19 @@ version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7edddbd0b52d732b21ad9a5fab5c704c14cd949e5e9a1ec5929a24fded1b904c"

+[[package]]
+name = "plist"
+version = "1.7.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3af6b589e163c5a788fab00ce0c0366f6efbb9959c2f9874b224936af7fce7e1"
+dependencies = [
+ "base64",
+ "indexmap 2.10.0",
+ "quick-xml",
+ "serde",
+ "time",
+]
+
 [[package]]
 name = "polling"
 version = "3.9.0"
@@ -2498,6 +2560,15 @@ dependencies = [
 "syn 1.0.109",
 ]

+[[package]]
+name = "quick-xml"
+version = "0.38.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9845d9dccf565065824e69f9f235fafba1587031eda353c1f1561cd6a6be78f4"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "quickscope"
 version = "0.2.0"
@@ -2613,7 +2684,7 @@ version = "0.29.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "eabd94c2f37801c20583fc49dd5cd6b0ba68c716787c2dd6ed18571e1e63117b"
 dependencies = [
- "bitflags",
+ "bitflags 2.9.1",
 "cassowary",
 "compact_str",
 "crossterm",
@@ -2654,7 +2725,7 @@ version = "0.5.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7e8af0dde094006011e6a740d4879319439489813bd0bcdc7d821beaeeff48ec"
 dependencies = [
- "bitflags",
+ "bitflags 2.9.1",
 ]

 [[package]]
@@ -2665,7 +2736,7 @@ checksum = "dd6f9d3d47bdd2ad6945c5015a226ec6155d0bcdfd8f7cd29f86b71f8de99d2b"
 dependencies = [
 "getrandom 0.2.16",
 "libredox",
- "thiserror",
+ "thiserror 2.0.12",
 ]

 [[package]]
@@ -2764,6 +2835,16 @@ dependencies = [
 "syn 1.0.109",
 ]

+[[package]]
+name = "ropey"
+version = "1.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "93411e420bcd1a75ddd1dc3caf18c23155eda2c090631a85af21ba19e97093b5"
+dependencies = [
+ "smallvec",
+ "str_indices",
+]
+
 [[package]]
 name = "rsa"
 version = "0.9.8"
@@ -2877,11 +2958,11 @@ version = "0.38.44"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fdb5bc1ae2baa591800df16c9ca78619bf65c0488b41b96ccec5d11220d8c154"
 dependencies = [
- "bitflags",
+ "bitflags 2.9.1",
 "errno",
 "libc",
 "linux-raw-sys 0.4.15",
- "windows-sys 0.52.0",
+ "windows-sys 0.59.0",
 ]

 [[package]]
@@ -2890,11 +2971,11 @@ version = "1.0.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "11181fbabf243db407ef8df94a6ce0b2f9a733bd8be4ad02b4eda9602296cac8"
 dependencies = [
- "bitflags",
+ "bitflags 2.9.1",
 "errno",
 "libc",
 "linux-raw-sys 0.9.4",
- "windows-sys 0.52.0",
+ "windows-sys 0.60.2",
 ]

 [[package]]
@@ -2909,6 +2990,15 @@ version = "1.0.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "28d3b2b1366ec20994f1fd18c3c594f05c5dd4bc44d8bb0c1c632c8d6829481f"

+[[package]]
+name = "same-file"
+version = "1.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "93fc1dc3aaa9bfed95e02e6eadabb4baf7e3078b0bd1b4d7b6b0b68378900502"
+dependencies = [
+ "winapi-util",
+]
+
 [[package]]
 name = "schannel"
 version = "0.1.27"
@@ -2953,7 +3043,7 @@ version = "2.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "897b2245f0b511c87893af39b033e5ca9cce68824c4d7e7630b5a1d339658d02"
 dependencies = [
- "bitflags",
+ "bitflags 2.9.1",
 "core-foundation",
 "core-foundation-sys",
 "libc",
@@ -3058,7 +3148,7 @@ dependencies = [
 "steel-decimal",
 "steel-derive",
 "tantivy",
- "thiserror",
+ "thiserror 2.0.12",
 "time",
 "tokio",
 "tokio-test",
@@ -3160,7 +3250,7 @@ checksum = "297f631f50729c8c99b84667867963997ec0b50f32b2a7dbcab828ef0541e8bb"
 dependencies = [
 "num-bigint",
 "num-traits",
- "thiserror",
+ "thiserror 2.0.12",
 "time",
 ]

@@ -3280,7 +3370,7 @@ dependencies = [
 "serde_json",
 "sha2",
 "smallvec",
- "thiserror",
+ "thiserror 2.0.12",
 "time",
 "tokio",
 "tokio-stream",
@@ -3335,7 +3425,7 @@ checksum = "aa003f0038df784eb8fecbbac13affe3da23b45194bd57dba231c8f48199c526"
 dependencies = [
 "atoi",
 "base64",
- "bitflags",
+ "bitflags 2.9.1",
 "byteorder",
 "bytes",
 "chrono",
@@ -3366,7 +3456,7 @@ dependencies = [
 "smallvec",
 "sqlx-core",
 "stringprep",
- "thiserror",
+ "thiserror 2.0.12",
 "time",
 "tracing",
 "uuid",
@@ -3381,7 +3471,7 @@ checksum = "db58fcd5a53cf07c184b154801ff91347e4c30d17a3562a635ff028ad5deda46"
 dependencies = [
 "atoi",
 "base64",
- "bitflags",
+ "bitflags 2.9.1",
 "byteorder",
 "chrono",
 "crc",
@@ -3407,7 +3497,7 @@ dependencies = [
 "smallvec",
 "sqlx-core",
 "stringprep",
- "thiserror",
+ "thiserror 2.0.12",
 "time",
 "tracing",
 "uuid",
@@ -3434,7 +3524,7 @@ dependencies = [
 "serde",
 "serde_urlencoded",
 "sqlx-core",
- "thiserror",
+ "thiserror 2.0.12",
 "time",
 "tracing",
 "url",
@@ -3516,7 +3606,7 @@ dependencies = [
 "rust_decimal_macros",
 "steel-core",
 "steel-derive",
- "thiserror",
+ "thiserror 2.0.12",
 ]

 [[package]]
@@ -3558,6 +3648,12 @@ dependencies = [
 "smallvec",
 ]

+[[package]]
+name = "str_indices"
+version = "0.4.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d08889ec5408683408db66ad89e0e1f93dff55c73a4ccc71c427d5b277ee47e6"
+
 [[package]]
 name = "stringprep"
 version = "0.1.5"
@@ -3642,6 +3738,28 @@ dependencies = [
 "syn 2.0.104",
 ]

+[[package]]
+name = "syntect"
+version = "5.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "874dcfa363995604333cf947ae9f751ca3af4522c60886774c4963943b4746b1"
+dependencies = [
+ "bincode",
+ "bitflags 1.3.2",
+ "fancy-regex",
+ "flate2",
+ "fnv",
+ "once_cell",
+ "plist",
+ "regex-syntax",
+ "serde",
+ "serde_derive",
+ "serde_json",
+ "thiserror 1.0.69",
+ "walkdir",
+ "yaml-rust",
+]
+
 [[package]]
 name = "tantivy"
 version = "0.24.2"
@@ -3688,7 +3806,7 @@ dependencies = [
 "tantivy-stacker",
 "tantivy-tokenizer-api",
 "tempfile",
- "thiserror",
+ "thiserror 2.0.12",
 "time",
 "uuid",
 "winapi",
@@ -3804,7 +3922,7 @@ dependencies = [
 "getrandom 0.3.3",
 "once_cell",
 "rustix 1.0.8",
- "windows-sys 0.52.0",
+ "windows-sys 0.59.0",
 ]

 [[package]]
@@ -3816,13 +3934,33 @@ dependencies = [
 "winapi-util",
 ]

+[[package]]
+name = "thiserror"
+version = "1.0.69"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6aaf5339b578ea85b50e080feb250a3e8ae8cfcdff9a461c9ec2904bc923f52"
+dependencies = [
+ "thiserror-impl 1.0.69",
+]
+
 [[package]]
 name = "thiserror"
 version = "2.0.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "567b8a2dae586314f7be2a752ec7474332959c6460e02bde30d702a66d488708"
 dependencies = [
- "thiserror-impl",
+ "thiserror-impl 2.0.12",
+]
+
+[[package]]
+name = "thiserror-impl"
+version = "1.0.69"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4fee6c4efc90059e10f81e6d42c60a18f76588c3d74cb83a0b242a2b6c7504c1"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.104",
 ]

 [[package]]
@@ -4347,6 +4485,16 @@ version = "0.9.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"

+[[package]]
+name = "walkdir"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "29790946404f91d9c5d06f9874efddea1dc06c5efe94541a7d6863108e3a5e4b"
+dependencies = [
+ "same-file",
+ "winapi-util",
+]
+
 [[package]]
 name = "want"
 version = "0.3.1"
@@ -4485,7 +4633,7 @@ version = "0.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cf221c93e13a30d793f7645a0e7762c55d169dbb0a49671918a2319d289b10bb"
 dependencies = [
- "windows-sys 0.48.0",
+ "windows-sys 0.59.0",
 ]

 [[package]]
@@ -4795,7 +4943,7 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6f42320e61fe2cfd34354ecb597f86f413484a798ba44a8ca1165c58d42da6c1"
 dependencies = [
- "bitflags",
+ "bitflags 2.9.1",
 ]

 [[package]]
@@ -4819,6 +4967,15 @@ version = "3.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2fb433233f2df9344722454bc7e96465c9d03bff9d77c248f9e7523fe79585b5"

+[[package]]
+name = "yaml-rust"
+version = "0.4.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56c1936c4cc7a1c9ab21a1ebb602eb942ba868cbd44a99cb7cdc5892335e1c85"
+dependencies = [
+ "linked-hash-map",
+]
+
 [[package]]
 name = "yoke"
 version = "0.8.0"
--- a/canvas/CANVAS_MIGRATION.md
+++ b/canvas/CANVAS_MIGRATION.md
@@ -2,7 +2,7 @@

 ## 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.
+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 suggestions features, providing better type safety and maintainability.

 ## Key Changes

@@ -10,7 +10,7 @@ This guide covers the migration from the legacy canvas library structure to the
 ```
 # Old Structure (LEGACY)
 src/
-├── state.rs              # Mixed canvas + autocomplete
+├── state.rs              # Mixed canvas + suggestions
 ├── actions/edit.rs       # Mixed concerns
 ├── gui/render.rs         # Everything together
 └── suggestions.rs        # Legacy file
@@ -21,9 +21,9 @@ src/
 │   ├── 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
+├── suggestions/         # Suggestions dropdown features (not inline autocomplete)
+│   ├── state.rs         # Suggestion provider types
+│   ├── gui.rs           # Suggestions dropdown rendering
 │   ├── actions.rs       # Autocomplete actions
 │   └── gui.rs           # Autocomplete dropdown rendering
 └── dispatcher.rs         # Action routing
@@ -31,7 +31,7 @@ src/

 ### 2. **Trait Separation**
 - **CanvasState**: Core form functionality (navigation, input, validation)
- **AutocompleteCanvasState**: Optional rich autocomplete features
+- Suggestions module: Optional dropdown suggestions support

 ### 3. **Rich Suggestions**
 Replaced simple string suggestions with typed, rich suggestion objects.
@@ -57,7 +57,7 @@ use canvas::canvas::CanvasState;
 use canvas::canvas::CanvasAction;
 use canvas::canvas::ActionContext;
 use canvas::canvas::HighlightState;
-use canvas::canvas::CanvasTheme;
+use canvas::CanvasTheme;
 use canvas::dispatcher::ActionDispatcher;
 use canvas::canvas::ActionResult;
 ```
@@ -93,34 +93,29 @@ impl CanvasState for YourFormState {

 ### Step 3: Implement Rich Autocomplete (Optional)

-**If you want rich autocomplete features:**
+**If you want suggestions dropdown features:**

 ```rust
-use canvas::autocomplete::{AutocompleteCanvasState, SuggestionItem, AutocompleteState};
+use canvas::{SuggestionItem};

-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
+impl YourFormState {
+    fn supports_suggestions(&self, field_index: usize) -> bool {
+        // Define which fields support suggestions
        matches!(field_index, 2 | 3 | 5) // Example: only certain fields
    }

-    fn autocomplete_state(&self) -> Option<&AutocompleteState<Self::SuggestionData>> {
-        Some(&self.autocomplete)
-    }
+    // Manage your own suggestion state or rely on FormEditor APIs

-    fn autocomplete_state_mut(&mut self) -> Option<&mut AutocompleteState<Self::SuggestionData>> {
-        Some(&mut self.autocomplete)
-    }
+    // Manage your own suggestion state or rely on FormEditor APIs
 }
 ```

-**Add autocomplete field to your state:**
+**Add suggestions storage to your state (optional, if you need to persist outside the editor):**
 ```rust
 pub struct YourFormState {
    // ... existing fields
-    pub autocomplete: AutocompleteState<YourDataType>,
+    // Optional: your own suggestions cache if needed
+    // pub suggestion_cache: Vec<SuggestionItem>,
 }
 ```

@@ -149,26 +144,25 @@ form_state.set_autocomplete_suggestions(suggestions);

 **Old rendering:**
 ```rust
-// Manual autocomplete rendering
-if form_state.autocomplete_active {
-    render_autocomplete_dropdown(/* ... */);
+// Manual suggestions rendering
+if editor.is_suggestions_active() {
+    suggestions::gui::render_suggestions_dropdown(/* ... */);
 }
 ```

 **New rendering:**
 ```rust
 // Canvas handles everything
-use canvas::canvas::render_canvas;
+use canvas::render_canvas_default;

 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
-        );
-    }
+// Suggestions dropdown (if active)
+if editor.is_suggestions_active() {
+    canvas::suggestions::render_suggestions_dropdown(
+        f, f.area(), active_field_rect.unwrap(), theme, &editor
+    );
+}
 }
 ```

@@ -181,16 +175,16 @@ form_state.deactivate_suggestions();

 # NEW - Option A: Add your own method
 impl YourFormState {
-    pub fn deactivate_autocomplete(&mut self) {
+    pub fn deactivate_suggestions(&mut self) {
        self.autocomplete_active = false;
        self.autocomplete_suggestions.clear();
        self.selected_suggestion_index = None;
    }
 }
-form_state.deactivate_autocomplete();
+editor.ui_state_mut().deactivate_suggestions();

-# NEW - Option B: Use rich autocomplete trait
-form_state.deactivate_autocomplete(); // If implementing AutocompleteCanvasState
+# NEW - Option B: Suggestions via editor APIs
+editor.ui_state_mut().deactivate_suggestions();
 ```

 ## Benefits of New Architecture
@@ -217,8 +211,8 @@ let suggestions: Vec<SuggestionItem<UserRecord>> = vec![
 - **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
+- Easy to add new suggestion features
+- Canvas features don't interfere with suggestions
 - Modular: Use only what you need

 ## Advanced Features
@@ -262,7 +256,7 @@ 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
+2. **Legacy suggestion methods removed**: Replace with SuggestionItem-based dropdown or custom methods
 3. **No more simple suggestions**: Use `SuggestionItem` for typed suggestions
 4. **Trait split**: `AutocompleteCanvasState` is now separate and optional

@@ -283,11 +277,11 @@ SuggestionItem::new(user, "John Doe (Manager)".to_string(), "123".to_string());

 - [ ] Updated all import paths
 - [ ] Removed legacy methods from CanvasState implementation
- [ ] Added custom autocomplete methods if needed
- [ ] Updated suggestion usage to SuggestionItem
+- [ ] Added custom suggestion methods if needed
+- [ ] Updated usage to SuggestionItem
 - [ ] Updated rendering calls
 - [ ] Tested form functionality
- [ ] Tested autocomplete functionality (if using)
+- [ ] Tested suggestions functionality (if using)

 ## Example: Complete Migration

@@ -305,29 +299,25 @@ impl CanvasState for FormState {
 **After:**
 ```rust
 use canvas::canvas::{CanvasState, CanvasAction};
-use canvas::autocomplete::{AutocompleteCanvasState, SuggestionItem};
+use canvas::SuggestionItem;

 impl CanvasState for FormState {
-    // Only core canvas methods, no suggestion methods
+    // Only core canvas methods
    fn current_field(&self) -> usize { /* ... */ }
    fn get_current_input(&self) -> &str { /* ... */ }
    // ... other core methods only
 }

-impl AutocompleteCanvasState for FormState {
+// Use FormEditor + SuggestionsProvider for suggestions dropdown
    type SuggestionData = Hit;
    
-    fn supports_autocomplete(&self, field_index: usize) -> bool {
+    fn supports_suggestions(&self, field_index: usize) -> bool {
        self.fields[field_index].is_link
    }
    
-    fn autocomplete_state(&self) -> Option<&AutocompleteState<Self::SuggestionData>> {
-        Some(&self.autocomplete)
-    }
+    // Maintain suggestion state through FormEditor and DataProvider
    
-    fn autocomplete_state_mut(&mut self) -> Option<&mut AutocompleteState<Self::SuggestionData>> {
-        Some(&mut self.autocomplete)
-    }
+    // Maintain suggestion state through FormEditor and DataProvider
 }
 ```

--- a/canvas/Cargo.toml
+++ b/canvas/Cargo.toml
@@ -2,15 +2,14 @@
 name = "canvas"
 version.workspace = true
 edition.workspace = true
-license.workspace = true
+license = "MIT OR Apache-2.0"
 authors.workspace = true
-description.workspace = true
+description = "Form/textarea for TUI"
 readme.workspace = true
 repository.workspace = true
 categories.workspace = true

 [dependencies]
-common = { path = "../common" }
 ratatui = { workspace = true, optional = true }
 crossterm = { workspace = true, optional = true }
 anyhow.workspace = true
@@ -24,27 +23,86 @@ tracing = "0.1.41"
 tracing-subscriber = "0.3.19"
 async-trait.workspace = true
 regex = { workspace = true, optional = true }
+ropey = { version = "1.6.1", optional = true }
+once_cell = "1.21.3"
+syntect = { version = "5.2.0", optional = true, default-features = false, features = ["default-fancy"] }

 [dev-dependencies]
 tokio-test = "0.4.4"

 [features]
-default = []
-gui = ["ratatui"]
-autocomplete = ["tokio"]
+default = ["textmode-vim"]
+gui = ["ratatui", "crossterm"]
+suggestions = ["tokio"]
 cursor-style = ["crossterm"]
 validation = ["regex"]
+computed = []
+textarea = ["dep:ropey","gui"]
+syntect = ["dep:syntect", "gui", "textarea"]
+
+# text modes (mutually exclusive; default to vim)
+textmode-vim = []
+textmode-normal = []
+
+all-nontextmodes = [
+    "gui",
+    "suggestions",
+    "cursor-style",
+    "validation",
+    "computed",
+    "textarea"
+]

 [[example]]
-name = "autocomplete"
-required-features = ["autocomplete", "gui"]
-path = "examples/autocomplete.rs"
+name = "suggestions"
+required-features = ["suggestions", "gui", "cursor-style"]
+path = "examples/suggestions.rs"

 [[example]]
-name = "canvas_gui_demo"
-required-features = ["gui"]
-path = "examples/canvas_gui_demo.rs"
+name = "suggestions2"
+required-features = ["suggestions", "gui", "cursor-style"]
+path = "examples/suggestions2.rs"
+
+[[example]]
+name = "canvas_cursor_auto"
+required-features = ["gui", "cursor-style"]
+path = "examples/canvas_cursor_auto.rs"

 [[example]]
 name = "validation_1"
-required-features = ["gui", "validation"]
+required-features = ["gui", "validation", "cursor-style"]
+
+[[example]]
+name = "validation_2"
+required-features = ["gui", "validation", "cursor-style"]
+
+[[example]]
+name = "validation_3"
+required-features = ["gui", "validation", "cursor-style"]
+
+[[example]]
+name = "validation_4"
+required-features = ["gui", "validation", "cursor-style"]
+
+[[example]]
+name = "validation_5"
+required-features = ["gui", "validation", "cursor-style"]
+
+[[example]]
+name = "computed_fields"
+required-features = ["gui", "computed"]
+
+[[example]]
+name = "textarea_vim"
+required-features = ["gui", "cursor-style", "textarea", "textmode-vim"]
+path = "examples/textarea_vim.rs"
+
+[[example]]
+name = "textarea_normal"
+required-features = ["gui", "cursor-style", "textarea", "textmode-normal"]
+path = "examples/textarea_normal.rs"
+
+[[example]]
+name = "textarea_syntax"
+required-features = ["gui", "cursor-style", "textarea", "textmode-normal", "syntect"]
+path = "examples/textarea_syntax.rs"
--- a/canvas/README.md
+++ b/canvas/README.md
@@ -1,337 +1,113 @@
-# Canvas 🎨
+# Canvas

-A reusable, type-safe canvas system for building form-based TUI applications with vim-like modal editing.
+Canvas is a Rust library for building form‑based and textarea‑driven terminal user interfaces.
+It provides the core logic for text editing, validation, suggestions, and cursor management.

-## ✨ 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
+The library does not enforce a specific terminal UI framework:
+- Core functionality works without any rendering backend.
+- Terminal rendering support is available through the `gui` feature, which enables integration with `ratatui` and `crossterm`.
+- Applications may also integrate Canvas with other backends by handling input and rendering independently.

 ---

-Built with ❤️ for the Rust TUI community
+## Overview
+
+Canvas is designed for applications that require structured text input in a terminal environment.
+It provides:
+
+- Text editing modes (Vim‑like or normal)
+- Validation (regex, masks, limits, formatting)
+- Suggestions (asynchronous dropdowns)
+- Computed fields (derived values)
+- Textarea widget with cursor management
+- Syntax highlighting (via syntect)
+- Extensible architecture for custom behaviors
+
+---
+
+## Installation
+
+Add the dependency to your `Cargo.toml`:
+
+```toml
+[dependencies]
+canvas = { version = "0.x", features = ["gui", "cursor-style", "textarea", "validation"] }
+```
+
+---
+
+## Features
+
+The library is feature‑gated. Enable only what you need:
+
+- `gui` – terminal rendering support (ratatui + crossterm)
+- `cursor-style` – styled cursor support
+- `validation` – regex, masks, limits, formatting
+- `suggestions` – asynchronous suggestions dropdowns
+- `computed` – derived fields
+- `textarea` – textarea widget
+- `syntect` – syntax highlighting support
+- `textmode-vim` – Vim‑like editing (default)
+- `textmode-normal` – normal editing mode
+
+**Note:** `textmode-vim` and `textmode-normal` are mutually exclusive. Enable exactly one.
+
+The default feature set is `["textmode-vim"]`.
+
+---
+
+## Running Examples
+
+The repository includes several examples. Each requires specific feature flags.
+Use the following commands to run them:
+
+```bash
+# Textarea with Vim mode
+cargo run --example textarea_vim --features "gui cursor-style textarea textmode-vim"
+
+# Textarea with Normal mode
+cargo run --example textarea_normal --features "gui cursor-style textarea textmode-normal"
+
+# Textarea with syntax highlighting
+cargo run --example textarea_syntax --features "gui cursor-style textarea syntect textmode-normal"
+
+# Validation examples
+cargo run --example validation_1 --features "gui validation cursor-style"
+cargo run --example validation_2 --features "gui validation cursor-style"
+cargo run --example validation_3 --features "gui validation cursor-style"
+cargo run --example validation_4 --features "gui validation cursor-style"
+cargo run --example validation_5 --features "gui validation cursor-style"
+
+# Suggestions
+cargo run --example suggestions --features "suggestions gui cursor-style"
+cargo run --example suggestions2 --features "suggestions gui cursor-style"
+
+# Cursor auto movement
+cargo run --example canvas_cursor_auto --features "gui cursor-style"
+
+# Computed fields
+cargo run --example computed_fields --features "gui computed"
+```
+
+---
+
+## Documentation
+
+- API documentation: `cargo doc --open`
+- Migration notes: `CANVAS_MIGRATION.md`
+
+---
+
+## License
+
+Licensed under either of:
+- Apache License, Version 2.0
+- MIT License
+
+at your option.
+
+---
+
+## Contributing
+
+Contributions are welcome. Please follow the existing code structure and feature‑gating conventions.
--- a/canvas/aider.md
+++ b/canvas/aider.md
@@ -0,0 +1,16 @@
+# Aider Instructions
+
+## General Rules
+- Only modify files that I explicitly add with `/add`.
+- If a prompt mentions multiple files, **ignore all files except the ones I have added**.
+- Do not create, edit, or delete any files unless they are explicitly added.
+- Keep all other files exactly as they are, even if the prompt suggests changes.
+- Never move logic into or out of files that are not explicitly added.
+- If a prompt suggests changes to multiple files, apply **only the subset of changes** that belong to the added file(s).
+- If a change requires touching other files, ignore them, if they were not manually added.
+
+## Coding Style
+- Follow Rust 2021 edition idioms.
+- No logic in `mod.rs` files (only exports/routing).
+- Always update or create tests **only if the test file is explicitly added**.
+- Do not think, only apply changes from the prompt
--- a/canvas/examples/autocomplete.rs
+++ b/canvas/examples/autocomplete.rs
@@ -1,392 +0,0 @@
-// examples/autocomplete.rs
-// Run with: cargo run --example autocomplete --features "autocomplete,gui"
-
-use std::io;
-use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyModifiers},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-};
-use ratatui::{
-    backend::{Backend, CrosstermBackend},
-    layout::{Constraint, Direction, Layout},
-    style::Color,
-    text::{Line, Span},
-    widgets::{Block, Borders, Paragraph},
-    Frame, Terminal,
-};
-
-use canvas::{
-    canvas::{
-        gui::render_canvas,
-        modes::AppMode,
-        theme::CanvasTheme,
-    },
-    autocomplete::gui::render_autocomplete_dropdown,
-    FormEditor, DataProvider, AutocompleteProvider, SuggestionItem,
-};
-
-use async_trait::async_trait;
-use anyhow::Result;
-
-// Simple theme implementation
-#[derive(Clone)]
-struct DemoTheme;
-
-impl CanvasTheme for DemoTheme {
-    fn bg(&self) -> Color { Color::Reset }
-    fn fg(&self) -> Color { Color::White }
-    fn accent(&self) -> Color { Color::Cyan }
-    fn secondary(&self) -> Color { Color::Gray }
-    fn highlight(&self) -> Color { Color::Yellow }
-    fn highlight_bg(&self) -> Color { Color::DarkGray }
-    fn warning(&self) -> Color { Color::Red }
-    fn border(&self) -> Color { Color::Gray }
-}
-
-// Custom suggestion data type
-#[derive(Clone, Debug)]
-struct EmailSuggestion {
-    email: String,
-    provider: String,
-}
-
-// ===================================================================
-// SIMPLE DATA PROVIDER - Only business data, no UI concerns!
-// ===================================================================
-
-struct ContactForm {
-    // Only business data - no UI state!
-    name: String,
-    email: String,
-    phone: String,
-    city: String,
-}
-
-impl ContactForm {
-    fn new() -> Self {
-        Self {
-            name: "John Doe".to_string(),
-            email: "john@".to_string(), // Partial email for demo
-            phone: "+1 234 567 8900".to_string(),
-            city: "San Francisco".to_string(),
-        }
-    }
-}
-
-// Simple trait implementation - only 4 methods!
-impl DataProvider for ContactForm {
-    fn field_count(&self) -> usize { 4 }
-    
-    fn field_name(&self, index: usize) -> &str {
-        match index {
-            0 => "Name",
-            1 => "Email", 
-            2 => "Phone",
-            3 => "City",
-            _ => "",
-        }
-    }
-    
-    fn field_value(&self, index: usize) -> &str {
-        match index {
-            0 => &self.name,
-            1 => &self.email,
-            2 => &self.phone,
-            3 => &self.city,
-            _ => "",
-        }
-    }
-    
-    fn set_field_value(&mut self, index: usize, value: String) {
-        match index {
-            0 => self.name = value,
-            1 => self.email = value,
-            2 => self.phone = value,
-            3 => self.city = value,
-            _ => {}
-        }
-    }
-    
-    fn supports_autocomplete(&self, field_index: usize) -> bool {
-        field_index == 1 // Only email field
-    }
-}
-
-// ===================================================================
-// SIMPLE AUTOCOMPLETE PROVIDER - Only data fetching!
-// ===================================================================
-
-struct EmailAutocomplete;
-
-#[async_trait]
-impl AutocompleteProvider for EmailAutocomplete {
-    type SuggestionData = EmailSuggestion;
-    
-    async fn fetch_suggestions(&mut self, _field_index: usize, query: &str) 
-        -> Result<Vec<SuggestionItem<Self::SuggestionData>>> 
-    {
-        // Extract domain part from email
-        let (email_prefix, domain_part) = if let Some(at_pos) = query.find('@') {
-            (query[..at_pos].to_string(), query[at_pos + 1..].to_string())
-        } else {
-            return Ok(Vec::new()); // No @ symbol
-        };
-
-        // Simulate async API call
-        let suggestions = tokio::task::spawn_blocking(move || {
-            // Simulate network delay
-            std::thread::sleep(std::time::Duration::from_millis(200));
-
-            // Mock email suggestions
-            let popular_domains = vec![
-                ("gmail.com", "Gmail"),
-                ("yahoo.com", "Yahoo Mail"),
-                ("outlook.com", "Outlook"),
-                ("hotmail.com", "Hotmail"),
-                ("company.com", "Company Email"),
-                ("university.edu", "University"),
-            ];
-
-            let mut results = Vec::new();
-            for (domain, provider) in popular_domains {
-                if domain.starts_with(&domain_part) || domain_part.is_empty() {
-                    let full_email = format!("{}@{}", email_prefix, domain);
-                    results.push(SuggestionItem {
-                        data: EmailSuggestion {
-                            email: full_email.clone(),
-                            provider: provider.to_string(),
-                        },
-                        display_text: format!("{} ({})", full_email, provider),
-                        value_to_store: full_email,
-                    });
-                }
-            }
-            results
-        }).await.unwrap_or_default();
-
-        Ok(suggestions)
-    }
-}
-
-// ===================================================================
-// APPLICATION STATE - Much simpler!
-// ===================================================================
-
-struct AppState {
-    editor: FormEditor<ContactForm>,
-    autocomplete: EmailAutocomplete,
-    debug_message: String,
-}
-
-impl AppState {
-    fn new() -> Self {
-        let contact_form = ContactForm::new();
-        let mut editor = FormEditor::new(contact_form);
-        
-        // Start on email field (index 1) at end of existing text
-        editor.set_mode(AppMode::Edit);
-        // TODO: Add method to set initial field/cursor position
-        
-        Self {
-            editor,
-            autocomplete: EmailAutocomplete,
-            debug_message: "Type in email field, Tab to trigger autocomplete, Enter to select, Esc to cancel".to_string(),
-        }
-    }
-}
-
-// ===================================================================
-// INPUT HANDLING - Much cleaner!
-// ===================================================================
-
-async fn handle_key_press(key: KeyCode, modifiers: KeyModifiers, state: &mut AppState) -> bool {
-    if key == KeyCode::F(10) || (key == KeyCode::Char('c') && modifiers.contains(KeyModifiers::CONTROL)) {
-        return false; // Quit
-    }
-
-    // Handle input based on key
-    let result = match key {
-        // === AUTOCOMPLETE KEYS ===
-        KeyCode::Tab => {
-            if state.editor.is_autocomplete_active() {
-                state.editor.autocomplete_next();
-                Ok("Navigated to next suggestion".to_string())
-            } else if state.editor.data_provider().supports_autocomplete(state.editor.current_field()) {
-                state.editor.trigger_autocomplete(&mut state.autocomplete).await
-                    .map(|_| "Triggered autocomplete".to_string())
-            } else {
-                state.editor.move_to_next_field();
-                Ok("Moved to next field".to_string())
-            }
-        }
-
-        KeyCode::Enter => {
-            if state.editor.is_autocomplete_active() {
-                if let Some(applied) = state.editor.apply_autocomplete() {
-                    Ok(format!("Applied: {}", applied))
-                } else {
-                    Ok("No suggestion to apply".to_string())
-                }
-            } else {
-                state.editor.move_to_next_field();
-                Ok("Moved to next field".to_string())
-            }
-        }
-
-        KeyCode::Esc => {
-            if state.editor.is_autocomplete_active() {
-                // Autocomplete will be cleared automatically by mode change
-                Ok("Cancelled autocomplete".to_string())
-            } else {
-                // Toggle between edit and readonly mode
-                let new_mode = match state.editor.mode() {
-                    AppMode::Edit => AppMode::ReadOnly,
-                    _ => AppMode::Edit,
-                };
-                state.editor.set_mode(new_mode);
-                Ok(format!("Switched to {:?} mode", new_mode))
-            }
-        }
-
-        // === MOVEMENT KEYS ===
-        KeyCode::Left => {
-            state.editor.move_left();
-            Ok("Moved left".to_string())
-        }
-        KeyCode::Right => {
-            state.editor.move_right();
-            Ok("Moved right".to_string())
-        }
-        KeyCode::Up => {
-            state.editor.move_to_next_field(); // TODO: Add move_up method
-            Ok("Moved up".to_string())
-        }
-        KeyCode::Down => {
-            state.editor.move_to_next_field(); // TODO: Add move_down method  
-            Ok("Moved down".to_string())
-        }
-
-        // === TEXT INPUT ===
-        KeyCode::Char(c) if !modifiers.contains(KeyModifiers::CONTROL) => {
-            state.editor.insert_char(c)
-                .map(|_| format!("Inserted '{}'", c))
-        }
-
-        KeyCode::Backspace => {
-            // TODO: Add delete_backward method to FormEditor
-            Ok("Backspace (not implemented yet)".to_string())
-        }
-
-        _ => Ok(format!("Unhandled key: {:?}", key)),
-    };
-
-    // Update debug message
-    match result {
-        Ok(msg) => state.debug_message = msg,
-        Err(e) => state.debug_message = format!("Error: {}", e),
-    }
-
-    true
-}
-
-async fn run_app<B: Backend>(terminal: &mut Terminal<B>, mut state: AppState) -> io::Result<()> {
-    let theme = DemoTheme;
-
-    loop {
-        terminal.draw(|f| ui(f, &state, &theme))?;
-
-        if let Event::Key(key) = event::read()? {
-            let should_continue = handle_key_press(key.code, key.modifiers, &mut state).await;
-            if !should_continue {
-                break;
-            }
-        }
-    }
-
-    Ok(())
-}
-
-fn ui(f: &mut Frame, state: &AppState, theme: &DemoTheme) {
-    let chunks = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Constraint::Min(8),
-            Constraint::Length(5),
-        ])
-        .split(f.area());
-
-    // Render the canvas form - much simpler!
-    let active_field_rect = render_canvas(
-        f,
-        chunks[0],
-        &state.editor,
-        theme,
-    );
-
-    // Render autocomplete dropdown if active
-    if let Some(input_rect) = active_field_rect {
-        render_autocomplete_dropdown(
-            f,
-            chunks[0],
-            input_rect,
-            theme,
-            &state.editor,
-        );
-    }
-
-    // Status info
-    let autocomplete_status = if state.editor.is_autocomplete_active() {
-        if state.editor.ui_state().is_autocomplete_loading() {
-            "Loading suggestions..."
-        } else if !state.editor.suggestions().is_empty() {
-            "Use Tab to navigate, Enter to select, Esc to cancel"
-        } else {
-            "No suggestions found"
-        }
-    } else {
-        "Tab to trigger autocomplete"
-    };
-
-    let status_lines = vec![
-        Line::from(Span::raw(format!("Mode: {:?} | Field: {}/{} | Cursor: {}",
-            state.editor.mode(), 
-            state.editor.current_field() + 1, 
-            state.editor.data_provider().field_count(), 
-            state.editor.cursor_position()))),
-        Line::from(Span::raw(format!("Autocomplete: {}", autocomplete_status))),
-        Line::from(Span::raw(state.debug_message.clone())),
-        Line::from(Span::raw("F10: Quit | Tab: Trigger/Navigate autocomplete | Enter: Select | Esc: Cancel/Toggle mode")),
-    ];
-
-    let status = Paragraph::new(status_lines)
-        .block(Block::default().borders(Borders::ALL).title("Status & Help"));
-
-    f.render_widget(status, chunks[1]);
-}
-
-#[tokio::main]
-async fn main() -> Result<(), Box<dyn std::error::Error>> {
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    let state = AppState::new();
-    let res = run_app(&mut terminal, state).await;
-
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{:?}", err);
-    }
-
-    Ok(())
-}
--- a/canvas/examples/canvas_cursor_auto.rs
+++ b/canvas/examples/canvas_cursor_auto.rs
@@ -38,7 +38,7 @@ use ratatui::{
 use canvas::{
    canvas::{
        gui::render_canvas_default,
-        modes::{AppMode, ModeManager, HighlightState},
+        modes::AppMode,
        CursorManager, // This import only exists when cursor-style feature is enabled
    },
    DataProvider, FormEditor,
@@ -205,7 +205,7 @@ impl<D: DataProvider> AutoCursorFormEditor<D> {
            self.has_unsaved_changes = true;
            self.debug_message = "⌫ Deleted character backward".to_string();
        }
-        Ok(result?)
+        result
    }

    fn delete_forward(&mut self) -> anyhow::Result<()> {
@@ -214,7 +214,7 @@ impl<D: DataProvider> AutoCursorFormEditor<D> {
            self.has_unsaved_changes = true;
            self.debug_message = "⌦ Deleted character forward".to_string();
        }
-        Ok(result?)
+        result
    }

    // === MODE TRANSITIONS WITH AUTOMATIC CURSOR MANAGEMENT ===
@@ -240,7 +240,7 @@ impl<D: DataProvider> AutoCursorFormEditor<D> {
        if result.is_ok() {
            self.has_unsaved_changes = true;
        }
-        Ok(result?)
+        result
    }

    // === MANUAL CURSOR OVERRIDE DEMONSTRATION ===
@@ -275,7 +275,8 @@ impl<D: DataProvider> AutoCursorFormEditor<D> {
    }

    fn current_text(&self) -> &str {
-        self.editor.current_text()
+        let field_index = self.editor.current_field();
+        self.editor.data_provider().field_value(field_index)
    }

    fn data_provider(&self) -> &D {
@@ -306,6 +307,42 @@ impl<D: DataProvider> AutoCursorFormEditor<D> {
    fn has_unsaved_changes(&self) -> bool {
        self.has_unsaved_changes
    }
+
+    fn open_line_below(&mut self) -> anyhow::Result<()> {
+        let result = self.editor.open_line_below();
+        if result.is_ok() {
+            self.debug_message = "✏️  INSERT (open line below) - Cursor: Steady Bar |".to_string();
+        }
+        result
+    }
+
+    fn open_line_above(&mut self) -> anyhow::Result<()> {
+        let result = self.editor.open_line_above();
+        if result.is_ok() {
+            self.debug_message = "✏️  INSERT (open line above) - Cursor: Steady Bar |".to_string();
+        }
+        result
+    }
+
+    fn move_big_word_next(&mut self) {
+        self.editor.move_big_word_next();
+        self.update_visual_selection();
+    }
+
+    fn move_big_word_prev(&mut self) {
+        self.editor.move_big_word_prev();
+        self.update_visual_selection();
+    }
+
+    fn move_big_word_end(&mut self) {
+        self.editor.move_big_word_end();
+        self.update_visual_selection();
+    }
+
+    fn move_big_word_end_prev(&mut self) {
+        self.editor.move_big_word_end_prev();
+        self.update_visual_selection();
+    }
 }

 // Demo form data with interesting text for cursor demonstration
@@ -346,7 +383,7 @@ impl DataProvider for CursorDemoData {
        self.fields[index].1 = value;
    }

-    fn supports_autocomplete(&self, _field_index: usize) -> bool {
+    fn supports_suggestions(&self, _field_index: usize) -> bool {
        false
    }

@@ -389,10 +426,17 @@ fn handle_key_press(
            editor.set_debug_message("✏️  INSERT (end of line) - Cursor: Steady Bar |".to_string());
            editor.clear_command_buffer();
        }
+
        (AppMode::ReadOnly, KeyCode::Char('o'), _) => {
-            editor.move_line_end();
-            editor.enter_edit_mode(); // 🎯 Automatic: cursor becomes bar |
-            editor.set_debug_message("✏️  INSERT (open line) - Cursor: Steady Bar |".to_string());
+            if let Err(e) = editor.open_line_below() {
+                editor.set_debug_message(format!("Error opening line below: {e}"));
+            }
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('O'), _) => {
+            if let Err(e) = editor.open_line_above() {
+                editor.set_debug_message(format!("Error opening line above: {e}"));
+            }
            editor.clear_command_buffer();
        }

@@ -507,10 +551,40 @@ fn handle_key_press(
            editor.clear_command_buffer();
        }
        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('e'), _) => {
-            editor.move_word_end();
-            editor.set_debug_message("e: word end".to_string());
+            // Check if this is 'ge' command
+            if editor.get_command_buffer() == "g" {
+                editor.move_word_end_prev();
+                editor.set_debug_message("ge: previous word end".to_string());
+                editor.clear_command_buffer();
+            } else {
+                editor.move_word_end();
+                editor.set_debug_message("e: word end".to_string());
+                editor.clear_command_buffer();
+            }
+        }
+
+        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('W'), _) => {
+            editor.move_big_word_next();
+            editor.set_debug_message("W: next WORD start".to_string());
            editor.clear_command_buffer();
        }
+        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('B'), _) => {
+            editor.move_big_word_prev();
+            editor.set_debug_message("B: previous WORD start".to_string());
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('E'), _) => {
+            // Check if this is 'gE' command
+            if editor.get_command_buffer() == "g" {
+                editor.move_big_word_end_prev();
+                editor.set_debug_message("gE: previous WORD end".to_string());
+                editor.clear_command_buffer();
+            } else {
+                editor.move_big_word_end();
+                editor.set_debug_message("E: WORD end".to_string());
+                editor.clear_command_buffer();
+            }
+        }

        // Line movement
        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('0'), _)
@@ -620,8 +694,7 @@ fn handle_key_press(
                editor.set_debug_message("Invalid command sequence".to_string());
            } else {
                editor.set_debug_message(format!(
-                    "Unhandled: {:?} + {:?} in {:?} mode",
-                    key, modifiers, mode
+                    "Unhandled: {key:?} + {modifiers:?} in {mode:?} mode"
                ));
            }
        }
@@ -645,7 +718,7 @@ fn run_app<B: Backend>(
                    }
                }
                Err(e) => {
-                    editor.set_debug_message(format!("Error: {}", e));
+                    editor.set_debug_message(format!("Error: {e}"));
                }
            }
        }
@@ -721,9 +794,9 @@ fn render_status_and_help(
                }
            } else {
                "🎯 CURSOR-STYLE DEMO: Normal █ | Insert | | Visual blinking█\n\
-                 Normal: hjkl/arrows=move, w/b/e=words, 0/$=line, gg/G=first/last\n\
-                 i/a/A=insert, v/b=visual, x/X=delete, ?=info\n\
-                 F1=demo manual cursor, F2=restore automatic"
+                Normal: hjkl/arrows=move, w/b/e=words, W/B/E=WORDS, 0/$=line, gg/G=first/last\n\
+                i/a/A/o/O=insert, v/V=visual, x/X=delete, ?=info\n\
+                F1=demo manual cursor, F2=restore automatic"
            }
        }
        AppMode::Edit => {
@@ -784,7 +857,7 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
    terminal.show_cursor()?;

    if let Err(err) = res {
-        println!("{:?}", err);
+        println!("{err:?}");
    }

    println!("🎯 Cursor automatically reset to default!");
--- a/canvas/examples/computed_fields.rs
+++ b/canvas/examples/computed_fields.rs
@@ -0,0 +1,621 @@
+// examples/computed_fields.rs - COMPLETE WORKING VERSION
+//! Demonstrates computed fields with the canvas library - Invoice Calculator Example
+//!
+//! This example REQUIRES the `computed` feature to compile.
+//!
+//! Run with:
+//! cargo run --example computed_fields --features "gui,computed"
+
+#[cfg(not(feature = "computed"))]
+compile_error!(
+    "This example requires the 'computed' feature. \
+     Run with: cargo run --example computed_fields --features \"gui,computed\""
+);
+
+use std::io;
+use crossterm::{
+    event::{
+        self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyModifiers,
+    },
+    execute,
+    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    layout::{Constraint, Direction, Layout, Rect},
+    style::{Color, Style, Modifier},
+    text::{Line, Span},
+    widgets::{Block, Borders, Paragraph, Wrap},
+    Frame, Terminal,
+};
+
+use canvas::{
+    canvas::{gui::render_canvas_default, modes::AppMode},
+    DataProvider, FormEditor,
+    computed::{ComputedProvider, ComputedContext},
+};
+
+/// Invoice data with computed fields
+struct InvoiceData {
+    fields: Vec<(String, String)>,
+    computed_indices: std::collections::HashSet<usize>,
+}
+
+impl InvoiceData {
+    fn new() -> Self {
+        let mut computed_indices = std::collections::HashSet::new();
+        
+        // Mark computed fields (read-only, calculated)
+        computed_indices.insert(4); // Subtotal
+        computed_indices.insert(5); // Tax Amount
+        computed_indices.insert(6); // Total
+
+        Self {
+            fields: vec![
+                ("📦 Product Name".to_string(), "".to_string()),
+                ("🔢 Quantity".to_string(), "".to_string()),
+                ("💰 Unit Price ($)".to_string(), "".to_string()),
+                ("📊 Tax Rate (%)".to_string(), "".to_string()),
+                ("➕ Subtotal ($)".to_string(), "".to_string()),        // COMPUTED
+                ("🧾 Tax Amount ($)".to_string(), "".to_string()),      // COMPUTED
+                ("💳 Total ($)".to_string(), "".to_string()),           // COMPUTED
+                ("📝 Notes".to_string(), "".to_string()),
+            ],
+            computed_indices,
+        }
+    }
+}
+
+impl DataProvider for InvoiceData {
+    fn field_count(&self) -> usize {
+        self.fields.len()
+    }
+
+    fn field_name(&self, index: usize) -> &str {
+        &self.fields[index].0
+    }
+
+    fn field_value(&self, index: usize) -> &str {
+        &self.fields[index].1
+    }
+
+    fn set_field_value(&mut self, index: usize, value: String) {
+        // 🔥 FIXED: Allow computed fields to be updated for display purposes
+        // The editing protection happens at the editor level, not here
+        self.fields[index].1 = value;
+    }
+
+    fn supports_suggestions(&self, _field_index: usize) -> bool {
+        false
+    }
+
+    fn display_value(&self, _index: usize) -> Option<&str> {
+        None
+    }
+    
+    /// Mark computed fields
+    fn is_computed_field(&self, field_index: usize) -> bool {
+        self.computed_indices.contains(&field_index)
+    }
+
+    /// Get computed field values
+    fn computed_field_value(&self, field_index: usize) -> Option<String> {
+        if self.computed_indices.contains(&field_index) {
+            Some(self.fields[field_index].1.clone())
+        } else {
+            None
+        }
+    }
+}
+
+/// Invoice calculator - computes totals based on input fields
+struct InvoiceCalculator;
+
+impl ComputedProvider for InvoiceCalculator {
+    fn compute_field(&mut self, context: ComputedContext) -> String {
+        // Helper to parse field values safely
+        let parse_field = |index: usize| -> f64 {
+            let value = context.field_values[index].trim();
+            if value.is_empty() {
+                0.0
+            } else {
+                value.parse().unwrap_or(0.0)
+            }
+        };
+
+        match context.target_field {
+            4 => {
+                // Subtotal = Quantity × Unit Price
+                let qty = parse_field(1);
+                let price = parse_field(2);
+                let subtotal = qty * price;
+                
+                if qty == 0.0 || price == 0.0 {
+                    "".to_string()  // Show empty if no meaningful calculation
+                } else {
+                    format!("{subtotal:.2}")
+                }
+            }
+            5 => {
+                // Tax Amount = Subtotal × (Tax Rate / 100)
+                let qty = parse_field(1);
+                let price = parse_field(2);
+                let tax_rate = parse_field(3);
+                let subtotal = qty * price;
+                let tax_amount = subtotal * (tax_rate / 100.0);
+                
+                if subtotal == 0.0 || tax_rate == 0.0 {
+                    "".to_string()
+                } else {
+                    format!("{tax_amount:.2}")
+                }
+            }
+            6 => {
+                // Total = Subtotal + Tax Amount
+                let qty = parse_field(1);
+                let price = parse_field(2);
+                let tax_rate = parse_field(3);
+                let subtotal = qty * price;
+                
+                if subtotal == 0.0 {
+                    "".to_string()
+                } else {
+                    let tax_amount = subtotal * (tax_rate / 100.0);
+                    let total = subtotal + tax_amount;
+                    format!("{total:.2}")
+                }
+            }
+            _ => "".to_string(),
+        }
+    }
+    
+    fn handles_field(&self, field_index: usize) -> bool {
+        matches!(field_index, 4..=6) // Subtotal, Tax Amount, Total
+    }
+    
+    fn field_dependencies(&self, field_index: usize) -> Vec<usize> {
+        match field_index {
+            4 => vec![1, 2],       // Subtotal depends on Quantity, Unit Price
+            5 => vec![1, 2, 3],    // Tax Amount depends on Quantity, Unit Price, Tax Rate
+            6 => vec![1, 2, 3],    // Total depends on Quantity, Unit Price, Tax Rate
+            _ => vec![],
+        }
+    }
+}
+
+/// Enhanced editor with computed fields
+struct ComputedFieldsEditor<D: DataProvider> {
+    editor: FormEditor<D>,
+    calculator: InvoiceCalculator,
+    debug_message: String,
+    last_computed_values: Vec<String>,
+}
+
+impl<D: DataProvider> ComputedFieldsEditor<D> {
+    fn new(data_provider: D) -> Self {
+        let mut editor = FormEditor::new(data_provider);
+        editor.set_computed_provider(InvoiceCalculator);
+
+        let calculator = InvoiceCalculator;
+        let last_computed_values = vec!["".to_string(); 8];
+
+        Self {
+            editor,
+            calculator,
+            debug_message: "💰 Invoice Calculator - Start typing in fields to see calculations!".to_string(),
+            last_computed_values,
+        }
+    }
+
+    fn is_computed_field(&self, field_index: usize) -> bool {
+        self.editor.ui_state().is_computed_field(field_index)
+    }
+
+    fn update_computed_fields(&mut self) {
+        // Trigger recomputation of all computed fields
+        self.editor.recompute_all_fields(&mut self.calculator);
+
+        // 🔥 CRITICAL FIX: Sync computed values to DataProvider so GUI shows them!
+        for i in [4, 5, 6] { // Computed field indices  
+            let computed_value = self.editor.effective_field_value(i);
+            self.editor.data_provider_mut().set_field_value(i, computed_value.clone());
+        }
+
+        // Check if values changed to show feedback
+        let mut changed = false;
+        let mut has_calculations = false;
+        
+        for i in [4, 5, 6] {
+            let new_value = self.editor.effective_field_value(i);
+            if new_value != self.last_computed_values[i] {
+                changed = true;
+                self.last_computed_values[i] = new_value.clone();
+            }
+            if !new_value.is_empty() {
+                has_calculations = true;
+            }
+        }
+
+        if changed {
+            if has_calculations {
+                let subtotal = &self.last_computed_values[4];
+                let tax = &self.last_computed_values[5];
+                let total = &self.last_computed_values[6];
+                
+                let mut parts = Vec::new();
+                if !subtotal.is_empty() {
+                    parts.push(format!("Subtotal=${subtotal}"));
+                }
+                if !tax.is_empty() {
+                    parts.push(format!("Tax=${tax}"));
+                }
+                if !total.is_empty() {
+                    parts.push(format!("Total=${total}"));
+                }
+                
+                if !parts.is_empty() {
+                    self.debug_message = format!("🧮 Calculated: {}", parts.join(", "));
+                } else {
+                    self.debug_message = "💰 Enter Quantity and Unit Price to see calculations".to_string();
+                }
+            } else {
+                self.debug_message = "💰 Enter Quantity and Unit Price to see calculations".to_string();
+            }
+        }
+    }
+
+    fn insert_char(&mut self, ch: char) -> anyhow::Result<()> {
+        let current_field = self.editor.current_field();
+        let result = self.editor.insert_char(ch);
+
+        if result.is_ok() && matches!(current_field, 1..=3) {
+            self.editor.on_field_changed(&mut self.calculator, current_field);
+            self.update_computed_fields();
+        }
+
+        result
+    }
+
+    fn delete_backward(&mut self) -> anyhow::Result<()> {
+        let current_field = self.editor.current_field();
+        let result = self.editor.delete_backward();
+
+        if result.is_ok() && matches!(current_field, 1..=3) {
+            self.editor.on_field_changed(&mut self.calculator, current_field);
+            self.update_computed_fields();
+        }
+
+        result
+    }
+
+    fn delete_forward(&mut self) -> anyhow::Result<()> {
+        let current_field = self.editor.current_field();
+        let result = self.editor.delete_forward();
+
+        if result.is_ok() && matches!(current_field, 1..=3) {
+            self.editor.on_field_changed(&mut self.calculator, current_field);
+            self.update_computed_fields();
+        }
+
+        result
+    }
+
+    fn next_field(&mut self) {
+        let old_field = self.editor.current_field();
+        let _ = self.editor.next_field();
+        let new_field = self.editor.current_field();
+
+        if old_field != new_field {
+            let field_name = self.editor.data_provider().field_name(new_field);
+            let field_type = if self.is_computed_field(new_field) {
+                "computed (read-only)"
+            } else {
+                "editable"
+            };
+            self.debug_message = format!("→ {field_name} - {field_type} field");
+        }
+    }
+
+    fn prev_field(&mut self) {
+        let old_field = self.editor.current_field();
+        let _ = self.editor.prev_field();
+        let new_field = self.editor.current_field();
+
+        if old_field != new_field {
+            let field_name = self.editor.data_provider().field_name(new_field);
+            let field_type = if self.is_computed_field(new_field) {
+                "computed (read-only)"
+            } else {
+                "editable"
+            };
+            self.debug_message = format!("← {field_name} - {field_type} field");
+        }
+    }
+
+    fn enter_edit_mode(&mut self) {
+        let current = self.editor.current_field();
+        
+        // Double protection: check both ways
+        if self.editor.data_provider().is_computed_field(current) || self.is_computed_field(current) {
+            let field_name = self.editor.data_provider().field_name(current);
+            self.debug_message = format!(
+                "🚫 {field_name} is computed (read-only) - Press Tab to move to editable fields"
+            );
+            return;
+        }
+        
+        self.editor.enter_edit_mode();
+        let field_name = self.editor.data_provider().field_name(current);
+        self.debug_message = format!("✏️ Editing {field_name} - Type to see calculations update");
+    }
+
+    fn enter_append_mode(&mut self) {
+        let current = self.editor.current_field();
+        
+        if self.editor.data_provider().is_computed_field(current) || self.is_computed_field(current) {
+            let field_name = self.editor.data_provider().field_name(current);
+            self.debug_message = format!(
+                "🚫 {field_name} is computed (read-only) - Press Tab to move to editable fields"
+            );
+            return;
+        }
+        
+        self.editor.enter_append_mode();
+        let field_name = self.editor.data_provider().field_name(current);
+        self.debug_message = format!("✏️ Appending to {field_name} - Type to see calculations");
+    }
+
+    fn exit_edit_mode(&mut self) {
+        let current_field = self.editor.current_field();
+        self.editor.exit_edit_mode();
+
+        if matches!(current_field, 1..=3) {
+            self.editor.on_field_changed(&mut self.calculator, current_field);
+            self.update_computed_fields();
+        }
+
+        self.debug_message = "🔒 Normal mode - Press 'i' to edit fields".to_string();
+    }
+
+    // Delegate methods
+    fn current_field(&self) -> usize { self.editor.current_field() }
+    fn cursor_position(&self) -> usize { self.editor.cursor_position() }
+    fn mode(&self) -> AppMode { self.editor.mode() }
+    fn current_text(&self) -> &str {
+        let field_index = self.editor.current_field();
+        self.editor.data_provider().field_value(field_index)
+    }
+    fn data_provider(&self) -> &D { self.editor.data_provider() }
+    fn ui_state(&self) -> &canvas::EditorState { self.editor.ui_state() }
+    fn move_left(&mut self) { self.editor.move_left(); }
+    fn move_right(&mut self) { self.editor.move_right(); }
+    fn move_up(&mut self) { let _ = self.editor.move_up(); }
+    fn move_down(&mut self) { let _ = self.editor.move_down(); }
+}
+
+fn handle_key_press(
+    key: KeyCode,
+    modifiers: KeyModifiers,
+    editor: &mut ComputedFieldsEditor<InvoiceData>,
+) -> anyhow::Result<bool> {
+    let mode = editor.mode();
+
+    if (key == KeyCode::Char('q') && modifiers.contains(KeyModifiers::CONTROL))
+        || (key == KeyCode::Char('c') && modifiers.contains(KeyModifiers::CONTROL))
+        || key == KeyCode::F(10)
+    {
+        return Ok(false);
+    }
+
+    match (mode, key, modifiers) {
+        (AppMode::ReadOnly, KeyCode::Char('i'), _) => {
+            editor.enter_edit_mode();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('a'), _) => {
+            editor.enter_append_mode();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('A'), _) => {
+            editor.editor.move_line_end();
+            editor.enter_edit_mode();
+        }
+        (_, KeyCode::Esc, _) => {
+            if mode == AppMode::Edit {
+                editor.exit_edit_mode();
+            }
+        }
+
+        // Movement
+        (AppMode::ReadOnly, KeyCode::Char('h'), _) | (AppMode::ReadOnly, KeyCode::Left, _) => {
+            editor.move_left();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('l'), _) | (AppMode::ReadOnly, KeyCode::Right, _) => {
+            editor.move_right();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('j'), _) | (AppMode::ReadOnly, KeyCode::Down, _) => {
+            editor.move_down();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('k'), _) | (AppMode::ReadOnly, KeyCode::Up, _) => {
+            editor.move_up();
+        }
+
+        // Edit mode movement
+        (AppMode::Edit, KeyCode::Left, _) => { editor.move_left(); }
+        (AppMode::Edit, KeyCode::Right, _) => { editor.move_right(); }
+        (AppMode::Edit, KeyCode::Up, _) => { editor.move_up(); }
+        (AppMode::Edit, KeyCode::Down, _) => { editor.move_down(); }
+
+        // Navigation
+        (_, KeyCode::Tab, _) => {
+            editor.next_field();
+        }
+        (_, KeyCode::BackTab, _) => {
+            editor.prev_field();
+        }
+
+        // Editing
+        (AppMode::Edit, KeyCode::Char(c), m) if !m.contains(KeyModifiers::CONTROL) => {
+            editor.insert_char(c)?;
+        }
+        (AppMode::Edit, KeyCode::Backspace, _) => {
+            editor.delete_backward()?;
+        }
+        (AppMode::Edit, KeyCode::Delete, _) => {
+            editor.delete_forward()?;
+        }
+
+        // Debug info
+        (AppMode::ReadOnly, KeyCode::Char('?'), _) => {
+            let current = editor.current_field();
+            let field_name = editor.data_provider().field_name(current);
+            let field_type = if editor.is_computed_field(current) {
+                "COMPUTED (read-only)"
+            } else {
+                "EDITABLE"
+            };
+            editor.debug_message = format!(
+                "{} - {} - Position {} - Mode: {:?}",
+                field_name, field_type, editor.cursor_position(), mode
+            );
+        }
+
+        _ => {}
+    }
+
+    Ok(true)
+}
+
+fn run_app<B: Backend>(
+    terminal: &mut Terminal<B>,
+    mut editor: ComputedFieldsEditor<InvoiceData>,
+) -> io::Result<()> {
+    editor.update_computed_fields(); // Initial computation
+
+    loop {
+        terminal.draw(|f| ui(f, &editor))?;
+
+        if let Event::Key(key) = event::read()? {
+            match handle_key_press(key.code, key.modifiers, &mut editor) {
+                Ok(should_continue) => {
+                    if !should_continue {
+                        break;
+                    }
+                }
+                Err(e) => {
+                    editor.debug_message = format!("Error: {e}");
+                }
+            }
+        }
+    }
+
+    Ok(())
+}
+
+fn ui(f: &mut Frame, editor: &ComputedFieldsEditor<InvoiceData>) {
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Min(8), Constraint::Length(10)])
+        .split(f.area());
+
+    render_enhanced_canvas(f, chunks[0], editor);
+    render_computed_status(f, chunks[1], editor);
+}
+
+fn render_enhanced_canvas(f: &mut Frame, area: Rect, editor: &ComputedFieldsEditor<InvoiceData>) {
+    render_canvas_default(f, area, &editor.editor);
+}
+
+fn render_computed_status(f: &mut Frame, area: Rect, editor: &ComputedFieldsEditor<InvoiceData>) {
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Length(3), Constraint::Length(7)])
+        .split(area);
+
+    let mode_text = match editor.mode() {
+        AppMode::Edit => "INSERT",
+        AppMode::ReadOnly => "NORMAL",
+        _ => "OTHER",
+    };
+
+    let current = editor.current_field();
+    let field_status = if editor.is_computed_field(current) {
+        "📊 COMPUTED FIELD (read-only)"
+    } else {
+        "✏️ EDITABLE FIELD"
+    };
+
+    let status_text = format!("-- {} -- {} | {}", mode_text, field_status, editor.debug_message);
+
+    let status = Paragraph::new(Line::from(Span::raw(status_text)))
+        .block(Block::default().borders(Borders::ALL).title("💰 Invoice Calculator"));
+
+    f.render_widget(status, chunks[0]);
+
+    let help_text = match editor.mode() {
+        AppMode::ReadOnly => {
+            "💰 COMPUTED FIELDS DEMO: Real-time invoice calculations!\n\
+             🔢 EDITABLE: Product, Quantity, Unit Price, Tax Rate, Notes\n\
+             📊 COMPUTED: Subtotal, Tax Amount, Total (calculated automatically)\n\
+             \n\
+             🚀 START: Press 'i' to edit Quantity, type '5', Tab to Unit Price, type '19.99'\n\
+             Watch Subtotal and Total appear! Add Tax Rate to see tax calculations.\n\
+             Navigation: Tab/Shift+Tab skips computed fields automatically"
+        }
+        AppMode::Edit => {
+            "✏️ EDIT MODE: Type numbers to see calculations appear!\n\
+             \n\
+             💡 EXAMPLE: Type '5' in Quantity, then Tab to Unit Price and type '19.99'\n\
+             • Subtotal appears: $99.95\n\
+             • Total appears: $99.95\n\
+             • Add Tax Rate (like '10') to see tax: $9.99, Total: $109.94\n\
+             \n\
+             Esc=normal, Tab=next field (auto-skips computed fields)"
+        }
+        _ => "💰 Invoice Calculator with Computed Fields"
+    };
+
+    let help_style = if editor.is_computed_field(editor.current_field()) {
+        Style::default().fg(Color::Yellow).add_modifier(Modifier::ITALIC)
+    } else {
+        Style::default().fg(Color::Gray)
+    };
+
+    let help = Paragraph::new(help_text)
+        .block(Block::default().borders(Borders::ALL).title("🚀 Try It Now!"))
+        .style(help_style)
+        .wrap(Wrap { trim: true });
+
+    f.render_widget(help, chunks[1]);
+}
+
+fn main() -> Result<(), Box<dyn std::error::Error>> {
+    println!("💰 Canvas Computed Fields Demo - Invoice Calculator");
+    println!("✅ computed feature: ENABLED");
+    println!("🚀 QUICK TEST:");
+    println!("   1. Press 'i' to edit Quantity");
+    println!("   2. Type '5' and press Tab");
+    println!("   3. Type '19.99' in Unit Price");
+    println!("   4. Watch Subtotal ($99.95) and Total ($99.95) appear!");
+    println!();
+
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    let data = InvoiceData::new();
+    let editor = ComputedFieldsEditor::new(data);
+
+    let res = run_app(&mut terminal, editor);
+
+    disable_raw_mode()?;
+    execute!(terminal.backend_mut(), LeaveAlternateScreen, DisableMouseCapture)?;
+    terminal.show_cursor()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
+    }
+
+    println!("💰 Demo completed! Computed fields should have updated in real-time!");
+    Ok(())
+}
--- a/canvas/examples/full_canvas_demo.rs
+++ b/canvas/examples/full_canvas_demo.rs
@@ -1,724 +0,0 @@
-// examples/full_canvas_demo.rs
-//! Demonstrates the FULL potential of the canvas library using the native API
-
-use std::io;
-use crossterm::{
-    cursor::SetCursorStyle,
-    event::{
-        self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyModifiers,
-    },
-    execute,
-    terminal::{
-        disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen,
-    },
-};
-use ratatui::{
-    backend::{Backend, CrosstermBackend},
-    layout::{Constraint, Direction, Layout},
-    style::{Color, Style},
-    text::{Line, Span},
-    widgets::{Block, Borders, Paragraph},
-    Frame, Terminal,
-};
-
-use canvas::{
-    canvas::{
-        gui::render_canvas_default,
-        modes::{AppMode, ModeManager, HighlightState},
-    },
-    DataProvider, FormEditor,
-};
-
-/// Update cursor style based on current AppMode
-fn update_cursor_for_mode(mode: AppMode) -> io::Result<()> {
-    let style = match mode {
-        AppMode::Edit => SetCursorStyle::SteadyBar,           // Thin line for insert mode
-        AppMode::ReadOnly => SetCursorStyle::SteadyBlock,     // Block for normal mode  
-        AppMode::Highlight => SetCursorStyle::BlinkingBlock,  // Blinking block for visual mode
-        AppMode::General => SetCursorStyle::SteadyBlock,      // Block for general mode
-        AppMode::Command => SetCursorStyle::SteadyUnderScore, // Underscore for command mode
-    };
-    
-    execute!(io::stdout(), style)
-}
-
-// Enhanced FormEditor that adds visual mode and status tracking
-struct EnhancedFormEditor<D: DataProvider> {
-    editor: FormEditor<D>,
-    highlight_state: HighlightState,
-    has_unsaved_changes: bool,
-    debug_message: String,
-    command_buffer: String, // For multi-key vim commands like "gg"
-}
-
-impl<D: DataProvider> EnhancedFormEditor<D> {
-    fn new(data_provider: D) -> Self {
-        Self {
-            editor: FormEditor::new(data_provider),
-            highlight_state: HighlightState::Off,
-            has_unsaved_changes: false,
-            debug_message: "Full Canvas Demo - All features enabled".to_string(),
-            command_buffer: String::new(),
-        }
-    }
-
-    // === COMMAND BUFFER HANDLING ===
-
-    fn clear_command_buffer(&mut self) {
-        self.command_buffer.clear();
-    }
-
-    fn add_to_command_buffer(&mut self, ch: char) {
-        self.command_buffer.push(ch);
-    }
-
-    fn get_command_buffer(&self) -> &str {
-        &self.command_buffer
-    }
-
-    fn has_pending_command(&self) -> bool {
-        !self.command_buffer.is_empty()
-    }
-
-    // === VISUAL/HIGHLIGHT MODE SUPPORT ===
-
-    fn enter_visual_mode(&mut self) {
-        if ModeManager::can_enter_highlight_mode(self.editor.mode()) {
-            self.editor.set_mode(AppMode::Highlight);
-            self.highlight_state = HighlightState::Characterwise {
-                anchor: (
-                    self.editor.current_field(),
-                    self.editor.cursor_position(),
-                ),
-            };
-            self.debug_message = "-- VISUAL --".to_string();
-        }
-    }
-
-    fn enter_visual_line_mode(&mut self) {
-        if ModeManager::can_enter_highlight_mode(self.editor.mode()) {
-            self.editor.set_mode(AppMode::Highlight);
-            self.highlight_state =
-                HighlightState::Linewise { anchor_line: self.editor.current_field() };
-            self.debug_message = "-- VISUAL LINE --".to_string();
-        }
-    }
-
-    fn exit_visual_mode(&mut self) {
-        self.highlight_state = HighlightState::Off;
-        if self.editor.mode() == AppMode::Highlight {
-            self.editor.set_mode(AppMode::ReadOnly);
-            self.debug_message = "Visual mode exited".to_string();
-        }
-    }
-
-    fn update_visual_selection(&mut self) {
-        if self.editor.mode() == AppMode::Highlight {
-            match &self.highlight_state {
-                HighlightState::Characterwise { anchor: _ } => {
-                    self.debug_message = format!(
-                        "Visual selection: char {} in field {}",
-                        self.editor.cursor_position(),
-                        self.editor.current_field()
-                    );
-                }
-                HighlightState::Linewise { anchor_line: _ } => {
-                    self.debug_message = format!(
-                        "Visual line selection: field {}",
-                        self.editor.current_field()
-                    );
-                }
-                _ => {}
-            }
-        }
-    }
-
-    // === ENHANCED MOVEMENT WITH VISUAL UPDATES ===
-
-    fn move_left(&mut self) {
-        self.editor.move_left();
-        self.update_visual_selection();
-    }
-
-    fn move_right(&mut self) {
-        self.editor.move_right();
-        self.update_visual_selection();
-    }
-
-    fn move_up(&mut self) {
-        self.editor.move_up();
-        self.update_visual_selection();
-    }
-
-    fn move_down(&mut self) {
-        self.editor.move_down();
-        self.update_visual_selection();
-    }
-
-    fn move_word_next(&mut self) {
-        self.editor.move_word_next();
-        self.update_visual_selection();
-    }
-
-    fn move_word_prev(&mut self) {
-        self.editor.move_word_prev();
-        self.update_visual_selection();
-    }
-
-    fn move_word_end(&mut self) {
-        self.editor.move_word_end();
-        self.update_visual_selection();
-    }
-
-    fn move_word_end_prev(&mut self) {
-        self.editor.move_word_end_prev();
-        self.update_visual_selection();
-    }
-
-    fn move_line_start(&mut self) {
-        self.editor.move_line_start();
-        self.update_visual_selection();
-    }
-
-    fn move_line_end(&mut self) {
-        self.editor.move_line_end();
-        self.update_visual_selection();
-    }
-
-    fn move_first_line(&mut self) {
-        self.editor.move_first_line();
-        self.update_visual_selection();
-    }
-
-    fn move_last_line(&mut self) {
-        self.editor.move_last_line();
-        self.update_visual_selection();
-    }
-
-    fn prev_field(&mut self) {
-        self.editor.prev_field();
-        self.update_visual_selection();
-    }
-
-    fn next_field(&mut self) {
-        self.editor.next_field();
-        self.update_visual_selection();
-    }
-
-    // === DELETE OPERATIONS ===
-
-    fn delete_backward(&mut self) -> anyhow::Result<()> {
-        let result = self.editor.delete_backward();
-        if result.is_ok() {
-            self.has_unsaved_changes = true;
-            self.debug_message = "Deleted character backward".to_string();
-        }
-        Ok(result?)
-    }
-
-    fn delete_forward(&mut self) -> anyhow::Result<()> {
-        let result = self.editor.delete_forward();
-        if result.is_ok() {
-            self.has_unsaved_changes = true;
-            self.debug_message = "Deleted character forward".to_string();
-        }
-        Ok(result?)
-    }
-
-    // === MODE TRANSITIONS ===
-
-    fn enter_edit_mode(&mut self) {
-        self.editor.enter_edit_mode();
-        self.debug_message = "-- INSERT --".to_string();
-    }
-
-    fn exit_edit_mode(&mut self) {
-        self.editor.exit_edit_mode();
-        self.exit_visual_mode();
-        self.debug_message = "".to_string();
-    }
-
-    fn insert_char(&mut self, ch: char) -> anyhow::Result<()> {
-        let result = self.editor.insert_char(ch);
-        if result.is_ok() {
-            self.has_unsaved_changes = true;
-        }
-        Ok(result?)
-    }
-
-    // === DELEGATE TO ORIGINAL EDITOR ===
-
-    fn current_field(&self) -> usize {
-        self.editor.current_field()
-    }
-
-    fn cursor_position(&self) -> usize {
-        self.editor.cursor_position()
-    }
-
-    fn mode(&self) -> AppMode {
-        self.editor.mode()
-    }
-
-    fn current_text(&self) -> &str {
-        self.editor.current_text()
-    }
-
-    fn data_provider(&self) -> &D {
-        self.editor.data_provider()
-    }
-
-    fn ui_state(&self) -> &canvas::EditorState {
-        self.editor.ui_state()
-    }
-
-    fn set_mode(&mut self, mode: AppMode) {
-        self.editor.set_mode(mode);
-        if mode != AppMode::Highlight {
-            self.exit_visual_mode();
-        }
-    }
-
-    // === STATUS AND DEBUG ===
-
-    fn set_debug_message(&mut self, msg: String) {
-        self.debug_message = msg;
-    }
-
-    fn debug_message(&self) -> &str {
-        &self.debug_message
-    }
-
-    fn highlight_state(&self) -> &HighlightState {
-        &self.highlight_state
-    }
-
-    fn has_unsaved_changes(&self) -> bool {
-        self.has_unsaved_changes
-    }
-}
-
-// Demo form data with interesting text for word movement
-struct FullDemoData {
-    fields: Vec<(String, String)>,
-}
-
-impl FullDemoData {
-    fn new() -> Self {
-        Self {
-            fields: vec![
-                ("Name".to_string(), "John-Paul McDonald".to_string()),
-                (
-                    "Email".to_string(),
-                    "user@example-domain.com".to_string(),
-                ),
-                ("Phone".to_string(), "+1 (555) 123-4567".to_string()),
-                ("Address".to_string(), "123 Main St, Apt 4B".to_string()),
-                (
-                    "Tags".to_string(),
-                    "urgent,important,follow-up".to_string(),
-                ),
-                (
-                    "Notes".to_string(),
-                    "This is a sample note with multiple words, punctuation! And symbols @#$"
-                        .to_string(),
-                ),
-            ],
-        }
-    }
-}
-
-impl DataProvider for FullDemoData {
-    fn field_count(&self) -> usize {
-        self.fields.len()
-    }
-
-    fn field_name(&self, index: usize) -> &str {
-        &self.fields[index].0
-    }
-
-    fn field_value(&self, index: usize) -> &str {
-        &self.fields[index].1
-    }
-
-    fn set_field_value(&mut self, index: usize, value: String) {
-        self.fields[index].1 = value;
-    }
-
-    fn supports_autocomplete(&self, _field_index: usize) -> bool {
-        false
-    }
-
-    fn display_value(&self, _index: usize) -> Option<&str> {
-        None
-    }
-}
-
-/// Full vim-like key handling using the native FormEditor API
-fn handle_key_press(
-    key: KeyCode,
-    modifiers: KeyModifiers,
-    editor: &mut EnhancedFormEditor<FullDemoData>,
-) -> anyhow::Result<bool> {
-    let old_mode = editor.mode(); // Store mode before processing
-
-    // Quit handling
-    if (key == KeyCode::Char('q') && modifiers.contains(KeyModifiers::CONTROL))
-        || (key == KeyCode::Char('c') && modifiers.contains(KeyModifiers::CONTROL))
-        || key == KeyCode::F(10)
-    {
-        return Ok(false);
-    }
-
-    match (old_mode, key, modifiers) {
-        // === MODE TRANSITIONS ===
-        (AppMode::ReadOnly, KeyCode::Char('i'), _) => {
-            editor.enter_edit_mode();
-            editor.clear_command_buffer();
-        }
-        (AppMode::ReadOnly, KeyCode::Char('a'), _) => {
-            editor.move_right(); // Move after current character
-            editor.enter_edit_mode();
-            editor.set_debug_message("-- INSERT -- (append)".to_string());
-            editor.clear_command_buffer();
-        }
-        (AppMode::ReadOnly, KeyCode::Char('A'), _) => {
-            editor.move_line_end();
-            editor.enter_edit_mode();
-            editor.set_debug_message("-- INSERT -- (end of line)".to_string());
-            editor.clear_command_buffer();
-        }
-        (AppMode::ReadOnly, KeyCode::Char('o'), _) => {
-            editor.move_line_end();
-            editor.enter_edit_mode();
-            editor.set_debug_message("-- INSERT -- (open line)".to_string());
-            editor.clear_command_buffer();
-        }
-        (AppMode::ReadOnly, KeyCode::Char('v'), _) => {
-            editor.enter_visual_mode();
-            editor.clear_command_buffer();
-        }
-        (AppMode::ReadOnly, KeyCode::Char('V'), _) => {
-            editor.enter_visual_line_mode();
-            editor.clear_command_buffer();
-        }
-        (_, KeyCode::Esc, _) => {
-            editor.exit_edit_mode();
-            editor.clear_command_buffer();
-        }
-
-        // === MOVEMENT: VIM-STYLE NAVIGATION ===
-
-        // Basic movement (hjkl and arrows)
-        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('h'), _)
-        | (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Left, _) => {
-            editor.move_left();
-            editor.set_debug_message("← left".to_string());
-            editor.clear_command_buffer();
-        }
-        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('l'), _)
-        | (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Right, _) => {
-            editor.move_right();
-            editor.set_debug_message("→ right".to_string());
-            editor.clear_command_buffer();
-        }
-        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('j'), _)
-        | (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Down, _) => {
-            editor.move_down();
-            editor.set_debug_message("↓ next field".to_string());
-            editor.clear_command_buffer();
-        }
-        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('k'), _)
-        | (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Up, _) => {
-            editor.move_up();
-            editor.set_debug_message("↑ previous field".to_string());
-            editor.clear_command_buffer();
-        }
-
-        // Word movement - Full vim word navigation
-        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('w'), _) => {
-            editor.move_word_next();
-            editor.set_debug_message("w: next word start".to_string());
-            editor.clear_command_buffer();
-        }
-        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('b'), _) => {
-            editor.move_word_prev();
-            editor.set_debug_message("b: previous word start".to_string());
-            editor.clear_command_buffer();
-        }
-        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('e'), _) => {
-            editor.move_word_end();
-            editor.set_debug_message("e: word end".to_string());
-            editor.clear_command_buffer();
-        }
-        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('W'), _) => {
-            editor.move_word_end_prev();
-            editor.set_debug_message("W: previous word end".to_string());
-            editor.clear_command_buffer();
-        }
-
-        // Line movement
-        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('0'), _)
-        | (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Home, _) => {
-            editor.move_line_start();
-            editor.set_debug_message("0: line start".to_string());
-        }
-        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('$'), _)
-        | (AppMode::ReadOnly | AppMode::Highlight, KeyCode::End, _) => {
-            editor.move_line_end();
-            editor.set_debug_message("$: line end".to_string());
-        }
-
-        // Field/document movement
-        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('g'), _) => {
-            if editor.get_command_buffer() == "g" {
-                // Second 'g' - execute "gg" command
-                editor.move_first_line();
-                editor.set_debug_message("gg: first field".to_string());
-                editor.clear_command_buffer();
-            } else {
-                // First 'g' - start command buffer
-                editor.clear_command_buffer();
-                editor.add_to_command_buffer('g');
-                editor.set_debug_message("g".to_string());
-            }
-        }
-        (AppMode::ReadOnly | AppMode::Highlight, KeyCode::Char('G'), _) => {
-            editor.move_last_line();
-            editor.set_debug_message("G: last field".to_string());
-            editor.clear_command_buffer();
-        }
-
-        // === EDIT MODE MOVEMENT ===
-        (AppMode::Edit, KeyCode::Left, m) if m.contains(KeyModifiers::CONTROL) => {
-            editor.move_word_prev();
-            editor.set_debug_message("Ctrl+← word back".to_string());
-        }
-        (AppMode::Edit, KeyCode::Right, m) if m.contains(KeyModifiers::CONTROL) => {
-            editor.move_word_next();
-            editor.set_debug_message("Ctrl+→ word forward".to_string());
-        }
-        (AppMode::Edit, KeyCode::Left, _) => {
-            editor.move_left();
-        }
-        (AppMode::Edit, KeyCode::Right, _) => {
-            editor.move_right();
-        }
-        (AppMode::Edit, KeyCode::Up, _) => {
-            editor.move_up();
-        }
-        (AppMode::Edit, KeyCode::Down, _) => {
-            editor.move_down();
-        }
-        (AppMode::Edit, KeyCode::Home, _) => {
-            editor.move_line_start();
-        }
-        (AppMode::Edit, KeyCode::End, _) => {
-            editor.move_line_end();
-        }
-
-        // === DELETE OPERATIONS ===
-        (AppMode::Edit, KeyCode::Backspace, _) => {
-            editor.delete_backward()?;
-        }
-        (AppMode::Edit, KeyCode::Delete, _) => {
-            editor.delete_forward()?;
-        }
-
-        // Delete operations in normal mode (vim x)
-        (AppMode::ReadOnly, KeyCode::Char('x'), _) => {
-            editor.delete_forward()?;
-            editor.set_debug_message("x: deleted character".to_string());
-        }
-        (AppMode::ReadOnly, KeyCode::Char('X'), _) => {
-            editor.delete_backward()?;
-            editor.set_debug_message("X: deleted character backward".to_string());
-        }
-
-        // === TAB NAVIGATION ===
-        (_, KeyCode::Tab, _) => {
-            editor.next_field();
-            editor.set_debug_message("Tab: next field".to_string());
-        }
-        (_, KeyCode::BackTab, _) => {
-            editor.prev_field();
-            editor.set_debug_message("Shift+Tab: previous field".to_string());
-        }
-
-        // === CHARACTER INPUT ===
-        (AppMode::Edit, KeyCode::Char(c), m) if !m.contains(KeyModifiers::CONTROL) => {
-            editor.insert_char(c)?;
-        }
-
-        // === DEBUG/INFO COMMANDS ===
-        (AppMode::ReadOnly, KeyCode::Char('?'), _) => {
-            editor.set_debug_message(format!(
-                "Field {}/{}, Pos {}, Mode: {:?}",
-                editor.current_field() + 1,
-                editor.data_provider().field_count(),
-                editor.cursor_position(),
-                editor.mode()
-            ));
-        }
-
-        _ => {
-            // If we have a pending command and this key doesn't complete it, clear the buffer
-            if editor.has_pending_command() {
-                editor.clear_command_buffer();
-                editor.set_debug_message("Invalid command sequence".to_string());
-            } else {
-                editor.set_debug_message(format!(
-                    "Unhandled: {:?} + {:?} in {:?} mode",
-                    key, modifiers, old_mode
-                ));
-            }
-        }
-    }
-
-    // Update cursor if mode changed
-    let new_mode = editor.mode();
-    if old_mode != new_mode {
-        update_cursor_for_mode(new_mode)?;
-    }
-
-    Ok(true)
-}
-
-fn run_app<B: Backend>(
-    terminal: &mut Terminal<B>,
-    mut editor: EnhancedFormEditor<FullDemoData>,
-) -> io::Result<()> {
-    loop {
-        terminal.draw(|f| ui(f, &editor))?;
-
-        if let Event::Key(key) = event::read()? {
-            match handle_key_press(key.code, key.modifiers, &mut editor) {
-                Ok(should_continue) => {
-                    if !should_continue {
-                        break;
-                    }
-                }
-                Err(e) => {
-                    editor.set_debug_message(format!("Error: {}", e));
-                }
-            }
-        }
-    }
-
-    Ok(())
-}
-
-fn ui(f: &mut Frame, editor: &EnhancedFormEditor<FullDemoData>) {
-    let chunks = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([Constraint::Min(8), Constraint::Length(8)])
-        .split(f.area());
-
-    render_enhanced_canvas(f, chunks[0], editor);
-    render_status_and_help(f, chunks[1], editor);
-}
-
-fn render_enhanced_canvas(
-    f: &mut Frame,
-    area: ratatui::layout::Rect,
-    editor: &EnhancedFormEditor<FullDemoData>,
-) {
-    render_canvas_default(f, area, &editor.editor);
-}
-
-fn render_status_and_help(
-    f: &mut Frame,
-    area: ratatui::layout::Rect,
-    editor: &EnhancedFormEditor<FullDemoData>,
-) {
-    let chunks = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([Constraint::Length(3), Constraint::Length(5)])
-        .split(area);
-
-    // Status bar
-    let mode_text = match editor.mode() {
-        AppMode::Edit => "INSERT",
-        AppMode::ReadOnly => "NORMAL",
-        AppMode::Highlight => match editor.highlight_state() {
-            HighlightState::Characterwise { .. } => "VISUAL",
-            HighlightState::Linewise { .. } => "VISUAL LINE",
-            _ => "VISUAL",
-        },
-        _ => "NORMAL",
-    };
-
-    let status_text = if editor.has_pending_command() {
-        format!("-- {} -- {} [{}]", mode_text, editor.debug_message(), editor.get_command_buffer())
-    } else if editor.has_unsaved_changes() {
-        format!("-- {} -- [Modified] {}", mode_text, editor.debug_message())
-    } else {
-        format!("-- {} -- {}", mode_text, editor.debug_message())
-    };
-
-    let status = Paragraph::new(Line::from(Span::raw(status_text)))
-        .block(Block::default().borders(Borders::ALL).title("Status"));
-
-    f.render_widget(status, chunks[0]);
-
-    // Help text
-    let help_text = match editor.mode() {
-        AppMode::ReadOnly => {
-            if editor.has_pending_command() {
-                match editor.get_command_buffer() {
-                    "g" => "Press 'g' again for first field, or any other key to cancel",
-                    _ => "Pending command... (Esc to cancel)"
-                }
-            } else {
-                "Normal: hjkl/arrows=move, w/b/e=words, 0/$=line, gg/G=first/last, i/a/A=insert, v/V=visual, x/X=delete, ?=info"
-            }
-        }
-        AppMode::Edit => {
-            "Insert: arrows=move, Ctrl+arrows=words, Backspace/Del=delete, Esc=normal, Tab/Shift+Tab=fields"
-        }
-        AppMode::Highlight => {
-            "Visual: hjkl/arrows=extend selection, w/b/e=word selection, Esc=normal"
-        }
-        _ => "Press ? for help"
-    };
-
-    let help = Paragraph::new(Line::from(Span::raw(help_text)))
-        .block(Block::default().borders(Borders::ALL).title("Commands"))
-        .style(Style::default().fg(Color::Gray));
-
-    f.render_widget(help, chunks[1]);
-}
-
-fn main() -> Result<(), Box<dyn std::error::Error>> {
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    let data = FullDemoData::new();
-    let mut editor = EnhancedFormEditor::new(data);
-    editor.set_mode(AppMode::ReadOnly); // Start in normal mode
-    
-    // Set initial cursor style
-    update_cursor_for_mode(editor.mode())?;
-
-    let res = run_app(&mut terminal, editor);
-
-    // Reset cursor style on exit
-    execute!(io::stdout(), SetCursorStyle::DefaultUserShape)?;
-
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{:?}", err);
-    }
-
-    Ok(())
-}
--- a/canvas/examples/suggestions.rs
+++ b/canvas/examples/suggestions.rs
--- a/canvas/examples/suggestions2.rs
+++ b/canvas/examples/suggestions2.rs
--- a/canvas/examples/textarea_normal.rs
+++ b/canvas/examples/textarea_normal.rs
@@ -0,0 +1,397 @@
+// examples/textarea_normal.rs
+//! Demonstrates automatic cursor management with the textarea widget
+//!
+//! This example REQUIRES the `cursor-style` and `textarea` features to compile,
+//! and is adapted for `textmode-normal` (always editing, no vim modes).
+//!
+//! Run with:
+//! cargo run --example canvas_textarea_cursor_auto_normal --features "gui,cursor-style,textarea,textmode-normal"
+
+#[cfg(not(feature = "cursor-style"))]
+compile_error!(
+    "This example requires the 'cursor-style' feature. \
+     Run with: cargo run --example canvas_textarea_cursor_auto_normal --features \"gui,cursor-style,textarea,textmode-normal\""
+);
+
+#[cfg(not(feature = "textarea"))]
+compile_error!(
+    "This example requires the 'textarea' feature. \
+     Run with: cargo run --example canvas_textarea_cursor_auto_normal --features \"gui,cursor-style,textarea,textmode-normal\""
+);
+
+use std::io;
+use crossterm::{
+    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEvent, KeyModifiers},
+    execute,
+    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    layout::{Constraint, Direction, Layout},
+    style::{Color, Style},
+    text::{Line, Span},
+    widgets::{Block, Borders, Paragraph},
+    Frame, Terminal,
+};
+
+use canvas::{
+    canvas::CursorManager,
+    textarea::{TextArea, TextAreaState},
+};
+
+/// TextArea demo adapted for NORMALMODE (always editing)
+struct AutoCursorTextArea {
+    textarea: TextAreaState,
+    has_unsaved_changes: bool,
+    debug_message: String,
+    command_buffer: String,
+}
+
+impl AutoCursorTextArea {
+    fn new() -> Self {
+        let initial_text = "🎯 Automatic Cursor Management Demo (NORMALMODE)\n\
+Welcome to the textarea cursor demo!\n\
+\n\
+This demo runs in NORMALMODE:\n\
+• Always editing (no insert/normal toggle)\n\
+• Cursor is always underscore _\n\
+\n\
+Navigation commands:\n\
+• hjkl or arrow keys: move cursor\n\
+• w/b/e/W/B/E: word movements\n\
+• 0/$: line start/end\n\
+• g/gG: first/last line\n\
+\n\
+Editing commands:\n\
+• x/X: delete characters\n\
+\n\
+Press ? for help, Ctrl+Q to quit.";
+
+        let mut textarea = TextAreaState::from_text(initial_text);
+        textarea.set_placeholder("Start typing...");
+
+        Self {
+            textarea,
+            has_unsaved_changes: false,
+            debug_message: "🎯 NORMALMODE Demo - always editing".to_string(),
+            command_buffer: String::new(),
+        }
+    }
+
+    fn handle_textarea_input(&mut self, key: KeyEvent) {
+        self.textarea.input(key);
+        self.has_unsaved_changes = true;
+    }
+
+    fn move_left(&mut self) {
+        self.textarea.move_left();
+        self.debug_message = "← left".to_string();
+    }
+    fn move_right(&mut self) {
+        self.textarea.move_right();
+        self.debug_message = "→ right".to_string();
+    }
+    fn move_up(&mut self) {
+        self.textarea.move_up();
+        self.debug_message = "↑ up".to_string();
+    }
+    fn move_down(&mut self) {
+        self.textarea.move_down();
+        self.debug_message = "↓ down".to_string();
+    }
+
+    fn move_word_next(&mut self) {
+        self.textarea.move_word_next();
+        self.debug_message = "w: next word".to_string();
+    }
+    fn move_word_prev(&mut self) {
+        self.textarea.move_word_prev();
+        self.debug_message = "b: previous word".to_string();
+    }
+    fn move_word_end(&mut self) {
+        self.textarea.move_word_end();
+        self.debug_message = "e: word end".to_string();
+    }
+    fn move_word_end_prev(&mut self) {
+        self.textarea.move_word_end_prev();
+        self.debug_message = "ge: previous word end".to_string();
+    }
+
+    fn move_line_start(&mut self) {
+        self.textarea.move_line_start();
+        self.debug_message = "0: line start".to_string();
+    }
+    fn move_line_end(&mut self) {
+        self.textarea.move_line_end();
+        self.debug_message = "$: line end".to_string();
+    }
+    fn move_first_line(&mut self) {
+        self.textarea.move_first_line();
+        self.debug_message = "gg: first line".to_string();
+    }
+    fn move_last_line(&mut self) {
+        self.textarea.move_last_line();
+        self.debug_message = "G: last line".to_string();
+    }
+
+    fn delete_char_forward(&mut self) {
+        if let Ok(_) = self.textarea.delete_forward() {
+            self.has_unsaved_changes = true;
+            self.debug_message = "x: deleted character".to_string();
+        }
+    }
+    fn delete_char_backward(&mut self) {
+        if let Ok(_) = self.textarea.delete_backward() {
+            self.has_unsaved_changes = true;
+            self.debug_message = "X: deleted character backward".to_string();
+        }
+    }
+
+    fn clear_command_buffer(&mut self) {
+        self.command_buffer.clear();
+    }
+    fn add_to_command_buffer(&mut self, ch: char) {
+        self.command_buffer.push(ch);
+    }
+    fn get_command_buffer(&self) -> &str {
+        &self.command_buffer
+    }
+    fn has_pending_command(&self) -> bool {
+        !self.command_buffer.is_empty()
+    }
+
+    fn debug_message(&self) -> &str {
+        &self.debug_message
+    }
+    fn set_debug_message(&mut self, msg: String) {
+        self.debug_message = msg;
+    }
+    fn has_unsaved_changes(&self) -> bool {
+        self.has_unsaved_changes
+    }
+    fn get_cursor_info(&self) -> String {
+        format!(
+            "Line {}, Col {}",
+            self.textarea.current_field() + 1,
+            self.textarea.cursor_position() + 1
+        )
+    }
+
+    // === BIG WORD MOVEMENTS ===
+
+    fn move_big_word_next(&mut self) {
+        self.textarea.move_big_word_next();
+        self.debug_message = "W: next WORD".to_string();
+    }
+
+    fn move_big_word_prev(&mut self) {
+        self.textarea.move_big_word_prev();
+        self.debug_message = "B: previous WORD".to_string();
+    }
+
+    fn move_big_word_end(&mut self) {
+        self.textarea.move_big_word_end();
+        self.debug_message = "E: WORD end".to_string();
+    }
+
+    fn move_big_word_end_prev(&mut self) {
+        self.textarea.move_big_word_end_prev();
+        self.debug_message = "gE: previous WORD end".to_string();
+    }
+}
+
+/// Handle key press in NORMALMODE (always editing, casual editor style)
+fn handle_key_press(
+    key_event: KeyEvent,
+    editor: &mut AutoCursorTextArea,
+) -> anyhow::Result<bool> {
+    let KeyEvent {
+        code: key,
+        modifiers,
+        ..
+    } = key_event;
+
+    // Quit
+    if (key == KeyCode::Char('q') && modifiers.contains(KeyModifiers::CONTROL))
+        || (key == KeyCode::Char('c') && modifiers.contains(KeyModifiers::CONTROL))
+        || key == KeyCode::F(10)
+    {
+        return Ok(false);
+    }
+
+    match (key, modifiers) {
+        // Movement
+        (KeyCode::Left, _) => editor.move_left(),
+        (KeyCode::Right, _) => editor.move_right(),
+        (KeyCode::Up, _) => editor.move_up(),
+        (KeyCode::Down, _) => editor.move_down(),
+
+        // Word movement (Ctrl+Arrows)
+        (KeyCode::Left, m) if m.contains(KeyModifiers::CONTROL) => editor.move_word_prev(),
+        (KeyCode::Right, m) if m.contains(KeyModifiers::CONTROL) => editor.move_word_next(),
+        (KeyCode::Right, m) if m.contains(KeyModifiers::CONTROL | KeyModifiers::SHIFT) => {
+            editor.move_word_end()
+        }
+
+        // Line/document movement
+        (KeyCode::Home, _) => editor.move_line_start(),
+        (KeyCode::End, _) => editor.move_line_end(),
+        (KeyCode::Home, m) if m.contains(KeyModifiers::CONTROL) => editor.move_first_line(),
+        (KeyCode::End, m) if m.contains(KeyModifiers::CONTROL) => editor.move_last_line(),
+
+        // Delete
+        (KeyCode::Delete, _) => editor.delete_char_forward(),
+        (KeyCode::Backspace, _) => editor.delete_char_backward(),
+
+        (KeyCode::F(1), _) => {
+            // Switch to indicator mode
+            editor.textarea.use_overflow_indicator('$');
+            editor.set_debug_message("Overflow: indicator '$' (wrap OFF)".to_string());
+        }
+        (KeyCode::F(2), _) => {
+            // Switch to wrap mode
+            editor.textarea.use_wrap();
+            editor.set_debug_message("Overflow: wrap ON".to_string());
+        }
+
+        (KeyCode::F(3), _) => {
+            editor.textarea.set_wrap_indent_cols(3);
+            editor.set_debug_message("Wrap indent: 3 columns".to_string());
+        }
+        (KeyCode::F(4), _) => {
+            editor.textarea.set_wrap_indent_cols(0);
+            editor.set_debug_message("Wrap indent: 0 columns".to_string());
+        }
+
+        // Debug/info
+        (KeyCode::Char('?'), _) => {
+            editor.set_debug_message(format!(
+                "{}, Mode: NORMALMODE (casual editor, underscore cursor)",
+                editor.get_cursor_info()
+            ));
+            editor.clear_command_buffer();
+        }
+
+        // Default: treat as text input
+        _ => editor.handle_textarea_input(key_event),
+    }
+
+    Ok(true)
+}
+
+fn run_app<B: Backend>(terminal: &mut Terminal<B>, mut editor: AutoCursorTextArea) -> io::Result<()> {
+    loop {
+        terminal.draw(|f| ui(f, &mut editor))?;
+
+        if let Event::Key(key) = event::read()? {
+            match handle_key_press(key, &mut editor) {
+                Ok(should_continue) => {
+                    if !should_continue {
+                        break;
+                    }
+                }
+                Err(e) => {
+                    editor.set_debug_message(format!("Error: {e}"));
+                }
+            }
+        }
+    }
+    Ok(())
+}
+
+fn ui(f: &mut Frame, editor: &mut AutoCursorTextArea) {
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Min(8), Constraint::Length(8)])
+        .split(f.area());
+
+    render_textarea(f, chunks[0], editor);
+    render_status_and_help(f, chunks[1], editor);
+}
+
+fn render_textarea(f: &mut Frame, area: ratatui::layout::Rect, editor: &mut AutoCursorTextArea) {
+    let block = Block::default()
+        .borders(Borders::ALL)
+        .title("🎯 Textarea with NORMALMODE (always editing)");
+
+    let textarea_widget = TextArea::default().block(block.clone());
+    f.render_stateful_widget(textarea_widget, area, &mut editor.textarea);
+
+    let (cx, cy) = editor.textarea.cursor(area, Some(&block));
+    f.set_cursor_position((cx, cy));
+}
+
+fn render_status_and_help(f: &mut Frame, area: ratatui::layout::Rect, editor: &AutoCursorTextArea) {
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Length(3), Constraint::Length(5)])
+        .split(area);
+
+    let status_text = if editor.has_pending_command() {
+        format!(
+            "-- NORMALMODE (underscore cursor) -- {} [{}]",
+            editor.debug_message(),
+            editor.get_command_buffer()
+        )
+    } else if editor.has_unsaved_changes() {
+        format!(
+            "-- NORMALMODE (underscore cursor) -- [Modified] {} | {}",
+            editor.debug_message(),
+            editor.get_cursor_info()
+        )
+    } else {
+        format!(
+            "-- NORMALMODE (underscore cursor) -- {} | {}",
+            editor.debug_message(),
+            editor.get_cursor_info()
+        )
+    };
+
+    let status = Paragraph::new(Line::from(Span::raw(status_text)))
+        .block(Block::default().borders(Borders::ALL).title("🎯 Cursor Status"));
+
+    f.render_widget(status, chunks[0]);
+
+    let help_text = "🎯 NORMALMODE (always editing)\n\
+hjkl/arrows=move, w/b/e=words, W/B/E=WORDS, 0/$=line, g/G=first/last\n\
+x/X=delete, typing inserts text\n\
+?=info, Ctrl+Q=quit";
+
+    let help = Paragraph::new(help_text)
+        .block(Block::default().borders(Borders::ALL).title("🚀 Help"))
+        .style(Style::default().fg(Color::Gray));
+
+    f.render_widget(help, chunks[1]);
+}
+
+fn main() -> Result<(), Box<dyn std::error::Error>> {
+    println!("🎯 Canvas Textarea Cursor Auto Demo (NORMALMODE)");
+    println!("✅ cursor-style feature: ENABLED");
+    println!("✅ textarea feature: ENABLED");
+    println!("✅ textmode-normal feature: ENABLED");
+    println!("🚀 Always editing, underscore cursor active");
+    println!();
+
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    let editor = AutoCursorTextArea::new();
+
+    let res = run_app(&mut terminal, editor);
+
+    CursorManager::reset()?;
+
+    disable_raw_mode()?;
+    execute!(terminal.backend_mut(), LeaveAlternateScreen, DisableMouseCapture)?;
+    terminal.show_cursor()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
+    }
+
+    println!("🎯 Cursor automatically reset to default!");
+    Ok(())
+}
--- a/canvas/examples/textarea_syntax.rs
+++ b/canvas/examples/textarea_syntax.rs
@@ -0,0 +1,413 @@
+// examples/textarea_syntax.rs
+//! Demonstrates syntax highlighting with the textarea widget
+//!
+//! This example REQUIRES the `syntect` feature to compile.
+//!
+//! Run with:
+//! cargo run --example textarea_syntax --features "gui,cursor-style,textarea,syntect,textmode-normal"
+
+#[cfg(not(feature = "syntect"))]
+compile_error!(
+    "This example requires the 'syntect' feature. \
+     Run with: cargo run --example textarea_syntax --features \"gui,cursor-style,textarea,syntect,textmode-normal\""
+);
+
+use std::io;
+use crossterm::{
+    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEvent, KeyModifiers},
+    execute,
+    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    layout::{Constraint, Direction, Layout},
+    style::{Color, Style},
+    text::{Line, Span},
+    widgets::{Block, Borders, Paragraph},
+    Frame, Terminal,
+};
+
+use canvas::{
+    canvas::CursorManager,
+    textarea::highlight::{TextAreaSyntax, TextAreaSyntaxState},
+};
+
+/// Syntax highlighting TextArea demo
+struct SyntaxTextAreaDemo {
+    textarea: TextAreaSyntaxState,
+    has_unsaved_changes: bool,
+    debug_message: String,
+    current_language: String,
+    current_theme: String,
+}
+
+impl SyntaxTextAreaDemo {
+    fn new() -> Self {
+        let initial_text = r#"// 🎯 Multi-language Syntax Highlighting Demo
+// ==========================
+// Rust
+// ==========================
+fn main() {
+    println!("Hello, Rust 🦀");
+    let nums = vec![1, 2, 3, 4, 5];
+    for n in nums {
+        println!("n = {}", n);
+    }
+}
+
+// ==========================
+// Python
+// ==========================
+# 🐍 Python example
+def fib(n):
+    if n <= 1:
+        return n
+    return fib(n-1) + fib(n-2)
+
+print([fib(i) for i in range(6)])
+
+# ==========================
+// JavaScript
+// ==========================
+ // 🟨 JavaScript example
+function greet(name) {
+    console.log(`Hello, ${name}!`);
+}
+greet("World");
+
+// ==========================
+// Scheme
+// ==========================
+;; 🎭 Scheme example
+(define (square x) (* x x))
+(display (square 5))
+(newline)
+"#;
+
+        let mut textarea = TextAreaSyntaxState::from_text(initial_text);
+        textarea.set_placeholder("Start typing code...");
+
+        // Pick a colorful default theme
+        let default_theme = "base16-ocean.dark";
+        let _ = textarea.set_syntax_theme(default_theme);
+        // Default to Rust syntax
+        let _ = textarea.set_syntax_by_extension("rs");
+
+        Self {
+            textarea,
+            has_unsaved_changes: false,
+            debug_message: format!("🎯 Syntax highlighting enabled - Rust ({})", default_theme),
+            current_language: "Rust".to_string(),
+            current_theme: default_theme.to_string(),
+        }
+    }
+
+    fn handle_textarea_input(&mut self, key: KeyEvent) {
+        self.textarea.input(key);
+        self.has_unsaved_changes = true;
+    }
+
+    fn switch_to_rust(&mut self) {
+        let _ = self.textarea.set_syntax_by_extension("rs");
+        self.current_language = "Rust".to_string();
+        self.debug_message = format!("🦀 Switched to Rust syntax ({})", self.current_theme);
+        
+        let rust_code = r#"// Rust example
+fn fibonacci(n: u32) -> u32 {
+    match n {
+        0 => 0,
+        1 => 1,
+        _ => fibonacci(n - 1) + fibonacci(n - 2),
+    }
+}
+
+fn main() {
+    for i in 0..10 {
+        println!("fib({}) = {}", i, fibonacci(i));
+    }
+}"#;
+        self.textarea.set_text(rust_code);
+        self.has_unsaved_changes = false;
+    }
+
+    fn switch_to_python(&mut self) {
+        let _ = self.textarea.set_syntax_by_extension("py");
+        self.current_language = "Python".to_string();
+        self.debug_message = format!("🐍 Switched to Python syntax ({})", self.current_theme);
+        
+        let python_code = r#"# Python example
+def fibonacci(n):
+    if n <= 1:
+        return n
+    return fibonacci(n - 1) + fibonacci(n - 2)
+
+def main():
+    for i in range(10):
+        print(f"fib({i}) = {fibonacci(i)}")
+
+if __name__ == "__main__":
+    main()"#;
+        self.textarea.set_text(python_code);
+        self.has_unsaved_changes = false;
+    }
+
+    fn switch_to_javascript(&mut self) {
+        let _ = self.textarea.set_syntax_by_extension("js");
+        self.current_language = "JavaScript".to_string();
+        self.debug_message = format!("🟨 Switched to JavaScript syntax ({})", self.current_theme);
+        
+        let js_code = r#"// JavaScript example
+function fibonacci(n) {
+    if (n <= 1) return n;
+    return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+function main() {
+    for (let i = 0; i < 10; i++) {
+        console.log(`fib(${i}) = ${fibonacci(i)}`);
+    }
+}
+
+main();"#;
+        self.textarea.set_text(js_code);
+        self.has_unsaved_changes = false;
+    }
+
+    fn switch_to_scheme(&mut self) {
+        let _ = self.textarea.set_syntax_by_name("Scheme");
+        self.current_language = "Scheme".to_string();
+        self.debug_message = format!("🎭 Switched to Scheme syntax ({})", self.current_theme);
+        
+        let scheme_code = r#";; Scheme example
+(define (fibonacci n)
+  (cond ((= n 0) 0)
+        ((= n 1) 1)
+        (else (+ (fibonacci (- n 1))
+                 (fibonacci (- n 2))))))
+
+(define (main)
+  (do ((i 0 (+ i 1)))
+      ((= i 10))
+    (display (format "fib(~a) = ~a~n" i (fibonacci i)))))
+
+(main)"#;
+        self.textarea.set_text(scheme_code);
+        self.has_unsaved_changes = false;
+    }
+
+    fn cycle_theme(&mut self) {
+        let themes = [
+            "InspiredGitHub",
+            "base16-ocean.dark",
+            "base16-eighties.dark",
+            "Solarized (dark)",
+            "Monokai Extended",
+        ];
+        let current_pos = themes.iter().position(|t| *t == self.current_theme);
+        let next_pos = match current_pos {
+            Some(p) => (p + 1) % themes.len(),
+            None => 0,
+        };
+        let next_theme = themes[next_pos];
+        let _ = self.textarea.set_syntax_theme(next_theme);
+        self.current_theme = next_theme.to_string();
+        self.debug_message = format!("🎨 Theme switched to {}", next_theme);
+    }
+
+    fn get_cursor_info(&self) -> String {
+        format!(
+            "Line {}, Col {} | Lang: {} | Theme: {}",
+            self.textarea.current_field() + 1,
+            self.textarea.cursor_position() + 1,
+            self.current_language,
+            self.current_theme
+        )
+    }
+
+    fn debug_message(&self) -> &str {
+        &self.debug_message
+    }
+
+    fn set_debug_message(&mut self, msg: String) {
+        self.debug_message = msg;
+    }
+
+    fn has_unsaved_changes(&self) -> bool {
+        self.has_unsaved_changes
+    }
+}
+
+fn handle_key_press(
+    key_event: KeyEvent,
+    editor: &mut SyntaxTextAreaDemo,
+) -> anyhow::Result<bool> {
+    let KeyEvent {
+        code: key,
+        modifiers,
+        ..
+    } = key_event;
+
+    // Quit
+    if (key == KeyCode::Char('q') && modifiers.contains(KeyModifiers::CONTROL))
+        || (key == KeyCode::Char('c') && modifiers.contains(KeyModifiers::CONTROL))
+        || key == KeyCode::F(10)
+    {
+        return Ok(false);
+    }
+
+    match (key, modifiers) {
+        // Language switching
+        (KeyCode::F(5), _) => editor.switch_to_rust(),
+        (KeyCode::F(6), _) => editor.switch_to_python(),
+        (KeyCode::F(7), _) => editor.switch_to_javascript(),
+        (KeyCode::F(8), _) => editor.switch_to_scheme(),
+
+        // Theme cycling
+        (KeyCode::F(9), _) => editor.cycle_theme(),
+
+        // Overflow modes
+        (KeyCode::F(1), _) => {
+            editor.textarea.use_overflow_indicator('$');
+            editor.set_debug_message(format!("Overflow: indicator '$' (wrap OFF) | Theme: {}", editor.current_theme));
+        }
+        (KeyCode::F(2), _) => {
+            editor.textarea.use_wrap();
+            editor.set_debug_message(format!("Overflow: wrap ON | Theme: {}", editor.current_theme));
+        }
+
+        // Wrap indent
+        (KeyCode::F(3), _) => {
+            editor.textarea.set_wrap_indent_cols(4);
+            editor.set_debug_message(format!("Wrap indent: 4 columns | Theme: {}", editor.current_theme));
+        }
+        (KeyCode::F(4), _) => {
+            editor.textarea.set_wrap_indent_cols(0);
+            editor.set_debug_message(format!("Wrap indent: 0 columns | Theme: {}", editor.current_theme));
+        }
+
+        // Info
+        (KeyCode::Char('?'), _) => {
+            editor.set_debug_message(format!(
+                "{} | Syntax highlighting enabled",
+                editor.get_cursor_info()
+            ));
+        }
+
+        // Default: pass to textarea
+        _ => editor.handle_textarea_input(key_event),
+    }
+
+    Ok(true)
+}
+
+fn run_app<B: Backend>(terminal: &mut Terminal<B>, mut editor: SyntaxTextAreaDemo) -> io::Result<()> {
+    loop {
+        terminal.draw(|f| ui(f, &mut editor))?;
+
+        if let Event::Key(key) = event::read()? {
+            match handle_key_press(key, &mut editor) {
+                Ok(should_continue) => {
+                    if !should_continue {
+                        break;
+                    }
+                }
+                Err(e) => {
+                    editor.set_debug_message(format!("Error: {e}"));
+                }
+            }
+        }
+    }
+    Ok(())
+}
+
+fn ui(f: &mut Frame, editor: &mut SyntaxTextAreaDemo) {
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Min(8), Constraint::Length(8)])
+        .split(f.area());
+
+    render_textarea(f, chunks[0], editor);
+    render_status_and_help(f, chunks[1], editor);
+}
+
+fn render_textarea(f: &mut Frame, area: ratatui::layout::Rect, editor: &mut SyntaxTextAreaDemo) {
+    let block = Block::default()
+        .borders(Borders::ALL)
+        .title("🎨 Syntax Highlighted Code Editor");
+
+    let textarea_widget = TextAreaSyntax::default().block(block.clone());
+    f.render_stateful_widget(textarea_widget, area, &mut editor.textarea);
+
+    // Reuse cursor calculation from the wrapped textarea
+    let (cx, cy) = editor.textarea.cursor(area, Some(&block));
+    f.set_cursor_position((cx, cy));
+}
+
+fn render_status_and_help(f: &mut Frame, area: ratatui::layout::Rect, editor: &SyntaxTextAreaDemo) {
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Length(3), Constraint::Length(5)])
+        .split(area);
+
+    let status_text = if editor.has_unsaved_changes() {
+        format!(
+            "-- SYNTAX MODE (highlighting enabled) -- [Modified] {} | {}",
+            editor.debug_message(),
+            editor.get_cursor_info()
+        )
+    } else {
+        format!(
+            "-- SYNTAX MODE (highlighting enabled) -- {} | {}",
+            editor.debug_message(),
+            editor.get_cursor_info()
+        )
+    };
+
+    let status = Paragraph::new(Line::from(Span::raw(status_text)))
+        .block(Block::default().borders(Borders::ALL).title("🎨 Syntax Status"));
+
+    f.render_widget(status, chunks[0]);
+
+    let help_text = "🎨 SYNTAX HIGHLIGHTING DEMO\n\
+F5=Rust, F6=Python, F7=JavaScript, F8=Scheme\n\
+F1/F2=overflow modes, F3/F4=wrap indent\n\
+F9=cycle themes, ?=info, Ctrl+Q=quit";
+
+    let help = Paragraph::new(help_text)
+        .block(Block::default().borders(Borders::ALL).title("🚀 Help"))
+        .style(Style::default().fg(Color::Cyan));
+
+    f.render_widget(help, chunks[1]);
+}
+
+fn main() -> Result<(), Box<dyn std::error::Error>> {
+    println!("🎨 Canvas Textarea Syntax Highlighting Demo");
+    println!("✅ cursor-style feature: ENABLED");
+    println!("✅ textarea feature: ENABLED");
+    println!("✅ syntect feature: ENABLED");
+    println!("🎨 Syntax highlighting active");
+    println!();
+
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    let editor = SyntaxTextAreaDemo::new();
+
+    let res = run_app(&mut terminal, editor);
+
+    CursorManager::reset()?;
+
+    disable_raw_mode()?;
+    execute!(terminal.backend_mut(), LeaveAlternateScreen, DisableMouseCapture)?;
+    terminal.show_cursor()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
+    }
+
+    println!("🎨 Syntax highlighting demo complete!");
+    Ok(())
+}
--- a/canvas/examples/textarea_vim.rs
+++ b/canvas/examples/textarea_vim.rs
@@ -0,0 +1,652 @@
+// examples/textarea_vim.rs
+//! Demonstrates automatic cursor management with the textarea widget
+//!
+//! This example REQUIRES the `cursor-style` and `textarea` features to compile.
+//!
+//! Run with:
+//! cargo run --example canvas_textarea_cursor_auto --features "gui,cursor-style,textarea"
+
+// REQUIRE cursor-style and textarea features
+#[cfg(not(feature = "cursor-style"))]
+compile_error!(
+    "This example requires the 'cursor-style' feature. \
+     Run with: cargo run --example canvas_textarea_cursor_auto --features \"gui,cursor-style,textarea\""
+);
+
+#[cfg(not(feature = "textarea"))]
+compile_error!(
+    "This example requires the 'textarea' feature. \
+     Run with: cargo run --example canvas_textarea_cursor_auto --features \"gui,cursor-style,textarea\""
+);
+
+use std::io;
+use crossterm::{
+    event::{
+        self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEvent, KeyModifiers,
+    },
+    execute,
+    terminal::{
+        disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen,
+    },
+};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    layout::{Constraint, Direction, Layout},
+    style::{Color, Style},
+    text::{Line, Span},
+    widgets::{Block, Borders, Paragraph},
+    Frame, Terminal,
+};
+
+use canvas::{
+    canvas::{
+        modes::AppMode,
+        CursorManager, // This import only exists when cursor-style feature is enabled
+    },
+    textarea::{TextArea, TextAreaState},
+};
+
+/// Enhanced TextArea that demonstrates automatic cursor management
+/// Now uses direct FormEditor method calls via Deref!
+struct AutoCursorTextArea {
+    textarea: TextAreaState,
+    has_unsaved_changes: bool,
+    debug_message: String,
+    command_buffer: String,
+}
+
+impl AutoCursorTextArea {
+    fn new() -> Self {
+        let initial_text = "🎯 Automatic Cursor Management Demo\n\
+Welcome to the textarea cursor demo!\n\
+\n\
+Try different modes:\n\
+• Normal mode: Block cursor █\n\
+• Insert mode: Bar cursor |\n\
+\n\
+Navigation commands:\n\
+• hjkl or arrow keys: move cursor\n\
+• i/a/A/o/O: enter insert mode\n\
+• w/b/e/W/B/E: word movements\n\
+• Esc: return to normal mode\n\
+\n\
+Watch how the terminal cursor changes automatically!\n\
+This text can be edited when in insert mode.\n\
+\n\
+Press ? for help, F1/F2 for manual cursor control demo.";
+
+        let mut textarea = TextAreaState::from_text(initial_text);
+        textarea.set_placeholder("Start typing...");
+        textarea.use_wrap();
+        
+        Self {
+            textarea,
+            has_unsaved_changes: false,
+            debug_message: "🎯 Automatic Cursor Demo - cursor-style feature enabled!".to_string(),
+            command_buffer: String::new(),
+        }
+    }
+
+    // === MODE TRANSITIONS WITH AUTOMATIC CURSOR MANAGEMENT ===
+
+    fn enter_insert_mode(&mut self) -> std::io::Result<()> {
+        self.textarea.enter_edit_mode(); // 🎯 Direct FormEditor method call via Deref!
+        CursorManager::update_for_mode(AppMode::Edit)?; // 🎯 Automatic: cursor becomes bar |
+        self.debug_message = "✏️  INSERT MODE - Cursor: Steady Bar |".to_string();
+        Ok(())
+    }
+
+    fn enter_append_mode(&mut self) -> std::io::Result<()> {
+        self.textarea.enter_append_mode(); // 🎯 Direct FormEditor method call!
+        CursorManager::update_for_mode(AppMode::Edit)?;
+        self.debug_message = "✏️  INSERT (append) - Cursor: Steady Bar |".to_string();
+        Ok(())
+    }
+
+    fn exit_to_normal_mode(&mut self) -> std::io::Result<()> {
+        self.textarea.exit_edit_mode(); // 🎯 Direct FormEditor method call!
+        CursorManager::update_for_mode(AppMode::ReadOnly)?; // 🎯 Automatic: cursor becomes steady block
+        self.debug_message = "🔒 NORMAL MODE - Cursor: Steady Block █".to_string();
+        Ok(())
+    }
+
+    // === MANUAL CURSOR OVERRIDE DEMONSTRATION ===
+
+    fn demo_manual_cursor_control(&mut self) -> std::io::Result<()> {
+        // Users can still manually control cursor if needed
+        CursorManager::update_for_mode(AppMode::Command)?;
+        self.debug_message = "🔧 Manual override: Command cursor _".to_string();
+        Ok(())
+    }
+
+    fn restore_automatic_cursor(&mut self) -> std::io::Result<()> {
+        // Restore automatic cursor based on current mode
+        CursorManager::update_for_mode(self.textarea.mode())?; // 🎯 Direct method call!
+        self.debug_message = "🎯 Restored automatic cursor management".to_string();
+        Ok(())
+    }
+
+    // === TEXTAREA OPERATIONS ===
+
+    fn handle_textarea_input(&mut self, key: KeyEvent) {
+        self.textarea.input(key);
+        self.has_unsaved_changes = true;
+    }
+
+    // === MOVEMENT OPERATIONS (using direct FormEditor methods!) ===
+
+    fn move_left(&mut self) {
+        self.textarea.move_left(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("← left");
+    }
+
+    fn move_right(&mut self) {
+        self.textarea.move_right(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("→ right");
+    }
+
+    fn move_up(&mut self) {
+        self.textarea.move_up(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("↑ up");
+    }
+
+    fn move_down(&mut self) {
+        self.textarea.move_down(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("↓ down");
+    }
+
+    fn move_word_next(&mut self) {
+        self.textarea.move_word_next(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("w: next word");
+    }
+
+    fn move_word_prev(&mut self) {
+        self.textarea.move_word_prev(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("b: previous word");
+    }
+
+    fn move_word_end(&mut self) {
+        self.textarea.move_word_end(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("e: word end");
+    }
+
+    fn move_word_end_prev(&mut self) {
+        self.textarea.move_word_end_prev(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("ge: previous word end");
+    }
+
+    fn move_line_start(&mut self) {
+        self.textarea.move_line_start(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("0: line start");
+    }
+
+    fn move_line_end(&mut self) {
+        self.textarea.move_line_end(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("$: line end");
+    }
+
+    fn move_first_line(&mut self) {
+        self.textarea.move_first_line(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("gg: first line");
+    }
+
+    fn move_last_line(&mut self) {
+        self.textarea.move_last_line(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("G: last line");
+    }
+
+    // === BIG WORD MOVEMENTS ===
+
+    fn move_big_word_next(&mut self) {
+        self.textarea.move_big_word_next(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("W: next WORD");
+    }
+
+    fn move_big_word_prev(&mut self) {
+        self.textarea.move_big_word_prev(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("B: previous WORD");
+    }
+
+    fn move_big_word_end(&mut self) {
+        self.textarea.move_big_word_end(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("E: WORD end");
+    }
+
+    fn move_big_word_end_prev(&mut self) {
+        self.textarea.move_big_word_end_prev(); // 🎯 Direct FormEditor method call!
+        self.update_debug_for_movement("gE: previous WORD end");
+    }
+
+    fn update_debug_for_movement(&mut self, action: &str) {
+        self.debug_message = action.to_string();
+    }
+
+    // === DELETE OPERATIONS ===
+
+    fn delete_char_forward(&mut self) {
+        if let Ok(_) = self.textarea.delete_forward() { // 🎯 Direct FormEditor method call!
+            self.has_unsaved_changes = true;
+            self.debug_message = "x: deleted character".to_string();
+        }
+    }
+
+    fn delete_char_backward(&mut self) {
+        if let Ok(_) = self.textarea.delete_backward() { // 🎯 Direct FormEditor method call!
+            self.has_unsaved_changes = true;
+            self.debug_message = "X: deleted character backward".to_string();
+        }
+    }
+
+    // === VIM-STYLE EDITING ===
+
+    fn open_line_below(&mut self) -> anyhow::Result<()> {
+        let result = self.textarea.open_line_below(); // 🎯 Textarea-specific override!
+        if result.is_ok() {
+            CursorManager::update_for_mode(AppMode::Edit)?;
+            self.debug_message = "✏️  INSERT (open line below) - Cursor: Steady Bar |".to_string();
+            self.has_unsaved_changes = true;
+        }
+        result
+    }
+
+    fn open_line_above(&mut self) -> anyhow::Result<()> {
+        let result = self.textarea.open_line_above(); // 🎯 Textarea-specific override!
+        if result.is_ok() {
+            CursorManager::update_for_mode(AppMode::Edit)?;
+            self.debug_message = "✏️  INSERT (open line above) - Cursor: Steady Bar |".to_string();
+            self.has_unsaved_changes = true;
+        }
+        result
+    }
+
+    // === COMMAND BUFFER HANDLING ===
+
+    fn clear_command_buffer(&mut self) {
+        self.command_buffer.clear();
+    }
+
+    fn add_to_command_buffer(&mut self, ch: char) {
+        self.command_buffer.push(ch);
+    }
+
+    fn get_command_buffer(&self) -> &str {
+        &self.command_buffer
+    }
+
+    fn has_pending_command(&self) -> bool {
+        !self.command_buffer.is_empty()
+    }
+
+    // === GETTERS ===
+
+    fn mode(&self) -> AppMode {
+        self.textarea.mode() // 🎯 Direct FormEditor method call!
+    }
+
+    fn debug_message(&self) -> &str {
+        &self.debug_message
+    }
+
+    fn has_unsaved_changes(&self) -> bool {
+        self.has_unsaved_changes
+    }
+
+    fn set_debug_message(&mut self, msg: String) {
+        self.debug_message = msg;
+    }
+
+    fn get_cursor_info(&self) -> String {
+        format!(
+            "Line {}, Col {}",
+            self.textarea.current_field() + 1, // 🎯 Direct FormEditor method call!
+            self.textarea.cursor_position() + 1 // 🎯 Direct FormEditor method call!
+        )
+    }
+}
+
+/// Handle key press with automatic cursor management
+fn handle_key_press(
+    key_event: KeyEvent,
+    editor: &mut AutoCursorTextArea,
+) -> anyhow::Result<bool> {
+    let KeyEvent { code: key, modifiers, .. } = key_event;
+    let mode = editor.mode();
+
+    // Quit handling
+    if (key == KeyCode::Char('q') && modifiers.contains(KeyModifiers::CONTROL))
+        || (key == KeyCode::Char('c') && modifiers.contains(KeyModifiers::CONTROL))
+        || key == KeyCode::F(10)
+    {
+        return Ok(false);
+    }
+
+    match (mode, key, modifiers) {
+        // === MODE TRANSITIONS WITH AUTOMATIC CURSOR MANAGEMENT ===
+        (AppMode::ReadOnly, KeyCode::Char('i'), _) => {
+            editor.enter_insert_mode()?;
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('a'), _) => {
+            editor.enter_append_mode()?;
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('A'), _) => {
+            editor.move_line_end();
+            editor.enter_insert_mode()?;
+            editor.clear_command_buffer();
+        }
+
+        // Vim o/O commands
+        (AppMode::ReadOnly, KeyCode::Char('o'), _) => {
+            if let Err(e) = editor.open_line_below() {
+                editor.set_debug_message(format!("Error opening line below: {e}"));
+            }
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('O'), _) => {
+            if let Err(e) = editor.open_line_above() {
+                editor.set_debug_message(format!("Error opening line above: {e}"));
+            }
+            editor.clear_command_buffer();
+        }
+
+        // Escape: Exit any mode back to normal
+        (AppMode::Edit, KeyCode::Esc, _) => {
+            editor.exit_to_normal_mode()?;
+        }
+
+        // === INSERT MODE: Pass to textarea ===
+        (AppMode::Edit, _, _) => {
+            editor.handle_textarea_input(key_event);
+        }
+
+        // === CURSOR MANAGEMENT DEMONSTRATION ===
+        (AppMode::ReadOnly, KeyCode::F(1), _) => {
+            editor.demo_manual_cursor_control()?;
+        }
+        (AppMode::ReadOnly, KeyCode::F(2), _) => {
+            editor.restore_automatic_cursor()?;
+        }
+
+        // === MOVEMENT: VIM-STYLE NAVIGATION (Normal mode) ===
+        (AppMode::ReadOnly, KeyCode::Char('h'), _)
+        | (AppMode::ReadOnly, KeyCode::Left, _) => {
+            editor.move_left();
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('l'), _)
+        | (AppMode::ReadOnly, KeyCode::Right, _) => {
+            editor.move_right();
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('j'), _)
+        | (AppMode::ReadOnly, KeyCode::Down, _) => {
+            editor.move_down();
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('k'), _)
+        | (AppMode::ReadOnly, KeyCode::Up, _) => {
+            editor.move_up();
+            editor.clear_command_buffer();
+        }
+
+        // Word movement
+        (AppMode::ReadOnly, KeyCode::Char('w'), _) => {
+            editor.move_word_next();
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('b'), _) => {
+            editor.move_word_prev();
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('e'), _) => {
+            if editor.get_command_buffer() == "g" {
+                editor.move_word_end_prev();
+                editor.clear_command_buffer();
+            } else {
+                editor.move_word_end();
+                editor.clear_command_buffer();
+            }
+        }
+
+        // Big word movement (vim W/B/E commands)
+        (AppMode::ReadOnly, KeyCode::Char('W'), _) => {
+            editor.move_big_word_next();
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('B'), _) => {
+            editor.move_big_word_prev();
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('E'), _) => {
+            if editor.get_command_buffer() == "g" {
+                editor.move_big_word_end_prev();
+                editor.clear_command_buffer();
+            } else {
+                editor.move_big_word_end();
+                editor.clear_command_buffer();
+            }
+        }
+
+        // Line movement
+        (AppMode::ReadOnly, KeyCode::Char('0'), _)
+        | (AppMode::ReadOnly, KeyCode::Home, _) => {
+            editor.move_line_start();
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('$'), _)
+        | (AppMode::ReadOnly, KeyCode::End, _) => {
+            editor.move_line_end();
+            editor.clear_command_buffer();
+        }
+
+        // Document movement with command buffer
+        (AppMode::ReadOnly, KeyCode::Char('g'), _) => {
+            if editor.get_command_buffer() == "g" {
+                editor.move_first_line();
+                editor.clear_command_buffer();
+            } else {
+                editor.clear_command_buffer();
+                editor.add_to_command_buffer('g');
+                editor.set_debug_message("g".to_string());
+            }
+        }
+        (AppMode::ReadOnly, KeyCode::Char('G'), _) => {
+            editor.move_last_line();
+            editor.clear_command_buffer();
+        }
+
+        // === DELETE OPERATIONS (Normal mode) ===
+        (AppMode::ReadOnly, KeyCode::Char('x'), _) => {
+            editor.delete_char_forward();
+            editor.clear_command_buffer();
+        }
+        (AppMode::ReadOnly, KeyCode::Char('X'), _) => {
+            editor.delete_char_backward();
+            editor.clear_command_buffer();
+        }
+
+        // === DEBUG/INFO COMMANDS ===
+        (AppMode::ReadOnly, KeyCode::Char('?'), _) => {
+            editor.set_debug_message(format!(
+                "{}, Mode: {:?} - Cursor managed automatically!",
+                editor.get_cursor_info(),
+                mode
+            ));
+            editor.clear_command_buffer();
+        }
+
+        _ => {
+            if editor.has_pending_command() {
+                editor.clear_command_buffer();
+                editor.set_debug_message("Invalid command sequence".to_string());
+            } else {
+                editor.set_debug_message(format!(
+                    "Unhandled: {key:?} + {modifiers:?} in {mode:?} mode"
+                ));
+            }
+        }
+    }
+
+    Ok(true)
+}
+
+fn run_app<B: Backend>(
+    terminal: &mut Terminal<B>,
+    mut editor: AutoCursorTextArea,
+) -> io::Result<()> {
+    loop {
+        terminal.draw(|f| ui(f, &mut editor))?;
+
+        if let Event::Key(key) = event::read()? {
+            match handle_key_press(key, &mut editor) {
+                Ok(should_continue) => {
+                    if !should_continue {
+                        break;
+                    }
+                }
+                Err(e) => {
+                    editor.set_debug_message(format!("Error: {e}"));
+                }
+            }
+        }
+    }
+
+    Ok(())
+}
+
+fn ui(f: &mut Frame, editor: &mut AutoCursorTextArea) {
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Min(8), Constraint::Length(8)])
+        .split(f.area());
+
+    render_textarea(f, chunks[0], editor);
+    render_status_and_help(f, chunks[1], editor);
+}
+
+fn render_textarea(
+    f: &mut Frame,
+    area: ratatui::layout::Rect,
+    editor: &mut AutoCursorTextArea,
+) {
+    let block = Block::default()
+        .borders(Borders::ALL)
+        .title("🎯 Textarea with Automatic Cursor Management");
+
+    let textarea_widget = TextArea::default().block(block.clone());
+
+    f.render_stateful_widget(textarea_widget, area, &mut editor.textarea);
+
+    // Set cursor position for terminal cursor
+    // Always show cursor - CursorManager handles the style (block/bar/blinking)
+    let (cx, cy) = editor.textarea.cursor(area, Some(&block));
+    f.set_cursor_position((cx, cy));
+}
+
+fn render_status_and_help(
+    f: &mut Frame,
+    area: ratatui::layout::Rect,
+    editor: &AutoCursorTextArea,
+) {
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Length(3), Constraint::Length(5)])
+        .split(area);
+
+    // Status bar with cursor information
+    let mode_text = match editor.mode() {
+        AppMode::Edit => "INSERT | (bar cursor)",
+        AppMode::ReadOnly => "NORMAL █ (block cursor)",
+        AppMode::Highlight => "VISUAL █ (blinking block)",
+        _ => "NORMAL █ (block cursor)",
+    };
+
+    let status_text = if editor.has_pending_command() {
+        format!("-- {} -- {} [{}]", mode_text, editor.debug_message(), editor.get_command_buffer())
+    } else if editor.has_unsaved_changes() {
+        format!("-- {} -- [Modified] {} | {}", mode_text, editor.debug_message(), editor.get_cursor_info())
+    } else {
+        format!("-- {} -- {} | {}", mode_text, editor.debug_message(), editor.get_cursor_info())
+    };
+
+    let status = Paragraph::new(Line::from(Span::raw(status_text)))
+        .block(Block::default().borders(Borders::ALL).title("🎯 Automatic Cursor Status"));
+
+    f.render_widget(status, chunks[0]);
+
+    // Help text
+    let help_text = match editor.mode() {
+        AppMode::ReadOnly => {
+            if editor.has_pending_command() {
+                match editor.get_command_buffer() {
+                    "g" => "Press 'g' again for first line, or any other key to cancel",
+                    _ => "Pending command... (Esc to cancel)"
+                }
+            } else {
+                "🎯 CURSOR-STYLE DEMO: Normal █ | Insert | \n\
+                Normal: hjkl/arrows=move, w/b/e=words, W/B/E=WORDS, 0/$=line, g/G=first/last\n\
+                i/a/A/o/O=insert, x/X=delete, ?=info\n\
+                F1=demo manual cursor, F2=restore automatic, Ctrl+Q=quit"
+            }
+        }
+        AppMode::Edit => {
+            "🎯 INSERT MODE - Cursor: | (bar)\n\
+            Type to edit text, arrows=move, Enter=new line\n\
+            Esc=normal mode"
+        }
+        AppMode::Highlight => {
+            "🎯 VISUAL MODE - Cursor: █ (blinking block)\n\
+            hjkl/arrows=extend selection\n\
+            Esc=normal mode"
+        }
+        _ => "🎯 Watch the cursor change automatically!"
+    };
+
+    let help = Paragraph::new(help_text)
+        .block(Block::default().borders(Borders::ALL).title("🚀 Automatic Cursor Management"))
+        .style(Style::default().fg(Color::Gray));
+
+    f.render_widget(help, chunks[1]);
+}
+
+fn main() -> Result<(), Box<dyn std::error::Error>> {
+    // Print feature status
+    println!("🎯 Canvas Textarea Cursor Auto Demo");
+    println!("✅ cursor-style feature: ENABLED");
+    println!("✅ textarea feature: ENABLED");
+    println!("🚀 Automatic cursor management: ACTIVE");
+    println!("📖 Watch your terminal cursor change based on mode!");
+    println!();
+
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    let mut editor = AutoCursorTextArea::new();
+
+    // Initialize with normal mode - library automatically sets block cursor
+    editor.exit_to_normal_mode()?;
+
+    let res = run_app(&mut terminal, editor);
+
+    // Reset cursor on exit
+    CursorManager::reset()?;
+
+    disable_raw_mode()?;
+    execute!(
+        terminal.backend_mut(),
+        LeaveAlternateScreen,
+        DisableMouseCapture
+    )?;
+    terminal.show_cursor()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
+    }
+
+    println!("🎯 Cursor automatically reset to default!");
+    Ok(())
+}
--- a/canvas/examples/validation_1.rs
+++ b/canvas/examples/validation_1.rs
@@ -1,7 +1,7 @@
 // examples/validation_1.rs
 //! Demonstrates field validation with the canvas library
 //!
-//! This example REQUIRES the `validation` feature to compile.
+//! This example REQUIRES the `validation` and `cursor-style` features to compile.
 //!
 //! Run with:
 //! cargo run --example validation_1 --features "gui,validation"
@@ -10,10 +10,10 @@
 //! cargo run --example validation_1 --features "gui"

 // REQUIRE validation feature - example won't compile without it
-#[cfg(not(feature = "validation"))]
+#[cfg(not(all(feature = "validation", feature = "cursor-style")))]
 compile_error!(
-    "This example requires the 'validation' feature. \
-     Run with: cargo run --example validation_1 --features \"gui,validation\""
+    "This example requires the 'validation' and 'cursor-style' features. \
+     Run with: cargo run --example validation_1 --features \"gui,validation,cursor-style\""
 );

 use std::io;
@@ -34,11 +34,11 @@ use ratatui::{
    widgets::{Block, Borders, Paragraph, Wrap},
    Frame, Terminal,
 };
-
 use canvas::{
    canvas::{
        gui::render_canvas_default,
        modes::AppMode,
+        CursorManager,
    },
    DataProvider, FormEditor,
    ValidationConfig, ValidationConfigBuilder, CharacterLimits, ValidationResult,
@@ -61,10 +61,8 @@ struct ValidationFormEditor<D: DataProvider> {
 impl<D: DataProvider> ValidationFormEditor<D> {
    fn new(data_provider: D) -> Self {
        let mut editor = FormEditor::new(data_provider);
-        
        // Enable validation by default
        editor.set_validation_enabled(true);
-        
        Self {
            editor,
            has_unsaved_changes: false,
@@ -97,7 +95,6 @@ impl<D: DataProvider> ValidationFormEditor<D> {
    fn toggle_validation(&mut self) {
        self.validation_enabled = !self.validation_enabled;
        self.editor.set_validation_enabled(self.validation_enabled);
-        
        if self.validation_enabled {
            self.debug_message = "✅ Validation ENABLED - Try exceeding limits!".to_string();
        } else {
@@ -109,14 +106,12 @@ impl<D: DataProvider> ValidationFormEditor<D> {
        if !self.validation_enabled {
            return (true, None);
        }
-        
        let can_switch = self.editor.can_switch_fields();
        let reason = if !can_switch {
            self.editor.field_switch_block_reason()
        } else {
            None
        };
-        
        (can_switch, reason)
    }

@@ -124,11 +119,9 @@ impl<D: DataProvider> ValidationFormEditor<D> {
        if !self.validation_enabled {
            return "❌ DISABLED".to_string();
        }
-
        if self.field_switch_blocked {
            return "🚫 SWITCH BLOCKED".to_string();
        }
-
        let summary = self.editor.validation_summary();
        if summary.has_errors() {
            format!("❌ {} ERRORS", summary.error_fields)
@@ -148,10 +141,10 @@ impl<D: DataProvider> ValidationFormEditor<D> {
                self.debug_message = "✅ Current field is valid!".to_string();
            }
            ValidationResult::Warning { message } => {
-                self.debug_message = format!("⚠️  Warning: {}", message);
+                self.debug_message = format!("⚠️  Warning: {message}");
            }
            ValidationResult::Error { message } => {
-                self.debug_message = format!("❌ Error: {}", message);
+                self.debug_message = format!("❌ Error: {message}");
            }
        }
    }
@@ -161,7 +154,6 @@ impl<D: DataProvider> ValidationFormEditor<D> {
        for i in 0..field_count {
            self.editor.validate_field(i);
        }
-        
        let summary = self.editor.validation_summary();
        self.debug_message = format!(
            "🔍 Validated all fields: {} valid, {} warnings, {} errors",
@@ -197,7 +189,7 @@ impl<D: DataProvider> ValidationFormEditor<D> {
            Err(e) => {
                self.field_switch_blocked = true;
                self.block_reason = Some(e.to_string());
-                self.debug_message = format!("🚫 Field switch blocked: {}", e);
+                self.debug_message = format!("🚫 Field switch blocked: {e}");
            }
        }
    }
@@ -212,7 +204,7 @@ impl<D: DataProvider> ValidationFormEditor<D> {
            Err(e) => {
                self.field_switch_blocked = true;
                self.block_reason = Some(e.to_string());
-                self.debug_message = format!("🚫 Field switch blocked: {}", e);
+                self.debug_message = format!("🚫 Field switch blocked: {e}");
            }
        }
    }
@@ -249,38 +241,37 @@ impl<D: DataProvider> ValidationFormEditor<D> {
        if !self.validation_enabled {
            return;
        }
-
-        if let Some(result) = self.editor.current_field_validation() {
-            match result {
-                ValidationResult::Valid => {
-                    self.debug_message = format!("Field {}: ✅ Valid", self.editor.current_field() + 1);
-                }
-                ValidationResult::Warning { message } => {
-                    self.debug_message = format!("Field {}: ⚠️  {}", self.editor.current_field() + 1, message);
-                }
-                ValidationResult::Error { message } => {
-                    self.debug_message = format!("Field {}: ❌ {}", self.editor.current_field() + 1, message);
-                }
+        let result = self.editor.validate_current_field();
+        match result {
+            ValidationResult::Valid => {
+                self.debug_message = format!("Field {}: ✅ Valid", self.editor.current_field() + 1);
+            }
+            ValidationResult::Warning { message } => {
+                self.debug_message = format!("Field {}: ⚠️  {}", self.editor.current_field() + 1, message);
+            }
+            ValidationResult::Error { message } => {
+                self.debug_message = format!("Field {}: ❌ {}", self.editor.current_field() + 1, message);
            }
-        } else {
-            self.debug_message = format!("Field {}: 🔍 Not validated yet", self.editor.current_field() + 1);
        }
    }

    // === MODE TRANSITIONS ===
    fn enter_edit_mode(&mut self) {
+        // Library will automatically update cursor to bar | in insert mode
        self.editor.enter_edit_mode();
-        self.debug_message = "✏️  INSERT MODE - Type to test validation".to_string();
+        self.debug_message = "✏️  INSERT MODE - Cursor: Steady Bar | - Type to test validation".to_string();
    }

    fn enter_append_mode(&mut self) {
+        // Library will automatically update cursor to bar | in insert mode
        self.editor.enter_append_mode();
-        self.debug_message = "✏️  INSERT (append) - Validation active".to_string();
+        self.debug_message = "✏️  INSERT (append) - Cursor: Steady Bar | - Validation active".to_string();
    }

    fn exit_edit_mode(&mut self) {
+        // Library will automatically update cursor to block █ in normal mode
        self.editor.exit_edit_mode();
-        self.debug_message = "🔒 NORMAL MODE - Press 'v' to validate current field".to_string();
+        self.debug_message = "🔒 NORMAL MODE - Cursor: Steady Block █ - Press 'v' to validate current field".to_string();
        self.update_field_validation_status();
    }

@@ -289,26 +280,28 @@ impl<D: DataProvider> ValidationFormEditor<D> {
        if result.is_ok() {
            self.has_unsaved_changes = true;
            // Show real-time validation feedback
-            if let Some(validation_result) = self.editor.current_field_validation() {
-                match validation_result {
-                    ValidationResult::Valid => {
-                        // Don't spam with valid messages, just show character count if applicable
-                        if let Some(limits) = self.get_current_field_limits() {
-                            if let Some(status) = limits.status_text(self.editor.current_text()) {
-                                self.debug_message = format!("✏️  {}", status);
-                            }
+            let validation_result = self.editor.validate_current_field();
+            match validation_result {
+                ValidationResult::Valid => {
+                    // Don't spam with valid messages, just show character count if applicable
+                    if let Some(limits) = self.get_current_field_limits() {
+                        let field_index = self.editor.current_field();
+                        if let Some(status) = limits.status_text(
+                            self.editor.data_provider().field_value(field_index)
+                        ) {
+                            self.debug_message = format!("✏️  {status}");
                        }
                    }
-                    ValidationResult::Warning { message } => {
-                        self.debug_message = format!("⚠️  {}", message);
-                    }
-                    ValidationResult::Error { message } => {
-                        self.debug_message = format!("❌ {}", message);
-                    }
+                }
+                ValidationResult::Warning { message } => {
+                    self.debug_message = format!("⚠️  {message}");
+                }
+                ValidationResult::Error { message } => {
+                    self.debug_message = format!("❌ {message}");
                }
            }
        }
-        Ok(result?)
+        result
    }

    fn get_current_field_limits(&self) -> Option<&CharacterLimits> {
@@ -324,7 +317,7 @@ impl<D: DataProvider> ValidationFormEditor<D> {
            self.has_unsaved_changes = true;
            self.debug_message = "⌫ Deleted character".to_string();
        }
-        Ok(result?)
+        result
    }

    fn delete_forward(&mut self) -> anyhow::Result<()> {
@@ -333,7 +326,7 @@ impl<D: DataProvider> ValidationFormEditor<D> {
            self.has_unsaved_changes = true;
            self.debug_message = "⌦ Deleted character".to_string();
        }
-        Ok(result?)
+        result
    }

    // === DELEGATE TO ORIGINAL EDITOR ===
@@ -350,7 +343,8 @@ impl<D: DataProvider> ValidationFormEditor<D> {
    }

    fn current_text(&self) -> &str {
-        self.editor.current_text()
+        let field_index = self.editor.current_field();
+        self.editor.data_provider().field_value(field_index)
    }

    fn data_provider(&self) -> &D {
@@ -362,6 +356,7 @@ impl<D: DataProvider> ValidationFormEditor<D> {
    }

    fn set_mode(&mut self, mode: AppMode) {
+        // Library automatically updates cursor for the mode
        self.editor.set_mode(mode);
    }

@@ -375,7 +370,7 @@ impl<D: DataProvider> ValidationFormEditor<D> {
            Err(e) => {
                self.field_switch_blocked = true;
                self.block_reason = Some(e.to_string());
-                self.debug_message = format!("🚫 Cannot move to next field: {}", e);
+                self.debug_message = format!("🚫 Cannot move to next field: {e}");
            }
        }
    }
@@ -390,7 +385,7 @@ impl<D: DataProvider> ValidationFormEditor<D> {
            Err(e) => {
                self.field_switch_blocked = true;
                self.block_reason = Some(e.to_string());
-                self.debug_message = format!("🚫 Cannot move to previous field: {}", e);
+                self.debug_message = format!("🚫 Cannot move to previous field: {e}");
            }
        }
    }
@@ -447,7 +442,7 @@ impl DataProvider for ValidationDemoData {
        self.fields[index].1 = value;
    }

-    fn supports_autocomplete(&self, _field_index: usize) -> bool {
+    fn supports_suggestions(&self, _field_index: usize) -> bool {
        false
    }

@@ -531,7 +526,6 @@ fn handle_key_press(
            editor.enter_edit_mode();
            editor.clear_command_buffer();
        }
-
        // Escape: Exit edit mode
        (_, KeyCode::Esc, _) => {
            if mode == AppMode::Edit {
@@ -624,7 +618,6 @@ fn handle_key_press(
                summary.validated_fields
            ));
        }
-
        _ => {
            if editor.has_pending_command() {
                editor.clear_command_buffer();
@@ -651,12 +644,11 @@ fn run_app<B: Backend>(
                    }
                }
                Err(e) => {
-                    editor.set_debug_message(format!("Error: {}", e));
+                    editor.set_debug_message(format!("Error: {e}"));
                }
            }
        }
    }
-
    Ok(())
 }

@@ -694,33 +686,33 @@ fn render_validation_status(

    // Status bar with validation information
    let mode_text = match editor.mode() {
-        AppMode::Edit => "INSERT",
-        AppMode::ReadOnly => "NORMAL",
-        _ => "OTHER",
+        AppMode::Edit => "INSERT | (bar cursor)",
+        AppMode::ReadOnly => "NORMAL █ (block cursor)",
+        _ => "NORMAL █ (block cursor)",
    };

    let validation_status = editor.get_validation_status();
+
    let status_text = if editor.has_pending_command() {
-        format!("-- {} -- {} [{}] | Validation: {}", 
+        format!("-- {} -- {} [{}] | Validation: {}",
                mode_text, editor.debug_message(), editor.get_command_buffer(), validation_status)
    } else if editor.has_unsaved_changes() {
-        format!("-- {} -- [Modified] {} | Validation: {}", 
+        format!("-- {} -- [Modified] {} | Validation: {}",
                mode_text, editor.debug_message(), validation_status)
    } else {
-        format!("-- {} -- {} | Validation: {}", 
+        format!("-- {} -- {} | Validation: {}",
                mode_text, editor.debug_message(), validation_status)
    };

    let status = Paragraph::new(Line::from(Span::raw(status_text)))
        .block(Block::default().borders(Borders::ALL).title("🔍 Validation Status"));
-
    f.render_widget(status, chunks[0]);

    // Validation summary with field switching info
    let summary = editor.editor.validation_summary();
    let summary_text = if editor.validation_enabled {
        let switch_info = if editor.field_switch_blocked {
-            format!("\n🚫 Field switching blocked: {}", 
+            format!("\n🚫 Field switching blocked: {}",
                   editor.block_reason.as_deref().unwrap_or("Unknown reason"))
        } else {
            let (can_switch, reason) = editor.check_field_switch_allowed();
@@ -759,34 +751,32 @@ fn render_validation_status(
        .block(Block::default().borders(Borders::ALL).title("📈 Validation Overview"))
        .style(summary_style)
        .wrap(Wrap { trim: true });
-
    f.render_widget(validation_summary, chunks[1]);

    // Enhanced help text
    let help_text = match editor.mode() {
        AppMode::ReadOnly => {
-            "🔍 VALIDATION DEMO: Different fields have different limits!\n\
-             Fields with MINIMUM requirements will block field switching if too short!\n\
+            "🎯 CURSOR-STYLE: Normal █ | Insert |\n\
+             🔍 VALIDATION: Different fields have different limits (some block field switching)!\n\
             Movement: hjkl/arrows=move, Tab/Shift+Tab=fields\n\
             Edit: i/a/A=insert modes, Esc=normal\n\
             Validation: v=validate current, V=validate all, c=clear results, F1=toggle\n\
             ?=info, Ctrl+C/Ctrl+Q=quit"
        }
        AppMode::Edit => {
-            "✏️  INSERT MODE - Type to test validation limits!\n\
-             Some fields have MINIMUM character requirements!\n\
+            "🎯 INSERT MODE - Cursor: | (bar)\n\
+             🔍 Type to test validation limits (some fields have MIN requirements)!\n\
             Try typing 1-2 chars in Password/ID/Comment fields, then try to switch!\n\
             arrows=move, Backspace/Del=delete, Esc=normal, Tab=next field\n\
             Field switching may be BLOCKED if minimum requirements not met!"
        }
-        _ => "🔍 Validation Demo Active!"
+        _ => "🎯 Watch the cursor change automatically while validating!"
    };

    let help = Paragraph::new(help_text)
        .block(Block::default().borders(Borders::ALL).title("🚀 Validation Commands"))
        .style(Style::default().fg(Color::Gray))
        .wrap(Wrap { trim: true });
-
    f.render_widget(help, chunks[2]);
 }

@@ -810,10 +800,20 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
    let mut terminal = Terminal::new(backend)?;

    let data = ValidationDemoData::new();
-    let editor = ValidationFormEditor::new(data);
+    let mut editor = ValidationFormEditor::new(data);
+    
+    // Initialize with normal mode - library automatically sets block cursor
+    editor.set_mode(AppMode::ReadOnly);
+    
+    // Demonstrate that CursorManager is available and working
+    CursorManager::update_for_mode(AppMode::ReadOnly)?;

    let res = run_app(&mut terminal, editor);

+    // Library automatically resets cursor on FormEditor::drop()
+    // But we can also manually reset if needed
+    CursorManager::reset()?;
+
    disable_raw_mode()?;
    execute!(
        terminal.backend_mut(),
@@ -823,7 +823,7 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
    terminal.show_cursor()?;

    if let Err(err) = res {
-        println!("{:?}", err);
+        println!("{err:?}");
    }

    println!("🔍 Validation demo completed!");
--- a/canvas/examples/validation_2.rs
+++ b/canvas/examples/validation_2.rs
@@ -4,13 +4,13 @@
 //! This example showcases the full potential of the pattern validation system
 //! with creative real-world scenarios and edge cases.
 //!
-//! Run with: cargo run --example validation_advanced_patterns --features "validation,gui"
+//! Run with: cargo run --example validation_advanced_patterns --features "validation,gui,cursor-style"

-// REQUIRE validation and gui features
-#[cfg(not(all(feature = "validation", feature = "gui")))]
+// REQUIRE validation, gui and cursor-style features
+#[cfg(not(all(feature = "validation", feature = "gui", feature = "cursor-style")))]
 compile_error!(
-    "This example requires the 'validation' and 'gui' features. \
-     Run with: cargo run --example validation_advanced_patterns --features \"validation,gui\""
+    "This example requires the 'validation', 'gui' and 'cursor-style' features. \
+     Run with: cargo run --example validation_advanced_patterns --features \"validation,gui,cursor-style\""
 );

 use std::io;
@@ -38,6 +38,7 @@ use canvas::{
    canvas::{
        gui::render_canvas_default,
        modes::AppMode,
+        CursorManager,
    },
    DataProvider, FormEditor,
    ValidationConfig, ValidationConfigBuilder, PatternFilters, PositionFilter, PositionRange, CharacterFilter,
@@ -70,12 +71,12 @@ impl<D: DataProvider> AdvancedPatternFormEditor<D> {

    // ... (keeping all the same methods as before for brevity)
    // [All the previous methods: clear_command_buffer, add_to_command_buffer, etc.]
-    
+
    fn clear_command_buffer(&mut self) { self.command_buffer.clear(); }
    fn add_to_command_buffer(&mut self, ch: char) { self.command_buffer.push(ch); }
    fn get_command_buffer(&self) -> &str { &self.command_buffer }
    fn has_pending_command(&self) -> bool { !self.command_buffer.is_empty() }
-    
+
    fn toggle_validation(&mut self) {
        self.validation_enabled = !self.validation_enabled;
        self.editor.set_validation_enabled(self.validation_enabled);
@@ -88,71 +89,76 @@ impl<D: DataProvider> AdvancedPatternFormEditor<D> {

    fn move_left(&mut self) { self.editor.move_left(); self.field_switch_blocked = false; self.block_reason = None; }
    fn move_right(&mut self) { self.editor.move_right(); self.field_switch_blocked = false; self.block_reason = None; }
-    
+
    fn move_up(&mut self) {
        match self.editor.move_up() {
            Ok(()) => { self.update_field_validation_status(); self.field_switch_blocked = false; self.block_reason = None; }
-            Err(e) => { self.field_switch_blocked = true; self.block_reason = Some(e.to_string()); self.debug_message = format!("🚫 Field switch blocked: {}", e); }
+            Err(e) => { self.field_switch_blocked = true; self.block_reason = Some(e.to_string()); self.debug_message = format!("🚫 Field switch blocked: {e}"); }
        }
    }
-    
+
    fn move_down(&mut self) {
        match self.editor.move_down() {
            Ok(()) => { self.update_field_validation_status(); self.field_switch_blocked = false; self.block_reason = None; }
-            Err(e) => { self.field_switch_blocked = true; self.block_reason = Some(e.to_string()); self.debug_message = format!("🚫 Field switch blocked: {}", e); }
+            Err(e) => { self.field_switch_blocked = true; self.block_reason = Some(e.to_string()); self.debug_message = format!("🚫 Field switch blocked: {e}"); }
        }
    }

    fn move_line_start(&mut self) { self.editor.move_line_start(); }
    fn move_line_end(&mut self) { self.editor.move_line_end(); }
-    
+
    fn enter_edit_mode(&mut self) {
+        // Library will automatically update cursor to bar | in insert mode
        self.editor.enter_edit_mode();
-        self.debug_message = "✏️  INSERT MODE - Testing advanced pattern validation".to_string();
+        self.debug_message = "✏️  INSERT MODE - Cursor: Steady Bar | - Testing advanced pattern validation".to_string();
    }
-    
+
    fn enter_append_mode(&mut self) {
+        // Library will automatically update cursor to bar | in insert mode
        self.editor.enter_append_mode();
-        self.debug_message = "✏️  INSERT (append) - Advanced patterns active".to_string();
+        self.debug_message = "✏️  INSERT (append) - Cursor: Steady Bar | - Advanced patterns active".to_string();
    }
-    
+
    fn exit_edit_mode(&mut self) {
+        // Library will automatically update cursor to block █ in normal mode
        self.editor.exit_edit_mode();
-        self.debug_message = "🔒 NORMAL MODE".to_string();
+        self.debug_message = "🔒 NORMAL MODE - Cursor: Steady Block █".to_string();
        self.update_field_validation_status();
    }

    fn insert_char(&mut self, ch: char) -> anyhow::Result<()> {
        let result = self.editor.insert_char(ch);
        if result.is_ok() {
-            if let Some(validation_result) = self.editor.current_field_validation() {
-                match validation_result {
-                    ValidationResult::Valid => { self.debug_message = "✅ Character accepted".to_string(); }
-                    ValidationResult::Warning { message } => { self.debug_message = format!("⚠️  Warning: {}", message); }
-                    ValidationResult::Error { message } => { self.debug_message = format!("❌ Pattern violation: {}", message); }
-                }
+            let validation_result = self.editor.validate_current_field();
+            match validation_result {
+                ValidationResult::Valid => { self.debug_message = "✅ Character accepted".to_string(); }
+                ValidationResult::Warning { message } => { self.debug_message = format!("⚠️  Warning: {message}"); }
+                ValidationResult::Error { message } => { self.debug_message = format!("❌ Pattern violation: {message}"); }
            }
        }
-        Ok(result?)
+        result
    }

    fn delete_backward(&mut self) -> anyhow::Result<()> {
        let result = self.editor.delete_backward();
        if result.is_ok() { self.debug_message = "⌫ Character deleted".to_string(); }
-        Ok(result?)
+        result
    }

    fn delete_forward(&mut self) -> anyhow::Result<()> {
        let result = self.editor.delete_forward();
        if result.is_ok() { self.debug_message = "⌦ Character deleted".to_string(); }
-        Ok(result?)
+        result
    }

    // Delegate methods
    fn current_field(&self) -> usize { self.editor.current_field() }
    fn cursor_position(&self) -> usize { self.editor.cursor_position() }
    fn mode(&self) -> AppMode { self.editor.mode() }
-    fn current_text(&self) -> &str { self.editor.current_text() }
+    fn current_text(&self) -> &str {
+        let field_index = self.editor.current_field();
+        self.editor.data_provider().field_value(field_index)
+    }
    fn data_provider(&self) -> &D { self.editor.data_provider() }
    fn ui_state(&self) -> &canvas::EditorState { self.editor.ui_state() }
    fn set_mode(&mut self, mode: AppMode) { self.editor.set_mode(mode); }
@@ -160,14 +166,14 @@ impl<D: DataProvider> AdvancedPatternFormEditor<D> {
    fn next_field(&mut self) {
        match self.editor.next_field() {
            Ok(()) => { self.update_field_validation_status(); self.field_switch_blocked = false; self.block_reason = None; }
-            Err(e) => { self.field_switch_blocked = true; self.block_reason = Some(e.to_string()); self.debug_message = format!("🚫 Cannot move to next field: {}", e); }
+            Err(e) => { self.field_switch_blocked = true; self.block_reason = Some(e.to_string()); self.debug_message = format!("🚫 Cannot move to next field: {e}"); }
        }
    }

    fn prev_field(&mut self) {
        match self.editor.prev_field() {
            Ok(()) => { self.update_field_validation_status(); self.field_switch_blocked = false; self.block_reason = None; }
-            Err(e) => { self.field_switch_blocked = true; self.block_reason = Some(e.to_string()); self.debug_message = format!("🚫 Cannot move to previous field: {}", e); }
+            Err(e) => { self.field_switch_blocked = true; self.block_reason = Some(e.to_string()); self.debug_message = format!("🚫 Cannot move to previous field: {e}"); }
        }
    }

@@ -176,12 +182,11 @@ impl<D: DataProvider> AdvancedPatternFormEditor<D> {

    fn update_field_validation_status(&mut self) {
        if !self.validation_enabled { return; }
-        if let Some(result) = self.editor.current_field_validation() {
-            match result {
-                ValidationResult::Valid => { self.debug_message = format!("Field {}: ✅ Pattern valid", self.editor.current_field() + 1); }
-                ValidationResult::Warning { message } => { self.debug_message = format!("Field {}: ⚠️  {}", self.editor.current_field() + 1, message); }
-                ValidationResult::Error { message } => { self.debug_message = format!("Field {}: ❌ {}", self.editor.current_field() + 1, message); }
-            }
+        let result = self.editor.validate_current_field();
+        match result {
+            ValidationResult::Valid => { self.debug_message = format!("Field {}: ✅ Pattern valid", self.editor.current_field() + 1); }
+            ValidationResult::Warning { message } => { self.debug_message = format!("Field {}: ⚠️  {}", self.editor.current_field() + 1, message); }
+            ValidationResult::Error { message } => { self.debug_message = format!("Field {}: ❌ {}", self.editor.current_field() + 1, message); }
        }
    }

@@ -380,7 +385,7 @@ impl DataProvider for AdvancedPatternData {
                            // Even positions (0,2,4...): vowels (a,e,i,o,u)
                            // Odd positions (1,3,5...): consonants
                            let vowels = ['a', 'e', 'i', 'o', 'u', 'A', 'E', 'I', 'O', 'U'];
-                            
+
                            // For demo purposes, we'll just accept alphabetic characters
                            // In real usage, you'd implement the alternating logic based on position
                            c.is_alphabetic()
@@ -487,7 +492,7 @@ fn run_app<B: Backend>(
                    }
                }
                Err(e) => {
-                    editor.set_debug_message(format!("Error: {}", e));
+                    editor.set_debug_message(format!("Error: {e}"));
                }
            }
        }
@@ -522,9 +527,9 @@ fn render_advanced_validation_status(

    // Status bar
    let mode_text = match editor.mode() {
-        AppMode::Edit => "INSERT",
-        AppMode::ReadOnly => "NORMAL",
-        _ => "OTHER",
+        AppMode::Edit => "INSERT | (bar cursor)",
+        AppMode::ReadOnly => "NORMAL █ (block cursor)",
+        _ => "NORMAL █ (block cursor)",
    };

    let validation_status = editor.get_validation_status();
@@ -613,6 +618,7 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
    println!("🚀 Canvas Advanced Pattern Validation Demo");
    println!("✅ validation feature: ENABLED");
    println!("✅ gui feature: ENABLED");
+    println!("✅ cursor-style feature: ENABLED");
    println!("🎯 Advanced pattern filtering: ACTIVE");
    println!("🧪 Edge cases and complex patterns: READY");
    println!("💡 Each field showcases different validation capabilities!");
@@ -625,10 +631,20 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
    let mut terminal = Terminal::new(backend)?;

    let data = AdvancedPatternData::new();
-    let editor = AdvancedPatternFormEditor::new(data);
+    let mut editor = AdvancedPatternFormEditor::new(data);
+
+    // Initialize with normal mode - library automatically sets block cursor
+    editor.set_mode(AppMode::ReadOnly);
+
+    // Demonstrate that CursorManager is available and working
+    CursorManager::update_for_mode(AppMode::ReadOnly)?;

    let res = run_app(&mut terminal, editor);

+    // Library automatically resets cursor on FormEditor::drop()
+    // But we can also manually reset if needed
+    CursorManager::reset()?;
+
    disable_raw_mode()?;
    execute!(
        terminal.backend_mut(),
@@ -638,7 +654,7 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
    terminal.show_cursor()?;

    if let Err(err) = res {
-        println!("{:?}", err);
+        println!("{err:?}");
    }

    println!("🚀 Advanced pattern validation demo completed!");
--- a/canvas/examples/validation_3.rs
+++ b/canvas/examples/validation_3.rs
@@ -18,13 +18,13 @@
 //! Each mask's input position count EXACTLY matches its character limit to prevent
 //! the critical bug where users can type more characters than they can see.
 //!
-//! Run with: cargo run --example validation_3 --features "gui,validation"
+//! Run with: cargo run --example validation_3 --features "gui,validation,cursor-style"

-// REQUIRE validation and gui features for mask functionality
-#[cfg(not(all(feature = "validation", feature = "gui")))]
+// REQUIRE validation, gui and cursor-style features for mask functionality
+#[cfg(not(all(feature = "validation", feature = "gui", feature = "cursor-style")))]
 compile_error!(
-    "This example requires the 'validation' and 'gui' features. \
-     Run with: cargo run --example validation_3 --features \"gui,validation\""
+    "This example requires the 'validation', 'gui' and 'cursor-style' features. \
+     Run with: cargo run --example validation_3 --features \"gui,validation,cursor-style\""
 );

 use std::io;
@@ -50,10 +50,10 @@ use canvas::{
    canvas::{
        gui::render_canvas_default,
        modes::AppMode,
+        CursorManager,
    },
    DataProvider, FormEditor,
    ValidationConfig, ValidationConfigBuilder, DisplayMask,
-    validation::mask::MaskDisplayMode,
 };

 // Enhanced FormEditor wrapper for mask demonstration
@@ -107,7 +107,7 @@ impl<D: DataProvider> MaskDemoFormEditor<D> {

    fn get_current_field_info(&self) -> (String, String, String) {
        let field_index = self.editor.current_field();
-        let raw_data = self.editor.current_text();
+        let raw_data = self.editor.data_provider().field_value(field_index);
        let display_data = if self.validation_enabled {
            self.editor.current_display_text()
        } else {
@@ -116,8 +116,8 @@ impl<D: DataProvider> MaskDemoFormEditor<D> {

        let mask_info = if let Some(config) = self.editor.validation_state().get_field_config(field_index) {
            if let Some(mask) = &config.display_mask {
-                format!("Pattern: '{}', Mode: {:?}", 
-                       mask.pattern(), 
+                format!("Pattern: '{}', Mode: {:?}",
+                       mask.pattern(),
                       mask.display_mode())
            } else {
                "No mask configured".to_string()
@@ -130,37 +130,37 @@ impl<D: DataProvider> MaskDemoFormEditor<D> {
    }

    // === ENHANCED MOVEMENT WITH MASK AWARENESS ===
-    fn move_left(&mut self) { 
-        self.editor.move_left(); 
+    fn move_left(&mut self) {
+        self.editor.move_left();
        self.update_cursor_info();
    }

-    fn move_right(&mut self) { 
-        self.editor.move_right(); 
+    fn move_right(&mut self) {
+        self.editor.move_right();
        self.update_cursor_info();
    }

    fn move_up(&mut self) {
        match self.editor.move_up() {
            Ok(()) => { self.update_field_info(); }
-            Err(e) => { self.debug_message = format!("🚫 Field switch blocked: {}", e); }
+            Err(e) => { self.debug_message = format!("🚫 Field switch blocked: {e}"); }
        }
    }

    fn move_down(&mut self) {
        match self.editor.move_down() {
            Ok(()) => { self.update_field_info(); }
-            Err(e) => { self.debug_message = format!("🚫 Field switch blocked: {}", e); }
+            Err(e) => { self.debug_message = format!("🚫 Field switch blocked: {e}"); }
        }
    }

-    fn move_line_start(&mut self) { 
-        self.editor.move_line_start(); 
+    fn move_line_start(&mut self) {
+        self.editor.move_line_start();
        self.update_cursor_info();
    }

-    fn move_line_end(&mut self) { 
-        self.editor.move_line_end(); 
+    fn move_line_end(&mut self) {
+        self.editor.move_line_end();
        self.update_cursor_info();
    }

@@ -169,32 +169,35 @@ impl<D: DataProvider> MaskDemoFormEditor<D> {
            let raw_pos = self.editor.cursor_position();
            let display_pos = self.editor.display_cursor_position();
            if raw_pos != display_pos {
-                self.debug_message = format!("📍 Cursor: Raw pos {} → Display pos {} (mask active)", raw_pos, display_pos);
+                self.debug_message = format!("📍 Cursor: Raw pos {raw_pos} → Display pos {display_pos} (mask active)");
            } else {
-                self.debug_message = format!("📍 Cursor at position {} (no mask offset)", raw_pos);
+                self.debug_message = format!("📍 Cursor at position {raw_pos} (no mask offset)");
            }
        }
    }

    fn update_field_info(&mut self) {
        let field_name = self.editor.data_provider().field_name(self.editor.current_field());
-        self.debug_message = format!("📝 Switched to: {}", field_name);
+        self.debug_message = format!("📝 Switched to: {field_name}");
    }

    // === MODE TRANSITIONS ===
    fn enter_edit_mode(&mut self) {
+        // Library will automatically update cursor to bar | in insert mode
        self.editor.enter_edit_mode();
-        self.debug_message = "✏️ INSERT MODE - Type to see mask formatting in real-time".to_string();
+        self.debug_message = "✏️ INSERT MODE - Cursor: Steady Bar | - Type to see mask formatting in real-time".to_string();
    }

    fn enter_append_mode(&mut self) {
+        // Library will automatically update cursor to bar | in insert mode
        self.editor.enter_append_mode();
-        self.debug_message = "✏️ INSERT (append) - Mask formatting active".to_string();
+        self.debug_message = "✏️ INSERT (append) - Cursor: Steady Bar | - Mask formatting active".to_string();
    }

    fn exit_edit_mode(&mut self) {
+        // Library will automatically update cursor to block █ in normal mode
        self.editor.exit_edit_mode();
-        self.debug_message = "🔒 NORMAL MODE - Press 'r' to see raw data, 'm' for mask info".to_string();
+        self.debug_message = "🔒 NORMAL MODE - Cursor: Steady Block █ - Press 'r' to see raw data, 'm' for mask info".to_string();
    }

    fn insert_char(&mut self, ch: char) -> anyhow::Result<()> {
@@ -202,12 +205,12 @@ impl<D: DataProvider> MaskDemoFormEditor<D> {
        if result.is_ok() {
            let (raw, display, _) = self.get_current_field_info();
            if raw != display {
-                self.debug_message = format!("✏️ Added '{}': Raw='{}' Display='{}'", ch, raw, display);
+                self.debug_message = format!("✏️ Added '{ch}': Raw='{raw}' Display='{display}'");
            } else {
-                self.debug_message = format!("✏️ Added '{}': '{}'", ch, raw);
+                self.debug_message = format!("✏️ Added '{ch}': '{raw}'");
            }
        }
-        Ok(result?)
+        result
    }

    // === DELETE OPERATIONS ===
@@ -217,7 +220,7 @@ impl<D: DataProvider> MaskDemoFormEditor<D> {
            self.debug_message = "⌫ Character deleted".to_string();
            self.update_cursor_info();
        }
-        Ok(result?)
+        result
    }

    fn delete_forward(&mut self) -> anyhow::Result<()> {
@@ -226,29 +229,35 @@ impl<D: DataProvider> MaskDemoFormEditor<D> {
            self.debug_message = "⌦ Character deleted".to_string();
            self.update_cursor_info();
        }
-        Ok(result?)
+        result
    }

    // === DELEGATE TO ORIGINAL EDITOR ===
    fn current_field(&self) -> usize { self.editor.current_field() }
    fn cursor_position(&self) -> usize { self.editor.cursor_position() }
    fn mode(&self) -> AppMode { self.editor.mode() }
-    fn current_text(&self) -> &str { self.editor.current_text() }
+    fn current_text(&self) -> &str {
+        let field_index = self.editor.current_field();
+        self.editor.data_provider().field_value(field_index)
+    }
    fn data_provider(&self) -> &D { self.editor.data_provider() }
    fn ui_state(&self) -> &canvas::EditorState { self.editor.ui_state() }
-    fn set_mode(&mut self, mode: AppMode) { self.editor.set_mode(mode); }
+    fn set_mode(&mut self, mode: AppMode) {
+        // Library automatically updates cursor for the mode
+        self.editor.set_mode(mode);
+    }

    fn next_field(&mut self) {
        match self.editor.next_field() {
            Ok(()) => { self.update_field_info(); }
-            Err(e) => { self.debug_message = format!("🚫 Cannot move to next field: {}", e); }
+            Err(e) => { self.debug_message = format!("🚫 Cannot move to next field: {e}"); }
        }
    }

    fn prev_field(&mut self) {
        match self.editor.prev_field() {
            Ok(()) => { self.update_field_info(); }
-            Err(e) => { self.debug_message = format!("🚫 Cannot move to previous field: {}", e); }
+            Err(e) => { self.debug_message = format!("🚫 Cannot move to previous field: {e}"); }
        }
    }

@@ -258,7 +267,7 @@ impl<D: DataProvider> MaskDemoFormEditor<D> {

    fn show_mask_details(&mut self) {
        let (raw, display, mask_info) = self.get_current_field_info();
-        self.debug_message = format!("🔍 Field {}: {} | Raw: '{}' Display: '{}'", 
+        self.debug_message = format!("🔍 Field {}: {} | Raw: '{}' Display: '{}'",
                                   self.current_field() + 1, mask_info, raw, display);
    }

@@ -277,7 +286,7 @@ impl<D: DataProvider> MaskDemoFormEditor<D> {
            }
        }

-        format!("🎭 {} MASKS", mask_count)
+        format!("🎭 {mask_count} MASKS")
    }
 }

@@ -324,11 +333,11 @@ impl DataProvider for MaskDemoData {
                    .build())
            }
            1 => {
-                // 📞 Phone (Template) - FIXED: Perfect mask/limit coordination  
+                // 📞 Phone (Template) - FIXED: Perfect mask/limit coordination
                let phone_template = DisplayMask::new("(###) ###-####", '#')
                    .with_template('_');
                Some(ValidationConfigBuilder::new()
-                    .with_display_mask(phone_template)  
+                    .with_display_mask(phone_template)
                    .with_max_length(10)  // ✅ CRITICAL: Exactly matches 10 input positions
                    .build())
            }
@@ -354,7 +363,7 @@ impl DataProvider for MaskDemoData {
                let ssn_mask = DisplayMask::new("XXX-XX-XXXX", 'X');
                Some(ValidationConfigBuilder::new()
                    .with_display_mask(ssn_mask)
-                    .with_max_length(9)  // ✅ CRITICAL: Exactly matches 9 input positions  
+                    .with_max_length(9)  // ✅ CRITICAL: Exactly matches 9 input positions
                    .build())
            }
            6 => {
@@ -539,7 +548,7 @@ fn run_app<B: Backend>(
                    }
                }
                Err(e) => {
-                    editor.set_debug_message(format!("Error: {}", e));
+                    editor.set_debug_message(format!("Error: {e}"));
                }
            }
        }
@@ -582,15 +591,15 @@ fn render_mask_status(

    // Status bar with mask information
    let mode_text = match editor.mode() {
-        AppMode::Edit => "INSERT",
-        AppMode::ReadOnly => "NORMAL",
-        _ => "OTHER",
+        AppMode::Edit => "INSERT | (bar cursor)",
+        AppMode::ReadOnly => "NORMAL █ (block cursor)",
+        _ => "NORMAL █ (block cursor)",
    };

    let mask_status = editor.get_mask_status();
-    let status_text = format!("-- {} -- {} | Masks: {} | View: {}", 
-                             mode_text, 
-                             editor.debug_message(), 
+    let status_text = format!("-- {} -- {} | Masks: {} | View: {}",
+                             mode_text,
+                             editor.debug_message(),
                             mask_status,
                             if editor.show_raw_data { "RAW" } else { "FORMATTED" });

@@ -602,7 +611,7 @@ fn render_mask_status(
    // Data comparison showing raw vs display
    let (raw_data, display_data, mask_info) = editor.get_current_field_info();
    let field_name = editor.data_provider().field_name(editor.current_field());
-    
+
    let comparison_text = format!(
        "📝 Current Field: {}\n\
         🔧 Mask Config: {}\n\
@@ -634,17 +643,19 @@ fn render_mask_status(
    // Enhanced help text
    let help_text = match editor.mode() {
        AppMode::ReadOnly => {
-            "🎭 MASK DEMO: See how visual formatting keeps business logic clean!\n\
+            "🎯 CURSOR-STYLE: Normal █ | Insert |\n\
+             🎭 MASK DEMO: Visual formatting keeps business logic clean!\n\
             \n\
             📱 Try different fields to see various mask patterns:\n\
             • Dynamic vs Template modes  • Custom separators  • Different input chars\n\
             \n\
             Commands: i/a=insert, m=mask details, r=toggle raw/display view\n\
-             Movement: hjkl/arrows=move, 0=$=line start/end, Tab=next field, F1=toggle masks\n\
+             Movement: hjkl/arrows=move, 0/$=line start/end, Tab=next field, F1=toggle masks\n\
             ?=detailed info, Ctrl+C=quit"
        }
        AppMode::Edit => {
-            "✏️ INSERT MODE - Type to see real-time mask formatting!\n\
+            "🎯 INSERT MODE - Cursor: | (bar)\n\
+             ✏️ Type to see real-time mask formatting!\n\
             \n\
             🔥 Key Features in Action:\n\
             • Separators auto-appear as you type  • Cursor skips over separators\n\
@@ -670,6 +681,7 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
    println!("✅ validation feature: ENABLED");
    println!("✅ gui feature: ENABLED");
    println!("🎭 Display masks: ACTIVE");
+    println!("✅ cursor-style feature: ENABLED");
    println!("🔥 Key Benefits Demonstrated:");
    println!("   • Clean separation: Visual formatting ≠ Business logic");
    println!("   • User-friendly: Pretty displays with automatic cursor handling");
@@ -690,7 +702,13 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
    let mut terminal = Terminal::new(backend)?;

    let data = MaskDemoData::new();
-    let editor = MaskDemoFormEditor::new(data);
+    let mut editor = MaskDemoFormEditor::new(data);
+
+    // Initialize with normal mode - library automatically sets block cursor
+    editor.set_mode(AppMode::ReadOnly);
+
+    // Demonstrate that CursorManager is available and working
+    CursorManager::update_for_mode(AppMode::ReadOnly)?;

    let res = run_app(&mut terminal, editor);

@@ -702,8 +720,12 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
    )?;
    terminal.show_cursor()?;

+    // Library automatically resets cursor on FormEditor::drop()
+    // But we can also manually reset if needed
+    CursorManager::reset()?;
+
    if let Err(err) = res {
-        println!("{:?}", err);
+        println!("{err:?}");
    }

    println!("🎭 Display mask demo completed!");
--- a/canvas/examples/validation_4.rs
+++ b/canvas/examples/validation_4.rs
@@ -1,6 +1,6 @@
 /* examples/validation_4.rs
   Enhanced Feature 4 Demo: Multiple custom formatters with comprehensive edge cases
-   
+
   Demonstrates:
   - Multiple formatter types: PSC, Phone, Credit Card, Date
   - Edge case handling: incomplete input, invalid chars, overflow
@@ -13,10 +13,10 @@

 #![allow(clippy::needless_return)]

-#[cfg(not(all(feature = "validation", feature = "gui")))]
+#[cfg(not(all(feature = "validation", feature = "gui", feature = "cursor-style")))]
 compile_error!(
-    "This example requires the 'validation' and 'gui' features. \
-     Run with: cargo run --example validation_4 --features \"gui,validation\""
+    "This example requires the 'validation', 'gui' and 'cursor-style' features. \
+     Run with: cargo run --example validation_4 --features \"gui,validation,cursor-style\""
 );

 use std::io;
@@ -39,7 +39,7 @@ use ratatui::{
 };

 use canvas::{
-    canvas::{gui::render_canvas_default, modes::AppMode},
+    canvas::{gui::render_canvas_default, modes::AppMode, CursorManager},
    DataProvider, FormEditor,
    ValidationConfig, ValidationConfigBuilder,
    CustomFormatter, FormattingResult,
@@ -53,18 +53,18 @@ impl CustomFormatter for PSCFormatter {
        if raw.is_empty() {
            return FormattingResult::success("");
        }
-        
+
        // Validate: only digits allowed
        if !raw.chars().all(|c| c.is_ascii_digit()) {
            return FormattingResult::error("PSC must contain only digits");
        }
-        
+
        let len = raw.chars().count();
        match len {
            0 => FormattingResult::success(""),
            1..=3 => FormattingResult::success(raw),
            4 => FormattingResult::warning(
-                format!("{} ", &raw[..3]), 
+                format!("{} ", &raw[..3]),
                "PSC incomplete (4/5 digits)"
            ),
            5 => {
@@ -88,16 +88,16 @@ impl CustomFormatter for PhoneFormatter {
        if raw.is_empty() {
            return FormattingResult::success("");
        }
-        
+
        // Only digits allowed
        if !raw.chars().all(|c| c.is_ascii_digit()) {
            return FormattingResult::error("Phone must contain only digits");
        }
-        
+
        let len = raw.chars().count();
        match len {
            0 => FormattingResult::success(""),
-            1..=3 => FormattingResult::success(format!("({})", raw)),
+            1..=3 => FormattingResult::success(format!("({raw})")),
            4..=6 => FormattingResult::success(format!("({}) {}", &raw[..3], &raw[3..])),
            7..=10 => FormattingResult::success(format!("({}) {}-{}", &raw[..3], &raw[3..6], &raw[6..])),
            10 => {
@@ -120,11 +120,11 @@ impl CustomFormatter for CreditCardFormatter {
        if raw.is_empty() {
            return FormattingResult::success("");
        }
-        
+
        if !raw.chars().all(|c| c.is_ascii_digit()) {
            return FormattingResult::error("Card number must contain only digits");
        }
-        
+
        let mut formatted = String::new();
        for (i, ch) in raw.chars().enumerate() {
            if i > 0 && i % 4 == 0 {
@@ -132,10 +132,10 @@ impl CustomFormatter for CreditCardFormatter {
            }
            formatted.push(ch);
        }
-        
+
        let len = raw.chars().count();
        match len {
-            0..=15 => FormattingResult::warning(formatted, format!("Card incomplete ({}/16 digits)", len)),
+            0..=15 => FormattingResult::warning(formatted, format!("Card incomplete ({len}/16 digits)")),
            16 => FormattingResult::success(formatted),
            _ => FormattingResult::warning(formatted, "Card too long (extra digits shown)"),
        }
@@ -155,11 +155,11 @@ impl CustomFormatter for DateFormatter {
        if raw.is_empty() {
            return FormattingResult::success("");
        }
-        
+
        if !raw.chars().all(|c| c.is_ascii_digit()) {
            return FormattingResult::error("Date must contain only digits");
        }
-        
+
        let len = raw.len();
        match len {
            0 => FormattingResult::success(""),
@@ -170,23 +170,23 @@ impl CustomFormatter for DateFormatter {
                let month = &raw[..2];
                let day = &raw[2..4];
                let year = &raw[4..];
-                
+
                // Basic validation
                let m: u32 = month.parse().unwrap_or(0);
                let d: u32 = day.parse().unwrap_or(0);
-                
+
                if m == 0 || m > 12 {
                    FormattingResult::warning(
-                        format!("{}/{}/{}", month, day, year),
+                        format!("{month}/{day}/{year}"),
                        "Invalid month (01-12)"
                    )
                } else if d == 0 || d > 31 {
                    FormattingResult::warning(
-                        format!("{}/{}/{}", month, day, year),
+                        format!("{month}/{day}/{year}"),
                        "Invalid day (01-31)"
                    )
                } else {
-                    FormattingResult::success(format!("{}/{}/{}", month, day, year))
+                    FormattingResult::success(format!("{month}/{day}/{year}"))
                }
            },
            _ => FormattingResult::error("Date too long (MMDDYYYY format)"),
@@ -217,15 +217,15 @@ impl DataProvider for MultiFormatterDemoData {
    fn field_count(&self) -> usize {
        self.fields.len()
    }
-    
+
    fn field_name(&self, index: usize) -> &str {
        &self.fields[index].0
    }
-    
+
    fn field_value(&self, index: usize) -> &str {
        &self.fields[index].1
    }
-    
+
    fn set_field_value(&mut self, index: usize, value: String) {
        self.fields[index].1 = value;
    }
@@ -288,7 +288,7 @@ impl<D: DataProvider> EnhancedDemoEditor<D> {
        match self.editor.current_field() {
            0 => "PSC",
            1 => "Phone",
-            2 => "Credit Card", 
+            2 => "Credit Card",
            3 => "Date",
            _ => "Plain Text",
        }
@@ -320,16 +320,16 @@ impl<D: DataProvider> EnhancedDemoEditor<D> {
            // Edge cases
            vec!["00000", "0000000000", "0000000000000000", "99", "13012024", ""],
        ];
-        
+
        self.example_mode = (self.example_mode + 1) % examples.len();
        let current_examples = &examples[self.example_mode];
-        
+
        for (i, example) in current_examples.iter().enumerate() {
            if i < self.editor.data_provider().field_count() {
                self.editor.data_provider_mut().set_field_value(i, example.to_string());
            }
        }
-        
+
        let mode_names = ["Valid Examples", "Incomplete Input", "Invalid Characters", "Edge Cases"];
        self.debug_message = format!("📋 Loaded: {}", mode_names[self.example_mode]);
    }
@@ -364,9 +364,10 @@ impl<D: DataProvider> EnhancedDemoEditor<D> {
    }

    fn get_current_field_analysis(&self) -> (String, String, String, Option<String>) {
-        let raw = self.editor.current_text();
+        let field_index = self.editor.current_field();
+        let raw = self.editor.data_provider().field_value(field_index);
        let display = self.editor.current_display_text();
-        
+
        let status = if raw == display {
            if self.has_formatter() {
                if self.mode() == AppMode::Edit {
@@ -383,7 +384,7 @@ impl<D: DataProvider> EnhancedDemoEditor<D> {

        let warning = if self.validation_enabled && self.has_formatter() {
            // Check if there are any formatting warnings
-            if raw.len() > 0 {
+            if !raw.is_empty() {
                match self.editor.current_field() {
                    0 if raw.len() < 5 => Some(format!("PSC incomplete: {}/5", raw.len())),
                    1 if raw.len() < 10 => Some(format!("Phone incomplete: {}/10", raw.len())),
@@ -403,21 +404,23 @@ impl<D: DataProvider> EnhancedDemoEditor<D> {

    // Delegate methods with enhanced feedback
    fn enter_edit_mode(&mut self) {
+        // Library will automatically update cursor to bar | in insert mode
        self.editor.enter_edit_mode();
        let field_type = self.current_field_type();
        let rules = self.get_input_rules();
-        self.debug_message = format!("✏️ EDITING {} - {}", field_type, rules);
+        self.debug_message = format!("✏️ INSERT MODE - Cursor: Steady Bar | - {field_type} - {rules}");
    }

    fn exit_edit_mode(&mut self) {
+        // Library will automatically update cursor to block █ in normal mode
        self.editor.exit_edit_mode();
        let (raw, display, _, warning) = self.get_current_field_analysis();
        if let Some(warn) = warning {
-            self.debug_message = format!("🔒 NORMAL - {} | ⚠️ {}", self.current_field_type(), warn);
+            self.debug_message = format!("🔒 NORMAL - Cursor: Steady Block █ - {} | ⚠️ {}", self.current_field_type(), warn);
        } else if raw != display {
-            self.debug_message = format!("🔒 NORMAL - {} formatted successfully", self.current_field_type());
+            self.debug_message = format!("🔒 NORMAL - Cursor: Steady Block █ - {} formatted successfully", self.current_field_type());
        } else {
-            self.debug_message = "🔒 NORMAL MODE".to_string();
+            self.debug_message = "🔒 NORMAL MODE - Cursor: Steady Block █".to_string();
        }
    }

@@ -426,9 +429,9 @@ impl<D: DataProvider> EnhancedDemoEditor<D> {
        if result.is_ok() {
            let (raw, display, _, _) = self.get_current_field_analysis();
            if raw != display && self.validation_enabled {
-                self.debug_message = format!("✏️ '{}' added - Real-time formatting active", ch);
+                self.debug_message = format!("✏️ '{ch}' added - Real-time formatting active");
            } else {
-                self.debug_message = format!("✏️ '{}' added", ch);
+                self.debug_message = format!("✏️ '{ch}' added");
            }
        }
        result
@@ -443,9 +446,10 @@ impl<D: DataProvider> EnhancedDemoEditor<D> {

        let raw_pos = self.editor.cursor_position();
        let display_pos = self.editor.display_cursor_position();
-        let raw = self.editor.current_text();
+        let field_index = self.editor.current_field();
+        let raw = self.editor.data_provider().field_value(field_index);
        let display = self.editor.current_display_text();
-        
+
        if raw_pos != display_pos {
            self.debug_message = format!(
                "🗺️ Position mapping: Raw[{}]='{}' ↔ Display[{}]='{}'",
@@ -455,7 +459,7 @@ impl<D: DataProvider> EnhancedDemoEditor<D> {
                display.chars().nth(display_pos).unwrap_or('∅')
            );
        } else {
-            self.debug_message = format!("📍 Cursor at position {} (no mapping needed)", raw_pos);
+            self.debug_message = format!("📍 Cursor at position {raw_pos} (no mapping needed)");
        }
    }

@@ -466,7 +470,7 @@ impl<D: DataProvider> EnhancedDemoEditor<D> {
    fn data_provider(&self) -> &D { self.editor.data_provider() }
    fn data_provider_mut(&mut self) -> &mut D { self.editor.data_provider_mut() }
    fn ui_state(&self) -> &canvas::EditorState { self.editor.ui_state() }
-    
+
    fn move_up(&mut self) { let _ = self.editor.move_up(); }
    fn move_down(&mut self) { let _ = self.editor.move_down(); }
    fn move_left(&mut self) { let _ = self.editor.move_left(); }
@@ -486,7 +490,7 @@ fn handle_key_press(
    let mode = editor.mode();

    // Quit
-    if matches!(key, KeyCode::F(10)) || 
+    if matches!(key, KeyCode::F(10)) ||
       (key == KeyCode::Char('q') && modifiers.contains(KeyModifiers::CONTROL)) ||
       (key == KeyCode::Char('c') && modifiers.contains(KeyModifiers::CONTROL)) {
        return Ok(false);
@@ -526,9 +530,9 @@ fn handle_key_press(
        // Field analysis
        (AppMode::ReadOnly, KeyCode::Char('?'), _) => {
            let (raw, display, status, warning) = editor.get_current_field_analysis();
-            let warning_text = warning.map(|w| format!(" ⚠️ {}", w)).unwrap_or_default();
+            let warning_text = warning.map(|w| format!(" ⚠️ {w}")).unwrap_or_default();
            editor.debug_message = format!(
-                "🔍 Field {}: {} | Raw: '{}' | Display: '{}'{}", 
+                "🔍 Field {}: {} | Raw: '{}' | Display: '{}'{}",
                editor.current_field() + 1, status, raw, display, warning_text
            );
        },
@@ -554,7 +558,7 @@ fn run_app<B: Backend>(
                    }
                }
                Err(e) => {
-                    editor.debug_message = format!("❌ Error: {}", e);
+                    editor.debug_message = format!("❌ Error: {e}");
                }
            }
        }
@@ -588,9 +592,9 @@ fn render_enhanced_status(

    // Status bar
    let mode_text = match editor.mode() {
-        AppMode::Edit => "INSERT",
-        AppMode::ReadOnly => "NORMAL",
-        _ => "OTHER",
+        AppMode::Edit => "INSERT | (bar cursor)",
+        AppMode::ReadOnly => "NORMAL █ (block cursor)",
+        _ => "NORMAL █ (block cursor)",
    };

    let formatter_count = (0..editor.data_provider().field_count())
@@ -616,18 +620,18 @@ fn render_enhanced_status(
    let (raw, display, status, warning) = editor.get_current_field_analysis();
    let field_name = editor.data_provider().field_name(editor.current_field());
    let field_type = editor.current_field_type();
-    
+
    let mut analysis_lines = vec![
        format!("📝 Current: {} ({})", field_name, field_type),
        format!("🔧 Status: {}", status),
    ];

    if editor.show_raw_data || editor.mode() == AppMode::Edit {
-        analysis_lines.push(format!("💾 Raw Data: '{}'", raw));
-        analysis_lines.push(format!("✨ Display: '{}'", display));
+        analysis_lines.push(format!("💾 Raw Data: '{raw}'"));
+        analysis_lines.push(format!("✨ Display: '{display}'"));
    } else {
-        analysis_lines.push(format!("✨ User Sees: '{}'", display));
-        analysis_lines.push(format!("💾 Stored As: '{}'", raw));
+        analysis_lines.push(format!("✨ User Sees: '{display}'"));
+        analysis_lines.push(format!("💾 Stored As: '{raw}'"));
    }

    if editor.show_cursor_details {
@@ -639,7 +643,7 @@ fn render_enhanced_status(
    }

    if let Some(ref warn) = warning {
-        analysis_lines.push(format!("⚠️ Warning: {}", warn));
+        analysis_lines.push(format!("⚠️ Warning: {warn}"));
    }

    let analysis_color = if warning.is_some() {
@@ -660,7 +664,8 @@ fn render_enhanced_status(
    // Enhanced help
    let help_text = match editor.mode() {
        AppMode::ReadOnly => {
-            "🧩 ENHANCED CUSTOM FORMATTER DEMO\n\
+            "🎯 CURSOR-STYLE: Normal █ | Insert |\n\
+             🧩 ENHANCED CUSTOM FORMATTER DEMO\n\
             \n\
             Try these formatters:
             • PSC: 01001 → 010 01 | Phone: 1234567890 → (123) 456-7890 | Card: 1234567890123456 → 1234 5678 9012 3456
@@ -671,7 +676,8 @@ fn render_enhanced_status(
             Ctrl+C/F10=quit"
        }
        AppMode::Edit => {
-            "✏️ INSERT MODE - Real-time formatting as you type!\n\
+            "🎯 INSERT MODE - Cursor: | (bar)\n\
+             ✏️ Real-time formatting as you type!\n\
             \n\
             Current field rules: {}\n\
             • Raw input is authoritative (what gets stored)\n\
@@ -701,6 +707,7 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
    println!("🧩 Enhanced Canvas Custom Formatter Demo (Feature 4)");
    println!("✅ validation feature: ENABLED");
    println!("✅ gui feature: ENABLED");
+    println!("✅ cursor-style feature: ENABLED");
    println!("🧩 Enhanced features:");
    println!("   • 5 different custom formatters with edge cases");
    println!("   • Real-time format preview and validation");
@@ -716,7 +723,13 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
    let mut terminal = Terminal::new(backend)?;

    let data = MultiFormatterDemoData::new();
-    let editor = EnhancedDemoEditor::new(data);
+    let mut editor = EnhancedDemoEditor::new(data);
+
+    // Initialize with normal mode - library automatically sets block cursor
+    editor.editor.set_mode(AppMode::ReadOnly);
+
+    // Demonstrate that CursorManager is available and working
+    CursorManager::update_for_mode(AppMode::ReadOnly)?;

    let res = run_app(&mut terminal, editor);

@@ -724,8 +737,12 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
    execute!(terminal.backend_mut(), LeaveAlternateScreen, DisableMouseCapture)?;
    terminal.show_cursor()?;

+    // Library automatically resets cursor on FormEditor::drop()
+    // But we can also manually reset if needed
+    CursorManager::reset()?;
+
    if let Err(err) = res {
-        println!("{:?}", err);
+        println!("{err:?}");
    }

    println!("🧩 Enhanced custom formatter demo completed!");
--- a/canvas/examples/validation_5.rs
+++ b/canvas/examples/validation_5.rs
--- a/canvas/integration_patterns.rs
+++ b/canvas/integration_patterns.rs
@@ -114,7 +114,7 @@ async fn state_machine_example() {
            }
        }

-        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+        fn handle_feature_action(&mut self, action: &CanvasAction, context: &ActionContext) -> Option<String> {
            match action {
                CanvasAction::Custom(cmd) => match cmd.as_str() {
                    "submit" => {
@@ -147,7 +147,7 @@ async fn state_machine_example() {
    println!("  Initial state: {:?}", form.state);

    // Type some text to trigger state change
-    let _result = ActionDispatcher::dispatch(
+    let result = ActionDispatcher::dispatch(
        CanvasAction::InsertChar('u'),
        &mut form,
        &mut ideal_cursor,
@@ -231,7 +231,7 @@ async fn event_driven_example() {
            self.has_changes = changed;
        }

-        fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+        fn handle_feature_action(&mut self, action: &CanvasAction, context: &ActionContext) -> Option<String> {
            match action {
                CanvasAction::Custom(cmd) => match cmd.as_str() {
                    "validate" => {
@@ -384,7 +384,7 @@ async fn validation_pipeline_example() {
        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> {
+        fn handle_feature_action(&mut self, action: &CanvasAction, context: &ActionContext) -> Option<String> {
            match action {
                CanvasAction::Custom(cmd) => match cmd.as_str() {
                    "validate" => {
--- a/canvas/src/autocomplete/mod.rs
+++ b/canvas/src/autocomplete/mod.rs
@@ -1,12 +0,0 @@
-// src/autocomplete/mod.rs
-
-pub mod state;
-#[cfg(feature = "gui")]
-pub mod gui;
-
-// Re-export the main autocomplete types
-pub use state::{AutocompleteProvider, SuggestionItem};
-
-// Re-export GUI functions if available
-#[cfg(feature = "gui")]
-pub use gui::render_autocomplete_dropdown;
--- a/canvas/src/autocomplete/state.rs
+++ b/canvas/src/autocomplete/state.rs
@@ -1,5 +0,0 @@
-// src/autocomplete/state.rs
-//! Autocomplete provider types
-
-// Re-export the main types from data_provider
-pub use crate::data_provider::{AutocompleteProvider, SuggestionItem};
--- a/canvas/src/canvas/actions/mod.rs
+++ b/canvas/src/canvas/actions/mod.rs
@@ -1,4 +1,5 @@
 // src/canvas/actions/mod.rs
+//! Canvas action definitions and movement utilities

 pub mod types;
 pub mod movement;
--- a/canvas/src/canvas/actions/movement/char.rs
+++ b/canvas/src/canvas/actions/movement/char.rs
@@ -1,4 +1,5 @@
 // src/canvas/actions/movement/char.rs
+//! Character-level cursor movement functions

 /// Calculate new position when moving left
 pub fn move_left(current_pos: usize) -> usize {
--- a/canvas/src/canvas/actions/movement/line.rs
+++ b/canvas/src/canvas/actions/movement/line.rs
@@ -1,4 +1,5 @@
 // src/canvas/actions/movement/line.rs
+//! Line-level cursor movement and positioning

 /// Calculate cursor position for line start
 pub fn line_start_position() -> usize {
--- a/canvas/src/canvas/actions/movement/mod.rs
+++ b/canvas/src/canvas/actions/movement/mod.rs
@@ -1,10 +1,17 @@
 // src/canvas/actions/movement/mod.rs
+//! Movement utilities for character, word, and line navigation

 pub mod word;
 pub mod line;
 pub mod char;

 // Re-export commonly used functions
-pub use word::{find_next_word_start, find_word_end, find_prev_word_start, find_prev_word_end};
+pub use word::{
+    find_next_word_start, find_word_end, find_prev_word_start, find_prev_word_end,
+    find_next_big_word_start, find_prev_big_word_start, find_big_word_end, find_prev_big_word_end,
+    // Add these new exports:
+    find_last_word_start_in_field, find_last_word_end_in_field,
+    find_last_big_word_start_in_field, find_last_big_word_end_in_field,
+};
 pub use line::{line_start_position, line_end_position, safe_cursor_position};
 pub use char::{move_left, move_right, is_valid_cursor_position, clamp_cursor_position};
--- a/canvas/src/canvas/actions/movement/word.rs
+++ b/canvas/src/canvas/actions/movement/word.rs
@@ -1,6 +1,7 @@
 // src/canvas/actions/movement/word.rs
+//! Word-based cursor movement with vim-like semantics

-#[derive(PartialEq)]
+#[derive(PartialEq, Copy, Clone)]
 enum CharType {
    Whitespace,
    Alphanumeric,
@@ -55,7 +56,7 @@ pub fn find_word_end(text: &str, current_pos: usize) -> usize {

    let mut pos = current_pos.min(len - 1);
    let current_type = get_char_type(chars[pos]);
-    
+
    // If we're not on whitespace, move to end of current word
    if current_type != CharType::Whitespace {
        while pos < len && get_char_type(chars[pos]) == current_type {
@@ -107,40 +108,296 @@ pub fn find_prev_word_start(text: &str, current_pos: usize) -> usize {
    }
 }

-/// Find the end of the previous word
+/// Find the end of the previous word (CORRECTED VERSION for vim's ge command)
 pub fn find_prev_word_end(text: &str, current_pos: usize) -> usize {
    let chars: Vec<char> = text.chars().collect();
    if chars.is_empty() || current_pos == 0 {
        return 0;
    }

+    // Find all word end positions using boundary detection
+    let mut word_ends = Vec::new();
+    let mut in_word = false;
+    let mut current_word_type: Option<CharType> = None;
+
+    for (i, &ch) in chars.iter().enumerate() {
+        let char_type = get_char_type(ch);
+        
+        match char_type {
+            CharType::Whitespace => {
+                if in_word {
+                    // End of a word
+                    word_ends.push(i - 1);
+                    in_word = false;
+                    current_word_type = None;
+                }
+            }
+            _ => {
+                if !in_word || current_word_type != Some(char_type) {
+                    // Start of a new word (or word type change)
+                    if in_word {
+                        // End the previous word first
+                        word_ends.push(i - 1);
+                    }
+                    in_word = true;
+                    current_word_type = Some(char_type);
+                }
+            }
+        }
+    }
+
+    // Add the final word end if text doesn't end with whitespace
+    if in_word && !chars.is_empty() {
+        word_ends.push(chars.len() - 1);
+    }
+
+    // Find the largest word end position that's before current_pos
+    for &end_pos in word_ends.iter().rev() {
+        if end_pos < current_pos {
+            return end_pos;
+        }
+    }
+
+    0
+}
+
+/// Find the start of the next big_word (whitespace-separated)
+pub fn find_next_big_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() || current_pos >= chars.len() {
+        return text.chars().count();
+    }
+
+    let mut pos = current_pos;
+
+    // If we're on non-whitespace, skip to end of current big_word
+    while pos < chars.len() && !chars[pos].is_whitespace() {
+        pos += 1;
+    }
+
+    // Skip whitespace to find start of next big_word
+    while pos < chars.len() && chars[pos].is_whitespace() {
+        pos += 1;
+    }
+
+    pos
+}
+
+/// Find the start of the previous big_word (whitespace-separated)
+pub fn find_prev_big_word_start(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() || current_pos == 0 {
+        return 0;
+    }
+
    let mut pos = current_pos.saturating_sub(1);

    // Skip whitespace backwards
-    while pos > 0 && get_char_type(chars[pos]) == CharType::Whitespace {
+    while pos > 0 && chars[pos].is_whitespace() {
        pos -= 1;
    }

-    if pos == 0 && get_char_type(chars[0]) == CharType::Whitespace {
-        return 0;
-    }
-    if pos == 0 && get_char_type(chars[0]) != CharType::Whitespace {
-        return 0;
-    }
-
-    let word_type = get_char_type(chars[pos]);
-    while pos > 0 && get_char_type(chars[pos - 1]) == word_type {
+    // Find start of current big_word by going back while non-whitespace
+    while pos > 0 && !chars[pos - 1].is_whitespace() {
        pos -= 1;
    }

-    // Skip whitespace before this word
-    while pos > 0 && get_char_type(chars[pos - 1]) == CharType::Whitespace {
-        pos -= 1;
-    }
-
-    if pos > 0 {
-        pos - 1
-    } else {
-        0
-    }
+    pos
+}
+
+/// Find the end of the current/next big_word (whitespace-separated)
+pub fn find_big_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() {
+        return 0;
+    }
+
+    let mut pos = current_pos;
+
+    // If we're on whitespace, skip to start of next big_word
+    while pos < chars.len() && chars[pos].is_whitespace() {
+        pos += 1;
+    }
+
+    // If we reached end, return it
+    if pos >= chars.len() {
+        return chars.len();
+    }
+
+    // Find end of current big_word (last non-whitespace char)
+    while pos < chars.len() && !chars[pos].is_whitespace() {
+        pos += 1;
+    }
+
+    // Return position of last character in big_word
+    pos.saturating_sub(1)
+}
+
+/// Find the end of the previous big_word (whitespace-separated)
+pub fn find_prev_big_word_end(text: &str, current_pos: usize) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() || current_pos == 0 {
+        return 0;
+    }
+
+    let mut pos = current_pos.saturating_sub(1);
+
+    // Skip whitespace backwards
+    while pos > 0 && chars[pos].is_whitespace() {
+        pos -= 1;
+    }
+
+    // If we hit start of text and it's whitespace, return 0
+    if pos == 0 && chars[0].is_whitespace() {
+        return 0;
+    }
+
+    // Skip back to start of current big_word, then forward to end
+    while pos > 0 && !chars[pos - 1].is_whitespace() {
+        pos -= 1;
+    }
+
+    // Now find end of this big_word
+    while pos < chars.len() && !chars[pos].is_whitespace() {
+        pos += 1;
+    }
+
+    // Return position of last character in big_word
+    pos.saturating_sub(1)
+}
+
+// ============================================================================
+// FIELD BOUNDARY HELPER FUNCTIONS (for cross-field movement)
+// ============================================================================
+
+/// Find the start of the last word in a field (for cross-field 'b' movement)
+pub fn find_last_word_start_in_field(text: &str) -> usize {
+    if text.is_empty() {
+        return 0;
+    }
+
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() {
+        return 0;
+    }
+
+    let mut pos = chars.len().saturating_sub(1);
+
+    // Skip trailing whitespace
+    while pos > 0 && chars[pos].is_whitespace() {
+        pos -= 1;
+    }
+
+    // If the whole field is whitespace, return 0
+    if pos == 0 && chars[0].is_whitespace() {
+        return 0;
+    }
+
+    // Now we're on a non-whitespace character
+    // Find the start of this word by going backwards while chars are the same type
+    let char_type = if chars[pos].is_alphanumeric() { "alnum" } else { "punct" };
+
+    while pos > 0 {
+        let prev_char = chars[pos - 1];
+        let prev_type = if prev_char.is_alphanumeric() {
+            "alnum"
+        } else if prev_char.is_whitespace() {
+            "space"
+        } else {
+            "punct"
+        };
+
+        // Stop if we hit whitespace or different word type
+        if prev_type == "space" || prev_type != char_type {
+            break;
+        }
+        pos -= 1;
+    }
+
+    pos
+}
+
+/// Find the end of the last word in a field (for cross-field 'ge' movement)
+pub fn find_last_word_end_in_field(text: &str) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() {
+        return 0;
+    }
+
+    // Start from the end and find the last non-whitespace character
+    let mut pos = chars.len() - 1;
+    
+    // Skip trailing whitespace
+    while pos > 0 && chars[pos].is_whitespace() {
+        pos -= 1;
+    }
+
+    // If the whole field is whitespace, return 0
+    if chars[pos].is_whitespace() {
+        return 0;
+    }
+
+    // We're now at the end of the last word
+    pos
+}
+
+/// Find the start of the last big_word in a field (for cross-field 'B' movement)
+pub fn find_last_big_word_start_in_field(text: &str) -> usize {
+    if text.is_empty() {
+        return 0;
+    }
+
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() {
+        return 0;
+    }
+
+    let mut pos = chars.len().saturating_sub(1);
+
+    // Skip trailing whitespace
+    while pos > 0 && chars[pos].is_whitespace() {
+        pos -= 1;
+    }
+
+    // If the whole field is whitespace, return 0
+    if pos == 0 && chars[0].is_whitespace() {
+        return 0;
+    }
+
+    // Now we're on a non-whitespace character
+    // Find the start of this big_word by going backwards while chars are non-whitespace
+    while pos > 0 {
+        let prev_char = chars[pos - 1];
+
+        // Stop if we hit whitespace (big_word boundary)
+        if prev_char.is_whitespace() {
+            break;
+        }
+        pos -= 1;
+    }
+
+    pos
+}
+
+/// Find the end of the last big_word in a field (for cross-field 'gE' movement)
+pub fn find_last_big_word_end_in_field(text: &str) -> usize {
+    let chars: Vec<char> = text.chars().collect();
+    if chars.is_empty() {
+        return 0;
+    }
+
+    let mut pos = chars.len().saturating_sub(1);
+
+    // Skip trailing whitespace
+    while pos > 0 && chars[pos].is_whitespace() {
+        pos -= 1;
+    }
+
+    // If the whole field is whitespace, return 0
+    if pos == 0 && chars[0].is_whitespace() {
+        return 0;
+    }
+
+    // We're now at the end of the last big_word
+    pos
 }
--- a/canvas/src/canvas/actions/types.rs
+++ b/canvas/src/canvas/actions/types.rs
@@ -1,77 +1,121 @@
 // src/canvas/actions/types.rs
+//! Core action types and result handling for canvas operations.

-/// All available canvas actions
+/// All available canvas actions.
+///
+/// This enum lists high-level actions that can be performed on the canvas.
+/// Consumers can match on variants to implement custom handling or map input
+/// events to these canonical actions.
+#[non_exhaustive]
 #[derive(Debug, Clone, PartialEq)]
 pub enum CanvasAction {
    // Movement actions
+    /// Move the cursor left by one character (or logical unit).
    MoveLeft,
+    /// Move the cursor right by one character (or logical unit).
    MoveRight,
+    /// Move the cursor up a visual line/field.
    MoveUp,
+    /// Move the cursor down a visual line/field.
    MoveDown,

    // Word movement
+    /// Move to the start of the next word.
    MoveWordNext,
+    /// Move to the start of the previous word.
    MoveWordPrev,
+    /// Move to the end of the current/next word.
    MoveWordEnd,
+    /// Move to the previous word end (vim `ge`).
    MoveWordEndPrev,

    // Line movement
+    /// Move to the start of the current line.
    MoveLineStart,
+    /// Move to the end of the current line.
    MoveLineEnd,

    // Field movement
+    /// Move to the next field.
    NextField,
+    /// Move to the previous field.
    PrevField,
+    /// Move to the first field.
    MoveFirstLine,
+    /// Move to the last field.
    MoveLastLine,

    // Editing actions
+    /// Insert a character at the cursor.
    InsertChar(char),
+    /// Delete character before the cursor.
    DeleteBackward,
+    /// Delete character under/after the cursor.
    DeleteForward,

-    // Autocomplete actions
-    TriggerAutocomplete,
+    // Suggestions actions
+    /// Trigger suggestions dropdown (e.g. Tab).
+    TriggerSuggestions,
+    /// Move selection up in suggestions dropdown.
    SuggestionUp,
+    /// Move selection down in suggestions dropdown.
    SuggestionDown,
+    /// Accept the selected suggestion.
    SelectSuggestion,
+    /// Exit suggestions UI.
    ExitSuggestions,

    // Custom actions
+    /// Custom named action for application-specific behavior.
    Custom(String),
 }

-/// Result type for canvas actions
+/// Result type for canvas actions.
+///
+/// Action handlers return an ActionResult to indicate success, user-facing
+/// messages, or errors. The enum is non-exhaustive to allow extension.
+#[non_exhaustive]
 #[derive(Debug, Clone)]
 pub enum ActionResult {
+    /// Action completed successfully.
    Success,
+    /// Action completed with a user-facing message.
    Message(String),
+    /// Action was handled by the application with an associated message.
    HandledByApp(String),
+    /// Action was handled by a feature with an associated message.
    HandledByFeature(String), // Keep for compatibility
+    /// An error occurred while handling the action.
    Error(String),
 }

 impl ActionResult {
+    /// Convenience constructor for Success.
    pub fn success() -> Self {
        Self::Success
    }

+    /// Convenience constructor for Message.
    pub fn success_with_message(msg: &str) -> Self {
        Self::Message(msg.to_string())
    }

+    /// Convenience constructor for HandledByApp.
    pub fn handled_by_app(msg: &str) -> Self {
        Self::HandledByApp(msg.to_string())
    }

+    /// Convenience constructor for Error.
    pub fn error(msg: &str) -> Self {
        Self::Error(msg.to_string())
    }

+    /// Returns true for any variant representing a success-like outcome.
    pub fn is_success(&self) -> bool {
        matches!(self, Self::Success | Self::Message(_) | Self::HandledByApp(_) | Self::HandledByFeature(_))
    }

+    /// Extract a message from the result when present.
    pub fn message(&self) -> Option<&str> {
        match self {
            Self::Message(msg) | Self::HandledByApp(msg) | Self::HandledByFeature(msg) | Self::Error(msg) => Some(msg),
@@ -81,7 +125,7 @@ impl ActionResult {
 }

 impl CanvasAction {
-    /// Get a human-readable description of this action
+    /// Get a human-readable description of this action.
    pub fn description(&self) -> &'static str {
        match self {
            Self::MoveLeft => "move left",
@@ -101,7 +145,7 @@ impl CanvasAction {
            Self::InsertChar(_c) => "insert character",
            Self::DeleteBackward => "delete backward",
            Self::DeleteForward => "delete forward",
-            Self::TriggerAutocomplete => "trigger autocomplete",
+            Self::TriggerSuggestions => "trigger suggestions",
            Self::SuggestionUp => "suggestion up",
            Self::SuggestionDown => "suggestion down",
            Self::SelectSuggestion => "select suggestion",
@@ -110,7 +154,7 @@ impl CanvasAction {
        }
    }

-    /// Get all movement-related actions
+    /// Get all movement-related actions.
    pub fn movement_actions() -> Vec<CanvasAction> {
        vec![
            Self::MoveLeft,
@@ -130,7 +174,7 @@ impl CanvasAction {
        ]
    }

-    /// Get all editing-related actions
+    /// Get all editing-related actions.
    pub fn editing_actions() -> Vec<CanvasAction> {
        vec![
            Self::InsertChar(' '), // Example char
@@ -139,10 +183,10 @@ impl CanvasAction {
        ]
    }

-    /// Get all autocomplete-related actions
-    pub fn autocomplete_actions() -> Vec<CanvasAction> {
+    /// Get all suggestions-related actions.
+    pub fn suggestions_actions() -> Vec<CanvasAction> {
        vec![
-            Self::TriggerAutocomplete,
+            Self::TriggerSuggestions,
            Self::SuggestionUp,
            Self::SuggestionDown,
            Self::SelectSuggestion,
@@ -150,7 +194,7 @@ impl CanvasAction {
        ]
    }

-    /// Check if this action modifies text content
+    /// Check if this action modifies text content.
    pub fn is_editing_action(&self) -> bool {
        matches!(self,
            Self::InsertChar(_) |
@@ -159,7 +203,7 @@ impl CanvasAction {
        )
    }

-    /// Check if this action moves the cursor
+    /// Check if this action moves the cursor.
    pub fn is_movement_action(&self) -> bool {
        matches!(self,
            Self::MoveLeft | Self::MoveRight | Self::MoveUp | Self::MoveDown |
--- a/canvas/src/canvas/cursor.rs
+++ b/canvas/src/canvas/cursor.rs
@@ -1,5 +1,9 @@
 // src/canvas/cursor.rs
 //! Cursor style management for different canvas modes
+//!
+//! Provides helpers to update and reset terminal cursor style when the
+//! `cursor-style` feature is enabled. When the feature is disabled the
+//! functions are no-ops.

 #[cfg(feature = "cursor-style")]
 use crossterm::{cursor::SetCursorStyle, execute};
@@ -12,32 +16,47 @@ use crate::canvas::modes::AppMode;
 pub struct CursorManager;

 impl CursorManager {
-    /// Update cursor style based on current mode
+    /// Update cursor style based on current mode.
+    ///
+    /// When the `textmode-normal` feature is enabled a fixed style is applied.
+    /// Otherwise, the cursor style is mapped to the provided AppMode.
    #[cfg(feature = "cursor-style")]
    pub fn update_for_mode(mode: AppMode) -> io::Result<()> {
-        let style = match mode {
-            AppMode::Edit => SetCursorStyle::SteadyBar,           // Thin line for insert
-            AppMode::ReadOnly => SetCursorStyle::SteadyBlock,     // Block for normal
-            AppMode::Highlight => SetCursorStyle::BlinkingBlock,  // Blinking for visual
-            AppMode::General => SetCursorStyle::SteadyBlock,      // Block for general
-            AppMode::Command => SetCursorStyle::SteadyUnderScore, // Underscore for command
-        };
-        
-        execute!(io::stdout(), style)
+        // NORMALMODE: force underscore for every mode
+        #[cfg(feature = "textmode-normal")]
+        {
+            let style = SetCursorStyle::SteadyBar;
+            execute!(io::stdout(), style)
+        }
+
+        // Default (not normal): original mapping
+        #[cfg(not(feature = "textmode-normal"))]
+        {
+            let style = match mode {
+                AppMode::Edit => SetCursorStyle::SteadyBar,           // Thin line for insert
+                AppMode::ReadOnly => SetCursorStyle::SteadyBlock,     // Block for normal
+                AppMode::Highlight => SetCursorStyle::BlinkingBlock,  // Blinking for visual
+                AppMode::General => SetCursorStyle::SteadyBlock,      // Block for general
+                AppMode::Command => SetCursorStyle::SteadyUnderScore, // Underscore for command
+            };
+
+            return execute!(io::stdout(), style);
+        }
    }

-    /// No-op when cursor-style feature is disabled
+    /// No-op when cursor-style feature is disabled.
    #[cfg(not(feature = "cursor-style"))]
    pub fn update_for_mode(_mode: AppMode) -> io::Result<()> {
        Ok(())
    }

-    /// Reset cursor to default on cleanup
+    /// Reset cursor to default on cleanup.
    #[cfg(feature = "cursor-style")]
    pub fn reset() -> io::Result<()> {
        execute!(io::stdout(), SetCursorStyle::DefaultUserShape)
    }

+    /// Reset is a no-op when the cursor-style feature is disabled.
    #[cfg(not(feature = "cursor-style"))]
    pub fn reset() -> io::Result<()> {
        Ok(())
--- a/canvas/src/canvas/gui.rs
+++ b/canvas/src/canvas/gui.rs
@@ -1,12 +1,16 @@
 // src/canvas/gui.rs
 //! Canvas GUI updated to work with FormEditor
+//!
+//! This module provides rendering helpers for the canvas UI when the `gui`
+//! feature is enabled. It exposes high-level functions to render the canvas
+//! and convenience types for display options.

 #[cfg(feature = "gui")]
 use ratatui::{
    layout::{Alignment, Constraint, Direction, Layout, Rect},
    style::{Modifier, Style},
    text::{Line, Span},
-    widgets::{Block, Borders, BorderType, Paragraph},
+    widgets::{Block, Borders, BorderType, Paragraph, Wrap},
    Frame,
 };

@@ -15,45 +19,258 @@ use crate::canvas::theme::{CanvasTheme, DefaultCanvasTheme};
 use crate::canvas::modes::HighlightState;
 use crate::data_provider::DataProvider;
 use crate::editor::FormEditor;
+use unicode_width::UnicodeWidthChar;

 #[cfg(feature = "gui")]
 use std::cmp::{max, min};

-/// Render ONLY the canvas form fields - no autocomplete
-/// Updated to work with FormEditor instead of CanvasState trait
 #[cfg(feature = "gui")]
+#[derive(Debug, Clone, Copy)]
+/// How to handle overflow when rendering a field's content.
+pub enum OverflowMode {
+    /// Show an indicator character at the left/right when text is truncated.
+    /// Common default is '$'.
+    Indicator(char),
+    /// Wrap content into multiple visual lines.
+    Wrap,
+}
+
+#[cfg(feature = "gui")]
+#[derive(Debug, Clone, Copy)]
+/// Display options controlling canvas rendering behavior.
+pub struct CanvasDisplayOptions {
+    /// How to handle horizontal overflow for fields.
+    pub overflow: OverflowMode,
+}
+
+#[cfg(feature = "gui")]
+impl Default for CanvasDisplayOptions {
+    fn default() -> Self {
+        Self {
+            overflow: OverflowMode::Indicator('$'),
+        }
+    }
+}
+
+/// Utility: measure display width of a string
+#[cfg(feature = "gui")]
+fn display_width(s: &str) -> u16 {
+    s.chars()
+        .map(|c| UnicodeWidthChar::width(c).unwrap_or(0) as u16)
+        .sum()
+}
+
+/// Utility: clip a string to fit width, append indicator if overflow
+#[cfg(feature = "gui")]
+fn clip_with_indicator_line<'a>(s: &'a str, width: u16, indicator: char) -> Line<'a> {
+    if width == 0 {
+        return Line::from("");
+    }
+    if display_width(s) <= width {
+        return Line::from(Span::raw(s));
+    }
+    let budget = width.saturating_sub(1);
+    let mut out = String::new();
+    let mut used: u16 = 0;
+    for ch in s.chars() {
+        let w = UnicodeWidthChar::width(ch).unwrap_or(0) as u16;
+        if used + w > budget {
+            break;
+        }
+        out.push(ch);
+        used = used.saturating_add(w);
+    }
+    Line::from(vec![Span::raw(out), Span::raw(indicator.to_string())])
+}
+
+#[cfg(feature = "gui")]
+const RIGHT_PAD: u16 = 3;
+
+#[cfg(feature = "gui")]
+fn slice_by_display_cols(s: &str, start_cols: u16, max_cols: u16) -> String {
+    if max_cols == 0 {
+        return String::new();
+    }
+    let mut cols: u16 = 0;
+    let mut out = String::new();
+    let mut taken: u16 = 0;
+    let mut started = false;
+
+    for ch in s.chars() {
+        let w = UnicodeWidthChar::width(ch).unwrap_or(0) as u16;
+        let next = cols.saturating_add(w);
+
+        if !started {
+            if next <= start_cols {
+                cols = next;
+                continue;
+            } else {
+                started = true;
+            }
+        }
+
+        if taken.saturating_add(w) > max_cols {
+            break;
+        }
+        out.push(ch);
+        taken = taken.saturating_add(w);
+        cols = next;
+    }
+
+    out
+}
+
+#[cfg(feature = "gui")]
+fn compute_h_scroll_with_padding(cursor_cols: u16, width: u16) -> (u16, u16) {
+    let mut h = 0u16;
+    for _ in 0..2 {
+        let left_cols = if h > 0 { 1 } else { 0 };
+        let max_x_visible = width.saturating_sub(1 + RIGHT_PAD + left_cols);
+        let needed = cursor_cols.saturating_sub(max_x_visible);
+        if needed <= h {
+            return (h, left_cols);
+        }
+        h = needed;
+    }
+    let left_cols = if h > 0 { 1 } else { 0 };
+    (h, left_cols)
+}
+
+#[cfg(feature = "gui")]
+fn render_active_line_with_indicator<T: CanvasTheme>(
+    typed_text: &str,
+    completion: Option<&str>,
+    width: u16,
+    indicator: char,
+    cursor_chars: usize,
+    theme: &T,
+) -> (Line<'static>, u16, u16) {
+    if width == 0 {
+        return (Line::from(""), 0, 0);
+    }
+
+    // Cursor display column
+    let mut cursor_cols: u16 = 0;
+    for (i, ch) in typed_text.chars().enumerate() {
+        if i >= cursor_chars {
+            break;
+        }
+        cursor_cols = cursor_cols
+            .saturating_add(UnicodeWidthChar::width(ch).unwrap_or(0) as u16);
+    }
+
+    let (h_scroll, left_cols) = compute_h_scroll_with_padding(cursor_cols, width);
+
+    let total_cols = display_width(typed_text);
+    let content_budget = width.saturating_sub(left_cols);
+    let show_right = total_cols.saturating_sub(h_scroll) > content_budget;
+    let right_cols: u16 = if show_right { 1 } else { 0 };
+
+    let visible_cols = width.saturating_sub(left_cols + right_cols);
+    let visible_typed = slice_by_display_cols(typed_text, h_scroll, visible_cols);
+
+    let used_typed_cols = display_width(&visible_typed);
+    let mut remaining_cols = visible_cols.saturating_sub(used_typed_cols);
+    let mut visible_completion = String::new();
+
+    if let Some(comp) = completion {
+        if !comp.is_empty() && remaining_cols > 0 {
+            visible_completion = slice_by_display_cols(comp, 0, remaining_cols);
+        }
+    }
+
+    let mut spans: Vec<Span> = Vec::with_capacity(3);
+    if left_cols == 1 {
+        spans.push(Span::raw(indicator.to_string()));
+    }
+    spans.push(Span::styled(
+        visible_typed,
+        Style::default().fg(theme.fg()),
+    ));
+    if !visible_completion.is_empty() {
+        spans.push(Span::styled(
+            visible_completion,
+            Style::default().fg(theme.suggestion_gray()),
+        ));
+    }
+    if show_right {
+        spans.push(Span::raw(indicator.to_string()));
+    }
+
+    (Line::from(spans), h_scroll, left_cols)
+}
+
+#[cfg(feature = "gui")]
+/// Render the canvas into the provided frame using default display options.
+///
+/// Returns the rectangle of the active input field if present.
 pub fn render_canvas<T: CanvasTheme, D: DataProvider>(
    f: &mut Frame,
    area: Rect,
    editor: &FormEditor<D>,
    theme: &T,
 ) -> Option<Rect> {
-    // Convert SelectionState to HighlightState
-    let highlight_state = convert_selection_to_highlight(editor.ui_state().selection_state());
-    render_canvas_with_highlight(f, area, editor, theme, &highlight_state)
+    let opts = CanvasDisplayOptions::default();
+    render_canvas_with_options(f, area, editor, theme, opts)
 }

-/// Render canvas with explicit highlight state (for advanced use)
 #[cfg(feature = "gui")]
-pub fn render_canvas_with_highlight<T: CanvasTheme, D: DataProvider>(
+/// Render the canvas into the provided frame with explicit display options.
+///
+/// This is the more configurable entrypoint for rendering and is useful for
+/// tests or when callers need to override overflow handling.
+pub fn render_canvas_with_options<T: CanvasTheme, D: DataProvider>(
+    f: &mut Frame,
+    area: Rect,
+    editor: &FormEditor<D>,
+    theme: &T,
+    opts: CanvasDisplayOptions,
+) -> Option<Rect> {
+    let highlight_state =
+        convert_selection_to_highlight(editor.ui_state().selection_state());
+
+    #[cfg(feature = "suggestions")]
+    let active_completion = if editor.ui_state().is_suggestions_active()
+        && editor.ui_state().suggestions.active_field
+            == Some(editor.ui_state().current_field())
+    {
+        editor.ui_state().suggestions.completion_text.clone()
+    } else {
+        None
+    };
+    #[cfg(not(feature = "suggestions"))]
+    let active_completion: Option<String> = None;
+
+    render_canvas_with_highlight_and_options(
+        f,
+        area,
+        editor,
+        theme,
+        &highlight_state,
+        active_completion,
+        opts,
+    )
+}
+
+#[cfg(feature = "gui")]
+fn render_canvas_with_highlight_and_options<T: CanvasTheme, D: DataProvider>(
    f: &mut Frame,
    area: Rect,
    editor: &FormEditor<D>,
    theme: &T,
    highlight_state: &HighlightState,
+    active_completion: Option<String>,
+    opts: CanvasDisplayOptions,
 ) -> Option<Rect> {
    let ui_state = editor.ui_state();
    let data_provider = editor.data_provider();

-    // Build field information
    let field_count = data_provider.field_count();
    let mut fields: Vec<&str> = Vec::with_capacity(field_count);
    let mut inputs: Vec<String> = Vec::with_capacity(field_count);

    for i in 0..field_count {
        fields.push(data_provider.field_name(i));
-
-        // Use editor-provided effective display text per field (Feature 4/mask aware)
        #[cfg(feature = "validation")]
        {
            inputs.push(editor.display_text_for_field(i));
@@ -67,7 +284,7 @@ pub fn render_canvas_with_highlight<T: CanvasTheme, D: DataProvider>(
    let current_field_idx = ui_state.current_field();
    let is_edit_mode = matches!(ui_state.mode(), crate::canvas::modes::AppMode::Edit);

-    render_canvas_fields(
+    render_canvas_fields_with_options(
        f,
        area,
        &fields,
@@ -76,59 +293,50 @@ pub fn render_canvas_with_highlight<T: CanvasTheme, D: DataProvider>(
        theme,
        is_edit_mode,
        highlight_state,
-        editor.display_cursor_position(), // Use display cursor position for masks
-        false, // TODO: track unsaved changes in editor
-        |i| {
-            // Get display value for field i using editor logic (Feature 4 + masks)
-            #[cfg(feature = "validation")]
-            {
-                editor.display_text_for_field(i)
-            }
-            #[cfg(not(feature = "validation"))]
-            {
-                data_provider.field_value(i).to_string()
-            }
-        },
-        |i| {
-            // Check if field has display override (custom formatter or mask)
-            #[cfg(feature = "validation")]
-            {
-                editor.ui_state().validation_state().get_field_config(i)
-                    .map(|cfg| {
-                        // Formatter takes precedence; if present, it's a display override
-                        #[allow(unused_mut)]
-                        let mut has_override = false;
-                        #[cfg(feature = "validation")]
-                        {
-                            has_override = cfg.custom_formatter.is_some();
-                        }
-                        has_override || cfg.display_mask.is_some()
-                    })
-                    .unwrap_or(false)
-            }
-            #[cfg(not(feature = "validation"))]
-            {
-                false
-            }
+        editor.display_cursor_position(),
+        false,
+        #[cfg(feature = "validation")]
+        |field_idx| editor.display_text_for_field(field_idx),
+        #[cfg(not(feature = "validation"))]
+        |field_idx| data_provider.field_value(field_idx).to_string(),
+        #[cfg(feature = "validation")]
+        |field_idx| {
+            editor
+                .ui_state()
+                .validation_state()
+                .get_field_config(field_idx)
+                .map(|cfg| cfg.custom_formatter.is_some() || cfg.display_mask.is_some())
+                .unwrap_or(false)
        },
+        #[cfg(not(feature = "validation"))]
+        |_field_idx| false,
+        active_completion,
+        opts,
    )
 }

-/// Convert SelectionState to HighlightState for rendering
 #[cfg(feature = "gui")]
-fn convert_selection_to_highlight(selection: &crate::canvas::state::SelectionState) -> HighlightState {
+fn convert_selection_to_highlight(
+    selection: &crate::canvas::state::SelectionState,
+) -> HighlightState {
    use crate::canvas::state::SelectionState;

    match selection {
        SelectionState::None => HighlightState::Off,
-        SelectionState::Characterwise { anchor } => HighlightState::Characterwise { anchor: *anchor },
-        SelectionState::Linewise { anchor_field } => HighlightState::Linewise { anchor_line: *anchor_field },
+        SelectionState::Characterwise { anchor } => {
+            HighlightState::Characterwise { anchor: *anchor }
+        }
+        SelectionState::Linewise { anchor_field } => {
+            HighlightState::Linewise {
+                anchor_line: *anchor_field,
+            }
+        }
    }
 }

-/// Core canvas field rendering
+/// Core canvas field rendering with options
 #[cfg(feature = "gui")]
-fn render_canvas_fields<T: CanvasTheme, F1, F2>(
+fn render_canvas_fields_with_options<T: CanvasTheme, F1, F2>(
    f: &mut Frame,
    area: Rect,
    fields: &[&str],
@@ -141,18 +349,18 @@ fn render_canvas_fields<T: CanvasTheme, F1, F2>(
    has_unsaved_changes: bool,
    get_display_value: F1,
    has_display_override: F2,
+    active_completion: Option<String>,
+    opts: CanvasDisplayOptions,
 ) -> 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 {
@@ -161,7 +369,6 @@ where
        Style::default().fg(theme.secondary())
    };

-    // Input container
    let input_container = Block::default()
        .borders(Borders::ALL)
        .border_type(BorderType::Rounded)
@@ -177,28 +384,111 @@ where

    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(),
-        inputs,
-        current_field_idx,
-        theme,
-        highlight_state,
-        current_cursor_pos,
-        get_display_value,
-        has_display_override,
-    )
+    let mut active_field_input_rect = None;
+
+    for i in 0..inputs.len() {
+        let is_active = i == *current_field_idx;
+        let typed_text = get_display_value(i);
+        let inner_width = input_rows[i].width;
+
+        // ---- BEGIN MODIFIED SECTION ----
+        let mut h_scroll_for_cursor: u16 = 0;
+        let mut left_offset_for_cursor: u16 = 0;
+
+        let line = match highlight_state {
+            // Selection highlighting active: always use highlighting, even for the active field
+            HighlightState::Characterwise { .. } | HighlightState::Linewise { .. } => {
+                apply_highlighting(
+                    &typed_text,
+                    i,
+                    current_field_idx,
+                    current_cursor_pos,
+                    highlight_state,
+                    theme,
+                    is_active,
+                )
+            }
+
+            // No selection highlighting
+            HighlightState::Off => match opts.overflow {
+                // Indicator mode: special-case the active field to preserve h-scroll + indicators
+                OverflowMode::Indicator(ind) => {
+                    if is_active {
+                        let (l, hs, left_cols) = render_active_line_with_indicator(
+                            &typed_text,
+                            active_completion.as_deref(),
+                            inner_width,
+                            ind,
+                            current_cursor_pos,
+                            theme,
+                        );
+                        h_scroll_for_cursor = hs;
+                        left_offset_for_cursor = left_cols;
+                        l
+                    } else if display_width(&typed_text) <= inner_width {
+                        Line::from(Span::raw(typed_text.clone()))
+                    } else {
+                        clip_with_indicator_line(&typed_text, inner_width, ind)
+                    }
+                }
+
+                // Wrap mode: keep active completion for active line
+                OverflowMode::Wrap => {
+                    if is_active {
+                        let mut spans: Vec<Span> = Vec::new();
+                        spans.push(Span::styled(
+                                typed_text.clone(),
+                                Style::default().fg(theme.fg()),
+                        ));
+                        if let Some(completion) = &active_completion {
+                            if !completion.is_empty() {
+                                spans.push(Span::styled(
+                                        completion.clone(),
+                                        Style::default().fg(theme.suggestion_gray()),
+                                ));
+                            }
+                        }
+                        Line::from(spans)
+                    } else {
+                        Line::from(Span::raw(typed_text.clone()))
+                    }
+                }
+            },
+        };        
+        // ---- END MODIFIED SECTION ----
+
+        let mut p = Paragraph::new(line).alignment(Alignment::Left);
+
+        if matches!(opts.overflow, OverflowMode::Wrap) {
+            p = p.wrap(Wrap { trim: false });
+        }
+
+        f.render_widget(p, input_rows[i]);
+
+        if is_active {
+            active_field_input_rect = Some(input_rows[i]);
+            set_cursor_position_scrolled(
+                f,
+                input_rows[i],
+                &typed_text,
+                current_cursor_pos,
+                has_display_override(i),
+                h_scroll_for_cursor,
+                left_offset_for_cursor,
+            );
+        }
+    }
+
+    active_field_input_rect
 }

 /// Render field labels
@@ -212,7 +502,7 @@ fn render_field_labels<T: CanvasTheme>(
 ) {
    for (i, field) in fields.iter().enumerate() {
        let label = Paragraph::new(Line::from(Span::styled(
-            format!("{}:", field),
+            format!("{field}:"),
            Style::default().fg(theme.fg()),
        )));
        f.render_widget(
@@ -227,53 +517,6 @@ fn render_field_labels<T: CanvasTheme>(
    }
 }

-/// 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>(
@@ -283,27 +526,40 @@ fn apply_highlighting<'a, T: CanvasTheme>(
    current_cursor_pos: usize,
    highlight_state: &HighlightState,
    theme: &T,
-    _is_active: bool,
+    is_active: bool,
 ) -> Line<'a> {
    let text_len = text.chars().count();

    match highlight_state {
        HighlightState::Off => {
-            Line::from(Span::styled(
-                text,
-                Style::default().fg(theme.fg())
-            ))
+            Line::from(Span::styled(text, 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)
+            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_linewise_highlighting(
+                text,
+                field_index,
+                current_field_idx,
+                anchor_line,
+                theme,
+                is_active,
+            )
        }
    }
 }

-/// Apply characterwise highlighting - PROPER VIM-LIKE VERSION
+/// Apply characterwise highlighting (unchanged)
 #[cfg(feature = "gui")]
 fn apply_characterwise_highlighting<'a, T: CanvasTheme>(
    text: &'a str,
@@ -319,21 +575,20 @@ fn apply_characterwise_highlighting<'a, T: CanvasTheme>(
    let start_field = min(anchor_field, *current_field_idx);
    let end_field = max(anchor_field, *current_field_idx);

-    // Vim-like styling:
-    // - Selected text: contrasting color + background (like vim visual selection)
-    // - All other text: normal color (no special colors for active fields, etc.)
    let highlight_style = Style::default()
-        .fg(theme.highlight())          // ✅ Contrasting text color for selected text
-        .bg(theme.highlight_bg())       // ✅ Background for selected text
+        .fg(theme.highlight())
+        .bg(theme.highlight_bg())
        .add_modifier(Modifier::BOLD);

-    let normal_style = Style::default().fg(theme.fg()); // ✅ Normal text color everywhere else
+    let normal_style = Style::default().fg(theme.fg());

    if field_index >= start_field && field_index <= end_field {
        if start_field == end_field {
-            // Single field selection
            let (start_char, end_char) = if anchor_field == *current_field_idx {
-                (min(anchor_char, current_cursor_pos), max(anchor_char, current_cursor_pos))
+                (
+                    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 {
@@ -344,71 +599,67 @@ fn apply_characterwise_highlighting<'a, T: CanvasTheme>(
            let clamped_end = end_char.min(text_len);

            let before: String = text.chars().take(clamped_start).collect();
-            let highlighted: String = text.chars()
+            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),         // Normal text color
-                Span::styled(highlighted, highlight_style), // Contrasting color + background
-                Span::styled(after, normal_style),          // Normal text color
+                Span::styled(before, normal_style),
+                Span::styled(highlighted, highlight_style),
+                Span::styled(after, normal_style),
            ])
-        } else {
-            // Multi-field selection
-            if field_index == anchor_field {
-                if anchor_field < *current_field_idx {
-                    let clamped_start = anchor_char.min(text_len);
-                    let before: String = text.chars().take(clamped_start).collect();
-                    let highlighted: String = text.chars().skip(clamped_start).collect();
+        } else if field_index == anchor_field {
+            if anchor_field < *current_field_idx {
+                let clamped_start = anchor_char.min(text_len);
+                let before: String = text.chars().take(clamped_start).collect();
+                let highlighted: String = text.chars().skip(clamped_start).collect();

-                    Line::from(vec![
-                        Span::styled(before, normal_style),
-                        Span::styled(highlighted, highlight_style),
-                    ])
-                } else {
-                    let clamped_end = anchor_char.min(text_len);
-                    let highlighted: String = text.chars().take(clamped_end + 1).collect();
-                    let after: String = text.chars().skip(clamped_end + 1).collect();
-
-                    Line::from(vec![
-                        Span::styled(highlighted, highlight_style),
-                        Span::styled(after, normal_style),
-                    ])
-                }
-            } else if field_index == *current_field_idx {
-                if anchor_field < *current_field_idx {
-                    let clamped_end = current_cursor_pos.min(text_len);
-                    let highlighted: String = text.chars().take(clamped_end + 1).collect();
-                    let after: String = text.chars().skip(clamped_end + 1).collect();
-
-                    Line::from(vec![
-                        Span::styled(highlighted, highlight_style),
-                        Span::styled(after, normal_style),
-                    ])
-                } else {
-                    let clamped_start = current_cursor_pos.min(text_len);
-                    let before: String = text.chars().take(clamped_start).collect();
-                    let highlighted: String = text.chars().skip(clamped_start).collect();
-
-                    Line::from(vec![
-                        Span::styled(before, normal_style),
-                        Span::styled(highlighted, highlight_style),
-                    ])
-                }
+                Line::from(vec![
+                    Span::styled(before, normal_style),
+                    Span::styled(highlighted, highlight_style),
+                ])
            } else {
-                // Middle field: highlight entire field
-                Line::from(Span::styled(text, highlight_style))
+                let clamped_end = anchor_char.min(text_len);
+                let highlighted: String = text.chars().take(clamped_end + 1).collect();
+                let after: String = text.chars().skip(clamped_end + 1).collect();
+
+                Line::from(vec![
+                    Span::styled(highlighted, highlight_style),
+                    Span::styled(after, normal_style),
+                ])
            }
+        } else if field_index == *current_field_idx {
+            if anchor_field < *current_field_idx {
+                let clamped_end = current_cursor_pos.min(text_len);
+                let highlighted: String = text.chars().take(clamped_end + 1).collect();
+                let after: String = text.chars().skip(clamped_end + 1).collect();
+
+                Line::from(vec![
+                    Span::styled(highlighted, highlight_style),
+                    Span::styled(after, normal_style),
+                ])
+            } else {
+                let clamped_start = current_cursor_pos.min(text_len);
+                let before: String = text.chars().take(clamped_start).collect();
+                let highlighted: String = text.chars().skip(clamped_start).collect();
+
+                Line::from(vec![
+                    Span::styled(before, normal_style),
+                    Span::styled(highlighted, highlight_style),
+                ])
+            }
+        } else {
+            Line::from(Span::styled(text, highlight_style))
        }
    } else {
-        // Outside selection: always normal text color (no special active field color)
        Line::from(Span::styled(text, normal_style))
    }
 }

-/// Apply linewise highlighting - PROPER VIM-LIKE VERSION
+/// Apply linewise highlighting (unchanged)
 #[cfg(feature = "gui")]
 fn apply_linewise_highlighting<'a, T: CanvasTheme>(
    text: &'a str,
@@ -421,52 +672,58 @@ fn apply_linewise_highlighting<'a, T: CanvasTheme>(
    let start_field = min(*anchor_line, *current_field_idx);
    let end_field = max(*anchor_line, *current_field_idx);

-    // Vim-like styling:
-    // - Selected lines: contrasting text color + background
-    // - All other lines: normal text color (no special active field color)
    let highlight_style = Style::default()
-        .fg(theme.highlight())          // ✅ Contrasting text color for selected text
-        .bg(theme.highlight_bg())       // ✅ Background for selected text
+        .fg(theme.highlight())
+        .bg(theme.highlight_bg())
        .add_modifier(Modifier::BOLD);

-    let normal_style = Style::default().fg(theme.fg()); // ✅ Normal text color everywhere else
+    let normal_style = Style::default().fg(theme.fg());

    if field_index >= start_field && field_index <= end_field {
-        // Selected line: contrasting text color + background
        Line::from(Span::styled(text, highlight_style))
    } else {
-        // Normal line: normal text color (no special active field color)
        Line::from(Span::styled(text, normal_style))
    }
 }

-/// Set cursor position
+/// Set cursor position (x clamp only; no Y offset with wrap in this version)
 #[cfg(feature = "gui")]
-fn set_cursor_position(
+fn set_cursor_position_scrolled(
    f: &mut Frame,
    field_rect: Rect,
    text: &str,
    current_cursor_pos: usize,
-    has_display_override: bool,
+    _has_display_override: bool,
+    h_scroll: u16,
+    left_offset: u16,
 ) {
-    // BUG FIX: Use the correct display cursor position, not end of text
-    let cursor_x = field_rect.x + current_cursor_pos as u16;
+    let mut cols: u16 = 0;
+    for (i, ch) in text.chars().enumerate() {
+        if i >= current_cursor_pos {
+            break;
+        }
+        cols = cols.saturating_add(UnicodeWidthChar::width(ch).unwrap_or(0) as u16);
+    }
+
+    let mut visible_x = cols.saturating_sub(h_scroll).saturating_add(left_offset);
+
+    let limit = field_rect.width.saturating_sub(1 + RIGHT_PAD);
+    if visible_x > limit {
+        visible_x = limit;
+    }
+
+    let cursor_x = field_rect.x.saturating_add(visible_x);
    let cursor_y = field_rect.y;
-    
-    // SAFETY: Ensure cursor doesn't go beyond field bounds
-    let max_cursor_x = field_rect.x + field_rect.width.saturating_sub(1);
-    let safe_cursor_x = cursor_x.min(max_cursor_x);
-    
-    f.set_cursor_position((safe_cursor_x, cursor_y));
+    f.set_cursor_position((cursor_x, cursor_y));
 }

-/// Set default theme if custom not specified
+/// Default theme
 #[cfg(feature = "gui")]
 pub fn render_canvas_default<D: DataProvider>(
    f: &mut Frame,
    area: Rect,
    editor: &FormEditor<D>,
 ) -> Option<Rect> {
-    let theme = DefaultCanvasTheme::default();
+    let theme = DefaultCanvasTheme;
    render_canvas(f, area, editor, &theme)
 }
--- a/canvas/src/canvas/mod.rs
+++ b/canvas/src/canvas/mod.rs
@@ -1,4 +1,8 @@
 // src/canvas/mod.rs
+//! Top-level canvas module.
+//!
+//! Re-exports commonly used canvas types and modules so that downstream
+//! consumers can import them from `crate::canvas`.

 pub mod actions;
 pub mod state;
--- a/canvas/src/canvas/modes/highlight.rs
+++ b/canvas/src/canvas/modes/highlight.rs
@@ -1,15 +1,18 @@
-// src/state/app/highlight.rs
-// canvas/src/modes/highlight.rs
+// src/canvas/modes/highlight.rs
+//! Highlight state definitions for canvas visual/selection modes.

 #[derive(Debug, Clone, PartialEq, Eq)]
+#[derive(Default)]
+/// Represents the current highlight/visual selection state.
+///
+/// This enum is used by the GUI and selection logic to track whether a visual
+/// selection is active and its anchor position.
 pub enum HighlightState {
+    /// No highlighting active.
+    #[default]
    Off,
+    /// Characterwise selection with an anchor (field_index, char_position).
    Characterwise { anchor: (usize, usize) }, // (field_index, char_position)
+    /// Linewise selection anchored at a field index.
    Linewise { anchor_line: usize },          // field_index
 }
-
-impl Default for HighlightState {
-    fn default() -> Self {
-        HighlightState::Off
-    }
-}
--- a/canvas/src/canvas/modes/manager.rs
+++ b/canvas/src/canvas/modes/manager.rs
@@ -1,51 +1,84 @@
 // src/modes/handlers/mode_manager.rs
 // canvas/src/modes/manager.rs
+//! Mode manager utilities and the AppMode enum.
+//!
+//! This module defines the available canvas modes and provides helper
+//! functions to validate mode transitions and perform required side-effects
+//! such as updating cursor style when enabled.

 #[cfg(feature = "cursor-style")]
 use crate::canvas::CursorManager;

 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
+/// Top-level application modes used by the canvas UI.
+///
+/// These modes control input handling, cursor behavior, and how the UI should
+/// respond to user actions.
 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
+    /// For intro and admin screens
+    General,
+    /// Canvas read-only mode (navigation)
+    ReadOnly,
+    /// Canvas edit mode (insertion/modification)
+    Edit,
+    /// Canvas highlight/visual mode (selection)
+    Highlight,
+    /// Command mode overlay (for commands)
+    Command,
 }

 pub struct ModeManager;

 impl ModeManager {
    // Mode transition rules
+
+    /// Return true if the system can enter Command mode from the given current mode.
    pub fn can_enter_command_mode(current_mode: AppMode) -> bool {
        !matches!(current_mode, AppMode::Edit)
    }

+    /// Return true if the system can enter Edit mode from the given current mode.
    pub fn can_enter_edit_mode(current_mode: AppMode) -> bool {
        matches!(current_mode, AppMode::ReadOnly)
    }

+    /// Return true if the system can enter ReadOnly mode from the given current mode.
    pub fn can_enter_read_only_mode(current_mode: AppMode) -> bool {
        matches!(current_mode, AppMode::Edit | AppMode::Command | AppMode::Highlight)
    }

+    /// Return true if the system can enter Highlight mode from the given current mode.
    pub fn can_enter_highlight_mode(current_mode: AppMode) -> bool {
        matches!(current_mode, AppMode::ReadOnly)
    }


-    /// Transition to new mode with automatic cursor update (when cursor-style feature enabled)
+    /// Transition to new mode with automatic cursor update (when cursor-style feature enabled).
+    ///
+    /// Returns the resulting mode or an I/O error if cursor style update fails.
    pub fn transition_to_mode(current_mode: AppMode, new_mode: AppMode) -> std::io::Result<AppMode> {
-        if current_mode != new_mode {
-            #[cfg(feature = "cursor-style")]
-            {
-                let _ = CursorManager::update_for_mode(new_mode);
-            }
+        #[cfg(feature = "textmode-normal")]
+        {
+            // Always force Edit in normalmode
+            Ok(AppMode::Edit)
+        }
+
+        #[cfg(not(feature = "textmode-normal"))]
+        {
+            if current_mode != new_mode {
+                #[cfg(feature = "cursor-style")]
+                {
+                    let _ = CursorManager::update_for_mode(new_mode);
+                }
+            }
+            Ok(new_mode)
        }
-        Ok(new_mode)
    }

-    /// Enter highlight mode with cursor styling
+    /// Enter highlight mode with cursor styling.
+    ///
+    /// Returns Ok(true) if the transition succeeded (and cursor style was updated
+    /// when enabled), otherwise Ok(false) if the transition is not allowed.
    pub fn enter_highlight_mode_with_cursor(current_mode: AppMode) -> std::io::Result<bool> {
        if Self::can_enter_highlight_mode(current_mode) {
            #[cfg(feature = "cursor-style")]
@@ -58,7 +91,10 @@ impl ModeManager {
        }
    }

-    /// Exit highlight mode with cursor styling
+    /// Exit highlight mode with cursor styling and return the next mode.
+    ///
+    /// This helper returns the mode to switch to (ReadOnly) and updates cursor
+    /// style if the feature is enabled.
    pub fn exit_highlight_mode_with_cursor() -> std::io::Result<AppMode> {
        let new_mode = AppMode::ReadOnly;
        #[cfg(feature = "cursor-style")]
--- a/canvas/src/canvas/state.rs
+++ b/canvas/src/canvas/state.rs
@@ -1,10 +1,20 @@
 // src/canvas/state.rs
 //! Library-owned UI state - user never directly modifies this
+//!
+//! This module exposes the EditorState type (and related selection and
+//! suggestions types) which represent the internal UI state maintained by the
+//! canvas library. These types are intended for read-only access by callers
+//! and are mutated only through the library's APIs.

 use crate::canvas::modes::AppMode;

 /// Library-owned UI state - user never directly modifies this
 #[derive(Debug, Clone)]
+/// Internal editor UI state managed by the canvas library.
+///
+/// The fields are `pub(crate)` because they should only be modified by the
+/// library's internal action handlers. Consumers can use the provided getter
+/// methods to observe the state.
 pub struct EditorState {
    // Navigation state
    pub(crate) current_field: usize,
@@ -14,48 +24,74 @@ pub struct EditorState {
    // Mode state
    pub(crate) current_mode: AppMode,

-    // Autocomplete state
-    pub(crate) autocomplete: AutocompleteUIState,
+    // Suggestions dropdown state (only available with suggestions feature)
+    #[cfg(feature = "suggestions")]
+    pub(crate) suggestions: SuggestionsUIState,

    // Selection state (for vim visual mode)
    pub(crate) selection: SelectionState,
-    
+
    // Validation state (only available with validation feature)
    #[cfg(feature = "validation")]
    pub(crate) validation: crate::validation::ValidationState,
+
+    /// Computed fields state (only when computed feature is enabled)
+    #[cfg(feature = "computed")]
+    pub(crate) computed: Option<crate::computed::ComputedState>,
 }

+#[cfg(feature = "suggestions")]
 #[derive(Debug, Clone)]
-pub struct AutocompleteUIState {
+/// Internal suggestions UI state used to manage the suggestions dropdown.
+pub struct SuggestionsUIState {
    pub(crate) is_active: bool,
    pub(crate) is_loading: bool,
    pub(crate) selected_index: Option<usize>,
    pub(crate) active_field: Option<usize>,
+    pub(crate) active_query: Option<String>,
+    pub(crate) completion_text: Option<String>,
 }

 #[derive(Debug, Clone)]
+/// SelectionState represents the current selection/visual mode state used by
+/// the canvas (for example, Vim-like visual modes).
 pub enum SelectionState {
+    /// No selection is active.
    None,
+    /// Characterwise selection: (field_index, char_position)
    Characterwise { anchor: (usize, usize) },
+    /// Linewise selection anchored at a field (field index).
    Linewise { anchor_field: usize },
 }

 impl EditorState {
+    /// Create a new EditorState with default initial values.
    pub fn new() -> Self {
        Self {
            current_field: 0,
            cursor_pos: 0,
            ideal_cursor_column: 0,
+            // NORMALMODE: always start in Edit
+            #[cfg(feature = "textmode-normal")]
            current_mode: AppMode::Edit,
-            autocomplete: AutocompleteUIState {
+            // Default (vim): start in ReadOnly
+            #[cfg(not(feature = "textmode-normal"))]
+            current_mode: AppMode::ReadOnly,
+
+            #[cfg(feature = "suggestions")]
+            suggestions: SuggestionsUIState {
                is_active: false,
                is_loading: false,
                selected_index: None,
                active_field: None,
+                active_query: None,
+                completion_text: None,
            },
            selection: SelectionState::None,
            #[cfg(feature = "validation")]
            validation: crate::validation::ValidationState::new(),
+            #[cfg(feature = "computed")]
+            computed: None,
        }
    }

@@ -68,6 +104,15 @@ impl EditorState {
        self.current_field
    }

+    /// Check if field is computed
+    #[cfg(feature = "computed")]
+    pub fn is_computed_field(&self, field_index: usize) -> bool {
+        self.computed
+            .as_ref()
+            .map(|state| state.is_computed_field(field_index))
+            .unwrap_or(false)
+    }
+
    /// Get current cursor position (for user's business logic)
    pub fn cursor_position(&self) -> usize {
        self.cursor_pos
@@ -83,21 +128,23 @@ impl EditorState {
        self.current_mode
    }

-    /// Check if autocomplete is active (for user's business logic)
-    pub fn is_autocomplete_active(&self) -> bool {
-        self.autocomplete.is_active
+    /// Check if suggestions dropdown is active (for user's business logic)
+    #[cfg(feature = "suggestions")]
+    pub fn is_suggestions_active(&self) -> bool {
+        self.suggestions.is_active
    }

-    /// Check if autocomplete is loading (for user's business logic)
-    pub fn is_autocomplete_loading(&self) -> bool {
-        self.autocomplete.is_loading
+    /// Check if suggestions dropdown is loading (for user's business logic)
+    #[cfg(feature = "suggestions")]
+    pub fn is_suggestions_loading(&self) -> bool {
+        self.suggestions.is_loading
    }

    /// Get selection state (for user's business logic)
    pub fn selection_state(&self) -> &SelectionState {
        &self.selection
    }
-    
+
    /// Get validation state (for user's business logic)
    /// Only available when the 'validation' feature is enabled
    #[cfg(feature = "validation")]
@@ -109,6 +156,10 @@ impl EditorState {
    // INTERNAL MUTATIONS: Only library modifies these
    // ===================================================================

+    /// Move internal pointer to another field index.
+    ///
+    /// This method is intended for internal library use to change the current
+    /// field and reset the cursor to a safe value.
    pub(crate) fn move_to_field(&mut self, field_index: usize, field_count: usize) {
        if field_index < field_count {
            self.current_field = field_index;
@@ -117,7 +168,17 @@ impl EditorState {
        }
    }

-    pub(crate) fn set_cursor(&mut self, position: usize, max_position: usize, for_edit_mode: bool) {
+    /// Set the cursor position with appropriate clamping depending on mode.
+    ///
+    /// If `for_edit_mode` is true the cursor may be positioned at the end of
+    /// the text (allowing insertion); otherwise it will be kept within the
+    /// bounds of the existing text for read-only/highlight modes.
+    pub(crate) fn set_cursor(
+        &mut self,
+        position: usize,
+        max_position: usize,
+        for_edit_mode: bool,
+    ) {
        if for_edit_mode {
            // Edit mode: can go past end for insertion
            self.cursor_pos = position.min(max_position);
@@ -128,18 +189,26 @@ impl EditorState {
        self.ideal_cursor_column = self.cursor_pos;
    }

-    pub(crate) fn activate_autocomplete(&mut self, field_index: usize) {
-        self.autocomplete.is_active = true;
-        self.autocomplete.is_loading = true;
-        self.autocomplete.active_field = Some(field_index);
-        self.autocomplete.selected_index = None;
+    /// Explicitly open suggestions — should only be called on Tab
+    #[cfg(feature = "suggestions")]
+    pub(crate) fn open_suggestions(&mut self, field_index: usize) {
+        self.suggestions.is_active = true;
+        self.suggestions.is_loading = true;
+        self.suggestions.active_field = Some(field_index);
+        self.suggestions.active_query = None;
+        self.suggestions.selected_index = None;
+        self.suggestions.completion_text = None;
    }

-    pub(crate) fn deactivate_autocomplete(&mut self) {
-        self.autocomplete.is_active = false;
-        self.autocomplete.is_loading = false;
-        self.autocomplete.active_field = None;
-        self.autocomplete.selected_index = None;
+    /// Explicitly close suggestions — should be called on Esc or field change
+    #[cfg(feature = "suggestions")]
+    pub(crate) fn close_suggestions(&mut self) {
+        self.suggestions.is_active = false;
+        self.suggestions.is_loading = false;
+        self.suggestions.active_field = None;
+        self.suggestions.active_query = None;
+        self.suggestions.selected_index = None;
+        self.suggestions.completion_text = None;
    }
 }

--- a/canvas/src/canvas/theme.rs
+++ b/canvas/src/canvas/theme.rs
@@ -14,6 +14,7 @@ pub trait CanvasTheme {
    fn highlight(&self) -> Color;
    fn highlight_bg(&self) -> Color;
    fn warning(&self) -> Color;
+    fn suggestion_gray(&self) -> Color;
 }


@@ -47,4 +48,7 @@ impl CanvasTheme for DefaultCanvasTheme {
    fn warning(&self) -> Color {
        Color::Red
    }
+    fn suggestion_gray(&self) -> Color {
+        Color::DarkGray
+    }
 }
--- a/canvas/src/computed/mod.rs
+++ b/canvas/src/computed/mod.rs
@@ -0,0 +1,11 @@
+//! Computed fields subsystem.
+//!
+//! This module exposes the provider trait and the internal state management
+//! for computed (display-only) fields. Computed fields are values derived
+//! from other fields in the form and are not directly editable by the user.
+
+pub mod provider;
+pub mod state;
+
+pub use provider::{ComputedContext, ComputedProvider};
+pub use state::ComputedState;
--- a/canvas/src/computed/provider.rs
+++ b/canvas/src/computed/provider.rs
@@ -0,0 +1,32 @@
+//! Provider interface and context for computed/display-only fields.
+//!
+//! Implementors provide logic to compute a field's display value from the
+//! other field values in the form.
+
+/// Context information provided to computed field calculations
+#[derive(Debug, Clone)]
+pub struct ComputedContext<'a> {
+    /// All field values in the form (index -> value)
+    pub field_values: &'a [&'a str],
+    /// The field index being computed
+    pub target_field: usize,
+    /// Current field that user is editing (if any)
+    pub current_field: Option<usize>,
+}
+
+/// User implements this to provide computed field logic
+pub trait ComputedProvider {
+    /// Compute value for a field based on other field values.
+    /// Called automatically when any field changes.
+    fn compute_field(&mut self, context: ComputedContext) -> String;
+
+    /// Check if this provider handles the given field.
+    fn handles_field(&self, field_index: usize) -> bool;
+
+    /// Get list of field dependencies for optimization.
+    /// If field A depends on fields [1, 3], only recompute A when fields 1 or 3 change.
+    /// Default: depend on all fields (always recompute) with a reasonable upper bound.
+    fn field_dependencies(&self, _field_index: usize) -> Vec<usize> {
+        (0..100).collect()
+    }
+}
--- a/canvas/src/computed/state.rs
+++ b/canvas/src/computed/state.rs
@@ -0,0 +1,87 @@
+// src/computed/state.rs
+//! Computed field state: caching and dependency graph.
+//!
+//! This module holds the internal state necessary to track which fields are
+//! computed, their dependencies, and cached computed values. It is used by the
+//! editor to avoid unnecessary recomputation and to present computed fields as
+//! read-only.
+
+use std::collections::{HashMap, HashSet};
+
+/// Internal state for computed field management
+#[derive(Debug, Clone)]
+pub struct ComputedState {
+    /// Cached computed values (field_index -> computed_value)
+    computed_values: HashMap<usize, String>,
+    /// Field dependency graph (field_index -> depends_on_fields)
+    dependencies: HashMap<usize, Vec<usize>>,
+    /// Track which fields are computed (display-only)
+    computed_fields: HashSet<usize>,
+}
+
+impl ComputedState {
+    /// Create a new, empty computed state
+    pub fn new() -> Self {
+        Self {
+            computed_values: HashMap::new(),
+            dependencies: HashMap::new(),
+            computed_fields: HashSet::new(),
+        }
+    }
+
+    /// Register a field as computed with its dependencies
+    ///
+    /// - `field_index`: the field that is computed (display-only)
+    /// - `dependencies`: indices of fields this computed field depends on
+    pub fn register_computed_field(&mut self, field_index: usize, mut dependencies: Vec<usize>) {
+        // Deduplicate dependencies to keep graph lean
+        dependencies.sort_unstable();
+        dependencies.dedup();
+
+        self.computed_fields.insert(field_index);
+        self.dependencies.insert(field_index, dependencies);
+    }
+
+    /// Check if a field is computed (read-only, skip editing/navigation)
+    pub fn is_computed_field(&self, field_index: usize) -> bool {
+        self.computed_fields.contains(&field_index)
+    }
+
+    /// Get cached computed value for a field, if available
+    pub fn get_computed_value(&self, field_index: usize) -> Option<&String> {
+        self.computed_values.get(&field_index)
+    }
+
+    /// Update cached computed value for a field
+    pub fn set_computed_value(&mut self, field_index: usize, value: String) {
+        self.computed_values.insert(field_index, value);
+    }
+
+    /// Get fields that should be recomputed when `changed_field` changed
+    ///
+    /// This scans the dependency graph and returns all computed fields
+    /// that list `changed_field` as a dependency.
+    pub fn fields_to_recompute(&self, changed_field: usize) -> Vec<usize> {
+        self.dependencies
+            .iter()
+            .filter_map(|(field, deps)| {
+                if deps.contains(&changed_field) {
+                    Some(*field)
+                } else {
+                    None
+                }
+            })
+            .collect()
+    }
+
+    /// Iterator over all computed field indices
+    pub fn computed_fields(&self) -> impl Iterator<Item = usize> + '_ {
+        self.computed_fields.iter().copied()
+    }
+}
+
+impl Default for ComputedState {
+    fn default() -> Self {
+        Self::new()
+    }
+}
--- a/canvas/src/data_provider.rs
+++ b/canvas/src/data_provider.rs
@@ -1,7 +1,9 @@
 // src/data_provider.rs
 //! Simplified user interface - only business data, no UI state

+#[cfg(feature = "suggestions")]
 use anyhow::Result;
+#[cfg(feature = "suggestions")]
 use async_trait::async_trait;

 /// User implements this - only business data, no UI state
@@ -18,8 +20,8 @@ pub trait DataProvider {
    /// Set field value (library calls this when text changes)
    fn set_field_value(&mut self, index: usize, value: String);

-    /// Check if field supports autocomplete (optional)
-    fn supports_autocomplete(&self, _field_index: usize) -> bool {
+    /// Check if field supports suggestions (optional)
+    fn supports_suggestions(&self, _field_index: usize) -> bool {
        false
    }

@@ -27,23 +29,39 @@ pub trait DataProvider {
    fn display_value(&self, _index: usize) -> Option<&str> {
        None // Default: use actual value
    }
-    
+
    /// Get validation configuration for a field (optional)
    /// Only available when the 'validation' feature is enabled
    #[cfg(feature = "validation")]
    fn validation_config(&self, _field_index: usize) -> Option<crate::validation::ValidationConfig> {
        None
    }
+
+    /// Check if field is computed (display-only, skip in navigation)
+    /// Default: not computed
+    #[cfg(feature = "computed")]
+    fn is_computed_field(&self, _field_index: usize) -> bool {
+        false
+    }
+
+    /// Get computed field value if this is a computed field.
+    /// Returns None for regular fields. Default: not computed.
+    #[cfg(feature = "computed")]
+    fn computed_field_value(&self, _field_index: usize) -> Option<String> {
+        None
+    }
 }

-/// Optional: User implements this for autocomplete data
+/// Optional: User implements this for suggestions data
+#[cfg(feature = "suggestions")]
 #[async_trait]
-pub trait AutocompleteProvider {
-    /// Fetch autocomplete suggestions (user's business logic)
+pub trait SuggestionsProvider {
+    /// Fetch suggestions (user's business logic)
    async fn fetch_suggestions(&mut self, field_index: usize, query: &str)
        -> Result<Vec<SuggestionItem>>;
 }

+#[cfg(feature = "suggestions")]
 #[derive(Debug, Clone)]
 pub struct SuggestionItem {
    pub display_text: String,
--- a/canvas/src/editor.rs
+++ b/canvas/src/editor.rs
--- a/canvas/src/editor/computed_helpers.rs
+++ b/canvas/src/editor/computed_helpers.rs
@@ -0,0 +1,111 @@
+// src/editor/computed_helpers.rs
+
+use crate::computed::{ComputedContext, ComputedProvider, ComputedState};
+use crate::editor::FormEditor;
+use crate::DataProvider;
+
+impl<D: DataProvider> FormEditor<D> {
+    #[cfg(feature = "computed")]
+    pub fn set_computed_provider<C>(&mut self, mut provider: C)
+    where
+        C: ComputedProvider,
+    {
+        self.ui_state.computed = Some(ComputedState::new());
+
+        let field_count = self.data_provider.field_count();
+        for field_index in 0..field_count {
+            if provider.handles_field(field_index) {
+                let deps = provider.field_dependencies(field_index);
+                if let Some(computed_state) = &mut self.ui_state.computed {
+                    computed_state.register_computed_field(field_index, deps);
+                }
+            }
+        }
+
+        self.recompute_all_fields(&mut provider);
+    }
+
+    #[cfg(feature = "computed")]
+    pub fn recompute_fields<C>(
+        &mut self,
+        provider: &mut C,
+        field_indices: &[usize],
+    ) where
+        C: ComputedProvider,
+    {
+        if let Some(computed_state) = &mut self.ui_state.computed {
+            let field_values: Vec<String> = (0..self.data_provider.field_count())
+                .map(|i| {
+                    if computed_state.is_computed_field(i) {
+                        computed_state
+                            .get_computed_value(i)
+                            .cloned()
+                            .unwrap_or_default()
+                    } else {
+                        self.data_provider.field_value(i).to_string()
+                    }
+                })
+                .collect();
+
+            let field_refs: Vec<&str> =
+                field_values.iter().map(|s| s.as_str()).collect();
+
+            for &field_index in field_indices {
+                if provider.handles_field(field_index) {
+                    let context = ComputedContext {
+                        field_values: &field_refs,
+                        target_field: field_index,
+                        current_field: Some(self.ui_state.current_field),
+                    };
+
+                    let computed_value = provider.compute_field(context);
+                    computed_state.set_computed_value(
+                        field_index,
+                        computed_value,
+                    );
+                }
+            }
+        }
+    }
+
+    #[cfg(feature = "computed")]
+    pub fn recompute_all_fields<C>(&mut self, provider: &mut C)
+    where
+        C: ComputedProvider,
+    {
+        if let Some(computed_state) = &self.ui_state.computed {
+            let computed_fields: Vec<usize> =
+                computed_state.computed_fields().collect();
+            self.recompute_fields(provider, &computed_fields);
+        }
+    }
+
+    #[cfg(feature = "computed")]
+    pub fn on_field_changed<C>(
+        &mut self,
+        provider: &mut C,
+        changed_field: usize,
+    ) where
+        C: ComputedProvider,
+    {
+        if let Some(computed_state) = &self.ui_state.computed {
+            let fields_to_update =
+                computed_state.fields_to_recompute(changed_field);
+            if !fields_to_update.is_empty() {
+                self.recompute_fields(provider, &fields_to_update);
+            }
+        }
+    }
+
+    #[cfg(feature = "computed")]
+    pub fn effective_field_value(&self, field_index: usize) -> String {
+        if let Some(computed_state) = &self.ui_state.computed {
+            if let Some(computed_value) =
+                computed_state.get_computed_value(field_index)
+            {
+                return computed_value.clone();
+            }
+        }
+        self.data_provider.field_value(field_index).to_string()
+    }
+}
--- a/canvas/src/editor/core.rs
+++ b/canvas/src/editor/core.rs
@@ -0,0 +1,131 @@
+// src/editor/core.rs
+
+#[cfg(feature = "cursor-style")]
+use crate::canvas::CursorManager;
+
+use crate::canvas::modes::AppMode;
+use crate::canvas::state::EditorState;
+use crate::DataProvider;
+#[cfg(feature = "suggestions")]
+use crate::SuggestionItem;
+
+pub struct FormEditor<D: DataProvider> {
+    pub(crate) ui_state: EditorState,
+    pub(crate) data_provider: D,
+    #[cfg(feature = "suggestions")]
+    pub(crate) suggestions: Vec<SuggestionItem>,
+
+    #[cfg(feature = "validation")]
+    pub(crate) external_validation_callback: Option<
+        Box<
+            dyn FnMut(usize, &str) -> crate::validation::ExternalValidationState
+                + Send
+                + Sync,
+        >,
+    >,
+}
+
+impl<D: DataProvider> FormEditor<D> {
+    // Make helpers visible to sibling modules in this crate
+    pub(crate) fn char_to_byte_index(s: &str, char_idx: usize) -> usize {
+        s.char_indices()
+            .nth(char_idx)
+            .map(|(byte_idx, _)| byte_idx)
+            .unwrap_or_else(|| s.len())
+    }
+
+    #[allow(dead_code)]
+    pub(crate) fn byte_to_char_index(s: &str, byte_idx: usize) -> usize {
+        s[..byte_idx].chars().count()
+    }
+
+    pub fn new(data_provider: D) -> Self {
+        let editor = Self {
+            ui_state: EditorState::new(),
+            data_provider,
+            #[cfg(feature = "suggestions")]
+            suggestions: Vec::new(),
+            #[cfg(feature = "validation")]
+            external_validation_callback: None,
+        };
+
+        #[cfg(feature = "validation")]
+        {
+            let mut editor = editor;
+            editor.initialize_validation();
+
+            #[cfg(feature = "cursor-style")]
+            {
+                let _ = CursorManager::update_for_mode(editor.ui_state.current_mode);
+            }
+            editor
+        }
+        #[cfg(not(feature = "validation"))]
+        {
+            #[cfg(feature = "cursor-style")]
+            {
+                let _ = CursorManager::update_for_mode(editor.ui_state.current_mode);
+            }
+            editor
+        }
+    }
+
+    // Library-internal, used by multiple modules
+    pub(crate) fn current_text(&self) -> &str {
+        let field_index = self.ui_state.current_field;
+        if field_index < self.data_provider.field_count() {
+            self.data_provider.field_value(field_index)
+        } else {
+            ""
+        }
+    }
+
+    // Read-only getters
+    pub fn current_field(&self) -> usize {
+        self.ui_state.current_field()
+    }
+    pub fn cursor_position(&self) -> usize {
+        self.ui_state.cursor_position()
+    }
+    pub fn mode(&self) -> AppMode {
+        self.ui_state.mode()
+    }
+    #[cfg(feature = "suggestions")]
+    pub fn is_suggestions_active(&self) -> bool {
+        self.ui_state.is_suggestions_active()
+    }
+    pub fn ui_state(&self) -> &EditorState {
+        &self.ui_state
+    }
+    pub fn data_provider(&self) -> &D {
+        &self.data_provider
+    }
+    pub fn data_provider_mut(&mut self) -> &mut D {
+        &mut self.data_provider
+    }
+    #[cfg(feature = "suggestions")]
+    pub fn suggestions(&self) -> &[SuggestionItem] {
+        &self.suggestions
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn validation_state(&self) -> &crate::validation::ValidationState {
+        self.ui_state.validation_state()
+    }
+
+    // Cursor cleanup
+    #[cfg(feature = "cursor-style")]
+    pub fn cleanup_cursor(&self) -> std::io::Result<()> {
+        CursorManager::reset()
+    }
+    #[cfg(not(feature = "cursor-style"))]
+    pub fn cleanup_cursor(&self) -> std::io::Result<()> {
+        Ok(())
+    }
+}
+
+impl<D: DataProvider> Drop for FormEditor<D> {
+    fn drop(&mut self) {
+        let _ = self.cleanup_cursor();
+    }
+}
--- a/canvas/src/editor/display.rs
+++ b/canvas/src/editor/display.rs
@@ -0,0 +1,123 @@
+// src/editor/display.rs
+
+use crate::canvas::modes::AppMode;
+use crate::editor::FormEditor;
+use crate::DataProvider;
+
+impl<D: DataProvider> FormEditor<D> {
+    /// Get current field text for display.
+    /// Policies documented in original file.
+    #[cfg(feature = "validation")]
+    pub fn current_display_text(&self) -> String {
+        let field_index = self.ui_state.current_field;
+        let raw = if field_index < self.data_provider.field_count() {
+            self.data_provider.field_value(field_index)
+        } else {
+            ""
+        };
+
+        if let Some(cfg) = self.ui_state.validation.get_field_config(field_index) {
+            if cfg.custom_formatter.is_none() {
+                if let Some(mask) = &cfg.display_mask {
+                    return mask.apply_to_display(raw);
+                }
+            }
+
+            if cfg.custom_formatter.is_some() {
+                if matches!(self.ui_state.current_mode, AppMode::Edit) {
+                    return raw.to_string();
+                }
+                if let Some((formatted, _mapper, _warning)) =
+                    cfg.run_custom_formatter(raw)
+                {
+                    return formatted;
+                }
+            }
+
+            if let Some(mask) = &cfg.display_mask {
+                return mask.apply_to_display(raw);
+            }
+        }
+
+        raw.to_string()
+    }
+
+    /// Get effective display text for any field index (Feature 4 + masks).
+    #[cfg(feature = "validation")]
+    pub fn display_text_for_field(&self, field_index: usize) -> String {
+        let raw = if field_index < self.data_provider.field_count() {
+            self.data_provider.field_value(field_index)
+        } else {
+            ""
+        };
+
+        if let Some(cfg) = self.ui_state.validation.get_field_config(field_index) {
+            if cfg.custom_formatter.is_none() {
+                if let Some(mask) = &cfg.display_mask {
+                    return mask.apply_to_display(raw);
+                }
+            }
+
+            if cfg.custom_formatter.is_some() {
+                if field_index == self.ui_state.current_field
+                    && matches!(self.ui_state.current_mode, AppMode::Edit)
+                {
+                    return raw.to_string();
+                }
+                if let Some((formatted, _mapper, _warning)) =
+                    cfg.run_custom_formatter(raw)
+                {
+                    return formatted;
+                }
+            }
+
+            if let Some(mask) = &cfg.display_mask {
+                return mask.apply_to_display(raw);
+            }
+        }
+
+        raw.to_string()
+    }
+
+    /// Map raw cursor to display position (formatter/mask aware).
+    pub fn display_cursor_position(&self) -> usize {
+        let current_text = self.current_text();
+        let char_count = current_text.chars().count();
+
+        let raw_pos = match self.ui_state.current_mode {
+            AppMode::Edit => self.ui_state.cursor_pos.min(char_count),
+            _ => {
+                if char_count == 0 {
+                    0
+                } else {
+                    self.ui_state
+                        .cursor_pos
+                        .min(char_count.saturating_sub(1))
+                }
+            }
+        };
+
+        #[cfg(feature = "validation")]
+        {
+            let field_index = self.ui_state.current_field;
+            if let Some(cfg) = self.ui_state.validation.get_field_config(field_index) {
+                if !matches!(self.ui_state.current_mode, AppMode::Edit) {
+                    if let Some((formatted, mapper, _)) =
+                        cfg.run_custom_formatter(current_text)
+                    {
+                        return mapper.raw_to_formatted(
+                            current_text,
+                            &formatted,
+                            raw_pos,
+                        );
+                    }
+                }
+                if let Some(mask) = &cfg.display_mask {
+                    return mask.raw_pos_to_display_pos(raw_pos);
+                }
+            }
+        }
+
+        raw_pos
+    }
+}
--- a/canvas/src/editor/editing.rs
+++ b/canvas/src/editor/editing.rs
@@ -0,0 +1,348 @@
+// src/editor/editing.rs
+
+use crate::editor::FormEditor;
+use crate::DataProvider;
+
+impl<D: DataProvider> FormEditor<D> {
+    /// Open new line below (vim o)
+    pub fn open_line_below(&mut self) -> anyhow::Result<()> {
+        // paste the method body unchanged from editor.rs
+        // (exact code from your VIM COMMANDS: o and O section)
+        let field_count = self.data_provider.field_count();
+        if field_count == 0 {
+            return Ok(());
+        }
+        let next_field = (self.ui_state.current_field + 1)
+            .min(field_count.saturating_sub(1));
+        self.transition_to_field(next_field)?;
+        self.ui_state.cursor_pos = 0;
+        self.ui_state.ideal_cursor_column = 0;
+        self.enter_edit_mode();
+        Ok(())
+    }
+
+    /// Open new line above (vim O)
+    pub fn open_line_above(&mut self) -> anyhow::Result<()> {
+        let prev_field = self.ui_state.current_field.saturating_sub(1);
+        self.transition_to_field(prev_field)?;
+        self.ui_state.cursor_pos = 0;
+        self.ui_state.ideal_cursor_column = 0;
+        self.enter_edit_mode();
+        Ok(())
+    }
+
+    /// Handle character insertion (mask/limit-aware)
+    pub fn insert_char(&mut self, ch: char) -> anyhow::Result<()> {
+        // paste entire insert_char body unchanged
+        if self.ui_state.current_mode != crate::canvas::modes::AppMode::Edit
+        {
+            return Ok(());
+        }
+
+        #[cfg(feature = "validation")]
+        let field_index = self.ui_state.current_field;
+        #[cfg(feature = "validation")]
+        let raw_cursor_pos = self.ui_state.cursor_pos;
+        #[cfg(feature = "validation")]
+        let current_raw_text = self.data_provider.field_value(field_index);
+
+        #[cfg(not(feature = "validation"))]
+        let field_index = self.ui_state.current_field;
+        #[cfg(not(feature = "validation"))]
+        let raw_cursor_pos = self.ui_state.cursor_pos;
+        #[cfg(not(feature = "validation"))]
+        let current_raw_text = self.data_provider.field_value(field_index);
+
+        #[cfg(feature = "validation")]
+        {
+            if let Some(cfg) = self.ui_state.validation.get_field_config(
+                field_index,
+            ) {
+                if let Some(mask) = &cfg.display_mask {
+                    let display_cursor_pos =
+                        mask.raw_pos_to_display_pos(raw_cursor_pos);
+
+                    let pattern_char_len = mask.pattern().chars().count();
+                    if display_cursor_pos >= pattern_char_len {
+                        return Ok(());
+                    }
+
+                    if !mask.is_input_position(display_cursor_pos) {
+                        return Ok(());
+                    }
+
+                    let input_slots = (0..pattern_char_len)
+                        .filter(|&pos| mask.is_input_position(pos))
+                        .count();
+                    if current_raw_text.chars().count() >= input_slots {
+                        return Ok(());
+                    }
+                }
+            }
+        }
+
+        #[cfg(feature = "validation")]
+        {
+            let vr = self.ui_state.validation.validate_char_insertion(
+                field_index,
+                current_raw_text,
+                raw_cursor_pos,
+                ch,
+            );
+            if !vr.is_acceptable() {
+                return Ok(());
+            }
+        }
+
+        let new_raw_text = {
+            let mut temp = current_raw_text.to_string();
+            let byte_pos = Self::char_to_byte_index(
+                current_raw_text,
+                raw_cursor_pos,
+            );
+            temp.insert(byte_pos, ch);
+            temp
+        };
+
+        #[cfg(feature = "validation")]
+        {
+            if let Some(cfg) = self.ui_state.validation.get_field_config(
+                field_index,
+            ) {
+                if let Some(limits) = &cfg.character_limits {
+                    if let Some(result) = limits.validate_content(&new_raw_text)
+                    {
+                        if !result.is_acceptable() {
+                            return Ok(());
+                        }
+                    }
+                }
+                if let Some(mask) = &cfg.display_mask {
+                    let pattern_char_len = mask.pattern().chars().count();
+                    let input_slots = (0..pattern_char_len)
+                        .filter(|&pos| mask.is_input_position(pos))
+                        .count();
+                    if new_raw_text.chars().count() > input_slots {
+                        return Ok(());
+                    }
+                }
+            }
+        }
+
+        self.data_provider
+            .set_field_value(field_index, new_raw_text.clone());
+
+        #[cfg(feature = "validation")]
+        {
+            if let Some(cfg) = self.ui_state.validation.get_field_config(
+                field_index,
+            ) {
+                if let Some(mask) = &cfg.display_mask {
+                    let new_raw_pos = raw_cursor_pos + 1;
+                    let display_pos = mask.raw_pos_to_display_pos(new_raw_pos);
+                    let next_input_display =
+                        mask.next_input_position(display_pos);
+                    let next_raw_pos =
+                        mask.display_pos_to_raw_pos(next_input_display);
+                    let max_raw = new_raw_text.chars().count();
+
+                    self.ui_state.cursor_pos = next_raw_pos.min(max_raw);
+                    self.ui_state.ideal_cursor_column =
+                        self.ui_state.cursor_pos;
+                    return Ok(());
+                }
+            }
+        }
+
+        self.ui_state.cursor_pos = raw_cursor_pos + 1;
+        self.ui_state.ideal_cursor_column = self.ui_state.cursor_pos;
+        Ok(())
+    }
+
+    /// Delete backward (backspace)
+    pub fn delete_backward(&mut self) -> anyhow::Result<()> {
+        // paste entire delete_backward body unchanged
+        if self.ui_state.current_mode != crate::canvas::modes::AppMode::Edit
+        {
+            return Ok(());
+        }
+        if self.ui_state.cursor_pos == 0 {
+            return Ok(());
+        }
+
+        let field_index = self.ui_state.current_field;
+        let mut current_text =
+            self.data_provider.field_value(field_index).to_string();
+
+        let new_cursor = self.ui_state.cursor_pos.saturating_sub(1);
+
+        let start = Self::char_to_byte_index(
+            &current_text,
+            self.ui_state.cursor_pos - 1,
+        );
+        let end =
+            Self::char_to_byte_index(&current_text, self.ui_state.cursor_pos);
+        current_text.replace_range(start..end, "");
+        self.data_provider
+            .set_field_value(field_index, current_text.clone());
+
+        #[cfg(feature = "validation")]
+        let mut target_cursor = new_cursor;
+        #[cfg(not(feature = "validation"))]
+        let target_cursor = new_cursor;
+
+        #[cfg(feature = "validation")]
+        {
+            if let Some(cfg) = self.ui_state.validation.get_field_config(
+                field_index,
+            ) {
+                if let Some(mask) = &cfg.display_mask {
+                    let display_pos =
+                        mask.raw_pos_to_display_pos(new_cursor);
+                    if let Some(prev_input) =
+                        mask.prev_input_position(display_pos)
+                    {
+                        target_cursor =
+                            mask.display_pos_to_raw_pos(prev_input);
+                    }
+                }
+            }
+        }
+
+        self.ui_state.cursor_pos = target_cursor;
+        self.ui_state.ideal_cursor_column = target_cursor;
+
+        #[cfg(feature = "validation")]
+        {
+            let _ = self.ui_state.validation.validate_field_content(
+                field_index,
+                &current_text,
+            );
+        }
+
+        Ok(())
+    }
+
+    /// Delete forward (Delete key)
+    pub fn delete_forward(&mut self) -> anyhow::Result<()> {
+        // paste entire delete_forward body unchanged
+        if self.ui_state.current_mode != crate::canvas::modes::AppMode::Edit
+        {
+            return Ok(());
+        }
+
+        let field_index = self.ui_state.current_field;
+        let mut current_text =
+            self.data_provider.field_value(field_index).to_string();
+
+        if self.ui_state.cursor_pos < current_text.chars().count() {
+            let start = Self::char_to_byte_index(
+                &current_text,
+                self.ui_state.cursor_pos,
+            );
+            let end = Self::char_to_byte_index(
+                &current_text,
+                self.ui_state.cursor_pos + 1,
+            );
+            current_text.replace_range(start..end, "");
+            self.data_provider
+                .set_field_value(field_index, current_text.clone());
+
+            #[cfg(feature = "validation")]
+            let mut target_cursor = self.ui_state.cursor_pos;
+            #[cfg(not(feature = "validation"))]
+            let target_cursor = self.ui_state.cursor_pos;
+
+            #[cfg(feature = "validation")]
+            {
+                if let Some(cfg) = self.ui_state.validation.get_field_config(
+                    field_index,
+                ) {
+                    if let Some(mask) = &cfg.display_mask {
+                        let display_pos =
+                            mask.raw_pos_to_display_pos(
+                                self.ui_state.cursor_pos,
+                            );
+                        let next_input =
+                            mask.next_input_position(display_pos);
+                        target_cursor = mask
+                            .display_pos_to_raw_pos(next_input)
+                            .min(current_text.chars().count());
+                    }
+                }
+            }
+
+            self.ui_state.cursor_pos = target_cursor;
+            self.ui_state.ideal_cursor_column = target_cursor;
+
+            #[cfg(feature = "validation")]
+            {
+                let _ = self.ui_state.validation.validate_field_content(
+                    field_index,
+                    &current_text,
+                );
+            }
+        }
+
+        Ok(())
+    }
+
+    /// Enter edit mode with cursor positioned for append (vim 'a')
+    pub fn enter_append_mode(&mut self) {
+        // paste body unchanged
+        let current_text = self.current_text();
+
+        let char_len = current_text.chars().count();
+        let append_pos = if current_text.is_empty() {
+            0
+        } else {
+            (self.ui_state.cursor_pos + 1).min(char_len)
+        };
+
+        self.ui_state.cursor_pos = append_pos;
+        self.ui_state.ideal_cursor_column = append_pos;
+
+        self.set_mode(crate::canvas::modes::AppMode::Edit);
+    }
+
+    /// Set current field value (validates under feature flag)
+    pub fn set_current_field_value(&mut self, value: String) {
+        let field_index = self.ui_state.current_field;
+        self.data_provider.set_field_value(field_index, value.clone());
+        self.ui_state.cursor_pos = 0;
+        self.ui_state.ideal_cursor_column = 0;
+
+        #[cfg(feature = "validation")]
+        {
+            let _ = self
+                .ui_state
+                .validation
+                .validate_field_content(field_index, &value);
+        }
+    }
+
+    /// Set specific field value by index (validates under feature flag)
+    pub fn set_field_value(&mut self, field_index: usize, value: String) {
+        if field_index < self.data_provider.field_count() {
+            self.data_provider
+                .set_field_value(field_index, value.clone());
+            if field_index == self.ui_state.current_field {
+                self.ui_state.cursor_pos = 0;
+                self.ui_state.ideal_cursor_column = 0;
+            }
+
+            #[cfg(feature = "validation")]
+            {
+                let _ = self
+                    .ui_state
+                    .validation
+                    .validate_field_content(field_index, &value);
+            }
+        }
+    }
+
+    /// Clear the current field
+    pub fn clear_current_field(&mut self) {
+        self.set_current_field_value(String::new());
+    }
+}
--- a/canvas/src/editor/mod.rs
+++ b/canvas/src/editor/mod.rs
@@ -0,0 +1,25 @@
+// src/editor/mod.rs
+//! Editor submodule exports.
+//!
+//! This module exposes the internal editor pieces (core, editing, movement,
+//! navigation, mode, and optional features like suggestions, validation, and
+//! computed field helpers). Only module declarations and re-exports live here.
+
+pub mod core;
+pub mod display;
+pub mod editing;
+pub mod movement;
+pub mod navigation;
+pub mod mode;
+
+#[cfg(feature = "suggestions")]
+pub mod suggestions;
+
+#[cfg(feature = "validation")]
+pub mod validation_helpers;
+
+#[cfg(feature = "computed")]
+pub mod computed_helpers;
+
+// Re-export the main type
+pub use core::FormEditor;
--- a/canvas/src/editor/mode.rs
+++ b/canvas/src/editor/mode.rs
@@ -0,0 +1,305 @@
+// src/editor/mode.rs
+
+#[cfg(feature = "cursor-style")]
+use crate::canvas::CursorManager;
+
+use crate::canvas::modes::AppMode;
+use crate::canvas::state::SelectionState;
+use crate::editor::FormEditor;
+use crate::DataProvider;
+
+impl<D: DataProvider> FormEditor<D> {
+    /// Change mode
+    pub fn set_mode(&mut self, mode: AppMode) {
+        // Avoid unused param warning in normalmode
+        #[cfg(feature = "textmode-normal")]
+        let _ = mode;
+
+        // NORMALMODE: force Edit, ignore requested mode
+        #[cfg(feature = "textmode-normal")]
+        {
+            self.ui_state.current_mode = AppMode::Edit;
+            self.ui_state.selection = SelectionState::None;
+
+            #[cfg(feature = "cursor-style")]
+            {
+                let _ = CursorManager::update_for_mode(AppMode::Edit);
+            }
+        }
+
+        // Default (not normal): original vim behavior
+        #[cfg(not(feature = "textmode-normal"))]
+        match (self.ui_state.current_mode, mode) {
+            (AppMode::ReadOnly, AppMode::Highlight) => {
+                self.enter_highlight_mode();
+            }
+            (AppMode::Highlight, AppMode::ReadOnly) => {
+                self.exit_highlight_mode();
+            }
+            (_, new_mode) => {
+                self.ui_state.current_mode = new_mode;
+                if new_mode != AppMode::Highlight {
+                    self.ui_state.selection = SelectionState::None;
+                }
+                #[cfg(feature = "cursor-style")]
+                {
+                    let _ = CursorManager::update_for_mode(new_mode);
+                }
+            }
+        }
+    }
+
+    /// Exit edit mode to read-only mode
+    pub fn exit_edit_mode(&mut self) -> anyhow::Result<()> {
+        #[cfg(feature = "validation")]
+        {
+            let current_text = self.current_text();
+            if !self.ui_state.validation.allows_field_switch(
+                self.ui_state.current_field,
+                current_text,
+            ) {
+                if let Some(reason) = self
+                    .ui_state
+                    .validation
+                    .field_switch_block_reason(
+                        self.ui_state.current_field,
+                        current_text,
+                    )
+                {
+                    self.ui_state
+                        .validation
+                        .set_last_switch_block(reason.clone());
+                    return Err(anyhow::anyhow!(
+                        "Cannot exit edit mode: {}",
+                        reason
+                    ));
+                }
+            }
+        }
+
+        let current_text = self.current_text();
+        if !current_text.is_empty() {
+            let max_normal_pos =
+                current_text.chars().count().saturating_sub(1);
+            if self.ui_state.cursor_pos > max_normal_pos {
+                self.ui_state.cursor_pos = max_normal_pos;
+                self.ui_state.ideal_cursor_column = self.ui_state.cursor_pos;
+            }
+        }
+
+        #[cfg(feature = "validation")]
+        {
+            let field_index = self.ui_state.current_field;
+            if let Some(cfg) =
+                self.ui_state.validation.get_field_config(field_index)
+            {
+                if cfg.external_validation_enabled {
+                    let text = self.current_text().to_string();
+                    if !text.is_empty() {
+                        self.set_external_validation(
+                            field_index,
+                            crate::validation::ExternalValidationState::Validating,
+                        );
+                        if let Some(cb) =
+                            self.external_validation_callback.as_mut()
+                        {
+                            let final_state = cb(field_index, &text);
+                            self.set_external_validation(field_index, final_state);
+                        }
+                    }
+                }
+            }
+        }
+
+        // NORMALMODE: stay in Edit (do not switch to ReadOnly)
+        #[cfg(feature = "textmode-normal")]
+        {
+            #[cfg(feature = "suggestions")]
+            {
+                self.close_suggestions();
+            }
+            Ok(())
+        }
+
+        // Default (not normal): original vim behavior
+        #[cfg(not(feature = "textmode-normal"))]
+        {
+            self.set_mode(AppMode::ReadOnly);
+            #[cfg(feature = "suggestions")]
+            {
+                self.close_suggestions();
+            }
+            Ok(())
+        }
+    }
+
+    /// Enter edit mode
+    pub fn enter_edit_mode(&mut self) {
+        #[cfg(feature = "computed")]
+        {
+            if let Some(computed_state) = &self.ui_state.computed {
+                if computed_state.is_computed_field(self.ui_state.current_field)
+                {
+                    return;
+                }
+            }
+        }
+
+        // NORMALMODE: already in Edit, but enforce it
+        #[cfg(feature = "textmode-normal")]
+        {
+            self.ui_state.current_mode = AppMode::Edit;
+            self.ui_state.selection = SelectionState::None;
+            #[cfg(feature = "cursor-style")]
+            {
+                let _ = CursorManager::update_for_mode(AppMode::Edit);
+            }
+        }
+
+        // Default (not normal): vim behavior
+        #[cfg(not(feature = "textmode-normal"))]
+        self.set_mode(AppMode::Edit);
+    }
+
+    // -------------------- Highlight/Visual mode -------------------------
+
+    pub fn enter_highlight_mode(&mut self) {
+        // NORMALMODE: ignore request (stay in Edit)
+        #[cfg(feature = "textmode-normal")]
+        {
+        }
+
+        // Default (not normal): original vim
+        #[cfg(not(feature = "textmode-normal"))]
+        {
+            if self.ui_state.current_mode == AppMode::ReadOnly {
+                self.ui_state.current_mode = AppMode::Highlight;
+                self.ui_state.selection = SelectionState::Characterwise {
+                    anchor: (self.ui_state.current_field, self.ui_state.cursor_pos),
+                };
+
+                #[cfg(feature = "cursor-style")]
+                {
+                    let _ = CursorManager::update_for_mode(AppMode::Highlight);
+                }
+            }
+        }
+    }
+
+    pub fn enter_highlight_line_mode(&mut self) {
+        // NORMALMODE: ignore
+        #[cfg(feature = "textmode-normal")]
+        {
+        }
+
+        // Default (not normal): original vim
+        #[cfg(not(feature = "textmode-normal"))]
+        {
+            if self.ui_state.current_mode == AppMode::ReadOnly {
+                self.ui_state.current_mode = AppMode::Highlight;
+                self.ui_state.selection =
+                    SelectionState::Linewise { anchor_field: self.ui_state.current_field };
+
+                #[cfg(feature = "cursor-style")]
+                {
+                    let _ = CursorManager::update_for_mode(AppMode::Highlight);
+                }
+            }
+        }
+    }
+
+    pub fn exit_highlight_mode(&mut self) {
+        // NORMALMODE: ignore
+        #[cfg(feature = "textmode-normal")]
+        {
+        }
+
+        // Default (not normal): original vim
+        #[cfg(not(feature = "textmode-normal"))]
+        {
+            if self.ui_state.current_mode == AppMode::Highlight {
+                self.ui_state.current_mode = AppMode::ReadOnly;
+                self.ui_state.selection = SelectionState::None;
+
+                #[cfg(feature = "cursor-style")]
+                {
+                    let _ = CursorManager::update_for_mode(AppMode::ReadOnly);
+                }
+            }
+        }
+    }
+
+    pub fn is_highlight_mode(&self) -> bool {
+        #[cfg(feature = "textmode-normal")]
+        {
+            false
+        }
+        #[cfg(not(feature = "textmode-normal"))]
+        {
+            return self.ui_state.current_mode == AppMode::Highlight;
+        }
+    }
+
+    pub fn selection_state(&self) -> &SelectionState {
+        &self.ui_state.selection
+    }
+
+    // Visual-mode movements reuse existing movement methods
+    // These keep calling the movement methods; in normalmode selection is never enabled,
+    // so these just move without creating a selection.
+    pub fn move_left_with_selection(&mut self) {
+        let _ = self.move_left();
+    }
+
+    pub fn move_right_with_selection(&mut self) {
+        let _ = self.move_right();
+    }
+
+    pub fn move_up_with_selection(&mut self) {
+        let _ = self.move_up();
+    }
+
+    pub fn move_down_with_selection(&mut self) {
+        let _ = self.move_down();
+    }
+
+    pub fn move_word_next_with_selection(&mut self) {
+        self.move_word_next();
+    }
+
+    pub fn move_word_end_with_selection(&mut self) {
+        self.move_word_end();
+    }
+
+    pub fn move_word_prev_with_selection(&mut self) {
+        self.move_word_prev();
+    }
+
+    pub fn move_word_end_prev_with_selection(&mut self) {
+        self.move_word_end_prev();
+    }
+
+    pub fn move_big_word_next_with_selection(&mut self) {
+        self.move_big_word_next();
+    }
+
+    pub fn move_big_word_end_with_selection(&mut self) {
+        self.move_big_word_end();
+    }
+
+    pub fn move_big_word_prev_with_selection(&mut self) {
+        self.move_big_word_prev();
+    }
+
+    pub fn move_big_word_end_prev_with_selection(&mut self) {
+        self.move_big_word_end_prev();
+    }
+
+    pub fn move_line_start_with_selection(&mut self) {
+        self.move_line_start();
+    }
+
+    pub fn move_line_end_with_selection(&mut self) {
+        self.move_line_end();
+    }
+}
--- a/canvas/src/editor/movement.rs
+++ b/canvas/src/editor/movement.rs
@@ -0,0 +1,687 @@
+// src/editor/movement.rs
+
+use crate::canvas::actions::movement::line::{
+    line_end_position, line_start_position,
+};
+use crate::canvas::modes::AppMode;
+use crate::editor::FormEditor;
+use crate::DataProvider;
+use crate::canvas::actions::movement::word::{
+    find_last_big_word_start_in_field, find_last_word_start_in_field,
+};
+
+impl<D: DataProvider> FormEditor<D> {
+    /// Move cursor left within current field (mask-aware)
+    pub fn move_left(&mut self) -> anyhow::Result<()> {
+        #[cfg(feature = "validation")]
+        let mut moved = false;
+        #[cfg(not(feature = "validation"))]
+        let moved = false;
+
+        #[cfg(feature = "validation")]
+        {
+            let field_index = self.ui_state.current_field;
+            if let Some(cfg) =
+                self.ui_state.validation.get_field_config(field_index)
+            {
+                if let Some(mask) = &cfg.display_mask {
+                    let display_pos =
+                        mask.raw_pos_to_display_pos(self.ui_state.cursor_pos);
+                    if let Some(prev_input) =
+                        mask.prev_input_position(display_pos)
+                    {
+                        let raw_pos =
+                            mask.display_pos_to_raw_pos(prev_input);
+                        let max_pos = self.current_text().chars().count();
+                        self.ui_state.cursor_pos = raw_pos.min(max_pos);
+                        self.ui_state.ideal_cursor_column =
+                            self.ui_state.cursor_pos;
+                        moved = true;
+                    } else {
+                        self.ui_state.cursor_pos = 0;
+                        self.ui_state.ideal_cursor_column = 0;
+                        moved = true;
+                    }
+                }
+            }
+        }
+
+        if !moved
+            && self.ui_state.cursor_pos > 0 {
+                self.ui_state.cursor_pos -= 1;
+                self.ui_state.ideal_cursor_column = self.ui_state.cursor_pos;
+            }
+        Ok(())
+    }
+
+    /// Move cursor right within current field (mask-aware)
+    pub fn move_right(&mut self) -> anyhow::Result<()> {
+        #[cfg(feature = "validation")]
+        let mut moved = false;
+        #[cfg(not(feature = "validation"))]
+        let moved = false;
+
+        #[cfg(feature = "validation")]
+        {
+            let field_index = self.ui_state.current_field;
+            if let Some(cfg) =
+                self.ui_state.validation.get_field_config(field_index)
+            {
+                if let Some(mask) = &cfg.display_mask {
+                    let display_pos =
+                        mask.raw_pos_to_display_pos(self.ui_state.cursor_pos);
+                    let next_display_pos = mask.next_input_position(display_pos);
+                    let next_pos =
+                        mask.display_pos_to_raw_pos(next_display_pos);
+                    let max_pos = self.current_text().chars().count();
+                    self.ui_state.cursor_pos = next_pos.min(max_pos);
+                    self.ui_state.ideal_cursor_column =
+                        self.ui_state.cursor_pos;
+                    moved = true;
+                }
+            }
+        }
+
+        if !moved {
+            let max_pos = self.current_text().chars().count();
+            if self.ui_state.cursor_pos < max_pos {
+                self.ui_state.cursor_pos += 1;
+                self.ui_state.ideal_cursor_column = self.ui_state.cursor_pos;
+            }
+        }
+        Ok(())
+    }
+
+    /// Move to start of current field (vim 0)
+    pub fn move_line_start(&mut self) {
+        let new_pos = line_start_position();
+        self.ui_state.cursor_pos = new_pos;
+        self.ui_state.ideal_cursor_column = new_pos;
+    }
+
+    /// Move to end of current field (vim $)
+    pub fn move_line_end(&mut self) {
+        let current_text = self.current_text();
+        let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+
+        let new_pos = line_end_position(current_text, is_edit_mode);
+        self.ui_state.cursor_pos = new_pos;
+        self.ui_state.ideal_cursor_column = new_pos;
+    }
+
+    /// Set cursor to exact position (for f/F/t/T etc.)
+    pub fn set_cursor_position(&mut self, position: usize) {
+        let current_text = self.current_text();
+        let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+
+        let char_len = current_text.chars().count();
+        let max_pos = if is_edit_mode {
+            char_len
+        } else {
+            char_len.saturating_sub(1)
+        };
+
+        let clamped_pos = position.min(max_pos);
+        self.ui_state.cursor_pos = clamped_pos;
+        self.ui_state.ideal_cursor_column = clamped_pos;
+    }
+}
+
+
+impl<D: DataProvider> FormEditor<D> {
+    /// Move to start of next word (vim w) - can cross field boundaries
+    pub fn move_word_next(&mut self) {
+        use crate::canvas::actions::movement::word::find_next_word_start;
+        let current_text = self.current_text();
+
+        if current_text.is_empty() {
+            // Empty field - try to move to next field
+            if self.move_down().is_ok() {
+                // Successfully moved to next field, try to find first word
+                let new_text = self.current_text();
+                if !new_text.is_empty() {
+                    let first_word_pos = if new_text.chars().next().is_some_and(|c| !c.is_whitespace()) {
+                        // Field starts with non-whitespace, go to position 0
+                        0
+                    } else {
+                        // Field starts with whitespace, find first word
+                        find_next_word_start(new_text, 0)
+                    };
+                    let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+                    let char_len = new_text.chars().count();
+                    let final_pos = if is_edit_mode {
+                        first_word_pos.min(char_len)
+                    } else {
+                        first_word_pos.min(char_len.saturating_sub(1))
+                    };
+                    self.ui_state.cursor_pos = final_pos;
+                    self.ui_state.ideal_cursor_column = final_pos;
+                }
+            }
+            return;
+        }
+
+        let current_pos = self.ui_state.cursor_pos;
+        let new_pos = find_next_word_start(current_text, current_pos);
+        
+        // Check if we've hit the end of the current field
+        if new_pos >= current_text.chars().count() {
+            // At end of field - jump to next field and start from beginning
+            if self.move_down().is_ok() {
+                // Successfully moved to next field
+                let new_text = self.current_text();
+                if new_text.is_empty() {
+                    // New field is empty, cursor stays at 0
+                    self.ui_state.cursor_pos = 0;
+                    self.ui_state.ideal_cursor_column = 0;
+                } else {
+                    // Find first word in new field
+                    let first_word_pos = if new_text.chars().next().is_some_and(|c| !c.is_whitespace()) {
+                        // Field starts with non-whitespace, go to position 0
+                        0
+                    } else {
+                        // Field starts with whitespace, find first word
+                        find_next_word_start(new_text, 0)
+                    };
+                    let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+                    let char_len = new_text.chars().count();
+                    let final_pos = if is_edit_mode {
+                        first_word_pos.min(char_len)
+                    } else {
+                        first_word_pos.min(char_len.saturating_sub(1))
+                    };
+                    self.ui_state.cursor_pos = final_pos;
+                    self.ui_state.ideal_cursor_column = final_pos;
+                }
+            }
+            // If move_down() failed, we stay where we are (at end of last field)
+        } else {
+            // Normal word movement within current field
+            let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+            let char_len = current_text.chars().count();
+            let final_pos = if is_edit_mode {
+                new_pos.min(char_len)
+            } else {
+                new_pos.min(char_len.saturating_sub(1))
+            };
+
+            self.ui_state.cursor_pos = final_pos;
+            self.ui_state.ideal_cursor_column = final_pos;
+        }
+    }
+
+    /// Move to start of previous word (vim b) - can cross field boundaries
+    pub fn move_word_prev(&mut self) {
+        use crate::canvas::actions::movement::word::find_prev_word_start;
+        let current_text = self.current_text();
+
+        if current_text.is_empty() {
+            // Empty field - try to move to previous field and find last word
+            let current_field = self.ui_state.current_field;
+            if self.move_up().is_ok() {
+                // Check if we actually moved to a different field
+                if self.ui_state.current_field != current_field {
+                    let new_text = self.current_text();
+                    if !new_text.is_empty() {
+                        let last_word_start = find_last_word_start_in_field(new_text);
+                        self.ui_state.cursor_pos = last_word_start;
+                        self.ui_state.ideal_cursor_column = last_word_start;
+                    }
+                }
+            }
+            return;
+        }
+
+        let current_pos = self.ui_state.cursor_pos;
+
+        // Special case: if we're at position 0, jump to previous field
+        if current_pos == 0 {
+            let current_field = self.ui_state.current_field;
+            if self.move_up().is_ok() {
+                // Check if we actually moved to a different field
+                if self.ui_state.current_field != current_field {
+                    let new_text = self.current_text();
+                    if !new_text.is_empty() {
+                        let last_word_start = find_last_word_start_in_field(new_text);
+                        self.ui_state.cursor_pos = last_word_start;
+                        self.ui_state.ideal_cursor_column = last_word_start;
+                    }
+                }
+            }
+            return;
+        }
+
+        // Try to find previous word in current field
+        let new_pos = find_prev_word_start(current_text, current_pos);
+
+        // Check if we actually moved
+        if new_pos < current_pos {
+            // Normal word movement within current field - we found a previous word
+            self.ui_state.cursor_pos = new_pos;
+            self.ui_state.ideal_cursor_column = new_pos;
+        } else {
+            // We didn't move (probably at start of first word), try previous field
+            let current_field = self.ui_state.current_field;
+            if self.move_up().is_ok() {
+                // Check if we actually moved to a different field
+                if self.ui_state.current_field != current_field {
+                    let new_text = self.current_text();
+                    if !new_text.is_empty() {
+                        let last_word_start = find_last_word_start_in_field(new_text);
+                        self.ui_state.cursor_pos = last_word_start;
+                        self.ui_state.ideal_cursor_column = last_word_start;
+                    }
+                }
+            }
+        }
+    }
+
+    /// Move to end of current/next word (vim e) - can cross field boundaries
+    pub fn move_word_end(&mut self) {
+        use crate::canvas::actions::movement::word::find_word_end;
+        let current_text = self.current_text();
+
+        if current_text.is_empty() {
+            // Empty field - try to move to next field
+            if self.move_down().is_ok() {
+                // Recursively call move_word_end in the new field
+                self.move_word_end();
+            }
+            return;
+        }
+
+        let current_pos = self.ui_state.cursor_pos;
+        let char_len = current_text.chars().count();
+        let new_pos = find_word_end(current_text, current_pos);
+
+        // Check if we didn't move or hit the end of the field
+        if new_pos == current_pos && current_pos + 1 < char_len {
+            // Try next character and find word end from there
+            let next_pos = find_word_end(current_text, current_pos + 1);
+            if next_pos < char_len {
+                let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+                let final_pos = if is_edit_mode {
+                    next_pos.min(char_len)
+                } else {
+                    next_pos.min(char_len.saturating_sub(1))
+                };
+                self.ui_state.cursor_pos = final_pos;
+                self.ui_state.ideal_cursor_column = final_pos;
+                return;
+            }
+        }
+
+        // If we're at or near the end of the field, try next field
+        if new_pos >= char_len.saturating_sub(1) {
+            if self.move_down().is_ok() {
+                // Position at start and find first word end
+                self.ui_state.cursor_pos = 0;
+                self.ui_state.ideal_cursor_column = 0;
+                self.move_word_end();
+            }
+        } else {
+            // Normal word end movement within current field
+            let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+            let final_pos = if is_edit_mode {
+                new_pos.min(char_len)
+            } else {
+                new_pos.min(char_len.saturating_sub(1))
+            };
+
+            self.ui_state.cursor_pos = final_pos;
+            self.ui_state.ideal_cursor_column = final_pos;
+        }
+    }
+
+    /// Move to end of previous word (vim ge) - can cross field boundaries
+    pub fn move_word_end_prev(&mut self) {
+        use crate::canvas::actions::movement::word::{find_prev_word_end, find_last_word_end_in_field};
+        let current_text = self.current_text();
+
+        if current_text.is_empty() {
+            // Empty field - try to move to previous field (but don't recurse)
+            let current_field = self.ui_state.current_field;
+            if self.move_up().is_ok() {
+                // Check if we actually moved to a different field
+                if self.ui_state.current_field != current_field {
+                    let new_text = self.current_text();
+                    if !new_text.is_empty() {
+                        // Find end of last word in the field
+                        let last_word_end = find_last_word_end_in_field(new_text);
+                        self.ui_state.cursor_pos = last_word_end;
+                        self.ui_state.ideal_cursor_column = last_word_end;
+                    }
+                }
+            }
+            return;
+        }
+
+        let current_pos = self.ui_state.cursor_pos;
+
+        // Special case: if we're at position 0, jump to previous field (but don't recurse)
+        if current_pos == 0 {
+            let current_field = self.ui_state.current_field;
+            if self.move_up().is_ok() {
+                // Check if we actually moved to a different field
+                if self.ui_state.current_field != current_field {
+                    let new_text = self.current_text();
+                    if !new_text.is_empty() {
+                        let last_word_end = find_last_word_end_in_field(new_text);
+                        self.ui_state.cursor_pos = last_word_end;
+                        self.ui_state.ideal_cursor_column = last_word_end;
+                    }
+                }
+            }
+            return;
+        }
+
+        let new_pos = find_prev_word_end(current_text, current_pos);
+
+        // Only try to cross fields if we didn't move at all (stayed at same position)
+        if new_pos == current_pos {
+            // We didn't move within the current field, try previous field
+            let current_field = self.ui_state.current_field;
+            if self.move_up().is_ok() {
+                // Check if we actually moved to a different field
+                if self.ui_state.current_field != current_field {
+                    let new_text = self.current_text();
+                    if !new_text.is_empty() {
+                        let last_word_end = find_last_word_end_in_field(new_text);
+                        self.ui_state.cursor_pos = last_word_end;
+                        self.ui_state.ideal_cursor_column = last_word_end;
+                    }
+                }
+            }
+        } else {
+            // Normal word movement within current field
+            let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+            let char_len = current_text.chars().count();
+            let final_pos = if is_edit_mode {
+                new_pos.min(char_len)
+            } else {
+                new_pos.min(char_len.saturating_sub(1))
+            };
+
+            self.ui_state.cursor_pos = final_pos;
+            self.ui_state.ideal_cursor_column = final_pos;
+        }
+    }
+
+    /// Move to start of next big_word (vim W) - can cross field boundaries
+    pub fn move_big_word_next(&mut self) {
+        use crate::canvas::actions::movement::word::find_next_big_word_start;
+        let current_text = self.current_text();
+
+        if current_text.is_empty() {
+            // Empty field - try to move to next field
+            if self.move_down().is_ok() {
+                // Successfully moved to next field, try to find first big_word
+                let new_text = self.current_text();
+                if !new_text.is_empty() {
+                    let first_big_word_pos = if new_text.chars().next().is_some_and(|c| !c.is_whitespace()) {
+                        // Field starts with non-whitespace, go to position 0
+                        0
+                    } else {
+                        // Field starts with whitespace, find first big_word
+                        find_next_big_word_start(new_text, 0)
+                    };
+                    let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+                    let char_len = new_text.chars().count();
+                    let final_pos = if is_edit_mode {
+                        first_big_word_pos.min(char_len)
+                    } else {
+                        first_big_word_pos.min(char_len.saturating_sub(1))
+                    };
+                    self.ui_state.cursor_pos = final_pos;
+                    self.ui_state.ideal_cursor_column = final_pos;
+                }
+            }
+            return;
+        }
+
+        let current_pos = self.ui_state.cursor_pos;
+        let new_pos = find_next_big_word_start(current_text, current_pos);
+
+        // Check if we've hit the end of the current field
+        if new_pos >= current_text.chars().count() {
+            // At end of field - jump to next field and start from beginning
+            if self.move_down().is_ok() {
+                // Successfully moved to next field
+                let new_text = self.current_text();
+                if new_text.is_empty() {
+                    // New field is empty, cursor stays at 0
+                    self.ui_state.cursor_pos = 0;
+                    self.ui_state.ideal_cursor_column = 0;
+                } else {
+                    // Find first big_word in new field
+                    let first_big_word_pos = if new_text.chars().next().is_some_and(|c| !c.is_whitespace()) {
+                        // Field starts with non-whitespace, go to position 0
+                        0
+                    } else {
+                        // Field starts with whitespace, find first big_word
+                        find_next_big_word_start(new_text, 0)
+                    };
+                    let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+                    let char_len = new_text.chars().count();
+                    let final_pos = if is_edit_mode {
+                        first_big_word_pos.min(char_len)
+                    } else {
+                        first_big_word_pos.min(char_len.saturating_sub(1))
+                    };
+                    self.ui_state.cursor_pos = final_pos;
+                    self.ui_state.ideal_cursor_column = final_pos;
+                }
+            }
+            // If move_down() failed, we stay where we are (at end of last field)
+        } else {
+            // Normal big_word movement within current field
+            let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+            let char_len = current_text.chars().count();
+            let final_pos = if is_edit_mode {
+                new_pos.min(char_len)
+            } else {
+                new_pos.min(char_len.saturating_sub(1))
+            };
+
+            self.ui_state.cursor_pos = final_pos;
+            self.ui_state.ideal_cursor_column = final_pos;
+        }
+    }
+
+    /// Move to start of previous big_word (vim B) - can cross field boundaries
+    pub fn move_big_word_prev(&mut self) {
+        use crate::canvas::actions::movement::word::find_prev_big_word_start;
+        let current_text = self.current_text();
+
+        if current_text.is_empty() {
+            // Empty field - try to move to previous field and find last big_word
+            let current_field = self.ui_state.current_field;
+            if self.move_up().is_ok() {
+                // Check if we actually moved to a different field
+                if self.ui_state.current_field != current_field {
+                    let new_text = self.current_text();
+                    if !new_text.is_empty() {
+                        let last_big_word_start = find_last_big_word_start_in_field(new_text);
+                        self.ui_state.cursor_pos = last_big_word_start;
+                        self.ui_state.ideal_cursor_column = last_big_word_start;
+                    }
+                }
+            }
+            return;
+        }
+
+        let current_pos = self.ui_state.cursor_pos;
+
+        // Special case: if we're at position 0, jump to previous field
+        if current_pos == 0 {
+            let current_field = self.ui_state.current_field;
+            if self.move_up().is_ok() {
+                // Check if we actually moved to a different field
+                if self.ui_state.current_field != current_field {
+                    let new_text = self.current_text();
+                    if !new_text.is_empty() {
+                        let last_big_word_start = find_last_big_word_start_in_field(new_text);
+                        self.ui_state.cursor_pos = last_big_word_start;
+                        self.ui_state.ideal_cursor_column = last_big_word_start;
+                    }
+                }
+            }
+            return;
+        }
+
+        // Try to find previous big_word in current field
+        let new_pos = find_prev_big_word_start(current_text, current_pos);
+
+        // Check if we actually moved
+        if new_pos < current_pos {
+            // Normal big_word movement within current field - we found a previous big_word
+            self.ui_state.cursor_pos = new_pos;
+            self.ui_state.ideal_cursor_column = new_pos;
+        } else {
+            // We didn't move (probably at start of first big_word), try previous field
+            let current_field = self.ui_state.current_field;
+            if self.move_up().is_ok() {
+                // Check if we actually moved to a different field
+                if self.ui_state.current_field != current_field {
+                    let new_text = self.current_text();
+                    if !new_text.is_empty() {
+                        let last_big_word_start = find_last_big_word_start_in_field(new_text);
+                        self.ui_state.cursor_pos = last_big_word_start;
+                        self.ui_state.ideal_cursor_column = last_big_word_start;
+                    }
+                }
+            }
+        }
+    }
+
+    /// Move to end of current/next big_word (vim E) - can cross field boundaries
+    pub fn move_big_word_end(&mut self) {
+        use crate::canvas::actions::movement::word::find_big_word_end;
+        let current_text = self.current_text();
+
+        if current_text.is_empty() {
+            // Empty field - try to move to next field (but don't recurse)
+            if self.move_down().is_ok() {
+                let new_text = self.current_text();
+                if !new_text.is_empty() {
+                    // Find first big_word end in new field
+                    let first_big_word_end = find_big_word_end(new_text, 0);
+                    let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+                    let char_len = new_text.chars().count();
+                    let final_pos = if is_edit_mode {
+                        first_big_word_end.min(char_len)
+                    } else {
+                        first_big_word_end.min(char_len.saturating_sub(1))
+                    };
+                    self.ui_state.cursor_pos = final_pos;
+                    self.ui_state.ideal_cursor_column = final_pos;
+                }
+            }
+            return;
+        }
+
+        let current_pos = self.ui_state.cursor_pos;
+        let char_len = current_text.chars().count();
+        let new_pos = find_big_word_end(current_text, current_pos);
+
+        // Check if we didn't move or hit the end of the field
+        if new_pos == current_pos && current_pos + 1 < char_len {
+            // Try next character and find big_word end from there
+            let next_pos = find_big_word_end(current_text, current_pos + 1);
+            if next_pos < char_len {
+                let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+                let final_pos = if is_edit_mode {
+                    next_pos.min(char_len)
+                } else {
+                    next_pos.min(char_len.saturating_sub(1))
+                };
+                self.ui_state.cursor_pos = final_pos;
+                self.ui_state.ideal_cursor_column = final_pos;
+                return;
+            }
+        }
+
+        // If we're at or near the end of the field, try next field (but don't recurse)
+        if new_pos >= char_len.saturating_sub(1) {
+            if self.move_down().is_ok() {
+                // Find first big_word end in new field
+                let new_text = self.current_text();
+                if !new_text.is_empty() {
+                    let first_big_word_end = find_big_word_end(new_text, 0);
+                    let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+                    let new_char_len = new_text.chars().count();
+                    let final_pos = if is_edit_mode {
+                        first_big_word_end.min(new_char_len)
+                    } else {
+                        first_big_word_end.min(new_char_len.saturating_sub(1))
+                    };
+                    self.ui_state.cursor_pos = final_pos;
+                    self.ui_state.ideal_cursor_column = final_pos;
+                }
+            }
+        } else {
+            // Normal big_word end movement within current field
+            let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+            let final_pos = if is_edit_mode {
+                new_pos.min(char_len)
+            } else {
+                new_pos.min(char_len.saturating_sub(1))
+            };
+
+            self.ui_state.cursor_pos = final_pos;
+            self.ui_state.ideal_cursor_column = final_pos;
+        }
+    }
+
+    /// Move to end of previous big_word (vim gE) - can cross field boundaries
+    pub fn move_big_word_end_prev(&mut self) {
+        use crate::canvas::actions::movement::word::{
+            find_prev_big_word_end, find_big_word_end,
+        };
+
+        let current_text = self.current_text();
+
+        if current_text.is_empty() {
+            let current_field = self.ui_state.current_field;
+            if self.move_up().is_ok()
+                && self.ui_state.current_field != current_field {
+                    let new_text = self.current_text();
+                    if !new_text.is_empty() {
+                        // Find first big_word end in new field
+                        let last_big_word_end = find_big_word_end(new_text, 0);
+                        self.ui_state.cursor_pos = last_big_word_end;
+                        self.ui_state.ideal_cursor_column = last_big_word_end;
+                    }
+                }
+            return;
+        }
+
+        let current_pos = self.ui_state.cursor_pos;
+        let new_pos = find_prev_big_word_end(current_text, current_pos);
+
+        // Only try to cross fields if we didn't move at all (stayed at same position)
+        if new_pos == current_pos {
+            let current_field = self.ui_state.current_field;
+            if self.move_up().is_ok()
+                && self.ui_state.current_field != current_field {
+                    let new_text = self.current_text();
+                    if !new_text.is_empty() {
+                        let last_big_word_end = find_big_word_end(new_text, 0);
+                        self.ui_state.cursor_pos = last_big_word_end;
+                        self.ui_state.ideal_cursor_column = last_big_word_end;
+                    }
+                }
+        } else {
+            // Normal big_word movement within current field
+            let is_edit_mode = self.ui_state.current_mode == AppMode::Edit;
+            let char_len = current_text.chars().count();
+            let final_pos = if is_edit_mode {
+                new_pos.min(char_len)
+            } else {
+                new_pos.min(char_len.saturating_sub(1))
+            };
+            self.ui_state.cursor_pos = final_pos;
+            self.ui_state.ideal_cursor_column = final_pos;
+        }
+    }
+}
--- a/canvas/src/editor/navigation.rs
+++ b/canvas/src/editor/navigation.rs
@@ -0,0 +1,177 @@
+// src/editor/navigation.rs
+
+use crate::canvas::modes::AppMode;
+use crate::editor::FormEditor;
+use crate::DataProvider;
+
+impl<D: DataProvider> FormEditor<D> {
+    /// Centralized field transition logic (unchanged).
+    pub fn transition_to_field(&mut self, new_field: usize) -> anyhow::Result<()> {
+        let field_count = self.data_provider.field_count();
+        if field_count == 0 {
+            return Ok(());
+        }
+
+        let prev_field = self.ui_state.current_field;
+
+        #[cfg(feature = "computed")]
+        let mut target_field = new_field.min(field_count - 1);
+        #[cfg(not(feature = "computed"))]
+        let target_field = new_field.min(field_count - 1);
+
+        #[cfg(feature = "computed")]
+        {
+            if let Some(computed_state) = &self.ui_state.computed {
+                if computed_state.is_computed_field(target_field) {
+                    if target_field >= prev_field {
+                        for i in (target_field + 1)..field_count {
+                            if !computed_state.is_computed_field(i) {
+                                target_field = i;
+                                break;
+                            }
+                        }
+                    } else {
+                        let mut i = target_field;
+                        loop {
+                            if !computed_state.is_computed_field(i) {
+                                target_field = i;
+                                break;
+                            }
+                            if i == 0 {
+                                break;
+                            }
+                            i -= 1;
+                        }
+                    }
+                }
+            }
+        }
+
+        if target_field == prev_field {
+            return Ok(());
+        }
+
+        #[cfg(feature = "validation")]
+        self.ui_state.validation.clear_last_switch_block();
+
+        #[cfg(feature = "validation")]
+        {
+            let current_text = self.current_text();
+            if !self
+                .ui_state
+                .validation
+                .allows_field_switch(prev_field, current_text)
+            {
+                if let Some(reason) = self
+                    .ui_state
+                    .validation
+                    .field_switch_block_reason(prev_field, current_text)
+                {
+                    self.ui_state
+                        .validation
+                        .set_last_switch_block(reason.clone());
+                    tracing::debug!("Field switch blocked: {}", reason);
+                    return Err(anyhow::anyhow!(
+                        "Cannot switch fields: {}",
+                        reason
+                    ));
+                }
+            }
+        }
+
+        #[cfg(feature = "validation")]
+        {
+            let text =
+                self.data_provider.field_value(prev_field).to_string();
+            let _ = self
+                .ui_state
+                .validation
+                .validate_field_content(prev_field, &text);
+
+            if let Some(cfg) =
+                self.ui_state.validation.get_field_config(prev_field)
+            {
+                if cfg.external_validation_enabled && !text.is_empty() {
+                    self.set_external_validation(
+                        prev_field,
+                        crate::validation::ExternalValidationState::Validating,
+                    );
+
+                    if let Some(cb) =
+                        self.external_validation_callback.as_mut()
+                    {
+                        let final_state = cb(prev_field, &text);
+                        self.set_external_validation(prev_field, final_state);
+                    }
+                }
+            }
+        }
+
+        #[cfg(feature = "computed")]
+        {
+            // Placeholder for recompute hook if needed later
+        }
+
+        self.ui_state.move_to_field(target_field, field_count);
+
+        let current_text = self.current_text();
+        let max_pos = current_text.chars().count();
+        self.ui_state.set_cursor(
+            self.ui_state.ideal_cursor_column,
+            max_pos,
+            self.ui_state.current_mode == AppMode::Edit,
+        );
+
+        // Automatically close suggestions on field switch
+        #[cfg(feature = "suggestions")]
+        {
+            self.close_suggestions();
+        }
+
+        Ok(())
+    }
+
+    /// Move to first line (vim gg)
+    pub fn move_first_line(&mut self) -> anyhow::Result<()> {
+        self.transition_to_field(0)
+    }
+
+    /// Move to last line (vim G)
+    pub fn move_last_line(&mut self) -> anyhow::Result<()> {
+        let last_field =
+            self.data_provider.field_count().saturating_sub(1);
+        self.transition_to_field(last_field)
+    }
+
+    /// Move to previous field (vim k / up)
+    pub fn move_up(&mut self) -> anyhow::Result<()> {
+        let new_field = self.ui_state.current_field.saturating_sub(1);
+        self.transition_to_field(new_field)
+    }
+
+    /// Move to next field (vim j / down)
+    pub fn move_down(&mut self) -> anyhow::Result<()> {
+        let new_field = (self.ui_state.current_field + 1)
+            .min(self.data_provider.field_count().saturating_sub(1));
+        self.transition_to_field(new_field)
+    }
+
+    /// Move to next field cyclic
+    pub fn move_to_next_field(&mut self) -> anyhow::Result<()> {
+        let field_count = self.data_provider.field_count();
+        if field_count == 0 {
+            return Ok(());
+        }
+        let new_field = (self.ui_state.current_field + 1) % field_count;
+        self.transition_to_field(new_field)
+    }
+
+    /// Aliases
+    pub fn prev_field(&mut self) -> anyhow::Result<()> {
+        self.move_up()
+    }
+
+    pub fn next_field(&mut self) -> anyhow::Result<()> {
+        self.move_down()
+    }
+}
--- a/canvas/src/editor/suggestions.rs
+++ b/canvas/src/editor/suggestions.rs
@@ -0,0 +1,166 @@
+// src/editor/suggestions.rs
+
+use crate::editor::FormEditor;
+use crate::{DataProvider, SuggestionItem};
+
+impl<D: DataProvider> FormEditor<D> {
+    /// Compute inline completion for current selection and text
+    fn compute_current_completion(&self) -> Option<String> {
+        let typed = self.current_text();
+        let idx = self.ui_state.suggestions.selected_index?;
+        let sugg = self.suggestions.get(idx)?;
+        if let Some(rest) = sugg.value_to_store.strip_prefix(typed) {
+            if !rest.is_empty() {
+                return Some(rest.to_string());
+            }
+        }
+        None
+    }
+
+    /// Update UI state's completion text from current selection
+    pub fn update_inline_completion(&mut self) {
+        self.ui_state.suggestions.completion_text =
+            self.compute_current_completion();
+    }
+
+    /// Open the suggestions UI for `field_index`
+    pub fn open_suggestions(&mut self, field_index: usize) {
+        self.ui_state.open_suggestions(field_index);
+    }
+
+    /// Close suggestions UI and clear current suggestion results
+    pub fn close_suggestions(&mut self) {
+        self.ui_state.close_suggestions();
+        self.suggestions.clear();
+    }
+
+    /// Handle Escape key in ReadOnly mode (closes suggestions if active)
+    pub fn handle_escape_readonly(&mut self) {
+        if self.ui_state.suggestions.is_active {
+            self.close_suggestions();
+        }
+    }
+
+    // ----------------- Non-blocking suggestions API --------------------
+
+    #[cfg(feature = "suggestions")]
+    pub fn start_suggestions(&mut self, field_index: usize) -> Option<String> {
+        if !self.data_provider.supports_suggestions(field_index) {
+            return None;
+        }
+
+        let query = self.current_text().to_string();
+        self.ui_state.open_suggestions(field_index);
+        self.ui_state.suggestions.is_loading = true;
+        self.ui_state.suggestions.active_query = Some(query.clone());
+        self.suggestions.clear();
+        Some(query)
+    }
+
+    #[cfg(not(feature = "suggestions"))]
+    pub fn start_suggestions(&mut self, _field_index: usize) -> Option<String> {
+        None
+    }
+
+    #[cfg(feature = "suggestions")]
+    pub fn apply_suggestions_result(
+        &mut self,
+        field_index: usize,
+        query: &str,
+        results: Vec<SuggestionItem>,
+    ) -> bool {
+        if self.ui_state.suggestions.active_field != Some(field_index) {
+            return false;
+        }
+        if self.ui_state.suggestions.active_query.as_deref() != Some(query) {
+            return false;
+        }
+
+        self.ui_state.suggestions.is_loading = false;
+        self.suggestions = results;
+
+        if !self.suggestions.is_empty() {
+            self.ui_state.suggestions.selected_index = Some(0);
+            self.update_inline_completion();
+        } else {
+            self.ui_state.suggestions.selected_index = None;
+            self.ui_state.suggestions.completion_text = None;
+        }
+        true
+    }
+
+    #[cfg(not(feature = "suggestions"))]
+    pub fn apply_suggestions_result(
+        &mut self,
+        _field_index: usize,
+        _query: &str,
+        _results: Vec<SuggestionItem>,
+    ) -> bool {
+        false
+    }
+
+    #[cfg(feature = "suggestions")]
+    pub fn pending_suggestions_query(&self) -> Option<(usize, String)> {
+        if self.ui_state.suggestions.is_loading {
+            if let (Some(field), Some(query)) = (
+                self.ui_state.suggestions.active_field,
+                &self.ui_state.suggestions.active_query,
+            ) {
+                return Some((field, query.clone()));
+            }
+        }
+        None
+    }
+
+    #[cfg(not(feature = "suggestions"))]
+    pub fn pending_suggestions_query(&self) -> Option<(usize, String)> {
+        None
+    }
+
+    pub fn cancel_suggestions(&mut self) {
+        self.close_suggestions();
+    }
+
+    pub fn suggestions_next(&mut self) {
+        if !self.ui_state.suggestions.is_active || self.suggestions.is_empty()
+        {
+            return;
+        }
+
+        let current = self.ui_state.suggestions.selected_index.unwrap_or(0);
+        let next = (current + 1) % self.suggestions.len();
+        self.ui_state.suggestions.selected_index = Some(next);
+        self.update_inline_completion();
+    }
+
+    pub fn apply_suggestion(&mut self) -> Option<String> {
+        if let Some(selected_index) = self.ui_state.suggestions.selected_index {
+            if let Some(suggestion) = self.suggestions.get(selected_index).cloned()
+            {
+                let field_index = self.ui_state.current_field;
+
+                self.data_provider.set_field_value(
+                    field_index,
+                    suggestion.value_to_store.clone(),
+                );
+
+                self.ui_state.cursor_pos = suggestion.value_to_store.len();
+                self.ui_state.ideal_cursor_column = self.ui_state.cursor_pos;
+
+                self.close_suggestions();
+                self.suggestions.clear();
+
+                #[cfg(feature = "validation")]
+                {
+                    let _ = self.ui_state.validation.validate_field_content(
+                        field_index,
+                        &suggestion.value_to_store,
+                    );
+                }
+
+                return Some(suggestion.display_text);
+            }
+        }
+        None
+    }
+}
--- a/canvas/src/editor/suggestions_stub.rs
+++ b/canvas/src/editor/suggestions_stub.rs
@@ -0,0 +1,23 @@
+// src/editor/suggestions_stub.rs
+// Crate-private no-op methods so internal calls compile when feature is off.
+
+use crate::editor::FormEditor;
+use crate::DataProvider;
+
+impl<D: DataProvider> FormEditor<D> {
+    pub(crate) fn open_suggestions(&mut self, _field_index: usize) {
+        // no-op
+    }
+
+    pub(crate) fn close_suggestions(&mut self) {
+        // no-op
+    }
+
+    pub(crate) fn handle_escape_readonly(&mut self) {
+        // no-op
+    }
+
+    pub(crate) fn cancel_suggestions(&mut self) {
+        // no-op
+    }
+}
--- a/canvas/src/editor/validation_helpers.rs
+++ b/canvas/src/editor/validation_helpers.rs
@@ -0,0 +1,178 @@
+// src/editor/validation_helpers.rs
+
+use crate::editor::FormEditor;
+use crate::DataProvider;
+
+impl<D: DataProvider> FormEditor<D> {
+    #[cfg(feature = "validation")]
+    pub fn set_validation_enabled(&mut self, enabled: bool) {
+        self.ui_state.validation.set_enabled(enabled);
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn is_validation_enabled(&self) -> bool {
+        self.ui_state.validation.is_enabled()
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn set_field_validation(
+        &mut self,
+        field_index: usize,
+        config: crate::validation::ValidationConfig,
+    ) {
+        self.ui_state
+            .validation
+            .set_field_config(field_index, config);
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn remove_field_validation(&mut self, field_index: usize) {
+        self.ui_state.validation.remove_field_config(field_index);
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn validate_current_field(
+        &mut self,
+    ) -> crate::validation::ValidationResult {
+        let field_index = self.ui_state.current_field;
+        let current_text = self.current_text().to_string();
+        self.ui_state
+            .validation
+            .validate_field_content(field_index, &current_text)
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn validate_field(
+        &mut self,
+        field_index: usize,
+    ) -> Option<crate::validation::ValidationResult> {
+        if field_index < self.data_provider.field_count() {
+            let text =
+                self.data_provider.field_value(field_index).to_string();
+            Some(
+                self.ui_state
+                    .validation
+                    .validate_field_content(field_index, &text),
+            )
+        } else {
+            None
+        }
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn clear_validation_results(&mut self) {
+        self.ui_state.validation.clear_all_results();
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn validation_summary(
+        &self,
+    ) -> crate::validation::ValidationSummary {
+        self.ui_state.validation.summary()
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn can_switch_fields(&self) -> bool {
+        let current_text = self.current_text();
+        self.ui_state.validation.allows_field_switch(
+            self.ui_state.current_field,
+            current_text,
+        )
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn field_switch_block_reason(&self) -> Option<String> {
+        let current_text = self.current_text();
+        self.ui_state.validation.field_switch_block_reason(
+            self.ui_state.current_field,
+            current_text,
+        )
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn last_switch_block(&self) -> Option<&str> {
+        self.ui_state.validation.last_switch_block()
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn current_limits_status_text(&self) -> Option<String> {
+        let idx = self.ui_state.current_field;
+        if let Some(cfg) = self.ui_state.validation.get_field_config(idx) {
+            if let Some(limits) = &cfg.character_limits {
+                return limits.status_text(self.current_text());
+            }
+        }
+        None
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn current_formatter_warning(&self) -> Option<String> {
+        let idx = self.ui_state.current_field;
+        if let Some(cfg) = self.ui_state.validation.get_field_config(idx) {
+            if let Some((_fmt, _mapper, warn)) =
+                cfg.run_custom_formatter(self.current_text())
+            {
+                return warn;
+            }
+        }
+        None
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn external_validation_of(
+        &self,
+        field_index: usize,
+    ) -> crate::validation::ExternalValidationState {
+        self.ui_state
+            .validation
+            .get_external_validation(field_index)
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn clear_all_external_validation(&mut self) {
+        self.ui_state.validation.clear_all_external_validation();
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn clear_external_validation(&mut self, field_index: usize) {
+        self.ui_state
+            .validation
+            .clear_external_validation(field_index);
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn set_external_validation(
+        &mut self,
+        field_index: usize,
+        state: crate::validation::ExternalValidationState,
+    ) {
+        self.ui_state
+            .validation
+            .set_external_validation(field_index, state);
+    }
+
+    #[cfg(feature = "validation")]
+    pub fn set_external_validation_callback<F>(&mut self, callback: F)
+    where
+        F: FnMut(usize, &str) -> crate::validation::ExternalValidationState
+            + Send
+            + Sync
+            + 'static,
+    {
+        self.external_validation_callback = Some(Box::new(callback));
+    }
+
+    #[cfg(feature = "validation")]
+    pub(crate) fn initialize_validation(&mut self) {
+        let field_count = self.data_provider.field_count();
+        for field_index in 0..field_count {
+            if let Some(config) =
+                self.data_provider.validation_config(field_index)
+            {
+                self.ui_state
+                    .validation
+                    .set_field_config(field_index, config);
+            }
+        }
+    }
+}
--- a/canvas/src/lib.rs
+++ b/canvas/src/lib.rs
@@ -4,14 +4,22 @@ pub mod canvas;
 pub mod editor;
 pub mod data_provider;

-// Only include autocomplete module if feature is enabled
-#[cfg(feature = "autocomplete")]
-pub mod autocomplete;
+// Only include suggestions module if feature is enabled
+#[cfg(feature = "suggestions")]
+pub mod suggestions;

 // Only include validation module if feature is enabled
 #[cfg(feature = "validation")]
 pub mod validation;

+// First-class textarea module and exports
+#[cfg(feature = "textarea")]
+pub mod textarea;
+
+// Only include computed module if feature is enabled
+#[cfg(feature = "computed")]
+pub mod computed;
+
 #[cfg(feature = "cursor-style")]
 pub use canvas::CursorManager;

@@ -21,7 +29,9 @@ pub use canvas::CursorManager;

 // Main API exports
 pub use editor::FormEditor;
-pub use data_provider::{DataProvider, AutocompleteProvider, SuggestionItem};
+pub use data_provider::DataProvider;
+#[cfg(feature = "suggestions")]
+pub use data_provider::{SuggestionsProvider, SuggestionItem};

 // UI state (read-only access for users)
 pub use canvas::state::EditorState;
@@ -41,15 +51,26 @@ pub use validation::{
    CustomFormatter, FormattingResult, PositionMapper, DefaultPositionMapper,
 };

+// Computed exports (only when computed feature is enabled)
+#[cfg(feature = "computed")]
+pub use computed::{ComputedProvider, ComputedContext, ComputedState};
+
 // Theming and GUI
 #[cfg(feature = "gui")]
 pub use canvas::theme::{CanvasTheme, DefaultCanvasTheme};

 #[cfg(feature = "gui")]
-pub use canvas::gui::render_canvas;
+pub use canvas::gui::{render_canvas, render_canvas_default};

 #[cfg(feature = "gui")]
-pub use canvas::gui::render_canvas_default;
+pub use canvas::gui::render_canvas_with_options;

-#[cfg(all(feature = "gui", feature = "autocomplete"))]
-pub use autocomplete::gui::render_autocomplete_dropdown;
+#[cfg(feature = "gui")]
+pub use canvas::gui::{CanvasDisplayOptions, OverflowMode};
+
+#[cfg(all(feature = "gui", feature = "suggestions"))]
+pub use suggestions::gui::render_suggestions_dropdown;
+
+
+#[cfg(feature = "textarea")]
+pub use textarea::{TextArea, TextAreaProvider, TextAreaState, TextAreaEditor};
--- a/canvas/src/autocomplete/gui.rs
+++ b/canvas/src/autocomplete/gui.rs
@@ -1,5 +1,5 @@
-// src/autocomplete/gui.rs
-//! Autocomplete GUI updated to work with FormEditor
+// src/suggestions/gui.rs
+//! Suggestions dropdown GUI (not inline autocomplete) updated to work with FormEditor

 #[cfg(feature = "gui")]
 use ratatui::{
@@ -17,9 +17,9 @@ use crate::editor::FormEditor;
 #[cfg(feature = "gui")]
 use unicode_width::UnicodeWidthStr;

-/// Render autocomplete dropdown for FormEditor - call this AFTER rendering canvas
+/// Render suggestions dropdown for FormEditor - call this AFTER rendering canvas
 #[cfg(feature = "gui")]
-pub fn render_autocomplete_dropdown<T: CanvasTheme, D: DataProvider>(
+pub fn render_suggestions_dropdown<T: CanvasTheme, D: DataProvider>(
    f: &mut Frame,
    frame_area: Rect,
    input_rect: Rect,
@@ -28,14 +28,14 @@ pub fn render_autocomplete_dropdown<T: CanvasTheme, D: DataProvider>(
 ) {
    let ui_state = editor.ui_state();

-    if !ui_state.is_autocomplete_active() {
+    if !ui_state.is_suggestions_active() {
        return;
    }

-    if ui_state.autocomplete.is_loading {
+    if ui_state.suggestions.is_loading {
        render_loading_indicator(f, frame_area, input_rect, theme);
    } else if !editor.suggestions().is_empty() {
-        render_suggestions_dropdown(f, frame_area, input_rect, theme, editor.suggestions(), ui_state.autocomplete.selected_index);
+        render_suggestions_dropdown_list(f, frame_area, input_rect, theme, editor.suggestions(), ui_state.suggestions.selected_index);
    }
 }

@@ -71,7 +71,7 @@ fn render_loading_indicator<T: CanvasTheme>(

 /// Show actual suggestions list
 #[cfg(feature = "gui")]
-fn render_suggestions_dropdown<T: CanvasTheme>(
+fn render_suggestions_dropdown_list<T: CanvasTheme>(
    f: &mut Frame,
    frame_area: Rect,
    input_rect: Rect,
@@ -149,9 +149,6 @@ fn calculate_dropdown_position(
    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
 }

--- a/canvas/src/suggestions/mod.rs
+++ b/canvas/src/suggestions/mod.rs
@@ -0,0 +1,16 @@
+// src/suggestions/mod.rs
+//! Suggestions subsystem - provider and optional GUI.
+//!
+//! Contains the suggestion provider types used by the editor and, when the GUI
+//! feature is enabled, the rendering helpers for the suggestions dropdown.
+
+pub mod state;
+#[cfg(feature = "gui")]
+pub mod gui;
+
+// Re-export the main suggestion types
+pub use state::{SuggestionsProvider, SuggestionItem};
+
+// Re-export GUI functions if available
+#[cfg(feature = "gui")]
+pub use gui::render_suggestions_dropdown;
--- a/canvas/src/suggestions/state.rs
+++ b/canvas/src/suggestions/state.rs
@@ -0,0 +1,5 @@
+// src/suggestions/state.rs
+//! Suggestions provider types (for dropdown suggestions, not real inline autocomplete)
+
+// Re-export the main types from data_provider
+pub use crate::data_provider::{SuggestionsProvider, SuggestionItem};
--- a/canvas/src/textarea/highlight/chunks.rs
+++ b/canvas/src/textarea/highlight/chunks.rs
@@ -0,0 +1,183 @@
+// src/textarea/highlight/chunks.rs
+use ratatui::text::{Line, Span};
+use ratatui::style::Style;
+use unicode_width::UnicodeWidthChar;
+
+#[derive(Debug, Clone)]
+pub struct StyledChunk {
+    pub text: String,
+    pub style: Style,
+}
+
+pub fn display_width_chunks(chunks: &[StyledChunk]) -> u16 {
+    chunks
+        .iter()
+        .map(|c| {
+            c.text
+                .chars()
+                .map(|ch| UnicodeWidthChar::width(ch).unwrap_or(0) as u16)
+                .sum::<u16>()
+        })
+        .sum()
+}
+
+pub fn slice_chunks_by_display_cols(
+    chunks: &[StyledChunk],
+    start_cols: u16,
+    max_cols: u16,
+) -> Vec<StyledChunk> {
+    if max_cols == 0 {
+        return Vec::new();
+    }
+
+    let mut skipped: u16 = 0;
+    let mut taken: u16 = 0;
+    let mut out: Vec<StyledChunk> = Vec::new();
+
+    for ch in chunks {
+        if taken >= max_cols {
+            break;
+        }
+
+        let mut acc = String::new();
+
+        for c in ch.text.chars() {
+            let w = UnicodeWidthChar::width(c).unwrap_or(0) as u16;
+            if skipped + w <= start_cols {
+                skipped += w;
+                continue;
+            }
+            if taken + w > max_cols {
+                break;
+            }
+            acc.push(c);
+            taken = taken.saturating_add(w);
+            if taken >= max_cols {
+                break;
+            }
+        }
+
+        if !acc.is_empty() {
+            out.push(StyledChunk {
+                text: acc,
+                style: ch.style,
+            });
+        }
+    }
+
+    out
+}
+
+pub fn clip_chunks_window_with_indicator_padded(
+    chunks: &[StyledChunk],
+    view_width: u16,
+    indicator: char,
+    start_cols: u16,
+) -> Line<'static> {
+    if view_width == 0 {
+        return Line::from("");
+    }
+
+    let total = display_width_chunks(chunks);
+    let show_left = start_cols > 0;
+    let left_cols: u16 = if show_left { 1 } else { 0 };
+
+    let cap_with_right = view_width.saturating_sub(left_cols + 1);
+    let remaining = total.saturating_sub(start_cols);
+    let show_right = remaining > cap_with_right;
+
+    let max_visible = if show_right {
+        cap_with_right
+    } else {
+        view_width.saturating_sub(left_cols)
+    };
+
+    let visible = slice_chunks_by_display_cols(chunks, start_cols, max_visible);
+    let used_cols = left_cols + display_width_chunks(&visible);
+
+    let mut spans: Vec<Span> = Vec::new();
+    if show_left {
+        spans.push(Span::raw(indicator.to_string()));
+    }
+    for v in visible {
+        spans.push(Span::styled(v.text, v.style));
+    }
+    if show_right {
+        let right_pos = view_width.saturating_sub(1);
+        let filler = right_pos.saturating_sub(used_cols);
+        if filler > 0 {
+            spans.push(Span::raw(" ".repeat(filler as usize)));
+        }
+        spans.push(Span::raw(indicator.to_string()));
+    }
+
+    Line::from(spans)
+}
+
+pub fn wrap_chunks_indented(
+    chunks: &[StyledChunk],
+    width: u16,
+    indent: u16,
+) -> Vec<Line<'static>> {
+    if width == 0 {
+        return vec![Line::from("")];
+    }
+    let indent = indent.min(width.saturating_sub(1));
+    let cont_cap = width.saturating_sub(indent);
+    let indent_str = " ".repeat(indent as usize);
+
+    let mut lines: Vec<Line> = Vec::new();
+    let mut current_spans: Vec<Span> = Vec::new();
+    let mut used: u16 = 0;
+    let mut first_line = true;
+
+    // Fixed: Restructure to avoid borrow checker issues
+    for chunk in chunks {
+        let mut buf = String::new();
+        let mut buf_style = chunk.style;
+
+        for ch in chunk.text.chars() {
+            let w = UnicodeWidthChar::width(ch).unwrap_or(0) as u16;
+            let cap = if first_line { width } else { cont_cap };
+
+            if used > 0 && used.saturating_add(w) >= cap {
+                if !buf.is_empty() {
+                    current_spans.push(Span::styled(buf.clone(), buf_style));
+                    buf.clear();
+                }
+                lines.push(Line::from(current_spans));
+                current_spans = Vec::new();
+                first_line = false;
+                used = 0;
+                
+                // Add indent directly instead of using closure
+                if !first_line && indent > 0 {
+                    current_spans.push(Span::raw(indent_str.clone()));
+                    used = indent;
+                }
+            }
+
+            if !buf.is_empty() && buf_style != chunk.style {
+                current_spans.push(Span::styled(buf.clone(), buf_style));
+                buf.clear();
+            }
+            buf_style = chunk.style;
+            
+            // Add indent if needed
+            if used == 0 && !first_line && indent > 0 {
+                current_spans.push(Span::raw(indent_str.clone()));
+                used = indent;
+            }
+            
+            buf.push(ch);
+            used = used.saturating_add(w);
+        }
+
+        if !buf.is_empty() {
+            current_spans.push(Span::styled(buf, buf_style));
+        }
+    }
+
+    lines.push(Line::from(current_spans));
+    lines
+}
--- a/canvas/src/textarea/highlight/engine.rs
+++ b/canvas/src/textarea/highlight/engine.rs
@@ -0,0 +1,294 @@
+// src/textarea/highlight/engine.rs
+#![allow(dead_code)]
+
+use std::collections::hash_map::DefaultHasher;
+use std::hash::{Hash, Hasher};
+
+use ratatui::style::{Modifier, Style};
+use syntect::{
+    highlighting::{
+        HighlightIterator, HighlightState, Highlighter, Style as SynStyle, Theme, ThemeSet,
+    },
+    parsing::{ParseState, ScopeStack, SyntaxReference, SyntaxSet},
+};
+
+use crate::data_provider::DataProvider;
+use super::chunks::StyledChunk;
+
+#[derive(Debug)]
+pub struct SyntectEngine {
+    ps: SyntaxSet,
+    ts: ThemeSet,
+    theme_name: String,
+    syntax_name: Option<String>,
+    // Cached parser state (after line i)
+    parse_after: Vec<ParseState>,
+    // Cached scope stack (after line i)
+    stack_after: Vec<ScopeStack>,
+    // Hash of line contents to detect edits
+    line_hashes: Vec<u64>,
+}
+
+impl Default for SyntectEngine {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl SyntectEngine {
+    pub fn new() -> Self {
+        let ps = SyntaxSet::load_defaults_newlines();
+        let ts = ThemeSet::load_defaults();
+        Self {
+            ps,
+            ts,
+            theme_name: "InspiredGitHub".to_string(),
+            syntax_name: None,
+            parse_after: Vec::new(),
+            stack_after: Vec::new(),
+            line_hashes: Vec::new(),
+        }
+    }
+
+    pub fn clear(&mut self) {
+        self.parse_after.clear();
+        self.stack_after.clear();
+        self.line_hashes.clear();
+    }
+
+    pub fn set_theme(&mut self, theme_name: &str) -> bool {
+        if self.ts.themes.contains_key(theme_name) {
+            self.theme_name = theme_name.to_string();
+            true
+        } else {
+            false
+        }
+    }
+
+    pub fn set_syntax_by_name(&mut self, name: &str) -> bool {
+        if self.ps.find_syntax_by_name(name).is_some() {
+            self.syntax_name = Some(name.to_string());
+            self.clear();
+            true
+        } else {
+            false
+        }
+    }
+
+    pub fn set_syntax_by_extension(&mut self, ext: &str) -> bool {
+        if let Some(s) = self.ps.find_syntax_by_extension(ext) {
+            self.syntax_name = Some(s.name.clone());
+            self.clear();
+            true
+        } else {
+            false
+        }
+    }
+
+    pub fn invalidate_from(&mut self, line_idx: usize) {
+        if line_idx < self.parse_after.len() {
+            self.parse_after.truncate(line_idx);
+        }
+        if line_idx < self.stack_after.len() {
+            self.stack_after.truncate(line_idx);
+        }
+        if line_idx < self.line_hashes.len() {
+            self.line_hashes.truncate(line_idx);
+        }
+    }
+
+    pub fn on_insert_line(&mut self, at: usize) {
+        self.invalidate_from(at);
+    }
+
+    pub fn on_delete_line(&mut self, at: usize) {
+        self.invalidate_from(at);
+    }
+
+    fn theme(&self) -> &Theme {
+        self.ts
+            .themes
+            .get(&self.theme_name)
+            .expect("theme exists")
+    }
+
+    fn syntax_ref(&self) -> &SyntaxReference {
+        if let Some(name) = &self.syntax_name {
+            if let Some(s) = self.ps.find_syntax_by_name(name) {
+                return s;
+            }
+        }
+        self.ps.find_syntax_plain_text()
+    }
+
+    fn map_syntect_style(s: SynStyle) -> Style {
+        let fg =
+            ratatui::style::Color::Rgb(s.foreground.r, s.foreground.g, s.foreground.b);
+        let mut st = Style::default().fg(fg);
+        use syntect::highlighting::FontStyle;
+        if s.font_style.contains(FontStyle::BOLD) {
+            st = st.add_modifier(Modifier::BOLD);
+        }
+        if s.font_style.contains(FontStyle::UNDERLINE) {
+            st = st.add_modifier(Modifier::UNDERLINED);
+        }
+        if s.font_style.contains(FontStyle::ITALIC) {
+            st = st.add_modifier(Modifier::ITALIC);
+        }
+        st
+    }
+
+    fn hash_line(s: &str) -> u64 {
+        let mut h = DefaultHasher::new();
+        s.hash(&mut h);
+        h.finish()
+    }
+
+    // Verify cached chain up to the nearest trusted predecessor of line_idx,
+    // using the provider to fetch the current lines.
+    fn verify_and_truncate_before(&mut self, line_idx: usize, provider: &dyn DataProvider) {
+        let mut k = std::cmp::min(line_idx, self.parse_after.len());
+        while k > 0 {
+            let j = k - 1;
+            let curr = Self::hash_line(provider.field_value(j));
+            if self.line_hashes.get(j) == Some(&curr) {
+                break;
+            }
+            self.invalidate_from(j);
+            k = j;
+        }
+    }
+
+    // Ensure we have parser + stack for lines [0..line_idx)
+    fn ensure_state_before(&mut self, line_idx: usize, provider: &dyn DataProvider) {
+        if line_idx == 0 || self.parse_after.len() >= line_idx {
+            return;
+        }
+
+        let syntax = self.syntax_ref();
+        let theme = self.theme().clone(); // Clone to avoid borrow conflicts
+        let highlighter = Highlighter::new(&theme);
+
+        let mut ps = if self.parse_after.is_empty() {
+            ParseState::new(syntax)
+        } else {
+            self.parse_after[self.parse_after.len() - 1].clone()
+        };
+        let mut stack = if self.stack_after.is_empty() {
+            ScopeStack::new()
+        } else {
+            self.stack_after[self.stack_after.len() - 1].clone()
+        };
+
+        let start = self.parse_after.len();
+        for i in start..line_idx {
+            let s = provider.field_value(i);
+            
+            // Fix: parse_line takes 2 arguments: line and &SyntaxSet
+            let ops = ps.parse_line(s, &self.ps).unwrap_or_default();
+            
+            // Fix: HighlightState::new requires &Highlighter and ScopeStack
+            let mut highlight_state = HighlightState::new(&highlighter, stack.clone());
+            
+            // Fix: HighlightIterator::new expects &mut HighlightState as first parameter
+            let it = HighlightIterator::new(&mut highlight_state, &ops[..], s, &highlighter);
+            for (_style, _text) in it {
+                // Iterate to apply ops; we don't need the tokens here.
+            }
+            
+            // Update the stack from the highlight state
+            stack = highlight_state.path.clone();
+
+            let h = Self::hash_line(s);
+
+            self.parse_after.push(ps.clone());
+            self.stack_after.push(stack.clone());
+            if i >= self.line_hashes.len() {
+                self.line_hashes.push(h);
+            } else {
+                self.line_hashes[i] = h;
+            }
+        }
+    }
+
+    // Highlight a single line using cached state; update caches for this line.
+    pub fn highlight_line_cached(
+        &mut self,
+        line_idx: usize,
+        line: &str,
+        provider: &dyn DataProvider,
+    ) -> Vec<StyledChunk> {
+        // Auto-detect prior changes and truncate cache if needed
+        self.verify_and_truncate_before(line_idx, provider);
+        // Precompute states up to line_idx
+        self.ensure_state_before(line_idx, provider);
+
+        let syntax = self.syntax_ref();
+        let theme = self.theme().clone(); // Clone to avoid borrow conflicts
+        let highlighter = Highlighter::new(&theme);
+
+        let mut ps = if line_idx == 0 {
+            ParseState::new(syntax)
+        } else if self.parse_after.len() >= line_idx {
+            self.parse_after[line_idx - 1].clone()
+        } else {
+            ParseState::new(syntax)
+        };
+
+        let stack = if line_idx == 0 {
+            ScopeStack::new()
+        } else if self.stack_after.len() >= line_idx {
+            self.stack_after[line_idx - 1].clone()
+        } else {
+            ScopeStack::new()
+        };
+
+        // Fix: parse_line takes 2 arguments: line and &SyntaxSet
+        let ops = ps.parse_line(line, &self.ps).unwrap_or_default();
+        
+        // Fix: HighlightState::new requires &Highlighter and ScopeStack
+        let mut highlight_state = HighlightState::new(&highlighter, stack);
+        
+        // Fix: HighlightIterator::new expects &mut HighlightState as first parameter
+        let iter = HighlightIterator::new(&mut highlight_state, &ops[..], line, &highlighter);
+
+        let mut out: Vec<StyledChunk> = Vec::new();
+        for (syn_style, slice) in iter {
+            if slice.is_empty() {
+                continue;
+            }
+            let text = slice.trim_end_matches('\n').to_string();
+            if text.is_empty() {
+                continue;
+            }
+            out.push(StyledChunk {
+                text,
+                style: Self::map_syntect_style(syn_style),
+            });
+        }
+
+        // Update caches for this line (state after this line)
+        let h = Self::hash_line(line);
+        if line_idx >= self.parse_after.len() {
+            self.parse_after.push(ps);
+        } else {
+            self.parse_after[line_idx] = ps;
+        }
+        
+        // Update stack from highlight state
+        let final_stack = highlight_state.path.clone();
+        if line_idx >= self.stack_after.len() {
+            self.stack_after.push(final_stack);
+        } else {
+            self.stack_after[line_idx] = final_stack;
+        }
+        
+        if line_idx >= self.line_hashes.len() {
+            self.line_hashes.push(h);
+        } else {
+            self.line_hashes[line_idx] = h;
+        }
+
+        out
+    }
+}
--- a/canvas/src/textarea/highlight/mod.rs
+++ b/canvas/src/textarea/highlight/mod.rs
@@ -0,0 +1,18 @@
+// src/textarea/highlight/mod.rs
+#[cfg(all(feature = "syntect", feature = "gui"))]
+pub mod engine;
+#[cfg(all(feature = "syntect", feature = "gui"))]
+pub mod chunks;
+#[cfg(all(feature = "syntect", feature = "gui"))]
+pub mod state;
+#[cfg(all(feature = "syntect", feature = "gui"))]
+pub mod widget;
+
+#[cfg(all(feature = "syntect", feature = "gui"))]
+pub use engine::SyntectEngine;
+#[cfg(all(feature = "syntect", feature = "gui"))]
+pub use chunks::StyledChunk;
+#[cfg(all(feature = "syntect", feature = "gui"))]
+pub use state::TextAreaSyntaxState;
+#[cfg(all(feature = "syntect", feature = "gui"))]
+pub use widget::TextAreaSyntax;
--- a/canvas/src/textarea/highlight/state.rs
+++ b/canvas/src/textarea/highlight/state.rs
@@ -0,0 +1,45 @@
+// src/textarea/highlight/state.rs
+use std::ops::{Deref, DerefMut};
+
+use super::engine::SyntectEngine;
+use crate::textarea::state::TextAreaState;
+
+// Remove Debug derive since TextAreaState doesn't implement Debug
+#[derive(Default)]
+pub struct TextAreaSyntaxState {
+    pub textarea: TextAreaState,
+    pub engine: SyntectEngine,
+}
+
+impl TextAreaSyntaxState {
+    pub fn from_text<S: Into<String>>(text: S) -> Self {
+        let mut s = Self::default();
+        s.textarea.set_text(text);
+        s
+    }
+
+    // Optional: convenience setters
+    pub fn set_syntax_theme(&mut self, theme: &str) -> bool {
+        self.engine.set_theme(theme)
+    }
+    pub fn set_syntax_by_name(&mut self, name: &str) -> bool {
+        self.engine.set_syntax_by_name(name)
+    }
+    pub fn set_syntax_by_extension(&mut self, ext: &str) -> bool {
+        self.engine.set_syntax_by_extension(ext)
+    }
+}
+
+impl Deref for TextAreaSyntaxState {
+    type Target = TextAreaState;
+    fn deref(&self) -> &Self::Target {
+        &self.textarea
+    }
+}
+
+impl DerefMut for TextAreaSyntaxState {
+    fn deref_mut(&mut self) -> &mut Self::Target {
+        &mut self.textarea
+    }
+}
+
--- a/canvas/src/textarea/highlight/widget.rs
+++ b/canvas/src/textarea/highlight/widget.rs
@@ -0,0 +1,211 @@
+// src/textarea/highlight/widget.rs
+use ratatui::{
+    buffer::Buffer,
+    layout::{Alignment, Rect},
+    style::Style,
+    text::{Line, Span},
+    widgets::{Block, BorderType, Borders, Paragraph, StatefulWidget, Widget},
+};
+
+use unicode_width::UnicodeWidthChar;
+
+use super::chunks::{
+    clip_chunks_window_with_indicator_padded,
+    wrap_chunks_indented,
+};
+use super::state::TextAreaSyntaxState;
+
+use crate::data_provider::DataProvider;
+use crate::textarea::state::{
+    compute_h_scroll_with_padding, count_wrapped_rows_indented, TextOverflowMode,
+};
+
+#[derive(Debug, Clone)]
+pub struct TextAreaSyntax<'a> {
+    pub block: Option<Block<'a>>,
+    pub style: Style,
+    pub border_type: BorderType,
+}
+
+impl<'a> Default for TextAreaSyntax<'a> {
+    fn default() -> Self {
+        Self {
+            block: Some(
+                Block::default()
+                    .borders(Borders::ALL)
+                    .border_type(BorderType::Rounded),
+            ),
+            style: Style::default(),
+            border_type: BorderType::Rounded,
+        }
+    }
+}
+
+impl<'a> TextAreaSyntax<'a> {
+    pub fn block(mut self, block: Block<'a>) -> Self {
+        self.block = Some(block);
+        self
+    }
+    pub fn style(mut self, style: Style) -> Self {
+        self.style = style;
+        self
+    }
+    pub fn border_type(mut self, ty: BorderType) -> Self {
+        self.border_type = ty;
+        if let Some(b) = &mut self.block {
+            *b = b.clone().border_type(ty);
+        }
+        self
+    }
+}
+
+fn display_width(s: &str) -> u16 {
+    s.chars()
+        .map(|c| UnicodeWidthChar::width(c).unwrap_or(0) as u16)
+        .sum()
+}
+
+fn display_cols_up_to(s: &str, char_count: usize) -> u16 {
+    let mut cols: u16 = 0;
+    for (i, ch) in s.chars().enumerate() {
+        if i >= char_count {
+            break;
+        }
+        cols = cols.saturating_add(UnicodeWidthChar::width(ch).unwrap_or(0) as u16);
+    }
+    cols
+}
+
+fn resolve_start_line_and_intra_indented(
+    state: &TextAreaSyntaxState,
+    inner: Rect,
+) -> (usize, u16) {
+    let provider = state.textarea.editor.data_provider();
+    let total = provider.line_count();
+
+    if total == 0 {
+        return (0, 0);
+    }
+
+    let wrap = matches!(state.textarea.overflow_mode, TextOverflowMode::Wrap);
+    let width = inner.width;
+    let target_vis = state.textarea.scroll_y;
+
+    if !wrap {
+        let start = (target_vis as usize).min(total);
+        return (start, 0);
+    }
+
+    let indent = state.textarea.wrap_indent_cols;
+
+    let mut acc: u16 = 0;
+    for i in 0..total {
+        let s = provider.field_value(i);
+        let rows = count_wrapped_rows_indented(s, width, indent);
+        if acc.saturating_add(rows) > target_vis {
+            let intra = target_vis.saturating_sub(acc);
+            return (i, intra);
+        }
+        acc = acc.saturating_add(rows);
+    }
+
+    (total.saturating_sub(1), 0)
+}
+
+impl<'a> StatefulWidget for TextAreaSyntax<'a> {
+    type State = TextAreaSyntaxState;
+
+    fn render(self, area: Rect, buf: &mut Buffer, state: &mut Self::State) {
+        // Reuse existing scroll logic
+        state.textarea.ensure_visible(area, self.block.as_ref());
+
+        let inner = if let Some(b) = &self.block {
+            b.clone().render(area, buf);
+            b.inner(area)
+        } else {
+            area
+        };
+
+        let edited_now = state.textarea.take_edited_flag();
+
+        let wrap_mode = matches!(state.textarea.overflow_mode, TextOverflowMode::Wrap);
+        let provider = state.textarea.editor.data_provider();
+        let total = provider.line_count();
+
+        let (start, intra) = resolve_start_line_and_intra_indented(state, inner);
+
+        let mut display_lines: Vec<Line> = Vec::new();
+
+        if total == 0 || start >= total {
+            if let Some(ph) = &state.textarea.placeholder {
+                display_lines.push(Line::from(Span::raw(ph.clone())));
+            }
+        } else if wrap_mode {
+            let mut rows_left = inner.height;
+            let indent = state.textarea.wrap_indent_cols;
+
+            let mut i = start;
+            while i < total && rows_left > 0 {
+                let s = provider.field_value(i);
+
+                let chunks = state
+                    .engine
+                    .highlight_line_cached(i, s, provider);
+
+                let lines = wrap_chunks_indented(&chunks, inner.width, indent);
+                let skip = if i == start { intra as usize } else { 0 };
+                for l in lines.into_iter().skip(skip) {
+                    display_lines.push(l);
+                    rows_left = rows_left.saturating_sub(1);
+                    if rows_left == 0 {
+                        break;
+                    }
+                }
+                i += 1;
+            }
+        } else {
+            let end = (start.saturating_add(inner.height as usize)).min(total);
+
+            for i in start..end {
+                let s = provider.field_value(i);
+
+                let chunks = state.engine.highlight_line_cached(i, s, provider);
+
+                let fits = display_width(s) <= inner.width;
+                let start_cols = if i == state.textarea.current_field() {
+                    let col_idx = state.textarea.display_cursor_position();
+                    let cursor_cols = display_cols_up_to(s, col_idx);
+                    let (target_h, _left_cols) =
+                        compute_h_scroll_with_padding(cursor_cols, inner.width);
+
+                    if fits {
+                        if edited_now {
+                            target_h
+                        } else {
+                            0
+                        }
+                    } else {
+                        target_h.max(state.textarea.h_scroll)
+                    }
+                } else {
+                    0
+                };
+
+                if let TextOverflowMode::Indicator { ch } = state.textarea.overflow_mode {
+                    display_lines.push(clip_chunks_window_with_indicator_padded(
+                        &chunks,
+                        inner.width,
+                        ch,
+                        start_cols,
+                    ));
+                }
+            }
+        }
+
+        let p = Paragraph::new(display_lines)
+            .alignment(Alignment::Left)
+            .style(self.style);
+
+        p.render(inner, buf);
+    }
+}
--- a/canvas/src/textarea/mod.rs
+++ b/canvas/src/textarea/mod.rs
@@ -0,0 +1,17 @@
+// src/textarea/mod.rs
+//! Text area convenience exports.
+
+pub mod provider;
+pub mod state;
+
+#[cfg(feature = "gui")]
+pub mod widget;
+
+#[cfg(all(feature = "syntect", feature = "gui"))]
+pub mod highlight;
+
+pub use provider::TextAreaProvider;
+pub use state::{TextAreaEditor, TextAreaState, TextOverflowMode};
+
+#[cfg(feature = "gui")]
+pub use widget::TextArea;
--- a/canvas/src/textarea/provider.rs
+++ b/canvas/src/textarea/provider.rs
@@ -0,0 +1,250 @@
+// src/textarea/provider.rs
+use crate::DataProvider;
+use once_cell::unsync::OnceCell;
+use ropey::Rope;
+use std::io::{self, BufReader, Read};
+use std::path::Path;
+
+#[derive(Debug)] // Clone removed: OnceCell<String> is not Clone
+pub struct TextAreaProvider {
+    rope: Rope,
+    name: String,
+    // Lazy per-line cache; only lines that are actually used get materialized.
+    // This keeps memory low even for very large files.
+    line_cache: Vec<OnceCell<String>>,
+}
+
+impl Default for TextAreaProvider {
+    fn default() -> Self {
+        let rope = Rope::from_str("");
+        Self {
+            rope,
+            name: "Text".to_string(),
+            line_cache: vec![OnceCell::new()], // at least 1 logical line
+        }
+    }
+}
+
+impl TextAreaProvider {
+    pub fn from_text<S: Into<String>>(text: S) -> Self {
+        let s = text.into();
+        let rope = Rope::from_str(&s);
+        let lines = rope.len_lines().max(1);
+        Self {
+            rope,
+            name: "Text".to_string(),
+            line_cache: vec![(); lines].into_iter().map(|_| OnceCell::new()).collect(),
+        }
+    }
+
+    pub fn to_text(&self) -> String {
+        self.rope.to_string()
+    }
+
+    pub fn from_file<P: AsRef<Path>>(path: P) -> io::Result<Self> {
+        let f = std::fs::File::open(path)?;
+        let mut reader = BufReader::new(f);
+        Self::from_reader(&mut reader)
+    }
+
+    pub fn from_reader<R: Read>(reader: &mut R) -> io::Result<Self> {
+        let rope = Rope::from_reader(reader)?;
+        let lines = rope.len_lines().max(1);
+        Ok(Self {
+            rope,
+            name: "Text".to_string(),
+            line_cache: vec![(); lines].into_iter().map(|_| OnceCell::new()).collect(),
+        })
+    }
+
+    pub fn set_text<S: Into<String>>(&mut self, text: S) {
+        let s = text.into();
+        self.rope = Rope::from_str(&s);
+        self.resize_cache();
+        self.invalidate_cache_from(0);
+    }
+
+    pub fn line_count(&self) -> usize {
+        self.rope.len_lines().max(1)
+    }
+
+    fn resize_cache(&mut self) {
+        let want = self.line_count();
+        if self.line_cache.len() < want {
+            self.line_cache
+                .extend((0..(want - self.line_cache.len())).map(|_| OnceCell::new()));
+        } else if self.line_cache.len() > want {
+            self.line_cache.truncate(want);
+        }
+    }
+
+    fn invalidate_cache_from(&mut self, line_idx: usize) {
+        self.resize_cache();
+        if line_idx < self.line_cache.len() {
+            for cell in &mut self.line_cache[line_idx..] {
+                let _ = cell.take();
+            }
+        }
+    }
+
+    #[inline]
+    fn line_bounds_chars(&self, line_idx: usize) -> (usize, usize) {
+        // Returns [start, end) in char indices for content only (excluding newline).
+        let total_lines = self.line_count();
+        let start = self.rope.line_to_char(line_idx);
+        let end_exclusive = if line_idx + 1 < total_lines {
+            // Next line start is at the char index right after the newline.
+            // Exclude the newline itself by not including it in the range.
+            self.rope.line_to_char(line_idx + 1) - 1
+        } else {
+            self.rope.len_chars()
+        };
+        (start, end_exclusive)
+    }
+
+    fn line_content_len_chars(&self, line_idx: usize) -> usize {
+        let slice = self.rope.line(line_idx);
+        let mut len = slice.len_chars();
+        if line_idx + 1 < self.line_count() && len > 0 {
+            // Non-final lines include a trailing '\n' char in rope; exclude it.
+            len -= 1;
+        }
+        len
+    }
+
+    fn compute_line_string(&self, index: usize) -> String {
+        let mut s = self.rope.line(index).to_string();
+        // Trim trailing newline/CR if present (for non-final lines)
+        if s.ends_with('\n') {
+            s.pop();
+            if s.ends_with('\r') {
+                s.pop();
+            }
+        }
+        s
+    }
+
+    // --------------------------
+    // Editing helpers for TextAreaState (unchanged API)
+    // --------------------------
+
+    /// Split line at a character offset (within that line).
+    /// Returns the index of the newly created line (line_idx + 1).
+    pub fn split_line_at(&mut self, line_idx: usize, at_char: usize) -> usize {
+        let lines = self.line_count();
+        let clamped_line = line_idx.min(lines.saturating_sub(1));
+        let (start, end) = self.line_bounds_chars(clamped_line);
+        let line_len = end.saturating_sub(start);
+        let at = at_char.min(line_len);
+
+        let insert_at = start + at;
+        self.rope.insert(insert_at, "\n"); // rope insert at char index
+
+        self.resize_cache();
+        self.invalidate_cache_from(clamped_line);
+        clamped_line + 1
+    }
+
+    /// Join current line with the next by removing the newline.
+    /// Returns Some(new_cursor_col_on_merged_line) or None if no next line.
+    pub fn join_with_next(&mut self, line_idx: usize) -> Option<usize> {
+        if line_idx + 1 >= self.line_count() {
+            return None;
+        }
+        let newline_pos = self.rope.line_to_char(line_idx + 1) - 1; // index of '\n'
+        let left_len = self.line_content_len_chars(line_idx);
+        self.rope.remove(newline_pos..newline_pos + 1); // remove the newline
+
+        self.resize_cache();
+        self.invalidate_cache_from(line_idx);
+        Some(left_len)
+    }
+
+    /// Join current line with the previous by removing the previous newline.
+    /// Returns Some((new_prev_index, cursor_col)) or None if at line 0.
+    pub fn join_with_prev(&mut self, line_idx: usize) -> Option<(usize, usize)> {
+        if line_idx == 0 || line_idx >= self.line_count() {
+            return None;
+        }
+        let prev_idx = line_idx - 1;
+        let prev_len = self.line_content_len_chars(prev_idx);
+        let newline_pos = self.rope.line_to_char(line_idx) - 1; // index of '\n' before current line
+        self.rope.remove(newline_pos..newline_pos + 1);
+
+        self.resize_cache();
+        self.invalidate_cache_from(prev_idx);
+        Some((prev_idx, prev_len))
+    }
+
+    /// Insert an empty line after given index.
+    /// Returns the index of the inserted blank line (line_idx + 1).
+    pub fn insert_blank_line_after(&mut self, line_idx: usize) -> usize {
+        let lines = self.line_count();
+        let clamped = line_idx.min(lines.saturating_sub(1));
+        let pos = if clamped + 1 < lines {
+            self.rope.line_to_char(clamped + 1)
+        } else {
+            self.rope.len_chars()
+        };
+        self.rope.insert(pos, "\n");
+
+        self.resize_cache();
+        self.invalidate_cache_from(clamped);
+        clamped + 1
+    }
+
+    /// Insert an empty line before given index.
+    /// Returns the index of the inserted blank line (line_idx).
+    pub fn insert_blank_line_before(&mut self, line_idx: usize) -> usize {
+        let clamped = line_idx.min(self.line_count());
+        let pos = if clamped < self.line_count() {
+            self.rope.line_to_char(clamped)
+        } else {
+            self.rope.len_chars()
+        };
+        self.rope.insert(pos, "\n");
+
+        self.resize_cache();
+        self.invalidate_cache_from(clamped);
+        clamped
+    }
+}
+
+impl DataProvider for TextAreaProvider {
+    fn field_count(&self) -> usize {
+        self.line_count()
+    }
+
+    fn field_name(&self, _index: usize) -> &str {
+        &self.name
+    }
+
+    fn field_value(&self, index: usize) -> &str {
+        if index >= self.line_cache.len() {
+            return "";
+        }
+        let cell = &self.line_cache[index];
+        // Fill lazily on first read, from &self (no &mut needed).
+        let s_ref = cell.get_or_init(|| self.compute_line_string(index));
+        s_ref.as_str()
+    }
+
+    fn set_field_value(&mut self, index: usize, value: String) {
+        if index >= self.line_count() {
+            return;
+        }
+        // Enforce single-line invariant: strip embedded newlines
+        let clean = value.replace('\n', "");
+
+        let (start, end) = self.line_bounds_chars(index);
+        self.rope.remove(start..end);
+        self.rope.insert(start, &clean);
+
+        self.resize_cache();
+        if index < self.line_cache.len() {
+            // Replace this line’s cached string only; other lines unchanged
+            let _ = self.line_cache[index].take();
+            let _ = self.line_cache[index].set(clean);
+        }
+    }
+}
--- a/canvas/src/textarea/state.rs
+++ b/canvas/src/textarea/state.rs
@@ -0,0 +1,518 @@
+// src/textarea/state.rs
+use std::ops::{Deref, DerefMut};
+
+use crossterm::event::{KeyCode, KeyEvent, KeyEventKind, KeyModifiers};
+
+use crate::editor::FormEditor;
+use crate::textarea::provider::TextAreaProvider;
+use crate::data_provider::DataProvider;
+
+#[cfg(feature = "gui")]
+use ratatui::{layout::Rect, widgets::Block};
+
+#[cfg(feature = "gui")]
+use unicode_width::UnicodeWidthChar;
+
+#[cfg(feature = "gui")]
+pub(crate) const RIGHT_PAD: u16 = 3;
+
+#[cfg(feature = "gui")]
+pub(crate) fn compute_h_scroll_with_padding(
+    cursor_cols: u16,
+    width: u16,
+) -> (u16, u16) {
+    let mut h = 0u16;
+    for _ in 0..2 {
+        let left_cols = if h > 0 { 1 } else { 0 };
+        let max_x_visible = width.saturating_sub(1 + RIGHT_PAD + left_cols);
+        let needed = cursor_cols.saturating_sub(max_x_visible);
+        if needed <= h {
+            return (h, left_cols);
+        }
+        h = needed;
+    }
+    let left_cols = if h > 0 { 1 } else { 0 };
+    (h, left_cols)
+}
+
+#[cfg(feature = "gui")]
+fn normalize_indent(width: u16, indent: u16) -> u16 {
+    indent.min(width.saturating_sub(1))
+}
+
+#[cfg(feature = "gui")]
+pub(crate) fn count_wrapped_rows_indented(
+    s: &str,
+    width: u16,
+    indent: u16,
+) -> u16 {
+    if width == 0 {
+        return 1;
+    }
+    let indent = normalize_indent(width, indent);
+    let cont_cap = width.saturating_sub(indent);
+
+    let mut rows: u16 = 1;
+    let mut used: u16 = 0;
+    let mut first = true;
+
+    for ch in s.chars() {
+        let w = UnicodeWidthChar::width(ch).unwrap_or(0) as u16;
+        let cap = if first { width } else { cont_cap };
+
+        if used > 0 && used.saturating_add(w) >= cap {
+            rows = rows.saturating_add(1);
+            first = false;
+            used = indent;
+        }
+        used = used.saturating_add(w);
+    }
+
+    rows
+}
+
+#[cfg(feature = "gui")]
+fn wrapped_rows_to_cursor_indented(
+    s: &str,
+    width: u16,
+    indent: u16,
+    cursor_chars: usize,
+) -> (u16, u16) {
+    if width == 0 {
+        return (0, 0);
+    }
+    let indent = normalize_indent(width, indent);
+    let cont_cap = width.saturating_sub(indent);
+
+    let mut row: u16 = 0;
+    let mut used: u16 = 0;
+    let mut first = true;
+
+    for (i, ch) in s.chars().enumerate() {
+        if i >= cursor_chars {
+            break;
+        }
+        let w = UnicodeWidthChar::width(ch).unwrap_or(0) as u16;
+        let cap = if first { width } else { cont_cap };
+
+        if used > 0 && used.saturating_add(w) >= cap {
+            row = row.saturating_add(1);
+            first = false;
+            used = indent;
+        }
+        used = used.saturating_add(w);
+    }
+
+    (row, used.min(width.saturating_sub(1)))
+}
+
+pub type TextAreaEditor = FormEditor<TextAreaProvider>;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum TextOverflowMode {
+    Indicator { ch: char },
+    Wrap,
+}
+
+pub struct TextAreaState {
+    pub(crate) editor: TextAreaEditor,
+    pub(crate) scroll_y: u16,
+    pub(crate) placeholder: Option<String>,
+    pub(crate) overflow_mode: TextOverflowMode,
+    pub(crate) h_scroll: u16,
+    #[cfg(feature = "gui")]
+    pub(crate) wrap_indent_cols: u16,
+    #[cfg(feature = "gui")]
+    pub(crate) edited_this_frame: bool,
+}
+
+impl Default for TextAreaState {
+    fn default() -> Self {
+        Self {
+            editor: FormEditor::new(TextAreaProvider::default()),
+            scroll_y: 0,
+            placeholder: None,
+            overflow_mode: TextOverflowMode::Indicator { ch: '$' },
+            h_scroll: 0,
+            #[cfg(feature = "gui")]
+            wrap_indent_cols: 0,
+            #[cfg(feature = "gui")]
+            edited_this_frame: false,
+        }
+    }
+}
+
+impl Deref for TextAreaState {
+    type Target = TextAreaEditor;
+
+    fn deref(&self) -> &Self::Target {
+        &self.editor
+    }
+}
+
+impl DerefMut for TextAreaState {
+    fn deref_mut(&mut self) -> &mut Self::Target {
+        &mut self.editor
+    }
+}
+
+impl TextAreaState {
+    pub fn from_text<S: Into<String>>(text: S) -> Self {
+        let provider = TextAreaProvider::from_text(text);
+        Self {
+            editor: FormEditor::new(provider),
+            scroll_y: 0,
+            placeholder: None,
+            overflow_mode: TextOverflowMode::Indicator { ch: '$' },
+            h_scroll: 0,
+            #[cfg(feature = "gui")]
+            wrap_indent_cols: 0,
+            #[cfg(feature = "gui")]
+            edited_this_frame: false,
+        }
+    }
+
+    pub fn text(&self) -> String {
+        self.editor.data_provider().to_text()
+    }
+
+    pub fn set_text<S: Into<String>>(&mut self, text: S) {
+        self.editor.data_provider_mut().set_text(text);
+        self.editor.ui_state.current_field = 0;
+        self.editor.ui_state.cursor_pos = 0;
+        self.editor.ui_state.ideal_cursor_column = 0;
+    }
+
+    pub fn set_placeholder<S: Into<String>>(&mut self, s: S) {
+        self.placeholder = Some(s.into());
+    }
+
+    pub fn use_overflow_indicator(&mut self, ch: char) {
+        self.overflow_mode = TextOverflowMode::Indicator { ch };
+    }
+
+    pub fn use_wrap(&mut self) {
+        self.overflow_mode = TextOverflowMode::Wrap;
+    }
+
+    pub fn set_wrap_indent_cols(&mut self, cols: u16) {
+        #[cfg(feature = "gui")]
+        {
+            self.wrap_indent_cols = cols;
+        }
+    }
+
+    pub fn insert_newline(&mut self) {
+        #[cfg(feature = "gui")]
+        {
+            self.edited_this_frame = true;
+        }
+        let line_idx = self.current_field();
+        let col = self.cursor_position();
+
+        let new_idx = self
+            .editor
+            .data_provider_mut()
+            .split_line_at(line_idx, col);
+
+        let _ = self.transition_to_field(new_idx);
+        self.move_line_start();
+        self.enter_edit_mode();
+    }
+
+    pub fn backspace(&mut self) {
+        let col = self.cursor_position();
+        if col > 0 {
+            #[cfg(feature = "gui")]
+            {
+                self.edited_this_frame = true;
+            }
+            let _ = self.delete_backward();
+            return;
+        }
+
+        let line_idx = self.current_field();
+        if line_idx == 0 {
+            return;
+        }
+
+        if let Some((prev_idx, new_col)) =
+            self.editor.data_provider_mut().join_with_prev(line_idx)
+        {
+            #[cfg(feature = "gui")]
+            {
+                self.edited_this_frame = true;
+            }
+            let _ = self.transition_to_field(prev_idx);
+            self.set_cursor_position(new_col);
+            self.enter_edit_mode();
+        }
+    }
+
+    pub fn delete_forward_or_join(&mut self) {
+        let line_idx = self.current_field();
+        let line_len = self.current_text().chars().count();
+        let col = self.cursor_position();
+
+        if col < line_len {
+            #[cfg(feature = "gui")]
+            {
+                self.edited_this_frame = true;
+            }
+            let _ = self.delete_forward();
+            return;
+        }
+
+        if let Some(new_col) =
+            self.editor.data_provider_mut().join_with_next(line_idx)
+        {
+            #[cfg(feature = "gui")]
+            {
+                self.edited_this_frame = true;
+            }
+            self.set_cursor_position(new_col);
+            self.enter_edit_mode();
+        }
+    }
+
+    pub fn input(&mut self, key: KeyEvent) {
+        if key.kind != KeyEventKind::Press {
+            return;
+        }
+
+        match (key.code, key.modifiers) {
+            (KeyCode::Enter, _) => self.insert_newline(),
+            (KeyCode::Backspace, _) => self.backspace(),
+            (KeyCode::Delete, _) => self.delete_forward_or_join(),
+
+            (KeyCode::Left, _) => {
+                let _ = self.move_left();
+            }
+            (KeyCode::Right, _) => {
+                let _ = self.move_right();
+            }
+            (KeyCode::Up, _) => {
+                let _ = self.move_up();
+            }
+            (KeyCode::Down, _) => {
+                let _ = self.move_down();
+            }
+
+            (KeyCode::Home, _)
+            | (KeyCode::Char('a'), KeyModifiers::CONTROL) => {
+                self.move_line_start();
+            }
+            (KeyCode::End, _)
+            | (KeyCode::Char('e'), KeyModifiers::CONTROL) => {
+                self.move_line_end();
+            }
+
+            (KeyCode::Char('b'), KeyModifiers::ALT) => self.move_word_prev(),
+            (KeyCode::Char('f'), KeyModifiers::ALT) => self.move_word_next(),
+            (KeyCode::Char('e'), KeyModifiers::ALT) => self.move_word_end(),
+
+            (KeyCode::Char(c), m) if m.is_empty() => {
+                self.enter_edit_mode();
+                #[cfg(feature = "gui")]
+                {
+                    self.edited_this_frame = true;
+                }
+                let _ = self.insert_char(c);
+            }
+
+            (KeyCode::Tab, _) => {
+                self.enter_edit_mode();
+                #[cfg(feature = "gui")]
+                {
+                    self.edited_this_frame = true;
+                }
+                for _ in 0..4 {
+                    let _ = self.insert_char(' ');
+                }
+            }
+
+            _ => {}
+        }
+    }
+
+    #[cfg(feature = "gui")]
+    fn visual_rows_before_line_and_intra_indented(
+        &self,
+        width: u16,
+        line_idx: usize,
+    ) -> u16 {
+        let provider = self.editor.data_provider();
+        let mut acc: u16 = 0;
+        let indent = self.wrap_indent_cols;
+
+        for i in 0..line_idx {
+            let s = provider.field_value(i);
+            acc = acc.saturating_add(count_wrapped_rows_indented(s, width, indent));
+        }
+        acc
+    }
+
+    #[cfg(feature = "gui")]
+    pub fn cursor(&self, area: Rect, block: Option<&Block<'_>>) -> (u16, u16) {
+        let inner = if let Some(b) = block { b.inner(area) } else { area };
+        let line_idx = self.current_field();
+
+        match self.overflow_mode {
+            TextOverflowMode::Wrap => {
+                let width = inner.width;
+                let y_top = inner.y;
+                let indent = self.wrap_indent_cols;
+
+                if width == 0 {
+                    let prefix = self.visual_rows_before_line_and_intra_indented(1, line_idx);
+                    let y = y_top.saturating_add(prefix.saturating_sub(self.scroll_y));
+                    return (inner.x, y);
+                }
+
+                let prefix_rows =
+                    self.visual_rows_before_line_and_intra_indented(width, line_idx);
+                let current_line = self.current_text();
+                let col_chars = self.display_cursor_position();
+
+                let (subrow, x_cols) = wrapped_rows_to_cursor_indented(
+                    current_line,
+                    width,
+                    indent,
+                    col_chars,
+                );
+
+                let caret_vis_row = prefix_rows.saturating_add(subrow);
+                let y = y_top.saturating_add(caret_vis_row.saturating_sub(self.scroll_y));
+                let x = inner.x.saturating_add(x_cols);
+                (x, y)
+            }
+            TextOverflowMode::Indicator { .. } => {
+                let y = inner.y + (line_idx as u16).saturating_sub(self.scroll_y);
+                let current_line = self.current_text();
+                let col = self.display_cursor_position();
+
+                let mut x_cols: u16 = 0;
+                let mut total_cols: u16 = 0;
+                for (i, ch) in current_line.chars().enumerate() {
+                    let w = UnicodeWidthChar::width(ch).unwrap_or(0) as u16;
+                    if i < col {
+                        x_cols = x_cols.saturating_add(w);
+                    }
+                    total_cols = total_cols.saturating_add(w);
+                }
+
+                let left_cols = if self.h_scroll > 0 { 1 } else { 0 };
+
+                let mut x_off_visible = x_cols
+                    .saturating_sub(self.h_scroll)
+                    .saturating_add(left_cols);
+
+                let limit = inner.width.saturating_sub(1 + RIGHT_PAD);
+
+                if x_off_visible > limit {
+                    x_off_visible = limit;
+                }
+
+                let x = inner.x.saturating_add(x_off_visible);
+                (x, y)
+            }
+        }
+    }
+
+    #[cfg(feature = "gui")]
+    pub(crate) fn ensure_visible(&mut self, area: Rect, block: Option<&Block<'_>>) {
+        let inner = if let Some(b) = block { b.inner(area) } else { area };
+        if inner.height == 0 {
+            return;
+        }
+
+        match self.overflow_mode {
+            TextOverflowMode::Indicator { .. } => {
+                let line_idx_u16 = self.current_field() as u16;
+                if line_idx_u16 < self.scroll_y {
+                    self.scroll_y = line_idx_u16;
+                } else if line_idx_u16 >= self.scroll_y + inner.height {
+                    self.scroll_y = line_idx_u16.saturating_sub(inner.height - 1);
+                }
+
+                let width = inner.width;
+                if width == 0 {
+                    return;
+                }
+
+                let current_line = self.current_text();
+                let mut total_cols: u16 = 0;
+                for ch in current_line.chars() {
+                    total_cols = total_cols
+                        .saturating_add(UnicodeWidthChar::width(ch).unwrap_or(0) as u16);
+                }
+                if total_cols <= width {
+                    self.h_scroll = 0;
+                    return;
+                }
+
+                let col = self.display_cursor_position();
+                let mut cursor_cols: u16 = 0;
+                for (i, ch) in current_line.chars().enumerate() {
+                    if i >= col {
+                        break;
+                    }
+                    cursor_cols = cursor_cols
+                        .saturating_add(UnicodeWidthChar::width(ch).unwrap_or(0) as u16);
+                }
+
+                let (target_h, _left_cols) =
+                    compute_h_scroll_with_padding(cursor_cols, width);
+
+                if target_h > self.h_scroll {
+                    self.h_scroll = target_h;
+                } else if cursor_cols < self.h_scroll {
+                    self.h_scroll = cursor_cols;
+                }
+            }
+            TextOverflowMode::Wrap => {
+                let width = inner.width;
+                if width == 0 {
+                    self.h_scroll = 0;
+                    return;
+                }
+
+                let indent = self.wrap_indent_cols;
+                let line_idx = self.current_field();
+
+                let prefix_rows =
+                    self.visual_rows_before_line_and_intra_indented(width, line_idx);
+
+                let current_line = self.current_text();
+                let col = self.display_cursor_position();
+
+                let (subrow, _x_cols) =
+                    wrapped_rows_to_cursor_indented(current_line, width, indent, col);
+
+                let caret_vis_row = prefix_rows.saturating_add(subrow);
+
+                let top = self.scroll_y;
+                let height = inner.height;
+
+                if caret_vis_row < top {
+                    self.scroll_y = caret_vis_row;
+                } else {
+                    let bottom = top.saturating_add(height.saturating_sub(1));
+                    if caret_vis_row > bottom {
+                        let shift = caret_vis_row.saturating_sub(bottom);
+                        self.scroll_y = top.saturating_add(shift);
+                    }
+                }
+
+                self.h_scroll = 0;
+            }
+        }
+    }
+    
+    #[cfg(feature = "gui")]
+    pub(crate) fn take_edited_flag(&mut self) -> bool {
+        let v = self.edited_this_frame;
+        self.edited_this_frame = false;
+        v
+    }
+}
--- a/canvas/src/textarea/widget.rs
+++ b/canvas/src/textarea/widget.rs
@@ -0,0 +1,352 @@
+// src/textarea/widget.rs
+#[cfg(feature = "gui")]
+use ratatui::{
+    buffer::Buffer,
+    layout::{Alignment, Rect},
+    style::Style,
+    text::{Line, Span},
+    widgets::{
+        Block, BorderType, Borders, Paragraph, StatefulWidget, Widget,
+    },
+};
+
+#[cfg(feature = "gui")]
+use crate::data_provider::DataProvider;
+
+#[cfg(feature = "gui")]
+use crate::textarea::state::{
+    compute_h_scroll_with_padding,
+    count_wrapped_rows_indented,
+    TextAreaState,
+    TextOverflowMode,
+};
+
+#[cfg(feature = "gui")]
+use unicode_width::UnicodeWidthChar;
+
+#[cfg(feature = "gui")]
+#[derive(Debug, Clone)]
+pub struct TextArea<'a> {
+    pub(crate) block: Option<Block<'a>>,
+    pub(crate) style: Style,
+    pub(crate) border_type: BorderType,
+}
+
+#[cfg(feature = "gui")]
+impl<'a> Default for TextArea<'a> {
+    fn default() -> Self {
+        Self {
+            block: Some(
+                Block::default()
+                    .borders(Borders::ALL)
+                    .border_type(BorderType::Rounded),
+            ),
+            style: Style::default(),
+            border_type: BorderType::Rounded,
+        }
+    }
+}
+
+#[cfg(feature = "gui")]
+impl<'a> TextArea<'a> {
+    pub fn block(mut self, block: Block<'a>) -> Self {
+        self.block = Some(block);
+        self
+    }
+
+    pub fn style(mut self, style: Style) -> Self {
+        self.style = style;
+        self
+    }
+
+    pub fn border_type(mut self, ty: BorderType) -> Self {
+        self.border_type = ty;
+        if let Some(b) = &mut self.block {
+            *b = b.clone().border_type(ty);
+        }
+        self
+    }
+}
+
+#[cfg(feature = "gui")]
+fn display_width(s: &str) -> u16 {
+    s.chars()
+        .map(|c| UnicodeWidthChar::width(c).unwrap_or(0) as u16)
+        .sum()
+}
+
+#[cfg(feature = "gui")]
+fn display_cols_up_to(s: &str, char_count: usize) -> u16 {
+    let mut cols: u16 = 0;
+    for (i, ch) in s.chars().enumerate() {
+        if i >= char_count {
+            break;
+        }
+        cols = cols.saturating_add(UnicodeWidthChar::width(ch).unwrap_or(0) as u16);
+    }
+    cols
+}
+
+#[cfg(feature = "gui")]
+fn slice_by_display_cols(s: &str, start_cols: u16, max_cols: u16) -> String {
+    if max_cols == 0 {
+        return String::new();
+    }
+
+    let mut current_cols: u16 = 0;
+    let mut output = String::new();
+    let mut taken: u16 = 0;
+    let mut started = false;
+
+    for ch in s.chars() {
+        let w = UnicodeWidthChar::width(ch).unwrap_or(0) as u16;
+
+        if !started {
+            if current_cols.saturating_add(w) <= start_cols {
+                current_cols = current_cols.saturating_add(w);
+                continue;
+            } else {
+                started = true;
+            }
+        }
+
+        if taken.saturating_add(w) > max_cols {
+            break;
+        }
+
+        output.push(ch);
+        taken = taken.saturating_add(w);
+        current_cols = current_cols.saturating_add(w);
+    }
+
+    output
+}
+
+#[cfg(feature = "gui")]
+fn clip_window_with_indicator_padded(
+    text: &str,
+    view_width: u16,
+    indicator: char,
+    start_cols: u16,
+) -> Line<'static> {
+    if view_width == 0 {
+        return Line::from("");
+    }
+
+    let total = display_width(text);
+
+    // Left indicator if we scrolled
+    let show_left = start_cols > 0;
+    let left_cols: u16 = if show_left { 1 } else { 0 };
+
+    // Capacity for text if we also need a right indicator
+    let cap_with_right = view_width.saturating_sub(left_cols + 1);
+
+    // Do we still have content beyond this window?
+    let remaining = total.saturating_sub(start_cols);
+    let show_right = remaining > cap_with_right;
+
+    // Final capacity for visible text
+    let max_visible = if show_right {
+        cap_with_right
+    } else {
+        view_width.saturating_sub(left_cols)
+    };
+
+    let visible = slice_by_display_cols(text, start_cols, max_visible);
+
+    let mut spans: Vec<Span> = Vec::new();
+    if show_left {
+        spans.push(Span::raw(indicator.to_string()));
+    }
+
+    // Visible text
+    spans.push(Span::raw(visible.clone()));
+
+    // Place $ flush-right
+    if show_right {
+        let used_cols = left_cols + display_width(&visible);
+        let right_pos = view_width.saturating_sub(1);
+        let filler = right_pos.saturating_sub(used_cols);
+        if filler > 0 {
+            spans.push(Span::raw(" ".repeat(filler as usize)));
+        }
+        spans.push(Span::raw(indicator.to_string()));
+    }
+
+    Line::from(spans)
+}
+
+#[cfg(feature = "gui")]
+fn wrap_segments_with_indent(
+    s: &str,
+    width: u16,
+    indent: u16,
+) -> Vec<String> {
+    let mut segments: Vec<String> = Vec::new();
+    if width == 0 {
+        segments.push(String::new());
+        return segments;
+    }
+
+    let indent = indent.min(width.saturating_sub(1));
+    let cont_cap = width.saturating_sub(indent);
+    let indent_str = " ".repeat(indent as usize);
+
+    let mut buf = String::new();
+    let mut used: u16 = 0;
+    let mut first = true;
+
+    for ch in s.chars() {
+        let w = UnicodeWidthChar::width(ch).unwrap_or(0) as u16;
+        let cap = if first { width } else { cont_cap };
+
+        // Early-wrap: wrap before filling the last cell (and avoid empty segment)
+        if used > 0 && used.saturating_add(w) >= cap {
+            segments.push(buf);
+            buf = String::new();
+            used = 0;
+            first = false;
+            if indent > 0 {
+                buf.push_str(&indent_str);
+                used = indent;
+            }
+        }
+
+        buf.push(ch);
+        used = used.saturating_add(w);
+    }
+
+    segments.push(buf);
+    segments
+}
+
+// Map visual row offset to (logical line, intra segment)
+#[cfg(feature = "gui")]
+fn resolve_start_line_and_intra_indented(
+    state: &TextAreaState,
+    inner: Rect,
+) -> (usize, u16) {
+    let provider = state.editor.data_provider();
+    let total = provider.line_count();
+
+    if total == 0 {
+        return (0, 0);
+    }
+
+    let wrap = matches!(state.overflow_mode, TextOverflowMode::Wrap);
+    let width = inner.width;
+    let target_vis = state.scroll_y;
+
+    if !wrap {
+        let start = (target_vis as usize).min(total);
+        return (start, 0);
+    }
+
+    let indent = state.wrap_indent_cols;
+
+    let mut acc: u16 = 0;
+    for i in 0..total {
+        let s = provider.field_value(i);
+        let rows = count_wrapped_rows_indented(s, width, indent);
+        if acc.saturating_add(rows) > target_vis {
+            let intra = target_vis.saturating_sub(acc);
+            return (i, intra);
+        }
+        acc = acc.saturating_add(rows);
+    }
+
+    (total.saturating_sub(1), 0)
+}
+
+#[cfg(feature = "gui")]
+impl<'a> StatefulWidget for TextArea<'a> {
+    type State = TextAreaState;
+
+    fn render(self, area: Rect, buf: &mut Buffer, state: &mut Self::State) {
+        state.ensure_visible(area, self.block.as_ref());
+
+        let inner = if let Some(b) = &self.block {
+            b.clone().render(area, buf);
+            b.inner(area)
+        } else {
+            area
+        };
+
+        let edited_now = state.take_edited_flag();
+
+        let wrap_mode = matches!(state.overflow_mode, TextOverflowMode::Wrap);
+        let provider = state.editor.data_provider();
+        let total = provider.line_count();
+
+        let (start, intra) = resolve_start_line_and_intra_indented(state, inner);
+
+        let mut display_lines: Vec<Line> = Vec::new();
+
+        if total == 0 || start >= total {
+            if let Some(ph) = &state.placeholder {
+                display_lines.push(Line::from(Span::raw(ph.clone())));
+            }
+        } else if wrap_mode {
+            // manual pre-wrap path (unchanged)
+            let mut rows_left = inner.height;
+            let indent = state.wrap_indent_cols;
+            let mut i = start;
+            while i < total && rows_left > 0 {
+                let s = provider.field_value(i);
+                let segments = wrap_segments_with_indent(s, inner.width, indent);
+                let skip = if i == start { intra as usize } else { 0 };
+                for seg in segments.into_iter().skip(skip) {
+                    display_lines.push(Line::from(Span::raw(seg)));
+                    rows_left = rows_left.saturating_sub(1);
+                    if rows_left == 0 {
+                        break;
+                    }
+                }
+                i += 1;
+            }
+        } else {
+            // Indicator mode: full inner width; RIGHT_PAD only affects cursor clamp and h-scroll
+            let end = (start.saturating_add(inner.height as usize)).min(total);
+
+            for i in start..end {
+                let s = provider.field_value(i);
+                match state.overflow_mode {
+                    TextOverflowMode::Wrap => unreachable!(),
+                    TextOverflowMode::Indicator { ch } => {
+                        let fits = display_width(s) <= inner.width;
+
+                        let start_cols = if i == state.current_field() {
+                            let col_idx = state.display_cursor_position();
+                            let cursor_cols = display_cols_up_to(s, col_idx);
+                            let (target_h, _left_cols) =
+                                compute_h_scroll_with_padding(cursor_cols, inner.width);
+
+                            if fits {
+                                if edited_now { target_h } else { 0 }
+                            } else {
+                                target_h.max(state.h_scroll)
+                            }
+                        } else {
+                            0
+                        };
+
+                        display_lines.push(clip_window_with_indicator_padded(
+                            s,
+                            inner.width,
+                            ch,
+                            start_cols,
+                        ));
+                    }
+                }
+            }
+        }
+
+        let p = Paragraph::new(display_lines)
+            .alignment(Alignment::Left)
+            .style(self.style);
+
+        // No Paragraph::wrap/scroll in wrap mode — we pre-wrap.
+        p.render(inner, buf);
+    }
+}
--- a/canvas/src/validation/formatting.rs
+++ b/canvas/src/validation/formatting.rs
@@ -1,6 +1,11 @@
-/* canvas/src/validation/formatting.rs
-   Add new formatting module with CustomFormatter, PositionMapper, DefaultPositionMapper, and FormattingResult
-*/
+// src/validation/formatting.rs
+//! Custom formatting and position mapping for validation/display.
+//!
+//! This module defines the CustomFormatter trait along with helpers to map
+//! cursor positions between the raw stored text and the formatted display
+//! representation. Implementors may provide a custom PositionMapper to handle
+//! advanced formatting scenarios.
+
 use std::sync::Arc;

 /// Bidirectional mapping between raw input positions and formatted display positions.
@@ -108,7 +113,7 @@ impl FormattingResult {
    pub fn success(formatted: impl Into<String>) -> Self {
        FormattingResult::Success {
            formatted: formatted.into(),
-            mapper: Arc::new(DefaultPositionMapper::default()),
+            mapper: Arc::new(DefaultPositionMapper),
        }
    }

@@ -117,7 +122,7 @@ impl FormattingResult {
        FormattingResult::Warning {
            formatted: formatted.into(),
            message: message.into(),
-            mapper: Arc::new(DefaultPositionMapper::default()),
+            mapper: Arc::new(DefaultPositionMapper),
        }
    }

@@ -187,7 +192,7 @@ mod tests {

    #[test]
    fn default_mapper_roundtrip_basic() {
-        let mapper = DefaultPositionMapper::default();
+        let mapper = DefaultPositionMapper;
        let raw = "01001";
        let formatted = "010 01";

@@ -214,4 +219,4 @@ mod tests {
            _ => panic!("expected success"),
        }
    }
-}
+}
--- a/canvas/src/validation/limits.rs
+++ b/canvas/src/validation/limits.rs
@@ -23,8 +23,10 @@ pub struct CharacterLimits {

 /// How to count characters for limit checking
 #[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+#[derive(Default)]
 pub enum CountMode {
    /// Count actual characters (default)
+    #[default]
    Characters,
    
    /// Count display width (useful for CJK characters)
@@ -34,11 +36,6 @@ pub enum CountMode {
    Bytes,
 }

-impl Default for CountMode {
-    fn default() -> Self {
-        CountMode::Characters
-    }
-}

 /// Result of a character limit check
 #[derive(Debug, Clone, PartialEq, Eq)]
@@ -122,42 +119,55 @@ impl CharacterLimits {
    pub fn validate_insertion(
        &self,
        current_text: &str,
-        _position: usize,
+        position: usize,
        character: char,
    ) -> Option<ValidationResult> {
-        let current_count = self.count(current_text);
-        let char_count = match self.count_mode {
-            CountMode::Characters => 1,
-            CountMode::DisplayWidth => {
-                let char_str = character.to_string();
-                char_str.width()
-            },
-            CountMode::Bytes => character.len_utf8(),
-        };
-        let new_count = current_count + char_count;
+        // FIX: Actually simulate the insertion at the specified position
+        // This makes the `position` parameter essential to the logic
        
+        // 1. Create the new string by inserting the character at the correct position
+        let mut new_text = String::with_capacity(current_text.len() + character.len_utf8());
+        let mut chars = current_text.chars();
+
+        // Append characters from the original string that come before the insertion point
+        // We clamp the position to be safe
+        let clamped_pos = position.min(current_text.chars().count());
+        for _ in 0..clamped_pos {
+            if let Some(ch) = chars.next() {
+                new_text.push(ch);
+            }
+        }
+
+        // Insert the new character
+        new_text.push(character);
+
+        // Append the rest of the original string
+        for ch in chars {
+            new_text.push(ch);
+        }
+
+        // 2. Now perform all validation on the *actual* resulting text
+        let new_count = self.count(&new_text);
+        let current_count = self.count(current_text);
+
        // Check max length
        if let Some(max) = self.max_length {
            if new_count > max {
                return Some(ValidationResult::error(format!(
-                    "Character limit exceeded: {}/{}", 
-                    new_count, 
-                    max
+                    "Character limit exceeded: {new_count}/{max}"
                )));
            }
-            
+
            // Check warning threshold
            if let Some(warning_threshold) = self.warning_threshold {
                if new_count >= warning_threshold && current_count < warning_threshold {
                    return Some(ValidationResult::warning(format!(
-                        "Approaching character limit: {}/{}", 
-                        new_count, 
-                        max
+                        "Approaching character limit: {new_count}/{max}"
                    )));
                }
            }
        }
-        
+
        None // No validation issues
    }
    
@@ -169,9 +179,7 @@ impl CharacterLimits {
        if let Some(min) = self.min_length {
            if count < min {
                return Some(ValidationResult::warning(format!(
-                    "Minimum length not met: {}/{}", 
-                    count, 
-                    min
+                    "Minimum length not met: {count}/{min}"
                )));
            }
        }
@@ -180,9 +188,7 @@ impl CharacterLimits {
        if let Some(max) = self.max_length {
            if count > max {
                return Some(ValidationResult::error(format!(
-                    "Character limit exceeded: {}/{}", 
-                    count, 
-                    max
+                    "Character limit exceeded: {count}/{max}"
                )));
            }
            
@@ -190,9 +196,7 @@ impl CharacterLimits {
            if let Some(warning_threshold) = self.warning_threshold {
                if count >= warning_threshold {
                    return Some(ValidationResult::warning(format!(
-                        "Approaching character limit: {}/{}", 
-                        count, 
-                        max
+                        "Approaching character limit: {count}/{max}"
                    )));
                }
            }
@@ -234,20 +238,16 @@ impl CharacterLimits {
        match self.check_limits(text) {
            LimitCheckResult::Ok => {
                // Show current/max if we have a max limit
-                if let Some(max) = self.max_length {
-                    Some(format!("{}/{}", self.count(text), max))
-                } else {
-                    None
-                }
+                self.max_length.map(|max| format!("{}/{}", self.count(text), max))
            },
            LimitCheckResult::Warning { current, max } => {
-                Some(format!("{}/{} (approaching limit)", current, max))
+                Some(format!("{current}/{max} (approaching limit)"))
            },
            LimitCheckResult::Exceeded { current, max } => {
-                Some(format!("{}/{} (exceeded)", current, max))
+                Some(format!("{current}/{max} (exceeded)"))
            },
            LimitCheckResult::TooShort { current, min } => {
-                Some(format!("{}/{} minimum", current, min))
+                Some(format!("{current}/{min} minimum"))
            },
        }
    }
@@ -267,8 +267,7 @@ impl CharacterLimits {
            let count = self.count(text);
            if count > 0 && count < min {
                return Some(format!(
-                    "Field must be empty or have at least {} characters (currently: {})",
-                    min, count
+                    "Field must be empty or have at least {min} characters (currently: {count})"
                ));
            }
        }
--- a/canvas/src/validation/mask.rs
+++ b/canvas/src/validation/mask.rs
@@ -2,9 +2,11 @@
 //! Pure display mask system - user-defined patterns only

 #[derive(Debug, Clone, PartialEq, Eq)]
+#[derive(Default)]
 pub enum MaskDisplayMode {
    /// Only show separators as user types
    /// Example: "" → "", "123" → "123", "12345" → "(123) 45"
+    #[default]
    Dynamic,
    
    /// Show full template with placeholders from start
@@ -15,11 +17,6 @@ pub enum MaskDisplayMode {
    },
 }

-impl Default for MaskDisplayMode {
-    fn default() -> Self {
-        MaskDisplayMode::Dynamic
-    }
-}

 #[derive(Debug, Clone, PartialEq, Eq)]
 pub struct DisplayMask {
--- a/canvas/src/validation/mod.rs
+++ b/canvas/src/validation/mod.rs
@@ -1,6 +1,11 @@
 // src/validation/mod.rs
+//! Validation subsystem re-exports and helpers.
+//!
+//! This module collects validation-related modules (limits, masks, patterns,
+//! formatting, and state) and re-exports the most commonly used types so that
+//! callers can import them from `crate::validation`.

-// Core validation modules
+ // Core validation modules
 pub mod config;
 pub mod limits;
 pub mod state;
--- a/canvas/src/validation/patterns.rs
+++ b/canvas/src/validation/patterns.rs
@@ -49,8 +49,8 @@ impl std::fmt::Debug for CharacterFilter {
            CharacterFilter::Alphabetic => write!(f, "Alphabetic"),
            CharacterFilter::Numeric => write!(f, "Numeric"),
            CharacterFilter::Alphanumeric => write!(f, "Alphanumeric"),
-            CharacterFilter::Exact(ch) => write!(f, "Exact('{}')", ch),
-            CharacterFilter::OneOf(chars) => write!(f, "OneOf({:?})", chars),
+            CharacterFilter::Exact(ch) => write!(f, "Exact('{ch}')"),
+            CharacterFilter::OneOf(chars) => write!(f, "OneOf({chars:?})"),
            CharacterFilter::Custom(_) => write!(f, "Custom(<function>)"),
        }
    }
@@ -130,10 +130,10 @@ impl CharacterFilter {
            CharacterFilter::Alphabetic => "alphabetic characters (a-z, A-Z)".to_string(),
            CharacterFilter::Numeric => "numeric characters (0-9)".to_string(),
            CharacterFilter::Alphanumeric => "alphanumeric characters (a-z, A-Z, 0-9)".to_string(),
-            CharacterFilter::Exact(ch) => format!("exactly '{}'", ch),
+            CharacterFilter::Exact(ch) => format!("exactly '{ch}'"),
            CharacterFilter::OneOf(chars) => {
                let char_list: String = chars.iter().collect();
-                format!("one of: {}", char_list)
+                format!("one of: {char_list}")
            },
            CharacterFilter::Custom(_) => "custom filter".to_string(),
        }
@@ -207,9 +207,7 @@ impl PatternFilters {
    /// Validate entire text against all filters
    pub fn validate_text(&self, text: &str) -> Result<(), String> {
        for (position, character) in text.char_indices() {
-            if let Err(error) = self.validate_char_at_position(position, character) {
-                return Err(error);
-            }
+            self.validate_char_at_position(position, character)?
        }
        Ok(())
    }
--- a/canvas/src/validation/state.rs
+++ b/canvas/src/validation/state.rs
@@ -21,6 +21,8 @@ pub struct ValidationState {

    /// External validation results per field (Feature 5)
    external_results: HashMap<usize, ExternalValidationState>,
+
+    last_switch_block: Option<String>,
 }

 impl ValidationState {
@@ -32,6 +34,7 @@ impl ValidationState {
            validated_fields: std::collections::HashSet::new(),
            enabled: true,
            external_results: HashMap::new(),
+            last_switch_block: None,
        }
    }
    
@@ -256,6 +259,22 @@ impl ValidationState {
            error_fields: errors,
        }
    }
+
+ 
+    /// Set the last switch block reason (for UI convenience)
+    pub fn set_last_switch_block<S: Into<String>>(&mut self, reason: S) {
+        self.last_switch_block = Some(reason.into());
+    }
+    
+    /// Clear the last switch block reason
+    pub fn clear_last_switch_block(&mut self) {
+        self.last_switch_block = None;
+    }
+    
+    /// Get the last switch block reason (if any)
+    pub fn last_switch_block(&self) -> Option<&str> {
+        self.last_switch_block.as_deref()
+    }
 }

 /// Summary of validation state across all fields
--- a/canvas/view_docs.sh
+++ b/canvas/view_docs.sh
@@ -27,7 +27,7 @@ show_module() {

 # Main modules
 show_module "canvas" "CANVAS SYSTEM"
-show_module "autocomplete" "AUTOCOMPLETE SYSTEM" 
+show_module "suggestions" "SUGGESTIONS SYSTEM" 
 show_module "config" "CONFIGURATION SYSTEM"

 # Show lib.rs and other root files
@@ -45,7 +45,7 @@ fi
 echo -e "\n\033[1;36m=========================================="
 echo "To view specific module documentation:"
 echo "  ./view_canvas_docs.sh canvas"
-echo "  ./view_canvas_docs.sh autocomplete" 
+echo "  ./view_canvas_docs.sh suggestions" 
 echo "  ./view_canvas_docs.sh config"
 echo "==========================================\033[0m"

--- a/client/Cargo.toml
+++ b/client/Cargo.toml
@@ -8,7 +8,7 @@ license.workspace = true
 anyhow = { workspace = true }
 async-trait = "0.1.88"
 common = { path = "../common" }
-canvas = { path = "../canvas", features = ["gui"] }
+canvas = { path = "../canvas", features = ["gui", "suggestions"] }

 ratatui = { workspace = true }
 crossterm = { workspace = true }
--- a/client/src/components/admin/add_logic.rs
+++ b/client/src/components/admin/add_logic.rs
@@ -3,7 +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_logic::{AddLogicFocus, AddLogicState};
-use canvas::canvas::{render_canvas, CanvasState, HighlightState as CanvasHighlightState}; // Use canvas library
+use canvas::{render_canvas, FormEditor};
 use ratatui::{
    layout::{Alignment, Constraint, Direction, Layout, Rect},
    style::{Modifier, Style},
@@ -14,15 +14,6 @@ use ratatui::{
 use crate::components::common::{dialog, autocomplete}; // Added autocomplete
 use crate::config::binds::config::EditorKeybindingMode;

-// 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_add_logic(
    f: &mut Frame,
    area: Rect,
@@ -30,7 +21,6 @@ pub fn render_add_logic(
    app_state: &AppState,
    add_logic_state: &mut AddLogicState,
    is_edit_mode: bool,
-    highlight_state: &HighlightState,
 ) {
    let main_block = Block::default()
        .title(" Add New Logic Script ")
@@ -168,19 +158,12 @@ pub fn render_add_logic(
            | AddLogicFocus::InputDescription
    );

-    let canvas_highlight_state = convert_highlight_state(highlight_state);
-    let active_field_rect = render_canvas(
-        f,
-        canvas_area,
-        add_logic_state,        // AddLogicState implements CanvasState
-        theme,                  // Theme implements CanvasTheme
-        is_edit_mode && focus_on_canvas_inputs,
-        &canvas_highlight_state,
-    );
+    let editor = FormEditor::new(add_logic_state.clone());
+    let active_field_rect = render_canvas(f, canvas_area, &editor, theme);

    // --- Render Autocomplete for Target Column ---
    // `is_edit_mode` here refers to the general edit mode of the EventHandler
-    if is_edit_mode && add_logic_state.current_field() == 1 { // Target Column field
+    if is_edit_mode && editor.current_field() == 1 { // Target Column field
        if add_logic_state.in_target_column_suggestion_mode && add_logic_state.show_target_column_suggestions {
            if !add_logic_state.target_column_suggestions.is_empty() {
                if let Some(input_rect) = active_field_rect {
--- a/client/src/components/admin/add_table.rs
+++ b/client/src/components/admin/add_table.rs
@@ -3,7 +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 canvas::canvas::{render_canvas, CanvasState, HighlightState as CanvasHighlightState};
+use canvas::{render_canvas_default, render_canvas, FormEditor};
 use ratatui::{
    layout::{Alignment, Constraint, Direction, Layout, Rect},
    style::{Modifier, Style},
@@ -13,15 +13,6 @@ use ratatui::{
 };
 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(
@@ -31,7 +22,6 @@ pub fn render_add_table(
    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
 ) {
    // --- Configuration ---
    // Threshold width to switch between wide and narrow layouts
@@ -357,15 +347,8 @@ pub fn render_add_table(
    );

    // --- 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,        // AddTableState implements CanvasState
-        theme,                  // Theme implements CanvasTheme
-        is_edit_mode && focus_on_canvas_inputs,
-        &canvas_highlight_state,
-    );
+    let editor = FormEditor::new(add_table_state.clone());
+    let _active_field_rect = render_canvas(f, canvas_area, &editor, theme);

    // --- Button Style Helpers ---
    let get_button_style = |button_focus: AddTableFocus, current_focus| {
--- a/client/src/components/auth/login.rs
+++ b/client/src/components/auth/login.rs
@@ -13,25 +13,21 @@ 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 },
-    }
-}
+use canvas::{
+    FormEditor,
+    render_canvas,
+    render_suggestions_dropdown,
+    DefaultCanvasTheme,
+};

 pub fn render_login(
    f: &mut Frame,
    area: Rect,
    theme: &Theme,
+    // FIX: take &LoginState (reference), not owned
    login_state: &LoginState,
    app_state: &AppState,
    is_edit_mode: bool,
-    highlight_state: &HighlightState,
 ) {
    // Main container
    let block = Block::default()
@@ -58,15 +54,15 @@ pub fn render_login(
        ])
        .split(inner_area);

-    // --- FORM RENDERING (Using canvas library directly) ---
-    let canvas_highlight_state = convert_highlight_state(highlight_state);
-    render_canvas(
+    // Wrap LoginState in FormEditor (no clone needed)
+    let editor = FormEditor::new(login_state.clone());
+
+    // Use DefaultCanvasTheme instead of app Theme
+    let input_rect = render_canvas(
        f,
        chunks[0],
-        login_state,        // LoginState implements CanvasState
-        theme,              // Theme implements CanvasTheme
-        is_edit_mode,
-        &canvas_highlight_state,
+        &editor,
+        &DefaultCanvasTheme,
    );

    // --- ERROR MESSAGE ---
@@ -88,7 +84,7 @@ pub fn render_login(
    // Login Button
    let login_button_index = 0;
    let login_active = if app_state.ui.focus_outside_canvas {
-        app_state.focused_button_index== login_button_index
+        app_state.focused_button_index == login_button_index
    } else {
        false
    };
@@ -115,7 +111,7 @@ pub fn render_login(
    // 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
+        app_state.focused_button_index == return_button_index
    } else {
        false
    };
@@ -139,6 +135,19 @@ pub fn render_login(
        button_chunks[1],
    );

+    // --- SUGGESTIONS DROPDOWN (if active) ---
+    if app_state.current_mode == crate::modes::handlers::mode_manager::AppMode::Edit {
+        if let Some(input_rect) = input_rect {
+            render_suggestions_dropdown(
+                f,
+                f.area(),
+                input_rect,
+                &DefaultCanvasTheme,
+                &editor, // FIX: pass &editor
+            );
+        }
+    }
+
    // --- DIALOG ---
    if app_state.ui.dialog.dialog_show {
        dialog::render_dialog(
--- a/client/src/components/auth/register.rs
+++ b/client/src/components/auth/register.rs
@@ -14,9 +14,8 @@ 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;
+use canvas::{FormEditor, render_canvas_default, render_canvas, render_suggestions_dropdown, DefaultCanvasTheme};
+use canvas::canvas::HighlightState as CanvasHighlightState;

 // Helper function to convert between HighlightState types
 fn convert_highlight_state(local: &HighlightState) -> CanvasHighlightState {
@@ -34,7 +33,6 @@ pub fn render_register(
    state: &RegisterState,
    app_state: &AppState,
    is_edit_mode: bool,
-    highlight_state: &HighlightState,
 ) {
    let block = Block::default()
        .borders(Borders::ALL)
@@ -60,15 +58,14 @@ pub fn render_register(
        ])
        .split(inner_area);

-    // --- FORM RENDERING (Using canvas library directly) ---
-    let canvas_highlight_state = convert_highlight_state(highlight_state);
+    // Wrap RegisterState in FormEditor
+    let editor = FormEditor::new(state.clone());
+
    let input_rect = render_canvas(
        f,
        chunks[0],
-        state,              // RegisterState implements CanvasState
-        theme,              // Theme implements CanvasTheme
-        is_edit_mode,
-        &canvas_highlight_state,
+        &editor,
+        theme,
    );

    // --- HELP TEXT ---
@@ -96,7 +93,7 @@ pub fn render_register(
    // Register Button
    let register_button_index = 0;
    let register_active = if app_state.ui.focus_outside_canvas {
-        app_state.focused_button_index== register_button_index
+        app_state.focused_button_index == register_button_index
    } else {
        false
    };
@@ -123,7 +120,7 @@ pub fn render_register(
    // 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
+        app_state.focused_button_index == return_button_index
    } else {
        false
    };
@@ -147,18 +144,16 @@ pub fn render_register(
        button_chunks[1],
    );

-    // --- AUTOCOMPLETE DROPDOWN (Using canvas library directly) ---
+    // --- AUTOCOMPLETE DROPDOWN (Using new canvas suggestions) ---
    if app_state.current_mode == AppMode::Edit {
-        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,
-                );
-            }
+        if let Some(input_rect) = input_rect {
+            render_suggestions_dropdown(
+                f,
+                f.area(),        // Frame area
+                input_rect,      // Current input field rect
+                &DefaultCanvasTheme,
+                &editor,
+            );
        }
    }

--- a/client/src/components/form/form.rs
+++ b/client/src/components/form/form.rs
@@ -1,7 +1,5 @@
 // src/components/form/form.rs
-use crate::components::common::autocomplete;
 use crate::config::colors::themes::Theme;
-use canvas::canvas::{CanvasState, render_canvas, HighlightState};
 use crate::state::pages::form::FormState;
 use ratatui::{
    layout::{Alignment, Constraint, Direction, Layout, Margin, Rect},
@@ -9,17 +7,19 @@ use ratatui::{
    widgets::{Block, Borders, Paragraph},
    Frame,
 };
+use canvas::canvas::HighlightState;
+use canvas::{FormEditor, render_canvas_default, render_canvas, render_suggestions_dropdown, DefaultCanvasTheme};

 pub fn render_form(
    f: &mut Frame,
    area: Rect,
    form_state: &FormState,
-    fields: &[&str],
-    current_field_idx: &usize,
-    inputs: &[&String],
+    fields: &[&str],            // no longer needed, FormEditor handles this
+    current_field_idx: &usize,  // no longer needed
+    inputs: &[&String],         // no longer needed
    table_name: &str,
    theme: &Theme,
-    is_edit_mode: bool,
+    is_edit_mode: bool,         // FormEditor tracks mode internally
    highlight_state: &HighlightState,
    total_count: u64,
    current_position: u64,
@@ -56,43 +56,30 @@ 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]);

-    // Use the canvas library's render_canvas function
+    // --- FORM RENDERING (Using new canvas API) ---
+    let editor = FormEditor::new(form_state.clone());
+
    let active_field_rect = render_canvas(
        f,
        main_layout[1],
-        form_state,
+        &editor,
        theme,
-        is_edit_mode,
-        highlight_state,
    );

-    // --- RENDER RICH AUTOCOMPLETE ONLY ---
-    if form_state.autocomplete_active {
-        if let Some(active_rect) = active_field_rect {
-            // 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() {
-                    autocomplete::render_hit_autocomplete_dropdown(
-                        f,
-                        active_rect,
-                        f.area(),
-                        theme,
-                        rich_suggestions,
-                        selected_index,
-                        form_state,
-                    );
-                }
-            }
-            // Removed simple suggestions - we only use rich ones now!
-        }
+    // --- SUGGESTIONS DROPDOWN ---
+    if let Some(active_rect) = active_field_rect {
+        render_suggestions_dropdown(
+            f,
+            main_layout[1],
+            active_rect,
+            &DefaultCanvasTheme,
+            &editor,
+        );
    }
 }
--- a/client/src/config/colors/themes.rs
+++ b/client/src/config/colors/themes.rs
@@ -1,6 +1,6 @@
 // src/config/colors/themes.rs
 use ratatui::style::Color;
-use canvas::canvas::CanvasTheme;
+use canvas::CanvasTheme;

 #[derive(Debug, Clone)]
 pub struct Theme {
@@ -12,7 +12,7 @@ pub struct Theme {
    pub warning: Color,
    pub border: Color,
    pub highlight_bg: Color,
-    pub inactive_highlight_bg: Color,// admin panel no idea what it really is
+    pub inactive_highlight_bg: Color, // admin panel no idea what it really is
 }

 impl Theme {
@@ -108,4 +108,9 @@ impl CanvasTheme for Theme {
    fn warning(&self) -> Color {
        self.warning
    }
+
+    fn suggestion_gray(&self) -> Color {
+        // Neutral gray for suggestions
+        Color::Rgb(128, 128, 128)
+    }
 }
--- a/client/src/modes/canvas.rs
+++ b/client/src/modes/canvas.rs
@@ -1,4 +0,0 @@
-// src/client/modes/canvas.rs
-pub mod edit;
-pub mod common_mode;
-pub mod read_only;
--- a/client/src/modes/canvas/edit.rs
+++ b/client/src/modes/canvas/edit.rs
@@ -1,500 +0,0 @@
-// src/modes/canvas/edit.rs
-use crate::config::binds::config::Config;
-use crate::modes::handlers::event::EventHandler;
-use crate::services::grpc_client::GrpcClient;
-use crate::state::app::state::AppState;
-use crate::state::pages::admin::AdminState;
-use crate::state::pages::{
-    auth::{LoginState, RegisterState},
-    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, KeyModifiers};
-use tokio::sync::mpsc;
-use tracing::info;
-
-#[derive(Debug, Clone, PartialEq, Eq)]
-pub enum EditEventOutcome {
-    Message(String),
-    ExitEditMode,
-}
-
-/// Helper function to spawn a non-blocking search task for autocomplete.
-async fn trigger_form_autocomplete_search(
-    form_state: &mut FormState,
-    grpc_client: &mut GrpcClient,
-    sender: mpsc::UnboundedSender<Vec<Hit>>,
-) {
-    if let Some(field_def) = form_state.fields.get(form_state.current_field) {
-        if field_def.is_link {
-            if let Some(target_table) = &field_def.link_target_table {
-                // 1. Update state for immediate UI feedback
-                form_state.autocomplete_loading = true;
-                form_state.autocomplete_active = true;
-                form_state.autocomplete_suggestions.clear();
-                form_state.selected_suggestion_index = None;
-
-                // 2. Clone everything needed for the background task
-                let query = form_state.get_current_input().to_string();
-                let table_to_search = target_table.clone();
-                let mut grpc_client_clone = grpc_client.clone();
-
-                info!(
-                    "[Autocomplete] Spawning search in '{}' for query: '{}'",
-                    table_to_search, query
-                );
-
-                // 3. Spawn the non-blocking task
-                tokio::spawn(async move {
-                    match grpc_client_clone
-                        .search_table(table_to_search, query)
-                        .await
-                    {
-                        Ok(response) => {
-                            // Send results back through the channel
-                            let _ = sender.send(response.hits);
-                        }
-                        Err(e) => {
-                            tracing::error!(
-                                "[Autocomplete] Search failed: {:?}",
-                                e
-                            );
-                            // Send an empty vec on error so the UI can stop loading
-                            let _ = sender.send(vec![]);
-                        }
-                    }
-                });
-            }
-        }
-    }
-}
-
-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
-    let canvas_config = canvas::config::CanvasConfig::load();
-    if let Some(action_name) = canvas_config.get_edit_action(key_event.code, key_event.modifiers) {
-        let canvas_action = CanvasAction::from_string(action_name);
-        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())
-}
-
-/// Helper function to execute a specific action using canvas library
-async fn execute_canvas_action(
-    action: &str,
-    key: KeyEvent,
-    form_state: &mut FormState,
-    ideal_cursor_column: &mut usize,
-) -> Result<String> {
-    let canvas_action = CanvasAction::from_string(action);
-    match ActionDispatcher::dispatch(canvas_action, form_state, ideal_cursor_column).await {
-        Ok(ActionResult::Success(msg)) => Ok(msg.unwrap_or_default()),
-        Ok(ActionResult::HandledByFeature(msg)) => Ok(msg),
-        Ok(ActionResult::Error(msg)) => Ok(format!("Error: {}", msg)),
-        Ok(ActionResult::RequiresContext(msg)) => Ok(format!("Context needed: {}", msg)),
-        Err(e) => Ok(format!("Action failed: {}", e)),
-    }
-}
-
-/// FIXED: Unified canvas action handler with proper priority order for edit mode
-async fn handle_canvas_state_edit<S: CanvasState>(
-    key: KeyEvent,
-    config: &Config,
-    state: &mut S,
-    ideal_cursor_column: &mut usize,
-) -> Result<String> {
-    // println!("DEBUG: Key pressed: {:?}", key); // DEBUG
-
-    // PRIORITY 1: Character insertion in edit mode comes FIRST
-    if let KeyCode::Char(c) = key.code {
-        // Only insert if no modifiers or just shift (for uppercase)
-        if key.modifiers.is_empty() || key.modifiers == KeyModifiers::SHIFT {
-            // println!("DEBUG: Using character insertion priority for: {}", c); // DEBUG
-            let canvas_action = CanvasAction::InsertChar(c);
-            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) => {
-                    // println!("DEBUG: Character insertion failed: {:?}, trying config", e);
-                    // Fall through to try config mappings
-                }
-            }
-        }
-    }
-
-    // PRIORITY 2: Check canvas config for special keys/combinations
-    let canvas_config = canvas::config::CanvasConfig::load();
-    if let Some(action_name) = canvas_config.get_edit_action(key.code, key.modifiers) {
-        // println!("DEBUG: Canvas config mapped to: {}", action_name); // DEBUG
-        let canvas_action = CanvasAction::from_string(action_name);
-
-        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(_) => {
-                // println!("DEBUG: Canvas action failed, trying client config"); // DEBUG
-            }
-        }
-    } else {
-        // println!("DEBUG: No canvas config mapping found"); // DEBUG
-    }
-
-    // PRIORITY 3: Check client config ONLY for non-character keys or modified keys
-    if !matches!(key.code, KeyCode::Char(_)) || !key.modifiers.is_empty() {
-        if let Some(action_str) = config.get_edit_action_for_key(key.code, key.modifiers) {
-            // println!("DEBUG: Client config mapped to: {} (for non-char key)", action_str); // DEBUG
-            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));
-                }
-            }
-        } else {
-             // println!("DEBUG: No client config mapping found for non-char key"); // DEBUG
-        }
-    } else {
-        // println!("DEBUG: Skipping client config for character key in edit mode"); // DEBUG
-    }
-
-    // println!("DEBUG: No action taken for key: {:?}", key); // DEBUG
-    Ok(String::new())
-}
-
-#[allow(clippy::too_many_arguments)]
-pub async fn handle_edit_event(
-    key: KeyEvent,
-    config: &Config,
-    form_state: &mut FormState,
-    login_state: &mut LoginState,
-    register_state: &mut RegisterState,
-    admin_state: &mut AdminState,
-    current_position: &mut u64,
-    total_count: u64,
-    event_handler: &mut EventHandler,
-    app_state: &AppState,
-) -> Result<EditEventOutcome> {
-    // --- AUTOCOMPLETE-SPECIFIC KEY HANDLING ---
-    if app_state.ui.show_form && form_state.autocomplete_active {
-        if let Some(action) =
-            config.get_edit_action_for_key(key.code, key.modifiers)
-        {
-            match action {
-                "suggestion_down" => {
-                    if !form_state.autocomplete_suggestions.is_empty() {
-                        let current =
-                            form_state.selected_suggestion_index.unwrap_or(0);
-                        let next = (current + 1)
-                            % form_state.autocomplete_suggestions.len();
-                        form_state.selected_suggestion_index = Some(next);
-                    }
-                    return Ok(EditEventOutcome::Message(String::new()));
-                }
-                "suggestion_up" => {
-                    if !form_state.autocomplete_suggestions.is_empty() {
-                        let current =
-                            form_state.selected_suggestion_index.unwrap_or(0);
-                        let prev = if current == 0 {
-                            form_state.autocomplete_suggestions.len() - 1
-                        } else {
-                            current - 1
-                        };
-                        form_state.selected_suggestion_index = Some(prev);
-                    }
-                    return Ok(EditEventOutcome::Message(String::new()));
-                }
-                "exit" => {
-                    form_state.deactivate_autocomplete();
-                    return Ok(EditEventOutcome::Message(
-                        "Autocomplete cancelled".to_string(),
-                    ));
-                }
-                "enter_decider" => {
-                    if let Some(selected_idx) =
-                        form_state.selected_suggestion_index
-                    {
-                        if let Some(selection) = form_state
-                            .autocomplete_suggestions
-                            .get(selected_idx)
-                            .cloned()
-                        {
-                            // --- THIS IS THE CORE LOGIC CHANGE ---
-
-                            // 1. Get the friendly display name for the UI
-                            let display_name =
-                                form_state.get_display_name_for_hit(&selection);
-
-                            // 2. Store the REAL ID in the form's values
-                            let current_input =
-                                form_state.get_current_input_mut();
-                            *current_input = selection.id.to_string();
-
-                            // 3. Set the persistent display override in the map
-                            form_state.link_display_map.insert(
-                                form_state.current_field,
-                                display_name,
-                            );
-
-                            // 4. Finalize state
-                            form_state.deactivate_autocomplete();
-                            form_state.set_has_unsaved_changes(true);
-                            return Ok(EditEventOutcome::Message(
-                                "Selection made".to_string(),
-                            ));
-                        }
-                    }
-                    form_state.deactivate_autocomplete();
-                    // Fall through to default 'enter' behavior
-                }
-                _ => {} // Let other keys fall through to the live search logic
-            }
-        }
-    }
-
-    // --- LIVE AUTOCOMPLETE TRIGGER LOGIC ---
-    let mut trigger_search = false;
-
-    if app_state.ui.show_form {
-        // Manual trigger
-        if let Some("trigger_autocomplete") =
-            config.get_edit_action_for_key(key.code, key.modifiers)
-        {
-            if !form_state.autocomplete_active {
-                trigger_search = true;
-            }
-        }
-        // Live search trigger while typing
-        else if form_state.autocomplete_active {
-            if let KeyCode::Char(_) | KeyCode::Backspace = key.code {
-                let action = if let KeyCode::Backspace = key.code {
-                    "delete_char_backward"
-                } else {
-                    "insert_char"
-                };
-                // FIXED: Use canvas library instead of form_e::execute_edit_action
-                execute_canvas_action(
-                    action,
-                    key,
-                    form_state,
-                    &mut event_handler.ideal_cursor_column,
-                )
-                .await?;
-                trigger_search = true;
-            }
-        }
-    }
-
-    if trigger_search {
-        trigger_form_autocomplete_search(
-            form_state,
-            &mut event_handler.grpc_client,
-            event_handler.autocomplete_result_sender.clone(),
-        )
-        .await;
-        return Ok(EditEventOutcome::Message("Searching...".to_string()));
-    }
-
-    // --- GENERAL EDIT MODE EVENT HANDLING (IF NOT AUTOCOMPLETE) ---
-
-    if let Some(action_str) =
-        config.get_edit_action_for_key(key.code, key.modifiers)
-    {
-        // Handle Enter key (next field)
-        if action_str == "enter_decider" {
-            // FIXED: Use canvas library instead of form_e::execute_edit_action
-            let msg = execute_canvas_action(
-                "next_field",
-                key,
-                form_state,
-                &mut event_handler.ideal_cursor_column,
-            )
-            .await?;
-            return Ok(EditEventOutcome::Message(msg));
-        }
-
-        // Handle exiting edit mode
-        if action_str == "exit" {
-            return Ok(EditEventOutcome::ExitEditMode);
-        }
-
-        // Handle all other edit actions - NOW USING CANVAS LIBRARY
-        let msg = if app_state.ui.show_login {
-            // 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 {
-            // 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,
-            )
-            .await?
-        } else if app_state.ui.show_add_logic {
-            // NEW: Use unified canvas handler instead of add_logic_e::execute_edit_action
-            handle_canvas_state_edit(
-                key,
-                config,
-                &mut admin_state.add_logic_state,
-                &mut event_handler.ideal_cursor_column,
-            )
-            .await?
-        } else if app_state.ui.show_register {
-            // 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,
-            )
-            .await?
-        } else {
-            // FIXED: Use canvas library instead of form_e::execute_edit_action
-            execute_canvas_action(
-                action_str,
-                key,
-                form_state,
-                &mut event_handler.ideal_cursor_column,
-            )
-            .await?
-        };
-        return Ok(EditEventOutcome::Message(msg));
-    }
-
-    // --- FALLBACK FOR CHARACTER INSERTION (IF NO OTHER BINDING MATCHED) ---
-    if let KeyCode::Char(_) = key.code {
-        let msg = if app_state.ui.show_login {
-            // 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 {
-            // 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,
-            )
-            .await?
-        } else if app_state.ui.show_add_logic {
-            // NEW: Use unified canvas handler instead of add_logic_e::execute_edit_action
-            handle_canvas_state_edit(
-                key,
-                config,
-                &mut admin_state.add_logic_state,
-                &mut event_handler.ideal_cursor_column,
-            )
-            .await?
-        } else if app_state.ui.show_register {
-            // 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,
-            )
-            .await?
-        } else {
-            // FIXED: Use canvas library instead of form_e::execute_edit_action
-            execute_canvas_action(
-                "insert_char",
-                key,
-                form_state,
-                &mut event_handler.ideal_cursor_column,
-            )
-            .await?
-        };
-        return Ok(EditEventOutcome::Message(msg));
-    }
-
-    Ok(EditEventOutcome::Message(String::new())) // No action taken
-}
--- a/client/src/modes/canvas/read_only.rs
+++ b/client/src/modes/canvas/read_only.rs
@@ -1,313 +0,0 @@
-// src/modes/canvas/read_only.rs
-
-use crate::config::binds::config::Config;
-use crate::config::binds::key_sequences::KeySequenceTracker;
-use crate::services::grpc_client::GrpcClient;
-use crate::state::pages::auth::LoginState;
-use crate::state::pages::auth::RegisterState;
-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 canvas::{canvas::{CanvasAction, CanvasState, ActionResult}, dispatcher::ActionDispatcher};
-use crossterm::event::KeyEvent;
-use anyhow::Result;
-
-/// Helper function to dispatch canvas action for any CanvasState
-async fn dispatch_canvas_action<S: CanvasState>(
-    action: &str,
-    state: &mut S,
-    ideal_cursor_column: &mut usize,
-) -> String {
-    let canvas_action = CanvasAction::from_string(action);
-    match ActionDispatcher::dispatch(canvas_action, state, ideal_cursor_column).await {
-        Ok(ActionResult::Success(msg)) => msg.unwrap_or_default(),
-        Ok(ActionResult::HandledByFeature(msg)) => msg,
-        Ok(ActionResult::Error(msg)) => format!("Error: {}", msg),
-        Ok(ActionResult::RequiresContext(msg)) => format!("Context needed: {}", msg),
-        Err(e) => format!("Action failed: {}", e),
-    }
-}
-
-/// Helper function to dispatch canvas action to the appropriate state based on UI
-async fn dispatch_to_active_state(
-    action: &str,
-    app_state: &AppState,
-    form_state: &mut FormState,
-    login_state: &mut LoginState,
-    register_state: &mut RegisterState,
-    add_table_state: &mut AddTableState,
-    add_logic_state: &mut AddLogicState,
-    ideal_cursor_column: &mut usize,
-) -> String {
-    if app_state.ui.show_add_table {
-        dispatch_canvas_action(action, add_table_state, ideal_cursor_column).await
-    } else if app_state.ui.show_add_logic {
-        dispatch_canvas_action(action, add_logic_state, ideal_cursor_column).await
-    } else if app_state.ui.show_register {
-        dispatch_canvas_action(action, register_state, ideal_cursor_column).await
-    } else if app_state.ui.show_login {
-        dispatch_canvas_action(action, login_state, ideal_cursor_column).await
-    } else {
-        dispatch_canvas_action(action, form_state, ideal_cursor_column).await
-    }
-}
-
-/// Helper function to handle context-specific actions that need special treatment
-async fn handle_context_action(
-    action: &str,
-    app_state: &AppState,
-    form_state: &mut FormState,
-    grpc_client: &mut GrpcClient,
-    ideal_cursor_column: &mut usize,
-) -> Result<Option<String>> {
-    const CONTEXT_ACTIONS_FORM: &[&str] = &[
-        "previous_entry",
-        "next_entry",
-    ];
-    const CONTEXT_ACTIONS_LOGIN: &[&str] = &[
-        "previous_entry",
-        "next_entry",
-    ];
-
-    if app_state.ui.show_form && CONTEXT_ACTIONS_FORM.contains(&action) {
-        Ok(Some(crate::tui::functions::form::handle_action(
-            action,
-            form_state,
-            grpc_client,
-            ideal_cursor_column,
-        ).await?))
-    } else if app_state.ui.show_login && CONTEXT_ACTIONS_LOGIN.contains(&action) {
-        Ok(Some(crate::tui::functions::login::handle_action(action).await?))
-    } else {
-        Ok(None) // Not a context action, use regular canvas dispatch
-    }
-}
-
-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
-    let canvas_config = canvas::config::CanvasConfig::load();
-    if let Some(action_name) = canvas_config.get_read_only_action(key_event.code, key_event.modifiers) {
-        let canvas_action = CanvasAction::from_string(action_name);
-        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,
-    config: &Config,
-    form_state: &mut FormState,
-    login_state: &mut LoginState,
-    register_state: &mut RegisterState,
-    add_table_state: &mut AddTableState,
-    add_logic_state: &mut AddLogicState,
-    key_sequence_tracker: &mut KeySequenceTracker,
-    grpc_client: &mut GrpcClient,
-    command_message: &mut String,
-    edit_mode_cooldown: &mut bool,
-    ideal_cursor_column: &mut usize,
-) -> Result<(bool, String)> {
-    if config.is_enter_edit_mode_before(key.code, key.modifiers) {
-        *edit_mode_cooldown = true;
-        *command_message = "Entering Edit mode".to_string();
-        return Ok((false, command_message.clone()));
-    }
-
-    if config.is_enter_edit_mode_after(key.code, key.modifiers) {
-        // Determine target state to adjust cursor - all states now use CanvasState trait
-        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
-            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()));
-    }
-
-    if key.modifiers.is_empty() {
-        key_sequence_tracker.add_key(key.code);
-        let sequence = key_sequence_tracker.get_sequence();
-
-        if let Some(action) = config.matches_key_sequence_generalized(&sequence).as_deref() {
-            // Try context-specific actions first, otherwise use canvas dispatch
-            let result = if let Some(context_result) = handle_context_action(
-                action,
-                app_state,
-                form_state,
-                grpc_client,
-                ideal_cursor_column,
-            ).await? {
-                context_result
-            } else {
-                dispatch_to_active_state(
-                    action,
-                    app_state,
-                    form_state,
-                    login_state,
-                    register_state,
-                    add_table_state,
-                    add_logic_state,
-                    ideal_cursor_column,
-                ).await
-            };
-            key_sequence_tracker.reset();
-            return Ok((false, result));
-        }
-
-        if config.is_key_sequence_prefix(&sequence) {
-            return Ok((false, command_message.clone()));
-        }
-
-        if sequence.len() == 1 && !config.is_key_sequence_prefix(&sequence) {
-            if let Some(action) = config.get_read_only_action_for_key(key.code, key.modifiers).as_deref() {
-                // Try context-specific actions first, otherwise use canvas dispatch
-                let result = if let Some(context_result) = handle_context_action(
-                    action,
-                    app_state,
-                    form_state,
-                    grpc_client,
-                    ideal_cursor_column,
-                ).await? {
-                    context_result
-                } else {
-                    dispatch_to_active_state(
-                        action,
-                        app_state,
-                        form_state,
-                        login_state,
-                        register_state,
-                        add_table_state,
-                        add_logic_state,
-                        ideal_cursor_column,
-                    ).await
-                };
-                key_sequence_tracker.reset();
-                return Ok((false, result));
-            }
-        }
-        key_sequence_tracker.reset();
-    } else {
-        key_sequence_tracker.reset();
-
-        if let Some(action) = config.get_read_only_action_for_key(key.code, key.modifiers).as_deref() {
-            // Try context-specific actions first, otherwise use canvas dispatch
-            let result = if let Some(context_result) = handle_context_action(
-                action,
-                app_state,
-                form_state,
-                grpc_client,
-                ideal_cursor_column,
-            ).await? {
-                context_result
-            } else {
-                dispatch_to_active_state(
-                    action,
-                    app_state,
-                    form_state,
-                    login_state,
-                    register_state,
-                    add_table_state,
-                    add_logic_state,
-                    ideal_cursor_column,
-                ).await
-            };
-            return Ok((false, result));
-        }
-    }
-
-    if !*edit_mode_cooldown {
-        let default_key = "i".to_string();
-        let edit_key = config
-            .keybindings
-            .read_only
-            .get("enter_edit_mode_before")
-            .and_then(|keys| keys.first())
-            .map(|k| k.to_string())
-            .unwrap_or(default_key);
-        *command_message = format!("Read-only mode - press {} to edit", edit_key);
-    }
-
-    *edit_mode_cooldown = false;
-
-    Ok((false, command_message.clone()))
-}
--- a/client/src/modes/common/commands.rs
+++ b/client/src/modes/common/commands.rs
@@ -2,7 +2,6 @@
 use crate::tui::terminal::core::TerminalCore;
 use crate::state::app::state::AppState;
 use crate::state::pages::{form::FormState, auth::LoginState, auth::RegisterState};
-use canvas::canvas::CanvasState;
 use anyhow::Result;

 pub struct CommandHandler;
--- a/client/src/modes/general/navigation.rs
+++ b/client/src/modes/general/navigation.rs
@@ -11,7 +11,7 @@ use crate::state::pages::admin::AdminState;
 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 canvas::DataProvider;
 use anyhow::Result;

 pub async fn handle_navigation_event(
@@ -90,10 +90,10 @@ pub fn move_up(app_state: &mut AppState, login_state: &mut LoginState, register_
        if app_state.focused_button_index == 0 {
            app_state.ui.focus_outside_canvas = false;
            if app_state.ui.show_login {
-                let last_field_index = login_state.fields().len().saturating_sub(1);
+                let last_field_index = login_state.field_count().saturating_sub(1);
                login_state.set_current_field(last_field_index);
            } else {
-                let last_field_index = register_state.fields().len().saturating_sub(1);
+                let last_field_index = register_state.field_count().saturating_sub(1);
                register_state.set_current_field(last_field_index);
            }
        } else {
--- a/client/src/modes/handlers/event.rs
+++ b/client/src/modes/handlers/event.rs
@@ -10,15 +10,13 @@ use crate::modes::general::command_navigation::{
    handle_command_navigation_event, NavigationState,
 };
 use crate::modes::{
-    canvas::{common_mode, edit, read_only},
    common::{command_mode, commands::CommandHandler},
    general::{dialog, navigation},
    handlers::mode_manager::{AppMode, ModeManager},
 };
 use crate::services::auth::AuthClient;
 use crate::services::grpc_client::GrpcClient;
-use canvas::{canvas::CanvasAction, dispatcher::ActionDispatcher};
-use canvas::canvas::CanvasState; // Only need this import now
+use canvas::FormEditor;
 use crate::state::{
    app::{
        buffer::{AppView, BufferState},
@@ -756,18 +754,17 @@ impl EventHandler {
                    if let Some(action) = config.get_common_action(key_code, modifiers) {
                        match action {
                            "save" | "force_quit" | "save_and_quit" | "revert" => {
-                                return common_mode::handle_core_action(
-                                    action,
-                                    form_state,
-                                    auth_state,
-                                    login_state,
-                                    register_state,
-                                    &mut self.grpc_client,
-                                    &mut self.auth_client,
-                                    terminal,
-                                    app_state,
-                                )
-                                .await;
+                                return self
+                                    .handle_core_action(
+                                        action,
+                                        form_state,
+                                        auth_state,
+                                        login_state,
+                                        register_state,
+                                        terminal,
+                                        app_state,
+                                    )
+                                    .await;
                            }
                            _ => {}
                        }
@@ -775,34 +772,18 @@ impl EventHandler {

                    // Try canvas action for form first
                    if app_state.ui.show_form {
+                        let mut editor = FormEditor::new(form_state.clone());
                        if let Ok(Some(canvas_message)) = self.handle_form_canvas_action(
                            key_event,
-                            form_state,
+                            &mut editor,
+                            config,
                            false,
                        ).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));
+                    return Ok(EventOutcome::Ok(self.command_message.clone()));
                }

                AppMode::Highlight => {
@@ -820,24 +801,7 @@ impl EventHandler {
                        return Ok(EventOutcome::Ok("".to_string()));
                    }

-                    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));
+                    return Ok(EventOutcome::Ok(self.command_message.clone()));
                }

                AppMode::Edit => {
@@ -845,18 +809,17 @@ impl EventHandler {
                    if let Some(action) = config.get_common_action(key_code, modifiers) {
                        match action {
                            "save" | "force_quit" | "save_and_quit" | "revert" => {
-                                return common_mode::handle_core_action(
-                                    action,
-                                    form_state,
-                                    auth_state,
-                                    login_state,
-                                    register_state,
-                                    &mut self.grpc_client,
-                                    &mut self.auth_client,
-                                    terminal,
-                                    app_state,
-                                )
-                                .await;
+                                return self
+                                    .handle_core_action(
+                                        action,
+                                        form_state,
+                                        auth_state,
+                                        login_state,
+                                        register_state,
+                                        terminal,
+                                        app_state,
+                                    )
+                                    .await;
                            }
                            _ => {}
                        }
@@ -864,9 +827,11 @@ impl EventHandler {

                    // Try canvas action for form first
                    if app_state.ui.show_form {
+                        let mut editor = FormEditor::new(form_state.clone());
                        if let Ok(Some(canvas_message)) = self.handle_form_canvas_action(
                            key_event,
-                            form_state,
+                            &mut editor,
+                            config,
                            true,
                        ).await {
                            if !canvas_message.is_empty() {
@@ -876,88 +841,7 @@ impl EventHandler {
                        }
                    }

-                    // Handle legacy edit events
-                    let mut current_position = form_state.current_position;
-                    let total_count = form_state.total_count;
-
-                    let edit_result = edit::handle_edit_event(
-                        key_event,
-                        config,
-                        form_state,
-                        login_state,
-                        register_state,
-                        admin_state,
-                        &mut current_position,
-                        total_count,
-                        self,
-                        app_state,
-                    )
-                    .await;
-
-                    match edit_result {
-                        Ok(edit::EditEventOutcome::ExitEditMode) => {
-                            self.is_edit_mode = false;
-                            self.edit_mode_cooldown = true;
-
-                            // Check for unsaved changes across all states
-                            let has_changes = Self::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)?;
-
-                            // Get current input and cursor position
-                            let current_input = Self::get_current_input_for_state(
-                                app_state,
-                                login_state,
-                                register_state,
-                                form_state
-                            );
-                            let current_cursor_pos = Self::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;
-                                Self::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()));
-                        }
-
-                        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()));
-                        }
-
-                        Err(e) => {
-                            return Err(e.into());
-                        }
-                    }
+                    return Ok(EventOutcome::Ok(self.command_message.clone()));
                }

                AppMode::Command => {
@@ -1101,67 +985,159 @@ impl EventHandler {
    async fn handle_form_canvas_action(
        &mut self,
        key_event: KeyEvent,
-        form_state: &mut FormState,
+        editor: &mut FormEditor<FormState>,
+        config: &Config,
        is_edit_mode: bool,
    ) -> Result<Option<String>> {
-        let canvas_config = canvas::config::CanvasConfig::load();
+        use crossterm::event::KeyCode;

-        // PRIORITY 1: Handle character insertion in edit mode FIRST
        if is_edit_mode {
            if let KeyCode::Char(c) = key_event.code {
-                // Only insert if it's not a special modifier combination
                if key_event.modifiers.is_empty() || key_event.modifiers == KeyModifiers::SHIFT {
-                    let canvas_action = CanvasAction::InsertChar(c);
-                    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("Character insertion failed".to_string()));
-                        }
+                    editor.insert_char(c)?;
+                    return Ok(Some(format!("Inserted '{}'", c)));
+                }
+            }
+        }
+
+        // Use your config to resolve actions
+        if let Some(action) = config.get_edit_action_for_key(key_event.code, key_event.modifiers) {
+            match action {
+                "delete_char_backward" => { editor.delete_backward()?; return Ok(Some("Deleted backward".to_string())); }
+                "delete_char_forward"  => { editor.delete_forward()?; return Ok(Some("Deleted forward".to_string())); }
+                "move_left"            => { editor.move_left()?; return Ok(Some("Moved left".to_string())); }
+                "move_right"           => { editor.move_right()?; return Ok(Some("Moved right".to_string())); }
+                "move_up"              => { editor.move_up()?; return Ok(Some("Moved up".to_string())); }
+                "move_down"            => { editor.move_down()?; return Ok(Some("Moved down".to_string())); }
+
+                "move_line_start"      => { editor.move_line_start(); return Ok(Some("Line start".to_string())); }
+                "move_line_end"        => { editor.move_line_end(); return Ok(Some("Line end".to_string())); }
+                "move_word_next"       => { editor.move_word_next(); return Ok(Some("Next word".to_string())); }
+                "move_word_prev"       => { editor.move_word_prev(); return Ok(Some("Prev word".to_string())); }
+                "move_word_end"        => { editor.move_word_end(); return Ok(Some("Word end".to_string())); }
+                "move_word_end_prev"   => { editor.move_word_end_prev(); return Ok(Some("Prev word end".to_string())); }
+
+                "next_field"           => { editor.next_field()?; return Ok(Some("Next field".to_string())); }
+                "prev_field"           => { editor.prev_field()?; return Ok(Some("Prev field".to_string())); }
+                "open_suggestions" => {
+                    let field_index = editor.current_field();
+                    editor.open_suggestions(field_index);
+                    return Ok(Some("Opened suggestions".to_string()));
+                }
+                "apply_suggestion" | "enter_decider" => {
+                    if let Some(s) = editor.apply_suggestion() {
+                        return Ok(Some(format!("Applied suggestion: {}", s)));
+                    } else {
+                        return Ok(Some("No suggestion applied".to_string()));
                    }
                }
+                "exit" | "exit_edit_mode" => {
+                    editor.exit_edit_mode()?;
+                    return Ok(Some("Exited edit mode".to_string()));
+                }
+                _ => {}
            }
        }

-        // PRIORITY 2: Handle config-mapped actions for non-character keys
-        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 {
-            // Skip mode transition actions - let the main event handler deal with them
-            if Self::is_mode_transition_action(action_str) {
-                return Ok(None);
-            }
-
-            // Execute the config-mapped action
-            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()));
-                }
-            }
-        }
-
-        // No action found
        Ok(None)
    }

+    async fn handle_core_action(
+        &mut self,
+        action: &str,
+        form_state: &mut FormState,
+        auth_state: &mut AuthState,
+        login_state: &mut LoginState,
+        register_state: &mut RegisterState,
+        terminal: &mut TerminalCore,
+        app_state: &mut AppState,
+    ) -> Result<EventOutcome> {
+        match action {
+            "save" => {
+                if app_state.ui.show_login {
+                    let message = crate::tui::functions::common::login::save(
+                        auth_state,
+                        login_state,
+                        &mut self.auth_client,
+                        app_state,
+                    )
+                    .await?;
+                    Ok(EventOutcome::Ok(message))
+                } else {
+                    let save_outcome = crate::tui::functions::common::form::save(
+                        app_state,
+                        form_state,
+                        &mut self.grpc_client,
+                    )
+                    .await?;
+                    let message = match save_outcome {
+                        SaveOutcome::NoChange => "No changes to save.".to_string(),
+                        SaveOutcome::UpdatedExisting => "Entry updated.".to_string(),
+                        SaveOutcome::CreatedNew(_) => "New entry created.".to_string(),
+                    };
+                    Ok(EventOutcome::DataSaved(save_outcome, message))
+                }
+            }
+            "force_quit" => {
+                terminal.cleanup()?;
+                Ok(EventOutcome::Exit(
+                    "Force exiting without saving.".to_string(),
+                ))
+            }
+            "save_and_quit" => {
+                let message = if app_state.ui.show_login {
+                    crate::tui::functions::common::login::save(
+                        auth_state,
+                        login_state,
+                        &mut self.auth_client,
+                        app_state,
+                    )
+                    .await?
+                } else {
+                    let save_outcome = crate::tui::functions::common::form::save(
+                        app_state,
+                        form_state,
+                        &mut self.grpc_client,
+                    )
+                    .await?;
+                    match save_outcome {
+                        SaveOutcome::NoChange => "No changes to save.".to_string(),
+                        SaveOutcome::UpdatedExisting => "Entry updated.".to_string(),
+                        SaveOutcome::CreatedNew(_) => "New entry created.".to_string(),
+                    }
+                };
+                terminal.cleanup()?;
+                Ok(EventOutcome::Exit(format!(
+                    "{}. Exiting application.",
+                    message
+                )))
+            }
+            "revert" => {
+                let message = if app_state.ui.show_login {
+                    crate::tui::functions::common::login::revert(login_state, app_state)
+                        .await
+                } else if app_state.ui.show_register {
+                    crate::tui::functions::common::register::revert(
+                        register_state,
+                        app_state,
+                    )
+                    .await
+                } else {
+                    crate::tui::functions::common::form::revert(
+                        form_state,
+                        &mut self.grpc_client,
+                    )
+                    .await?
+                };
+                Ok(EventOutcome::Ok(message))
+            }
+            _ => Ok(EventOutcome::Ok(format!(
+                "Core action not handled: {}",
+                action
+            ))),
+        }
+    }
+
    fn is_mode_transition_action(action: &str) -> bool {
        matches!(action,
            "exit" |
--- a/client/src/modes/highlight.rs
+++ b/client/src/modes/highlight.rs
@@ -1,2 +0,0 @@
-// src/client/modes/highlight.rs
-pub mod highlight;
--- a/client/src/modes/highlight/highlight.rs
+++ b/client/src/modes/highlight/highlight.rs
@@ -1,65 +0,0 @@
-// src/modes/highlight/highlight.rs
-// (This file is intentionally simple for now, reusing ReadOnly logic)
-
-use crate::config::binds::config::Config;
-use crate::config::binds::key_sequences::KeySequenceTracker;
-use crate::services::grpc_client::GrpcClient;
-use crate::state::app::state::AppState;
-use crate::state::pages::auth::{LoginState, RegisterState};
-use crate::state::pages::admin::AdminState;
-use crate::state::pages::form::FormState;
-use crate::modes::handlers::event::EventOutcome;
-use crate::modes::read_only;
-use crossterm::event::KeyEvent;
-use anyhow::Result;
-
-/// Handles events when in Highlight mode.
-/// Currently, it mostly delegates to the read_only handler for movement.
-/// Exiting highlight mode is handled directly in the main event handler.
-pub async fn handle_highlight_event(
-    app_state: &mut AppState,
-    key: KeyEvent,
-    config: &Config,
-    form_state: &mut FormState,
-    login_state: &mut LoginState,
-    register_state: &mut RegisterState,
-    admin_state: &mut AdminState,
-    key_sequence_tracker: &mut KeySequenceTracker,
-    current_position: &mut u64,
-    total_count: u64,
-    grpc_client: &mut GrpcClient,
-    command_message: &mut String,
-    edit_mode_cooldown: &mut bool,
-    ideal_cursor_column: &mut usize,
-) -> Result<EventOutcome> {
-    // Delegate movement and other actions to the read_only handler
-    // The rendering logic will use the highlight_anchor to draw the selection
-    let (should_exit, message) = read_only::handle_read_only_event(
-        app_state,
-        key,
-        config,
-        form_state,
-        login_state,
-        register_state,
-        &mut admin_state.add_table_state,
-        &mut admin_state.add_logic_state,
-        key_sequence_tracker,
-        grpc_client,
-        command_message, // Pass the message buffer
-        edit_mode_cooldown,
-        ideal_cursor_column,
-    )
-    .await?;
-
-    // ReadOnly handler doesn't return EventOutcome directly, adapt if needed
-    // For now, assume Ok outcome unless ReadOnly signals an exit (which we ignore here)
-    if should_exit {
-        // This exit is likely for the whole app, let the main loop handle it
-        // We just return the message from read_only
-        Ok(EventOutcome::Ok(message))
-    } else {
-        Ok(EventOutcome::Ok(message))
-    }
-}
-
-
--- a/client/src/modes/mod.rs
+++ b/client/src/modes/mod.rs
@@ -1,11 +1,10 @@
 // src/client/modes/mod.rs
 pub mod handlers;
-pub mod canvas;
 pub mod general;
 pub mod common;
-pub mod highlight;
+pub mod canvas;

 pub use handlers::*;
-pub use canvas::*;
 pub use general::*;
 pub use common::*;
+pub use canvas::*;
--- a/client/src/state/pages/add_logic.rs
+++ b/client/src/state/pages/add_logic.rs
@@ -1,7 +1,7 @@
 // src/state/pages/add_logic.rs
 use crate::config::binds::config::{EditorConfig, EditorKeybindingMode};
-use canvas::canvas::{CanvasState, ActionContext, CanvasAction, AppMode};
 use crate::components::common::text_editor::{TextEditor, VimState};
+use canvas::{DataProvider, AppMode};
 use std::cell::RefCell;
 use std::rc::Rc;
 use tui_textarea::TextArea;
@@ -277,174 +277,41 @@ impl Default for AddLogicState {
    }
 }

-// Implement external library's CanvasState for AddLogicState
-impl CanvasState for AddLogicState {
-    fn current_field(&self) -> usize {
-        match self.current_focus {
-            AddLogicFocus::InputLogicName => 0,
-            AddLogicFocus::InputTargetColumn => 1,
-            AddLogicFocus::InputDescription => 2,
-            // If focus is elsewhere, return the last canvas field used
-            _ => self.last_canvas_field,
+impl DataProvider for AddLogicState {
+    fn field_count(&self) -> usize {
+        3 // Logic Name, Target Column, Description
+    }
+
+    fn field_name(&self, index: usize) -> &str {
+        match index {
+            0 => "Logic Name",
+            1 => "Target Column",
+            2 => "Description",
+            _ => "",
        }
    }

-    fn set_current_field(&mut self, index: usize) {
-        let new_focus = match index {
-            0 => AddLogicFocus::InputLogicName,
-            1 => AddLogicFocus::InputTargetColumn,
-            2 => AddLogicFocus::InputDescription,
-            _ => return,
-        };
-        if self.current_focus != new_focus {
-            if self.current_focus == AddLogicFocus::InputTargetColumn {
-                self.in_target_column_suggestion_mode = false;
-                self.show_target_column_suggestions = false;
-            }
-            self.current_focus = new_focus;
-            self.last_canvas_field = index;
+    fn field_value(&self, index: usize) -> &str {
+        match index {
+            0 => &self.logic_name_input,
+            1 => &self.target_column_input,
+            2 => &self.description_input,
+            _ => "",
        }
    }

-    fn current_cursor_pos(&self) -> usize {
-        match self.current_focus {
-            AddLogicFocus::InputLogicName => self.logic_name_cursor_pos,
-            AddLogicFocus::InputTargetColumn => self.target_column_cursor_pos,
-            AddLogicFocus::InputDescription => self.description_cursor_pos,
-            _ => 0,
-        }
-    }
-
-    fn set_current_cursor_pos(&mut self, pos: usize) {
-        match self.current_focus {
-            AddLogicFocus::InputLogicName => {
-                self.logic_name_cursor_pos = pos.min(self.logic_name_input.len());
-            }
-            AddLogicFocus::InputTargetColumn => {
-                self.target_column_cursor_pos = pos.min(self.target_column_input.len());
-            }
-            AddLogicFocus::InputDescription => {
-                self.description_cursor_pos = pos.min(self.description_input.len());
-            }
+    fn set_field_value(&mut self, index: usize, value: String) {
+        match index {
+            0 => self.logic_name_input = value,
+            1 => self.target_column_input = value,
+            2 => self.description_input = value,
            _ => {}
        }
+        self.has_unsaved_changes = true;
    }

-    fn get_current_input(&self) -> &str {
-        match self.current_focus {
-            AddLogicFocus::InputLogicName => &self.logic_name_input,
-            AddLogicFocus::InputTargetColumn => &self.target_column_input,
-            AddLogicFocus::InputDescription => &self.description_input,
-            _ => "", // Should not happen if called correctly
-        }
-    }
-
-    fn get_current_input_mut(&mut self) -> &mut String {
-        match self.current_focus {
-            AddLogicFocus::InputLogicName => &mut self.logic_name_input,
-            AddLogicFocus::InputTargetColumn => &mut self.target_column_input,
-            AddLogicFocus::InputDescription => &mut self.description_input,
-            _ => &mut self.logic_name_input, // Fallback
-        }
-    }
-
-    fn inputs(&self) -> Vec<&String> {
-        vec![
-            &self.logic_name_input,
-            &self.target_column_input,
-            &self.description_input,
-        ]
-    }
-
-    fn fields(&self) -> Vec<&str> {
-        vec!["Logic Name", "Target Column", "Description"]
-    }
-
-    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 handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
-        match action {
-            // Handle saving logic script
-            CanvasAction::Custom(action_str) if action_str == "save_logic" => {
-                self.save_logic()
-            }
-
-            // Handle clearing the form
-            CanvasAction::Custom(action_str) if action_str == "clear_form" => {
-                self.clear_form()
-            }
-
-            // Handle target column autocomplete activation
-            CanvasAction::Custom(action_str) if action_str == "activate_autocomplete" => {
-                if self.current_field() == 1 { // Target Column field
-                    self.in_target_column_suggestion_mode = true;
-                    self.update_target_column_suggestions();
-                    Some("Autocomplete activated".to_string())
-                } else {
-                    None
-                }
-            }
-
-            // Handle target column suggestion selection
-            CanvasAction::Custom(action_str) if action_str == "select_suggestion" => {
-                if self.current_field() == 1 && self.in_target_column_suggestion_mode {
-                    if let Some(selected_idx) = self.selected_target_column_suggestion_index {
-                        if let Some(suggestion) = self.target_column_suggestions.get(selected_idx) {
-                            self.target_column_input = suggestion.clone();
-                            self.target_column_cursor_pos = suggestion.len();
-                            self.in_target_column_suggestion_mode = false;
-                            self.show_target_column_suggestions = false;
-                            self.has_unsaved_changes = true;
-                            return Some(format!("Selected: {}", suggestion));
-                        }
-                    }
-                }
-                None
-            }
-
-            // Custom validation when moving between fields
-            CanvasAction::NextField => {
-                match self.current_field() {
-                    0 => { // Logic Name field
-                        if self.logic_name_input.trim().is_empty() {
-                            Some("Logic name cannot be empty".to_string())
-                        } else {
-                            None // Let canvas library handle the normal field movement
-                        }
-                    }
-                    1 => { // Target Column field
-                        // Update suggestions when entering target column field
-                        self.update_target_column_suggestions();
-                        None
-                    }
-                    _ => None,
-                }
-            }
-
-            // Handle character insertion with validation
-            CanvasAction::InsertChar(c) => {
-                if self.current_field() == 1 { // Target Column field
-                    // Update suggestions after character insertion
-                    // Note: Canvas library will handle the actual insertion
-                    // This is just for triggering suggestion updates
-                    None // Let canvas handle insertion, then we'll update suggestions
-                } else {
-                    None // Let canvas handle normally
-                }
-            }
-
-            // Let canvas library handle everything else
-            _ => None,
-        }
-    }
-
-    fn current_mode(&self) -> AppMode {
-        self.app_mode
+    fn supports_suggestions(&self, field_index: usize) -> bool {
+        // Only Target Column supports suggestions
+        field_index == 1
    }
 }
--- a/client/src/state/pages/add_table.rs
+++ b/client/src/state/pages/add_table.rs
@@ -1,5 +1,6 @@
 // src/state/pages/add_table.rs
-use canvas::canvas::{CanvasState, ActionContext, CanvasAction, AppMode};
+
+use canvas::{DataProvider, CanvasAction, AppMode};
 use ratatui::widgets::TableState;
 use serde::{Deserialize, Serialize};

@@ -170,137 +171,40 @@ impl AddTableState {
    }
 }

-// 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, return the last canvas field used
-            _ => self.last_canvas_field,
+impl DataProvider for AddTableState {
+    fn field_count(&self) -> usize {
+        3 // Table name, Column name, Column type
+    }
+
+    fn field_name(&self, index: usize) -> &str {
+        match index {
+            0 => "Table name",
+            1 => "Name",
+            2 => "Type",
+            _ => "",
        }
    }

-    fn current_cursor_pos(&self) -> usize {
-        match self.current_focus {
-            AddTableFocus::InputTableName => self.table_name_cursor_pos,
-            AddTableFocus::InputColumnName => self.column_name_cursor_pos,
-            AddTableFocus::InputColumnType => self.column_type_cursor_pos,
-            _ => 0, // Default if focus is not on an input field
+    fn field_value(&self, index: usize) -> &str {
+        match index {
+            0 => &self.table_name_input,
+            1 => &self.column_name_input,
+            2 => &self.column_type_input,
+            _ => "",
        }
    }

-    fn set_current_field(&mut self, index: usize) {
-        // Update both current focus and last canvas field
-        self.current_focus = match index {
-            0 => {
-                self.last_canvas_field = 0;
-                AddTableFocus::InputTableName
-            },
-            1 => {
-                self.last_canvas_field = 1;
-                AddTableFocus::InputColumnName
-            },
-            2 => {
-                self.last_canvas_field = 2;
-                AddTableFocus::InputColumnType
-            },
-            _ => self.current_focus, // Stay on current focus if index is out of bounds
-        };
-    }
-
-    fn set_current_cursor_pos(&mut self, pos: usize) {
-        match self.current_focus {
-            AddTableFocus::InputTableName => self.table_name_cursor_pos = pos,
-            AddTableFocus::InputColumnName => self.column_name_cursor_pos = pos,
-            AddTableFocus::InputColumnType => self.column_type_cursor_pos = pos,
-            _ => {} // Do nothing if focus is not on an input field
+    fn set_field_value(&mut self, index: usize, value: String) {
+        match index {
+            0 => self.table_name_input = value,
+            1 => self.column_name_input = value,
+            2 => self.column_type_input = value,
+            _ => {}
        }
+        self.has_unsaved_changes = true;
    }

-    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;
-    }
-
-    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()
-            }
-
-            // 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,
-        }
-    }
-
-    fn current_mode(&self) -> AppMode {
-        self.app_mode
+    fn supports_suggestions(&self, _field_index: usize) -> bool {
+        false // AddTableState doesn’t use suggestions
    }
 }
--- a/client/src/state/pages/auth.rs
+++ b/client/src/state/pages/auth.rs
@@ -1,6 +1,5 @@
 // src/state/pages/auth.rs
-use canvas::canvas::{CanvasState, ActionContext, CanvasAction, AppMode};
-use canvas::autocomplete::{AutocompleteCanvasState, AutocompleteState, SuggestionItem};
+use canvas::{DataProvider, AppMode, SuggestionItem};
 use lazy_static::lazy_static;

 lazy_static! {
@@ -22,6 +21,7 @@ pub struct AuthState {
 }

 /// Represents the state of the Login form UI
+#[derive(Clone)]
 pub struct LoginState {
    pub username: String,
    pub password: String,
@@ -60,8 +60,10 @@ pub struct RegisterState {
    pub current_field: usize,
    pub current_cursor_pos: usize,
    pub has_unsaved_changes: bool,
-    pub autocomplete: AutocompleteState<String>,
    pub app_mode: AppMode,
+    // Keep role suggestions for later integration
+    pub role_suggestions: Vec<String>,
+    pub role_suggestions_active: bool,
 }

 impl Default for RegisterState {
@@ -76,8 +78,9 @@ impl Default for RegisterState {
            current_field: 0,
            current_cursor_pos: 0,
            has_unsaved_changes: false,
-            autocomplete: AutocompleteState::new(),
            app_mode: AppMode::Edit,
+            role_suggestions: AVAILABLE_ROLES.clone(),
+            role_suggestions_active: false,
        }
    }
 }
@@ -95,51 +98,27 @@ impl LoginState {
            ..Default::default()
        }
    }
-}

-impl RegisterState {
-    pub fn new() -> Self {
-        let mut state = Self {
-            autocomplete: AutocompleteState::new(),
-            app_mode: AppMode::Edit,
-            ..Default::default()
-        };
-        
-        // Initialize autocomplete with role suggestions
-        let suggestions: Vec<SuggestionItem<String>> = AVAILABLE_ROLES
-            .iter()
-            .map(|role| SuggestionItem::simple(role.clone(), role.clone()))
-            .collect();
-        
-        // 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 {
+    // Legacy method compatibility
+    pub fn current_field(&self) -> usize {
        self.current_field
    }

-    fn current_cursor_pos(&self) -> usize {
+    pub fn current_cursor_pos(&self) -> usize {
        self.current_cursor_pos
    }

-    fn set_current_field(&mut self, index: usize) {
+    pub fn set_current_field(&mut self, index: usize) {
        if index < 2 {
            self.current_field = index;
        }
    }

-    fn set_current_cursor_pos(&mut self, pos: usize) {
+    pub fn set_current_cursor_pos(&mut self, pos: usize) {
        self.current_cursor_pos = pos;
    }

-    fn get_current_input(&self) -> &str {
+    pub fn get_current_input(&self) -> &str {
        match self.current_field {
            0 => &self.username,
            1 => &self.password,
@@ -147,7 +126,7 @@ impl CanvasState for LoginState {
        }
    }

-    fn get_current_input_mut(&mut self) -> &mut String {
+    pub fn get_current_input_mut(&mut self) -> &mut String {
        match self.current_field {
            0 => &mut self.username,
            1 => &mut self.password,
@@ -155,68 +134,57 @@ impl CanvasState for LoginState {
        }
    }

-    fn inputs(&self) -> Vec<&String> {
-        vec![&self.username, &self.password]
+    pub fn current_mode(&self) -> AppMode {
+        self.app_mode
    }

-    fn fields(&self) -> Vec<&str> {
-        vec!["Username/Email", "Password"]
-    }
-
-    fn has_unsaved_changes(&self) -> bool {
+    // Add missing methods that used to come from CanvasState trait
+    pub fn has_unsaved_changes(&self) -> bool {
        self.has_unsaved_changes
    }

-    fn set_has_unsaved_changes(&mut self, changed: bool) {
+    pub 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,
-        }
-    }
-
-    fn current_mode(&self) -> AppMode {
-        self.app_mode
-    }
 }

-// Implement external library's CanvasState for RegisterState
-impl CanvasState for RegisterState {
-    fn current_field(&self) -> usize {
+impl RegisterState {
+    pub fn new() -> Self {
+        Self {
+            app_mode: AppMode::Edit,
+            role_suggestions: AVAILABLE_ROLES.clone(),
+            role_suggestions_active: false,
+            ..Default::default()
+        }
+    }
+
+    // Legacy method compatibility
+    pub fn current_field(&self) -> usize {
        self.current_field
    }

-    fn current_cursor_pos(&self) -> usize {
+    pub fn current_cursor_pos(&self) -> usize {
        self.current_cursor_pos
    }

-    fn set_current_field(&mut self, index: usize) {
+    pub 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();
+
+            // Auto-activate role suggestions when moving to role field (index 4)
+            if index == 4 {
+                self.activate_role_suggestions();
+            } else {
+                self.deactivate_role_suggestions();
            }
        }
    }

-    fn set_current_cursor_pos(&mut self, pos: usize) {
+    pub fn set_current_cursor_pos(&mut self, pos: usize) {
        self.current_cursor_pos = pos;
    }

-    fn get_current_input(&self) -> &str {
+    pub fn get_current_input(&self) -> &str {
        match self.current_field {
            0 => &self.username,
            1 => &self.email,
@@ -227,7 +195,7 @@ impl CanvasState for RegisterState {
        }
    }

-    fn get_current_input_mut(&mut self) -> &mut String {
+    pub fn get_current_input_mut(&mut self) -> &mut String {
        match self.current_field {
            0 => &mut self.username,
            1 => &mut self.email,
@@ -238,123 +206,121 @@ impl CanvasState for RegisterState {
        }
    }

-    fn inputs(&self) -> Vec<&String> {
-        vec![
-            &self.username,
-            &self.email,
-            &self.password,
-            &self.password_confirmation,
-            &self.role,
-        ]
+    pub fn current_mode(&self) -> AppMode {
+        self.app_mode
    }

-    fn fields(&self) -> Vec<&str> {
-        vec![
-            "Username",
-            "Email (Optional)",
-            "Password (Optional)",
-            "Confirm Password",
-            "Role (Optional)"
-        ]
+    // Role suggestions management
+    pub fn activate_role_suggestions(&mut self) {
+        self.role_suggestions_active = true;
+        // Filter suggestions based on current input
+        let current_input = self.role.to_lowercase();
+        self.role_suggestions = AVAILABLE_ROLES
+            .iter()
+            .filter(|role| role.to_lowercase().contains(&current_input))
+            .cloned()
+            .collect();
    }

-    fn has_unsaved_changes(&self) -> bool {
+    pub fn deactivate_role_suggestions(&mut self) {
+        self.role_suggestions_active = false;
+    }
+
+    pub fn is_role_suggestions_active(&self) -> bool {
+        self.role_suggestions_active
+    }
+
+    pub fn get_role_suggestions(&self) -> &[String] {
+        &self.role_suggestions
+    }
+
+    // Add missing methods that used to come from CanvasState trait
+    pub fn has_unsaved_changes(&self) -> bool {
        self.has_unsaved_changes
    }

-    fn set_has_unsaved_changes(&mut self, changed: bool) {
+    pub 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() {
-                    Some(format!("Submitting registration for: {}", self.username))
-                } else {
-                    Some("Username is required".to_string())
-                }
-            }
-            _ => None,
+// Step 2: Implement DataProvider for LoginState
+impl DataProvider for LoginState {
+    fn field_count(&self) -> usize {
+        2
+    }
+
+    fn field_name(&self, index: usize) -> &str {
+        match index {
+            0 => "Username/Email",
+            1 => "Password",
+            _ => "",
        }
    }

-    fn current_mode(&self) -> AppMode {
-        self.app_mode
+    fn field_value(&self, index: usize) -> &str {
+        match index {
+            0 => &self.username,
+            1 => &self.password,
+            _ => "",
+        }
+    }
+
+    fn set_field_value(&mut self, index: usize, value: String) {
+        match index {
+            0 => self.username = value,
+            1 => self.password = value,
+            _ => {}
+        }
+        self.has_unsaved_changes = true;
+    }
+
+    fn supports_suggestions(&self, _field_index: usize) -> bool {
+        false // Login form doesn't support suggestions
    }
 }

-// 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
+// Step 3: Implement DataProvider for RegisterState
+impl DataProvider for RegisterState {
+    fn field_count(&self) -> usize {
+        5
    }

-    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 field_name(&self, index: usize) -> &str {
+        match index {
+            0 => "Username",
+            1 => "Email (Optional)",
+            2 => "Password (Optional)",
+            3 => "Confirm Password",
+            4 => "Role (Optional)",
+            _ => "",
        }
    }

-    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 field_value(&self, index: usize) -> &str {
+        match index {
+            0 => &self.username,
+            1 => &self.email,
+            2 => &self.password,
+            3 => &self.password_confirmation,
+            4 => &self.role,
+            _ => "",
        }
    }

-    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_field_value(&mut self, index: usize, value: String) {
+        match index {
+            0 => self.username = value,
+            1 => self.email = value,
+            2 => self.password = value,
+            3 => self.password_confirmation = value,
+            4 => self.role = value,
+            _ => {}
        }
+        self.has_unsaved_changes = true;
    }

-    fn set_autocomplete_loading(&mut self, loading: bool) {
-        if let Some(state) = self.autocomplete_state_mut() {
-            state.is_loading = loading;
-        }
+    fn supports_suggestions(&self, field_index: usize) -> bool {
+        field_index == 4 // only Role field supports suggestions
    }
 }
--- a/client/src/state/pages/form.rs
+++ b/client/src/state/pages/form.rs
@@ -1,7 +1,8 @@
 // src/state/pages/form.rs

 use crate::config::colors::themes::Theme;
-use canvas::canvas::{CanvasState, CanvasAction, ActionContext, HighlightState, AppMode};
+use canvas::{DataProvider, AppMode, EditorState, FormEditor};
+use canvas::canvas::HighlightState;
 use common::proto::komp_ac::search::search_response::Hit;
 use ratatui::layout::Rect;
 use ratatui::Frame;
@@ -122,26 +123,19 @@ impl FormState {
        area: Rect,
        theme: &Theme,
        is_edit_mode: bool,
-        highlight_state: &HighlightState, // Now using canvas::HighlightState
+        highlight_state: &HighlightState,
    ) {
-        let fields_str_slice: Vec<&str> =
-            self.fields().iter().map(|s| *s).collect();
-        let values_str_slice: Vec<&String> = self.values.iter().collect();
-
-        crate::components::form::form::render_form(
-            f,
-            area,
-            self,
-            &fields_str_slice,
-            &self.current_field,
-            &values_str_slice,
-            &self.table_name,
-            theme,
-            is_edit_mode,
-            highlight_state,
-            self.total_count,
-            self.current_position,
-        );
+        // Wrap in FormEditor for new API
+        let mut editor = FormEditor::new(self.clone());
+        
+        // Use new canvas rendering
+        canvas::render_canvas_default(f, area, &editor);
+        
+        // If autocomplete is active, render suggestions
+        if self.autocomplete_active && !self.autocomplete_suggestions.is_empty() {
+            // Note: This will need to be updated when suggestions are integrated
+            // canvas::render_suggestions_dropdown(f, area, input_rect, &canvas::DefaultCanvasTheme, &editor);
+        }
    }

    pub fn reset_to_empty(&mut self) {
@@ -242,97 +236,84 @@ impl FormState {
    pub fn set_readonly_mode(&mut self) {
        self.app_mode = AppMode::ReadOnly;
    }
-}

-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> {
+    // Legacy method compatibility
+    pub fn fields(&self) -> Vec<&str> {
        self.fields
            .iter()
            .map(|f| f.display_name.as_str())
            .collect()
    }

-    fn set_current_field(&mut self, index: usize) {
+    pub 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();
+        }
+        self.values
+            .get(index)
+            .map(|s| s.as_str())
+            .unwrap_or("")
+    }
+
+    pub fn has_display_override(&self, index: usize) -> bool {
+        self.link_display_map.contains_key(&index)
+    }
+
+    pub fn current_mode(&self) -> AppMode {
+        self.app_mode
+    }
+
+    // Add missing methods that used to come from CanvasState trait
+    pub fn has_unsaved_changes(&self) -> bool {
+        self.has_unsaved_changes
+    }
+
+    pub fn set_has_unsaved_changes(&mut self, changed: bool) {
+        self.has_unsaved_changes = changed;
+    }
+
+    pub fn current_field(&self) -> usize {
+        self.current_field
+    }
+
+    pub 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) {
+    pub fn current_cursor_pos(&self) -> usize {
+        self.current_cursor_pos
+    }
+
+    pub 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;
+// Step 2: Implement DataProvider for FormState
+impl DataProvider for FormState {
+    fn field_count(&self) -> usize {
+        self.fields.len()
    }

-    // --- 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
+    fn field_name(&self, index: usize) -> &str {
+        &self.fields[index].display_name
+    }
+
+    fn field_value(&self, index: usize) -> &str {
+        &self.values[index]
+    }
+
+    fn set_field_value(&mut self, index: usize, value: String) {
+        if let Some(v) = self.values.get_mut(index) {
+            *v = value;
+            self.has_unsaved_changes = true;
        }
    }

-    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();
-        }
-        self.inputs()
-            .get(index)
-            .map(|s| s.as_str())
-            .unwrap_or("")
-    }
-
-    fn has_display_override(&self, index: usize) -> bool {
-        self.link_display_map.contains_key(&index)
-    }
-
-    fn current_mode(&self) -> AppMode {
-        self.app_mode
+    fn supports_suggestions(&self, field_index: usize) -> bool {
+        self.fields.get(field_index).map(|f| f.is_link).unwrap_or(false)
    }
 }
--- a/client/src/tui/functions/common/login.rs
+++ b/client/src/tui/functions/common/login.rs
@@ -8,7 +8,6 @@ use crate::state::app::buffer::{AppView, BufferState};
 use crate::config::storage::storage::{StoredAuthData, save_auth_data};
 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;
--- a/client/src/tui/functions/common/register.rs
+++ b/client/src/tui/functions/common/register.rs
@@ -8,7 +8,6 @@ use crate::state::{
 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;
--- a/client/src/tui/functions/form.rs
+++ b/client/src/tui/functions/form.rs
@@ -1,7 +1,6 @@
 // src/tui/functions/form.rs
 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(
--- a/client/src/ui/handlers/render.rs
+++ b/client/src/ui/handlers/render.rs
@@ -16,7 +16,6 @@ use crate::components::{
 };
 use crate::config::colors::themes::Theme;
 use crate::modes::general::command_navigation::NavigationState;
-use canvas::canvas::CanvasState;
 use crate::state::app::buffer::BufferState;
 use crate::state::app::highlight::HighlightState as LocalHighlightState;
 use canvas::canvas::HighlightState as CanvasHighlightState;
@@ -137,7 +136,6 @@ pub fn render_ui(
            register_state,
            app_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(
@@ -147,7 +145,6 @@ pub fn render_ui(
            app_state,
            &mut admin_state.add_table_state,
            is_event_handler_edit_mode,
-            highlight_state, // Uses local version
        );
    } else if app_state.ui.show_add_logic {
        render_add_logic(
@@ -157,7 +154,6 @@ pub fn render_ui(
            app_state,
            &mut admin_state.add_logic_state,
            is_event_handler_edit_mode,
-            highlight_state, // Uses local version
        );
    } else if app_state.ui.show_login {
        render_login(
@@ -167,7 +163,6 @@ pub fn render_ui(
            login_state,
            app_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(
--- a/client/src/ui/handlers/ui.rs
+++ b/client/src/ui/handlers/ui.rs
@@ -8,7 +8,6 @@ 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 canvas::canvas::CanvasState; // Only external library import
 use crate::state::pages::form::{FormState, FieldDefinition};
 use crate::state::pages::auth::AuthState;
 use crate::state::pages::auth::LoginState;
Author	SHA1	Message	Date
filipriec	aea2c39215	reverted core actions in canvas	2025-08-20 16:33:19 +02:00
filipriec	4c2464ab30	compiled	2025-08-20 16:28:31 +02:00
filipriec	26053a5fd8	fixes 9	2025-08-20 11:36:56 +02:00
filipriec	589220a2ba	fixing 8	2025-08-20 11:33:34 +02:00
filipriec	2cda54633f	not working, needs more fixes	2025-08-19 22:14:43 +02:00
filipriec	3eea6b9e88	fixes 7	2025-08-19 22:02:00 +02:00
filipriec	db9bb7e168	fixes 5	2025-08-19 20:05:18 +02:00
filipriec	3ccd094a22	fixing problems more6	2025-08-19 19:21:02 +02:00
filipriec	032f21edaa	more canvas implementation4	2025-08-19 14:43:10 +02:00
Priec	42eb087363	canvas fixes3	2025-08-19 13:25:10 +02:00
Priec	d0ff449e3b	going into a new canvas library structure	2025-08-19 13:24:48 +02:00
Priec	858f5137d8	migrating to the new canvas library	2025-08-19 10:56:54 +02:00
Priec	80d5dd0761	forgotten cargo	2025-08-19 01:15:16 +02:00
Priec	49b31c6e92	readme updated	2025-08-19 01:12:59 +02:00
Priec	8ed2fbbe34	more warnings cleared	2025-08-19 01:04:40 +02:00
Priec	5ae8d13719	clippy improvements	2025-08-19 01:03:28 +02:00
Priec	7bf2b81229	syntax highlighting example is now fine	2025-08-19 00:58:21 +02:00
Priec	0215f2824a	working syntax highlighting	2025-08-19 00:51:57 +02:00
Priec	3fdb7e4e37	syntec, but not compiling	2025-08-19 00:46:11 +02:00
Priec	a3f578ebac	using ropey for textarea	2025-08-19 00:03:04 +02:00
Priec	f0bc7abaad	closer to prod more than ever	2025-08-18 22:52:08 +02:00
Priec	f9d9231d50	more prod ready comments	2025-08-18 21:10:06 +02:00
Priec	465db82bd9	prod comments in the codebase	2025-08-18 21:00:14 +02:00
Priec	885a48bdd8	more clippy fixes	2025-08-18 19:49:08 +02:00
Priec	c915b3287b	cargo clippy ran	2025-08-18 19:42:31 +02:00
Priec	7b2f021509	bugs fixed	2025-08-18 19:23:10 +02:00
Priec	5f1bdfefca	fixing warnings	2025-08-18 18:01:22 +02:00
Priec	3273a43e20	restored grayed out suggestions	2025-08-18 17:39:25 +02:00
Priec	61e439a1d4	fixing warnings and depracated legacy things	2025-08-18 17:19:21 +02:00
Priec	03808a8b3b	now finally end line working as intended	2025-08-18 16:59:38 +02:00
Priec	57aa0ed8e3	trying to fix end line bugs	2025-08-18 16:45:49 +02:00
Priec	5efee3f044	line wrapping is now working properly well	2025-08-18 09:44:53 +02:00
Priec	6588f310f2	end of the line fixed	2025-08-18 00:22:09 +02:00
Priec	25b54afff4	improved textarea normal editor mode, not just vim	2025-08-17 18:35:51 +02:00
Priec	b9a7f9a03f	textarea	2025-08-17 17:52:40 +02:00
Priec	e36324af6f	working textarea with example, time to prepare it for the future implementations	2025-08-17 12:17:46 +02:00
Priec	60cb45dcca	first textarea implementation	2025-08-17 11:01:38 +02:00
Priec	215be3cf09	renamed capital lettered functions and fixed examples	2025-08-16 23:10:50 +02:00
Priec	b2aa966588	suggestions behind features flag only	2025-08-15 00:06:54 +02:00
Priec	67512ac151	src/editor.rs doesnt exist anymore	2025-08-15 00:06:19 +02:00
Priec	3f5dedbd6e	a bit of a cleanup, updated functionality of ge now working porperly well	2025-08-14 14:23:08 +02:00
Priec	ce07105eea	more vim functionality added	2025-08-14 00:08:18 +02:00
Priec	587470c48b	vim like behaviour is being built	2025-08-13 22:16:28 +02:00
Priec	3227d341ed	cleared codebase	2025-08-13 01:22:50 +02:00
Priec	2b16a80ef8	removed silenced variables	2025-08-12 09:53:24 +02:00
Priec	8b742bbe09	comments for reimplementation of autotrigger	2025-08-11 23:08:57 +02:00
Priec	189d3d2fc5	suggestions2 only on tab trigger and not automatic	2025-08-11 23:05:56 +02:00
Priec	082093ea17	compiled examples	2025-08-11 22:50:28 +02:00
Priec	280f314100	fixing examples	2025-08-11 12:41:42 +02:00
Priec	163a6262c8	proper example is being set	2025-08-11 12:03:56 +02:00
Priec	e8a564aed3	sugggestions are agnostic	2025-08-11 00:01:53 +02:00
filipriec	53464dfcbf	switch handled by the library from now on	2025-08-10 22:07:25 +02:00
filipriec	b364a6606d	fixing more code refactorization	2025-08-10 16:10:45 +02:00
Priec	f09e476bb6	working, restored	2025-08-10 12:20:43 +02:00
Priec	e2c9cc4347	WIP: staged changes before destructive reset	2025-08-10 11:03:31 +02:00
Priec	06106dc31b	improvements done by gpt5	2025-08-08 23:10:23 +02:00
Priec	8e3c85991c	fixed example, now working everything properly well	2025-08-07 23:30:31 +02:00
Priec	d3e5418221	fixed example of suggestions2	2025-08-07 20:05:39 +02:00
Priec	0d0e54032c	better suggestions2 example, not there yet	2025-08-07 18:51:45 +02:00
Priec	a8de16f66d	suggestions is getting more and more strong than ever before	2025-08-07 16:00:46 +02:00
Priec	5b2e0e976f	fixing examples	2025-08-07 13:51:59 +02:00
Priec	d601134535	computed fields are working perfectly well now	2025-08-07 12:38:09 +02:00
Priec	dff320d534	autocomplete to suggestions	2025-08-07 12:08:02 +02:00