@trustquery/browser 0.1.0 → 0.2.1

package/README.md

@@ -73,7 +73,19 @@ ui: {
 ```javascript
 events: {
   onWordHover: (matchData) => { /* ... */ },
-  onWordClick: (matchData) => { /* ... */ }
+  onWordClick: (matchData) => { /* ... */ },
+  onValidationChange: (validationState) => {
+    // Fires when validation state changes
+    // validationState: {
+    //   hasBlockingError: boolean,
+    //   errors: Array,    // matches with message-state: 'error'
+    //   warnings: Array,  // matches with message-state: 'warning'
+    //   info: Array       // matches with message-state: 'info'
+    // }
+
+    // Example: Disable submit button on blocking errors
+    submitButton.disabled = validationState.hasBlockingError;
+  }
 }
 ```
 

package/dist/trustquery.js

@@ -12,10 +12,13 @@ class OverlayRenderer {
     this.options = {
       theme: options.theme || 'light',
       commandHandlers: options.commandHandlers || null,
+      debug: options.debug || false,
       ...options
     };
 
-    console.log('[OverlayRenderer] Initialized');
+    if (this.options.debug) {
+      console.log('[OverlayRenderer] Initialized');
+    }
   }
 
   /**
@@ -35,7 +38,9 @@ class OverlayRenderer {
     // Update overlay
     this.overlay.innerHTML = linesHTML;
 
-    console.log('[OverlayRenderer] Rendered', lines.length, 'lines with', matches.length, 'matches');
+    if (this.options.debug) {
+      console.log('[OverlayRenderer] Rendered', lines.length, 'lines with', matches.length, 'matches');
+    }
   }
 
   /**
@@ -345,8 +350,6 @@ class CommandScanner {
     // Sort by length (longest first) to match longer patterns first
     commands.sort((a, b) => b.match.length - a.match.length);
 
-    console.log('[CommandScanner] Parsed commands:', commands.length, commands);
-
     return commands;
   }
 
@@ -369,7 +372,11 @@ class CommandScanner {
       matches.push(...lineMatches);
     });
 
-    console.log('[CommandScanner] Found', matches.length, 'matches');
+    // Only log when matches are found
+    if (matches.length > 0) {
+      console.log(`[CommandScanner] Found ${matches.length} matches`);
+    }
+
     return matches;
   }
 
@@ -769,7 +776,9 @@ class DropdownManager {
     this.selectedDropdownIndex = 0;
     this.keyboardHandler = null;
 
-    console.log('[DropdownManager] Initialized with offset:', this.options.dropdownOffset);
+    if (this.options.debug) {
+      console.log('[DropdownManager] Initialized with offset:', this.options.dropdownOffset);
+    }
   }
 
   /**
@@ -850,7 +859,9 @@ class DropdownManager {
       document.addEventListener('click', this.closeDropdownHandler);
     }, 0);
 
-    console.log('[DropdownManager] Dropdown shown with', options.length, 'options');
+    if (this.options.debug) {
+      console.log('[DropdownManager] Dropdown shown with', options.length, 'options');
+    }
   }
 
   /**
@@ -1284,7 +1295,9 @@ class DropdownManager {
    * @param {Object} matchData - Match data
    */
   handleDropdownSelect(option, matchData) {
-    console.log('[DropdownManager] Dropdown option selected:', option, 'for:', matchData.text);
+    if (this.options.debug) {
+      console.log('[DropdownManager] Dropdown option selected:', option, 'for:', matchData.text);
+    }
 
     // Check if option has on-select.display
     if (option['on-select'] && option['on-select'].display && this.options.textarea) {
@@ -1310,7 +1323,9 @@ class DropdownManager {
         const inputEvent = new Event('input', { bubbles: true });
         textarea.dispatchEvent(inputEvent);
 
-        console.log('[DropdownManager] Appended to', matchData.text, '→', newText);
+        if (this.options.debug) {
+          console.log('[DropdownManager] Appended to', matchData.text, '→', newText);
+        }
       }
     }
 
@@ -1335,7 +1350,9 @@ class DropdownManager {
    */
   destroy() {
     this.cleanup();
-    console.log('[DropdownManager] Destroyed');
+    if (this.options.debug) {
+      console.log('[DropdownManager] Destroyed');
+    }
   }
 }
 
@@ -1367,17 +1384,21 @@ class InteractionHandler {
     this.bubbleManager = new BubbleManager({
       bubbleDelay: this.options.bubbleDelay,
       styleManager: this.options.styleManager,
-      commandHandlers: this.options.commandHandlers
+      commandHandlers: this.options.commandHandlers,
+      debug: this.options.debug
     });
 
     this.dropdownManager = new DropdownManager({
       styleManager: this.options.styleManager,
       textarea: this.options.textarea,
       onWordClick: this.options.onWordClick,
-      dropdownOffset: this.options.dropdownOffset
+      dropdownOffset: this.options.dropdownOffset,
+      debug: this.options.debug
     });
 
-    console.log('[InteractionHandler] Initialized');
+    if (this.options.debug) {
+      console.log('[InteractionHandler] Initialized');
+    }
   }
 
   /**
@@ -1415,7 +1436,9 @@ class InteractionHandler {
       }
     });
 
-    console.log('[InteractionHandler] Updated with', matches.length, 'interactive elements');
+    if (this.options.debug) {
+      console.log('[InteractionHandler] Updated with', matches.length, 'interactive elements');
+    }
   }
 
   /**
@@ -2503,6 +2526,112 @@ class AutoGrow {
   }
 }
 
+// ValidationStateManager - Tracks validation state and triggers callbacks
+
+class ValidationStateManager {
+  /**
+   * Create validation state manager
+   * @param {Object} options - Configuration
+   */
+  constructor(options = {}) {
+    this.options = {
+      onValidationChange: options.onValidationChange || null,
+      ...options
+    };
+
+    this.state = {
+      hasBlockingError: false,
+      errors: [],      // matches with message-state: 'error'
+      warnings: [],    // matches with message-state: 'warning'
+      info: []         // matches with message-state: 'info'
+    };
+
+    console.log('[ValidationStateManager] Initialized');
+  }
+
+  /**
+   * Update validation state based on current matches
+   * @param {Array} matches - Current matches from scanner
+   */
+  update(matches) {
+    // Reset state
+    const newState = {
+      hasBlockingError: false,
+      errors: [],
+      warnings: [],
+      info: []
+    };
+
+    // Categorize current matches
+    matches.forEach(match => {
+      const messageState = match.intent?.handler?.['message-state'];
+      const blockSubmit = match.intent?.handler?.['block-submit'] === true;
+
+      if (blockSubmit) {
+        newState.hasBlockingError = true;
+      }
+
+      switch (messageState) {
+        case 'error':
+          newState.errors.push(match);
+          break;
+        case 'warning':
+          newState.warnings.push(match);
+          break;
+        case 'info':
+          newState.info.push(match);
+          break;
+      }
+    });
+
+    // Check if state changed
+    const stateChanged =
+      this.state.hasBlockingError !== newState.hasBlockingError ||
+      this.state.errors.length !== newState.errors.length ||
+      this.state.warnings.length !== newState.warnings.length ||
+      this.state.info.length !== newState.info.length;
+
+    if (stateChanged) {
+      this.state = newState;
+
+      // Trigger callback
+      if (this.options.onValidationChange) {
+        this.options.onValidationChange(this.state);
+      }
+
+      console.log('[ValidationStateManager] State changed:', {
+        hasBlockingError: newState.hasBlockingError,
+        errors: newState.errors.length,
+        warnings: newState.warnings.length,
+        info: newState.info.length
+      });
+    }
+  }
+
+  /**
+   * Get current validation state
+   * @returns {Object} Current validation state
+   */
+  getState() {
+    return { ...this.state };
+  }
+
+  /**
+   * Reset validation state to empty
+   */
+  reset() {
+    this.update([]);
+  }
+
+  /**
+   * Check if there are blocking errors
+   * @returns {boolean} True if there are blocking errors
+   */
+  hasBlockingErrors() {
+    return this.state.hasBlockingError;
+  }
+}
+
 // TrustQuery - Lightweight library to make textareas interactive
 // Turns matching words into interactive elements with hover bubbles and click actions
 
@@ -2607,6 +2736,7 @@ class TrustQuery {
       // Events (callbacks)
       onWordClick: events.onWordClick || options.onWordClick || null,
       onWordHover: events.onWordHover || options.onWordHover || null,
+      onValidationChange: events.onValidationChange || options.onValidationChange || null,
 
       // Theme/style options (passed to StyleManager)
       backgroundColor: ui.backgroundColor || options.backgroundColor,
@@ -2643,7 +2773,8 @@ class TrustQuery {
     // Initialize renderer
     this.renderer = new OverlayRenderer(this.overlay, {
       theme: this.options.theme,
-      commandHandlers: this.commandHandlers // Pass handlers for styling
+      commandHandlers: this.commandHandlers, // Pass handlers for styling
+      debug: this.options.debug // Pass debug flag
     });
 
     // Initialize scanner (will be configured when command map loads)
@@ -2657,7 +2788,13 @@ class TrustQuery {
       onWordHover: this.options.onWordHover,
       styleManager: this.styleManager, // Pass style manager for bubbles/dropdowns
       commandHandlers: this.commandHandlers, // Pass handlers for bubble content
-      textarea: this.textarea // Pass textarea for on-select display updates
+      textarea: this.textarea, // Pass textarea for on-select display updates
+      debug: this.options.debug // Pass debug flag
+    });
+
+    // Initialize validation state manager
+    this.validationStateManager = new ValidationStateManager({
+      onValidationChange: this.options.onValidationChange
     });
 
     // Initialize features
@@ -2856,6 +2993,11 @@ class TrustQuery {
 
     // Update interaction handler with new elements
     this.interactionHandler.update();
+
+    // Update validation state
+    if (this.validationStateManager) {
+      this.validationStateManager.update(matches);
+    }
   }
 
   /**