@trustquery/browser 0.1.0

package/dist/trustquery.js

@@ -0,0 +1,2904 @@
+// OverlayRenderer - Renders text with styled matches in a line-based overlay
+// Much simpler than grid approach - each line is a div, matches are spans
+
+class OverlayRenderer {
+  /**
+   * Create a renderer
+   * @param {HTMLElement} overlay - Overlay container element
+   * @param {Object} options - Rendering options
+   */
+  constructor(overlay, options = {}) {
+    this.overlay = overlay;
+    this.options = {
+      theme: options.theme || 'light',
+      commandHandlers: options.commandHandlers || null,
+      ...options
+    };
+
+    console.log('[OverlayRenderer] Initialized');
+  }
+
+  /**
+   * Render text with matches
+   * @param {string} text - Text content
+   * @param {Array} matches - Array of match objects from CommandScanner
+   */
+  render(text, matches = []) {
+    // Split text into lines
+    const lines = text.split('\n');
+
+    // Build HTML for each line
+    const linesHTML = lines.map((line, lineIndex) => {
+      return this.renderLine(line, lineIndex, matches);
+    }).join('');
+
+    // Update overlay
+    this.overlay.innerHTML = linesHTML;
+
+    console.log('[OverlayRenderer] Rendered', lines.length, 'lines with', matches.length, 'matches');
+  }
+
+  /**
+   * Render a single line with matches
+   * @param {string} line - Line text
+   * @param {number} lineIndex - Line number (0-indexed)
+   * @param {Array} matches - All matches from scanner
+   * @returns {string} HTML for line
+   */
+  renderLine(line, lineIndex, matches) {
+    // Find matches on this line
+    const lineMatches = this.getMatchesForLine(line, lineIndex, matches);
+
+    if (lineMatches.length === 0) {
+      // No matches - render plain line
+      return `<div class="tq-line">${this.escapeHtml(line) || '&nbsp;'}</div>`;
+    }
+
+    // Sort matches by start position
+    lineMatches.sort((a, b) => a.start - b.start);
+
+    // Build HTML with matches as spans
+    let html = '<div class="tq-line">';
+    let lastIndex = 0;
+
+    for (const match of lineMatches) {
+      // Add text before match
+      if (match.start > lastIndex) {
+        html += this.escapeHtml(line.substring(lastIndex, match.start));
+      }
+
+      // Add match as styled span
+      const matchText = line.substring(match.start, match.end);
+      const classes = this.getMatchClasses(match);
+      const dataAttrs = this.getMatchDataAttributes(match);
+      const inlineStyles = this.getMatchInlineStyles(match);
+
+      html += `<span class="${classes}" ${dataAttrs} style="${inlineStyles}">${this.escapeHtml(matchText)}</span>`;
+
+      lastIndex = match.end;
+    }
+
+    // Add remaining text after last match
+    if (lastIndex < line.length) {
+      html += this.escapeHtml(line.substring(lastIndex));
+    }
+
+    // Handle empty lines
+    if (line.length === 0) {
+      html += '&nbsp;';
+    }
+
+    html += '</div>';
+
+    return html;
+  }
+
+  /**
+   * Get matches that apply to a specific line
+   * @param {string} line - Line text
+   * @param {number} lineIndex - Line number
+   * @param {Array} matches - All matches
+   * @returns {Array} Matches for this line with adjusted positions
+   */
+  getMatchesForLine(line, lineIndex, matches) {
+    const lineMatches = [];
+
+    // Calculate absolute position of this line in the full text
+    // (we'll need to know line starts to filter matches)
+    // For now, matches already have line info from scanner
+
+    for (const match of matches) {
+      if (match.line === lineIndex) {
+        lineMatches.push({
+          ...match,
+          start: match.col, // Column position on this line
+          end: match.col + match.length
+        });
+      }
+    }
+
+    return lineMatches;
+  }
+
+  /**
+   * Get CSS classes for a match
+   * @param {Object} match - Match object
+   * @returns {string} Space-separated class names
+   */
+  getMatchClasses(match) {
+    const classes = ['tq-match'];
+
+    // Add command type as class
+    if (match.command && match.command.type) {
+      classes.push(`tq-match-${match.command.type}`);
+    }
+
+    // Add behavior as class (bubble, dropdown, etc.)
+    if (match.command && match.command.behavior) {
+      classes.push(`tq-behavior-${match.command.behavior}`);
+    }
+
+    return classes.join(' ');
+  }
+
+  /**
+   * Get data attributes for a match
+   * @param {Object} match - Match object
+   * @returns {string} Data attributes string
+   */
+  getMatchDataAttributes(match) {
+    const attrs = [];
+
+    // Store match text
+    attrs.push(`data-match-text="${this.escapeAttr(match.text)}"`);
+
+    // Store command info
+    if (match.command) {
+      attrs.push(`data-command-id="${this.escapeAttr(match.command.id || '')}"`);
+      attrs.push(`data-command-type="${this.escapeAttr(match.command.commandType || '')}"`);
+      attrs.push(`data-command-path="${this.escapeAttr(match.command.commandPath || '')}"`);
+      attrs.push(`data-intent-path="${this.escapeAttr(match.command.intentPath || '')}"`);
+
+      // Store intent info as JSON for InteractionHandler
+      if (match.command.intent) {
+        attrs.push(`data-intent='${this.escapeAttr(JSON.stringify(match.command.intent))}'`);
+      }
+
+      // Determine behavior based on handler properties
+      if (match.command.intent && match.command.intent.handler) {
+        const handler = match.command.intent.handler;
+        if (handler.options && Array.isArray(handler.options) && handler.options.length > 0) {
+          attrs.push(`data-behavior="dropdown"`);
+        } else if (handler.message || handler['message-content'] || match.command.intent.description) {
+          attrs.push(`data-behavior="bubble"`);
+        }
+      }
+    }
+
+    // Store position info
+    attrs.push(`data-line="${match.line}"`);
+    attrs.push(`data-col="${match.col}"`);
+
+    return attrs.join(' ');
+  }
+
+  /**
+   * Get inline styles for a match based on command type or message-state
+   * @param {Object} match - Match object
+   * @returns {string} Inline style string
+   */
+  getMatchInlineStyles(match) {
+    if (!this.options.commandHandlers || !match.command) {
+      return 'pointer-events: auto; cursor: pointer;';
+    }
+
+    const commandType = match.command.commandType;
+
+    // Create matchData with intent info for message-state lookup
+    const matchData = {
+      intent: match.command.intent,
+      commandType: commandType
+    };
+
+    const styles = this.options.commandHandlers.getStyles(commandType, matchData);
+
+    // Convert style object to CSS string
+    const styleStr = Object.entries(styles)
+      .map(([key, value]) => {
+        // Convert camelCase to kebab-case
+        const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        return `${cssKey}: ${value}`;
+      })
+      .join('; ');
+
+    return styleStr + '; pointer-events: auto;';
+  }
+
+  /**
+   * Escape HTML to prevent XSS
+   * @param {string} text - Text to escape
+   * @returns {string} Escaped text
+   */
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  /**
+   * Escape attribute value
+   * @param {string} text - Text to escape
+   * @returns {string} Escaped text
+   */
+  escapeAttr(text) {
+    return String(text)
+      .replace(/&/g, '&amp;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+}
+
+// CommandScanner - Scans text for word matches based on command map
+// Uses simple string matching (not regex) for simplicity and performance
+
+class CommandScanner {
+  constructor() {
+    this.commandMap = null;
+    this.commands = [];
+    console.log('[CommandScanner] Initialized');
+  }
+
+  /**
+   * Set command map
+   * @param {Object} commandMap - Command map object
+   */
+  setCommandMap(commandMap) {
+    this.commandMap = commandMap;
+    this.commands = this.parseCommandMap(commandMap);
+    console.log('[CommandScanner] Command map set with', this.commands.length, 'commands');
+  }
+
+  /**
+   * Parse simplified TQL triggers format
+   * Format: { "tql-triggers": { "error": [...], "warning": [...], "info": [...] } }
+   * @param {Object} triggerMap - Trigger map from tql-triggers.json
+   * @returns {Array} Array of command objects
+   */
+  parseCommandMap(triggerMap) {
+    const commands = [];
+
+    // Extract tql-triggers
+    const triggers = triggerMap['tql-triggers'] || triggerMap;
+
+    if (!triggers || typeof triggers !== 'object') {
+      console.warn('[CommandScanner] Invalid trigger map structure');
+      return commands;
+    }
+
+    // Iterate through each message state (error, warning, info)
+    Object.keys(triggers).forEach(messageState => {
+      // Skip metadata fields
+      if (messageState.startsWith('$')) {
+        return;
+      }
+
+      const triggerList = triggers[messageState];
+
+      if (!Array.isArray(triggerList)) {
+        return;
+      }
+
+      // Process each trigger in this state
+      triggerList.forEach((trigger, index) => {
+        const handler = trigger.handler || {};
+        const description = trigger.description || handler.message || '';
+        const category = trigger.category || 'general';
+
+        // Create intent object compatible with handlers
+        const intent = {
+          description: description,
+          handler: {
+            ...handler,
+            'message-state': messageState // Add message-state for styling
+          },
+          category: category
+        };
+
+        // Handle regex patterns
+        if (trigger.type === 'regex' && trigger.regex) {
+          trigger.regex.forEach(pattern => {
+            commands.push({
+              id: `${messageState}-${category}-${index}`,
+              match: pattern,
+              matchType: 'regex',
+              messageState: messageState,
+              category: category,
+              intent: intent,
+              handler: intent.handler,
+              caseSensitive: true,
+              wholeWord: false
+            });
+          });
+        }
+
+        // Handle string matches
+        if (trigger.type === 'match' && trigger.match) {
+          trigger.match.forEach(matchStr => {
+            commands.push({
+              id: `${messageState}-${category}-${index}`,
+              match: matchStr,
+              matchType: 'string',
+              messageState: messageState,
+              category: category,
+              intent: intent,
+              handler: intent.handler,
+              caseSensitive: false, // Case insensitive for natural language
+              wholeWord: true // Whole word matching
+            });
+          });
+        }
+      });
+    });
+
+    // 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;
+  }
+
+  /**
+   * Scan text for all matches
+   * @param {string} text - Text to scan
+   * @returns {Array} Array of match objects with position info
+   */
+  scan(text) {
+    if (!this.commands || this.commands.length === 0) {
+      return [];
+    }
+
+    const matches = [];
+    const lines = text.split('\n');
+
+    // Scan each line
+    lines.forEach((line, lineIndex) => {
+      const lineMatches = this.scanLine(line, lineIndex);
+      matches.push(...lineMatches);
+    });
+
+    console.log('[CommandScanner] Found', matches.length, 'matches');
+    return matches;
+  }
+
+  /**
+   * Scan a single line for matches
+   * @param {string} line - Line text
+   * @param {number} lineIndex - Line number (0-indexed)
+   * @returns {Array} Matches on this line
+   */
+  scanLine(line, lineIndex) {
+    const matches = [];
+    const matchedRanges = []; // Track matched positions to avoid overlaps
+
+    for (const command of this.commands) {
+      const commandMatches = this.findMatches(line, command, lineIndex);
+
+      // Filter out overlapping matches
+      for (const match of commandMatches) {
+        if (!this.overlapsExisting(match, matchedRanges)) {
+          matches.push(match);
+          matchedRanges.push({ start: match.col, end: match.col + match.length });
+        }
+      }
+    }
+
+    // Sort matches by column position
+    matches.sort((a, b) => a.col - b.col);
+
+    return matches;
+  }
+
+  /**
+   * Find all matches of a command in a line
+   * @param {string} line - Line text
+   * @param {Object} command - Command to search for
+   * @param {number} lineIndex - Line number
+   * @returns {Array} Matches
+   */
+  findMatches(line, command, lineIndex) {
+    const matches = [];
+
+    // Handle regex patterns
+    if (command.matchType === 'regex') {
+      try {
+        const regex = new RegExp(command.match, 'g');
+        let match;
+
+        while ((match = regex.exec(line)) !== null) {
+          matches.push({
+            text: match[0],
+            line: lineIndex,
+            col: match.index,
+            length: match[0].length,
+            command: command
+          });
+        }
+      } catch (e) {
+        console.warn('[CommandScanner] Invalid regex pattern:', command.match, e);
+      }
+
+      return matches;
+    }
+
+    // Handle string patterns (original logic)
+    const searchText = command.caseSensitive ? line : line.toLowerCase();
+    const pattern = command.caseSensitive ? command.match : command.match.toLowerCase();
+
+    let startIndex = 0;
+
+    while (true) {
+      const index = searchText.indexOf(pattern, startIndex);
+
+      if (index === -1) {
+        break; // No more matches
+      }
+
+      // Check if this is a whole word match (if required)
+      if (command.wholeWord && !this.isWholeWordMatch(line, index, pattern.length)) {
+        startIndex = index + 1;
+        continue;
+      }
+
+      // Create match object
+      matches.push({
+        text: line.substring(index, index + pattern.length),
+        line: lineIndex,
+        col: index,
+        length: pattern.length,
+        command: command
+      });
+
+      startIndex = index + pattern.length;
+    }
+
+    return matches;
+  }
+
+  /**
+   * Check if match is a whole word (not part of a larger word)
+   * @param {string} text - Text to check
+   * @param {number} start - Start index of match
+   * @param {number} length - Length of match
+   * @returns {boolean} True if whole word
+   */
+  isWholeWordMatch(text, start, length) {
+    const end = start + length;
+
+    // Check character before
+    if (start > 0) {
+      const before = text[start - 1];
+      if (this.isWordChar(before)) {
+        return false;
+      }
+    }
+
+    // Check character after - treat "/" as a word boundary (resolved trigger)
+    if (end < text.length) {
+      const after = text[end];
+      if (this.isWordChar(after) || after === '/') {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  /**
+   * Check if character is a word character (alphanumeric or underscore)
+   * @param {string} char - Character to check
+   * @returns {boolean} True if word character
+   */
+  isWordChar(char) {
+    return /[a-zA-Z0-9_]/.test(char);
+  }
+
+  /**
+   * Check if a match overlaps with existing matches
+   * @param {Object} match - New match to check
+   * @param {Array} existingRanges - Array of {start, end} ranges
+   * @returns {boolean} True if overlaps
+   */
+  overlapsExisting(match, existingRanges) {
+    const matchStart = match.col;
+    const matchEnd = match.col + match.length;
+
+    for (const range of existingRanges) {
+      // Check for overlap
+      if (matchStart < range.end && matchEnd > range.start) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+}
+
+// BubbleManager - Handles hover bubble tooltips for matched words
+
+class BubbleManager {
+  /**
+   * Create bubble manager
+   * @param {Object} options - Configuration
+   */
+  constructor(options = {}) {
+    this.options = {
+      bubbleDelay: options.bubbleDelay || 200,
+      styleManager: options.styleManager || null,
+      commandHandlers: options.commandHandlers || null,
+      ...options
+    };
+
+    this.currentBubble = null;
+    this.hoverTimeout = null;
+
+    console.log('[BubbleManager] Initialized');
+  }
+
+  /**
+   * Show bubble for a match element
+   * @param {HTMLElement} matchEl - Match element
+   * @param {Object} matchData - Match data
+   */
+  showBubble(matchEl, matchData) {
+    // Remove any existing bubble
+    this.hideBubble();
+
+    // Get bubble content
+    const content = this.getBubbleContent(matchData);
+
+    if (!content) {
+      return; // No content to show
+    }
+
+    // Create bubble
+    const bubble = document.createElement('div');
+    bubble.className = 'tq-bubble';
+
+    // Add header container based on message-state
+    const messageState = matchData.intent?.handler?.['message-state'] || 'info';
+    this.createBubbleHeader(bubble, messageState);
+
+    // Add content container
+    const contentContainer = document.createElement('div');
+    contentContainer.className = 'tq-bubble-content';
+    contentContainer.innerHTML = content;
+    bubble.appendChild(contentContainer);
+
+    // Apply inline styles via StyleManager
+    if (this.options.styleManager) {
+      this.options.styleManager.applyBubbleStyles(bubble);
+    }
+
+    // Add to document
+    document.body.appendChild(bubble);
+    this.currentBubble = bubble;
+
+    // Position bubble relative to match element
+    this.positionBubble(bubble, matchEl);
+
+    // Auto-hide when mouse leaves bubble
+    bubble.addEventListener('mouseleave', () => {
+      this.hideBubble();
+    });
+
+    console.log('[BubbleManager] Bubble shown for:', matchData.text);
+  }
+
+  /**
+   * Create header container for bubble
+   * @param {HTMLElement} bubble - Bubble element
+   * @param {string} messageState - Message state (error, warning, info)
+   */
+  createBubbleHeader(bubble, messageState) {
+    const headerContainer = document.createElement('div');
+    headerContainer.className = 'bubble-header-container';
+    headerContainer.setAttribute('data-type', messageState);
+
+    // Create image
+    const img = document.createElement('img');
+    img.src = `./assets/trustquery-${messageState}.svg`;
+    img.style.height = '24px';
+    img.style.width = 'auto';
+
+    // Create text span
+    const span = document.createElement('span');
+    const textMap = {
+      'error': 'TrustQuery Stop',
+      'warning': 'TrustQuery Clarify',
+      'info': 'TrustQuery Quick Link'
+    };
+    span.textContent = textMap[messageState] || 'TrustQuery';
+
+    // Append to header
+    headerContainer.appendChild(img);
+    headerContainer.appendChild(span);
+
+    // Apply styles to header via StyleManager
+    if (this.options.styleManager) {
+      this.options.styleManager.applyBubbleHeaderStyles(headerContainer, messageState);
+    }
+
+    bubble.appendChild(headerContainer);
+  }
+
+  /**
+   * Hide current bubble
+   */
+  hideBubble() {
+    if (this.currentBubble) {
+      this.currentBubble.remove();
+      this.currentBubble = null;
+    }
+  }
+
+  /**
+   * Get bubble content using command handler
+   * @param {Object} matchData - Match data including command and intent
+   * @returns {string|null} HTML content or null
+   */
+  getBubbleContent(matchData) {
+    // Check for new simplified format first (intent.handler.message)
+    if (matchData.intent && matchData.intent.handler) {
+      const handler = matchData.intent.handler;
+      const message = handler.message || handler['message-content'] || matchData.intent.description;
+
+      if (message) {
+        // Return just the message text - header is added separately
+        return this.escapeHtml(message);
+      }
+    }
+
+    // Use command handler if available (legacy support)
+    if (this.options.commandHandlers && matchData.commandType) {
+      const content = this.options.commandHandlers.getBubbleContent(matchData.commandType, matchData);
+      if (content) {
+        return content;
+      }
+    }
+
+    // Fallback to legacy method
+    const command = matchData.command || {};
+
+    if (command.content) {
+      return command.content;
+    }
+
+    if (command.bubbleContent) {
+      return command.bubbleContent;
+    }
+
+    if (command.description) {
+      return `<div class="tq-bubble-description">${this.escapeHtml(command.description)}</div>`;
+    }
+
+    return null;
+  }
+
+  /**
+   * Position bubble relative to match element
+   * @param {HTMLElement} bubble - Bubble element
+   * @param {HTMLElement} matchEl - Match element
+   */
+  positionBubble(bubble, matchEl) {
+    const rect = matchEl.getBoundingClientRect();
+    const bubbleRect = bubble.getBoundingClientRect();
+
+    // Position above match by default (since input is at bottom)
+    let top = rect.top + window.scrollY - bubbleRect.height - 8;
+    let left = rect.left + window.scrollX;
+
+    // If bubble goes off top edge, position below instead
+    if (top < window.scrollY) {
+      top = rect.bottom + window.scrollY + 8;
+    }
+
+    // Check if bubble goes off right edge
+    if (left + bubbleRect.width > window.innerWidth) {
+      left = window.innerWidth - bubbleRect.width - 10;
+    }
+
+    bubble.style.top = `${top}px`;
+    bubble.style.left = `${left}px`;
+  }
+
+  /**
+   * Escape HTML
+   * @param {string} text - Text to escape
+   * @returns {string} Escaped text
+   */
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  /**
+   * Cleanup
+   */
+  cleanup() {
+    this.hideBubble();
+
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = null;
+    }
+  }
+
+  /**
+   * Destroy
+   */
+  destroy() {
+    this.cleanup();
+    console.log('[BubbleManager] Destroyed');
+  }
+}
+
+// DropdownManager - Handles dropdown menus with filtering, keyboard navigation, and selection
+
+class DropdownManager {
+  /**
+   * Create dropdown manager
+   * @param {Object} options - Configuration
+   */
+  constructor(options = {}) {
+    this.options = {
+      styleManager: options.styleManager || null,
+      textarea: options.textarea || null,
+      onWordClick: options.onWordClick || null,
+      dropdownOffset: options.dropdownOffset || 10, // Configurable offset from trigger word
+      ...options
+    };
+
+    this.activeDropdown = null;
+    this.activeDropdownMatch = null;
+    this.dropdownOptions = null;
+    this.dropdownMatchData = null;
+    this.selectedDropdownIndex = 0;
+    this.keyboardHandler = null;
+
+    console.log('[DropdownManager] Initialized with offset:', this.options.dropdownOffset);
+  }
+
+  /**
+   * Show dropdown for a match
+   * @param {HTMLElement} matchEl - Match element
+   * @param {Object} matchData - Match data
+   */
+  showDropdown(matchEl, matchData) {
+    // Close any existing dropdown
+    this.hideDropdown();
+
+    const command = matchData.command;
+
+    // Get dropdown options - check intent.handler.options first (new format)
+    const options = matchData.intent?.handler?.options || command.options || command.dropdownOptions || [];
+
+    if (options.length === 0) {
+      console.warn('[DropdownManager] No dropdown options for:', matchData.text);
+      return;
+    }
+
+    // Store reference to match element
+    this.activeDropdownMatch = matchEl;
+    this.selectedDropdownIndex = 0;
+
+    // Create dropdown
+    const dropdown = document.createElement('div');
+    dropdown.className = 'tq-dropdown';
+
+    // Apply inline styles via StyleManager
+    if (this.options.styleManager) {
+      this.options.styleManager.applyDropdownStyles(dropdown);
+    }
+
+    // Add header container based on message-state
+    const messageState = matchData.intent?.handler?.['message-state'] || 'info';
+    this.createHeaderContainer(dropdown, messageState);
+
+    // Add description row if message exists
+    const message = matchData.intent?.handler?.message;
+    if (message) {
+      this.createDescriptionRow(dropdown, message, messageState);
+    }
+
+    // Check if filter is enabled
+    const hasFilter = matchData.intent?.handler?.filter === true;
+
+    // Add filter input if enabled
+    if (hasFilter) {
+      this.createFilterInput(dropdown, matchData);
+    }
+
+    // Create dropdown items
+    this.createDropdownItems(dropdown, options, matchData);
+
+    // Prevent textarea blur when clicking dropdown (except filter input)
+    dropdown.addEventListener('mousedown', (e) => {
+      // Allow filter input to receive focus naturally
+      if (!e.target.classList.contains('tq-dropdown-filter')) {
+        e.preventDefault(); // Prevent blur on textarea for items
+      }
+    });
+
+    // Add to document
+    document.body.appendChild(dropdown);
+    this.activeDropdown = dropdown;
+    this.dropdownOptions = options;
+    this.dropdownMatchData = matchData;
+
+    // Position dropdown
+    this.positionDropdown(dropdown, matchEl);
+
+    // Setup keyboard navigation
+    this.setupKeyboardHandlers();
+
+    // Close on click outside
+    setTimeout(() => {
+      document.addEventListener('click', this.closeDropdownHandler);
+    }, 0);
+
+    console.log('[DropdownManager] Dropdown shown with', options.length, 'options');
+  }
+
+  /**
+   * Create header container for dropdown
+   * @param {HTMLElement} dropdown - Dropdown element
+   * @param {string} messageState - Message state (error, warning, info)
+   */
+  createHeaderContainer(dropdown, messageState) {
+    const headerContainer = document.createElement('div');
+    headerContainer.className = 'bubble-header-container';
+    headerContainer.setAttribute('data-type', messageState);
+
+    // Create image
+    const img = document.createElement('img');
+    img.src = `./assets/trustquery-${messageState}.svg`;
+    img.style.height = '24px';
+    img.style.width = 'auto';
+
+    // Create text span
+    const span = document.createElement('span');
+    const textMap = {
+      'error': 'TrustQuery Stop',
+      'warning': 'TrustQuery Clarify',
+      'info': 'TrustQuery Quick Link'
+    };
+    span.textContent = textMap[messageState] || 'TrustQuery';
+
+    // Append to header
+    headerContainer.appendChild(img);
+    headerContainer.appendChild(span);
+
+    // Apply styles to header via StyleManager
+    if (this.options.styleManager) {
+      this.options.styleManager.applyDropdownHeaderStyles(headerContainer, messageState);
+    }
+
+    dropdown.appendChild(headerContainer);
+  }
+
+  /**
+   * Create description row for dropdown
+   * @param {HTMLElement} dropdown - Dropdown element
+   * @param {string} message - Description message
+   * @param {string} messageState - Message state (error, warning, info)
+   */
+  createDescriptionRow(dropdown, message, messageState) {
+    const descriptionRow = document.createElement('div');
+    descriptionRow.className = 'tq-dropdown-description';
+    descriptionRow.textContent = message;
+
+    // Apply styles to description via StyleManager
+    if (this.options.styleManager) {
+      this.options.styleManager.applyDropdownDescriptionStyles(descriptionRow, messageState);
+    }
+
+    dropdown.appendChild(descriptionRow);
+  }
+
+  /**
+   * Create filter input for dropdown
+   * @param {HTMLElement} dropdown - Dropdown element
+   * @param {Object} matchData - Match data
+   */
+  createFilterInput(dropdown, matchData) {
+    const filterInput = document.createElement('input');
+    filterInput.type = 'text';
+    filterInput.className = 'tq-dropdown-filter';
+    filterInput.placeholder = 'Filter options...';
+
+    // Apply inline styles via StyleManager
+    if (this.options.styleManager) {
+      this.options.styleManager.applyDropdownFilterStyles(filterInput);
+    }
+
+    // Filter click handling is managed by dropdown and closeDropdownHandler
+    // No special mousedown/blur handling needed - filter focuses naturally
+
+    // Filter options as user types
+    filterInput.addEventListener('input', (e) => {
+      const query = e.target.value.toLowerCase();
+      const items = dropdown.querySelectorAll('.tq-dropdown-item');
+      let firstVisibleIndex = -1;
+
+      items.forEach((item, index) => {
+        const text = item.textContent.toLowerCase();
+        const matches = text.includes(query);
+        item.style.display = matches ? 'block' : 'none';
+
+        // Track first visible item for selection
+        if (matches && firstVisibleIndex === -1) {
+          firstVisibleIndex = index;
+        }
+      });
+
+      // Update selected index to first visible item
+      if (firstVisibleIndex !== -1) {
+        this.selectedDropdownIndex = firstVisibleIndex;
+        this.updateDropdownSelection();
+      }
+    });
+
+    // Prevent dropdown keyboard navigation from affecting filter input
+    filterInput.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        // Move focus to dropdown items
+        filterInput.blur();
+        this.options.textarea.focus();
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.selectCurrentDropdownItem();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.hideDropdown();
+      }
+    });
+
+    dropdown.appendChild(filterInput);
+
+    // Don't auto-focus - keep focus on textarea for natural typing/arrow key flow
+  }
+
+  /**
+   * Create dropdown items
+   * @param {HTMLElement} dropdown - Dropdown element
+   * @param {Array} options - Dropdown options
+   * @param {Object} matchData - Match data
+   */
+  createDropdownItems(dropdown, options, matchData) {
+    options.forEach((option, index) => {
+      // Check if this is a user-input option
+      if (typeof option === 'object' && option['user-input'] === true) {
+        this.createUserInputOption(dropdown, option, matchData);
+        return;
+      }
+
+      const item = document.createElement('div');
+      item.className = 'tq-dropdown-item';
+      item.textContent = typeof option === 'string' ? option : option.label || option.value;
+
+      // Highlight first item by default
+      if (index === 0) {
+        item.classList.add('tq-dropdown-item-selected');
+      }
+
+      // Apply inline styles to item via StyleManager
+      if (this.options.styleManager) {
+        this.options.styleManager.applyDropdownItemStyles(item);
+      }
+
+      item.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.handleDropdownSelect(option, matchData);
+        this.hideDropdown();
+      });
+      dropdown.appendChild(item);
+    });
+  }
+
+  /**
+   * Create user input option
+   * @param {HTMLElement} dropdown - Dropdown element
+   * @param {Object} option - Option with user-input flag
+   * @param {Object} matchData - Match data
+   */
+  createUserInputOption(dropdown, option, matchData) {
+    const container = document.createElement('div');
+    container.className = 'tq-dropdown-user-input-container tq-dropdown-item';
+    container.setAttribute('data-user-input', 'true');
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.className = 'tq-dropdown-user-input';
+    input.placeholder = option.placeholder || 'Enter custom value...';
+
+    container.appendChild(input);
+
+    // Apply styles via StyleManager
+    if (this.options.styleManager) {
+      this.options.styleManager.applyUserInputStyles(container, input);
+    }
+
+    // Click on container focuses input
+    container.addEventListener('click', (e) => {
+      e.stopPropagation();
+      input.focus();
+    });
+
+    // Handle submit on Enter key
+    const handleSubmit = () => {
+      const value = input.value.trim();
+      if (value) {
+        const customOption = {
+          label: value,
+          'on-select': {
+            display: value
+          }
+        };
+        this.handleDropdownSelect(customOption, matchData);
+        this.hideDropdown();
+      }
+    };
+
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSubmit();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.hideDropdown();
+      } else if (e.key === 'ArrowDown') {
+        // Navigate to next item
+        e.preventDefault();
+        e.stopPropagation();
+        this.moveDropdownSelection(1);
+        this.options.textarea.focus();
+      } else if (e.key === 'ArrowUp') {
+        // Navigate to previous item
+        e.preventDefault();
+        e.stopPropagation();
+        this.moveDropdownSelection(-1);
+        this.options.textarea.focus();
+      }
+    });
+
+    dropdown.appendChild(container);
+  }
+
+  /**
+   * Hide current dropdown
+   */
+  hideDropdown() {
+    if (this.activeDropdown) {
+      this.activeDropdown.remove();
+      this.activeDropdown = null;
+      this.activeDropdownMatch = null;
+      this.dropdownOptions = null;
+      this.dropdownMatchData = null;
+      this.selectedDropdownIndex = 0;
+      document.removeEventListener('click', this.closeDropdownHandler);
+      document.removeEventListener('keydown', this.keyboardHandler);
+    }
+  }
+
+  /**
+   * Close dropdown handler (bound to document)
+   */
+  closeDropdownHandler = (e) => {
+    // Only close if clicking outside the dropdown
+    if (this.activeDropdown && !this.activeDropdown.contains(e.target)) {
+      this.hideDropdown();
+    }
+  }
+
+  /**
+   * Position dropdown relative to match element
+   * @param {HTMLElement} dropdown - Dropdown element
+   * @param {HTMLElement} matchEl - Match element
+   */
+  positionDropdown(dropdown, matchEl) {
+    const rect = matchEl.getBoundingClientRect();
+    const dropdownRect = dropdown.getBoundingClientRect();
+    const offset = this.options.dropdownOffset;
+
+    // Position above match by default (since input is at bottom)
+    let top = rect.top + window.scrollY - dropdownRect.height - offset;
+    let left = rect.left + window.scrollX;
+
+    // If dropdown goes off top edge, position below instead
+    if (top < window.scrollY) {
+      top = rect.bottom + window.scrollY + offset;
+    }
+
+    // Check if dropdown goes off right edge
+    if (left + dropdownRect.width > window.innerWidth) {
+      left = window.innerWidth - dropdownRect.width - 10;
+    }
+
+    dropdown.style.top = `${top}px`;
+    dropdown.style.left = `${left}px`;
+  }
+
+  /**
+   * Setup keyboard handlers for dropdown navigation
+   */
+  setupKeyboardHandlers() {
+    // Remove old handler if exists
+    if (this.keyboardHandler) {
+      document.removeEventListener('keydown', this.keyboardHandler);
+    }
+
+    // Create new handler
+    this.keyboardHandler = (e) => {
+      // Only handle if dropdown is active
+      if (!this.activeDropdown) {
+        return;
+      }
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          this.moveDropdownSelection(1);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          this.moveDropdownSelection(-1);
+          break;
+        case 'Enter':
+          e.preventDefault();
+          this.selectCurrentDropdownItem();
+          break;
+        case 'Escape':
+          e.preventDefault();
+          this.hideDropdown();
+          break;
+      }
+    };
+
+    // Attach handler
+    document.addEventListener('keydown', this.keyboardHandler);
+  }
+
+  /**
+   * Move dropdown selection up or down
+   * @param {number} direction - 1 for down, -1 for up
+   */
+  moveDropdownSelection(direction) {
+    if (!this.activeDropdown || !this.dropdownOptions) {
+      return;
+    }
+
+    const items = this.activeDropdown.querySelectorAll('.tq-dropdown-item');
+    const visibleItems = Array.from(items).filter(item => item.style.display !== 'none');
+
+    if (visibleItems.length === 0) {
+      return;
+    }
+
+    // Find current selected visible index
+    let currentVisibleIndex = visibleItems.findIndex((item, index) => {
+      return Array.from(items).indexOf(item) === this.selectedDropdownIndex;
+    });
+
+    // Move to next/prev visible item
+    currentVisibleIndex += direction;
+
+    // Wrap around visible items only
+    if (currentVisibleIndex < 0) {
+      currentVisibleIndex = visibleItems.length - 1;
+    } else if (currentVisibleIndex >= visibleItems.length) {
+      currentVisibleIndex = 0;
+    }
+
+    // Update selected index to the actual index
+    this.selectedDropdownIndex = Array.from(items).indexOf(visibleItems[currentVisibleIndex]);
+
+    // Update visual selection
+    this.updateDropdownSelection();
+  }
+
+  /**
+   * Update visual selection in dropdown
+   */
+  updateDropdownSelection() {
+    if (!this.activeDropdown) {
+      return;
+    }
+
+    const items = this.activeDropdown.querySelectorAll('.tq-dropdown-item');
+    items.forEach((item, index) => {
+      if (index === this.selectedDropdownIndex) {
+        item.classList.add('tq-dropdown-item-selected');
+        // Scroll into view if needed
+        item.scrollIntoView({ block: 'nearest' });
+
+        // If this is a user input item, focus the input
+        if (item.getAttribute('data-user-input') === 'true') {
+          const input = item.querySelector('.tq-dropdown-user-input');
+          if (input) {
+            setTimeout(() => input.focus(), 0);
+          }
+        }
+      } else {
+        item.classList.remove('tq-dropdown-item-selected');
+
+        // If this is a user input item, blur the input when navigating away
+        if (item.getAttribute('data-user-input') === 'true') {
+          const input = item.querySelector('.tq-dropdown-user-input');
+          if (input) {
+            input.blur();
+          }
+        }
+      }
+    });
+  }
+
+  /**
+   * Select the currently highlighted dropdown item
+   */
+  selectCurrentDropdownItem() {
+    if (!this.dropdownOptions || !this.dropdownMatchData) {
+      return;
+    }
+
+    const items = this.activeDropdown.querySelectorAll('.tq-dropdown-item');
+    const selectedItem = items[this.selectedDropdownIndex];
+
+    // Check if this is a user input item
+    if (selectedItem && selectedItem.getAttribute('data-user-input') === 'true') {
+      // Focus the input field instead of selecting
+      const input = selectedItem.querySelector('.tq-dropdown-user-input');
+      if (input) {
+        input.focus();
+      }
+      return;
+    }
+
+    const selectedOption = this.dropdownOptions[this.selectedDropdownIndex];
+    this.handleDropdownSelect(selectedOption, this.dropdownMatchData);
+    this.hideDropdown();
+  }
+
+  /**
+   * Handle dropdown option selection
+   * @param {*} option - Selected option
+   * @param {Object} matchData - Match data
+   */
+  handleDropdownSelect(option, matchData) {
+    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) {
+      const displayText = option['on-select'].display;
+      const textarea = this.options.textarea;
+      const text = textarea.value;
+
+      // Find the trigger text position
+      const lines = text.split('\n');
+      const line = lines[matchData.line];
+
+      if (line) {
+        // Append to trigger text with "/" separator
+        const before = line.substring(0, matchData.col);
+        const after = line.substring(matchData.col + matchData.text.length);
+        const newText = matchData.text + '/' + displayText;
+        lines[matchData.line] = before + newText + after;
+
+        // Update textarea
+        textarea.value = lines.join('\n');
+
+        // Trigger input event to re-render
+        const inputEvent = new Event('input', { bubbles: true });
+        textarea.dispatchEvent(inputEvent);
+
+        console.log('[DropdownManager] Appended to', matchData.text, '→', newText);
+      }
+    }
+
+    // Trigger callback
+    if (this.options.onWordClick) {
+      this.options.onWordClick({
+        ...matchData,
+        selectedOption: option
+      });
+    }
+  }
+
+  /**
+   * Cleanup
+   */
+  cleanup() {
+    this.hideDropdown();
+  }
+
+  /**
+   * Destroy
+   */
+  destroy() {
+    this.cleanup();
+    console.log('[DropdownManager] Destroyed');
+  }
+}
+
+// InteractionHandler - Orchestrates hover bubbles and click interactions on matched words
+// Delegates to BubbleManager and DropdownManager for specific functionality
+
+
+class InteractionHandler {
+  /**
+   * Create interaction handler
+   * @param {HTMLElement} overlay - Overlay element containing matches
+   * @param {Object} options - Configuration
+   */
+  constructor(overlay, options = {}) {
+    this.overlay = overlay;
+    this.options = {
+      bubbleDelay: options.bubbleDelay || 200,
+      onWordClick: options.onWordClick || null,
+      onWordHover: options.onWordHover || null,
+      styleManager: options.styleManager || null,
+      commandHandlers: options.commandHandlers || null,
+      textarea: options.textarea || null,
+      ...options
+    };
+
+    this.hoverTimeout = null;
+
+    // Create manager instances
+    this.bubbleManager = new BubbleManager({
+      bubbleDelay: this.options.bubbleDelay,
+      styleManager: this.options.styleManager,
+      commandHandlers: this.options.commandHandlers
+    });
+
+    this.dropdownManager = new DropdownManager({
+      styleManager: this.options.styleManager,
+      textarea: this.options.textarea,
+      onWordClick: this.options.onWordClick,
+      dropdownOffset: this.options.dropdownOffset
+    });
+
+    console.log('[InteractionHandler] Initialized');
+  }
+
+  /**
+   * Update handlers after overlay re-render
+   * Attach event listeners to all .tq-match elements
+   */
+  update() {
+    // Remove old handlers (if any)
+    this.cleanup();
+
+    // Find all match elements
+    const matches = this.overlay.querySelectorAll('.tq-match');
+
+    matches.forEach(matchEl => {
+      const behavior = matchEl.getAttribute('data-behavior');
+
+      // Hover events for bubbles
+      matchEl.addEventListener('mouseenter', (e) => this.handleMouseEnter(e, matchEl));
+      matchEl.addEventListener('mouseleave', (e) => this.handleMouseLeave(e, matchEl));
+
+      // Click events for dropdowns/actions
+      matchEl.addEventListener('click', (e) => this.handleClick(e, matchEl));
+
+      // Add hover class for CSS styling
+      matchEl.classList.add('tq-hoverable');
+
+      // Auto-show dropdown for dropdown-behavior matches
+      if (behavior === 'dropdown') {
+        const matchData = this.getMatchData(matchEl);
+        // Only show if this isn't the currently active dropdown match
+        if (!this.dropdownManager.activeDropdownMatch ||
+            this.dropdownManager.activeDropdownMatch.textContent !== matchEl.textContent) {
+          this.dropdownManager.showDropdown(matchEl, matchData);
+        }
+      }
+    });
+
+    console.log('[InteractionHandler] Updated with', matches.length, 'interactive elements');
+  }
+
+  /**
+   * Handle mouse enter on a match
+   * @param {Event} e - Mouse event
+   * @param {HTMLElement} matchEl - Match element
+   */
+  handleMouseEnter(e, matchEl) {
+    const behavior = matchEl.getAttribute('data-behavior');
+
+    // Only show bubble if behavior is 'bubble' or 'hover'
+    if (behavior === 'bubble' || behavior === 'hover') {
+      // Clear any existing timeout
+      if (this.hoverTimeout) {
+        clearTimeout(this.hoverTimeout);
+      }
+
+      // Delay bubble appearance
+      this.hoverTimeout = setTimeout(() => {
+        const matchData = this.getMatchData(matchEl);
+        this.bubbleManager.showBubble(matchEl, matchData);
+      }, this.options.bubbleDelay);
+    }
+
+    // Callback
+    if (this.options.onWordHover) {
+      const matchData = this.getMatchData(matchEl);
+      this.options.onWordHover(matchData);
+    }
+  }
+
+  /**
+   * Handle mouse leave from a match
+   * @param {Event} e - Mouse event
+   * @param {HTMLElement} matchEl - Match element
+   */
+  handleMouseLeave(e, matchEl) {
+    // Clear hover timeout
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = null;
+    }
+
+    // Don't immediately hide bubble - let user hover over it
+    // Bubble will auto-hide when mouse leaves bubble area
+  }
+
+  /**
+   * Handle click on a match
+   * @param {Event} e - Click event
+   * @param {HTMLElement} matchEl - Match element
+   */
+  handleClick(e, matchEl) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const behavior = matchEl.getAttribute('data-behavior');
+    const matchData = this.getMatchData(matchEl);
+
+    console.log('[InteractionHandler] Match clicked:', matchData);
+
+    // Handle different behaviors
+    if (behavior === 'dropdown') {
+      // Toggle dropdown - close if already open for this match, otherwise show
+      if (this.dropdownManager.activeDropdownMatch === matchEl) {
+        this.dropdownManager.hideDropdown();
+      } else {
+        this.dropdownManager.showDropdown(matchEl, matchData);
+      }
+    } else if (behavior === 'action') {
+      // Custom action callback
+      if (this.options.onWordClick) {
+        this.options.onWordClick(matchData);
+      }
+    }
+
+    // Always trigger callback (unless it's a dropdown toggle to close)
+    if (this.options.onWordClick && !(behavior === 'dropdown' && this.dropdownManager.activeDropdownMatch === matchEl)) {
+      this.options.onWordClick(matchData);
+    }
+  }
+
+  /**
+   * Hide dropdown (exposed for external use, e.g., when textarea loses focus)
+   */
+  hideDropdown() {
+    this.dropdownManager.hideDropdown();
+  }
+
+  /**
+   * Extract match data from element
+   * @param {HTMLElement} matchEl - Match element
+   * @returns {Object} Match data
+   */
+  getMatchData(matchEl) {
+    // Parse intent JSON if available
+    let intent = null;
+    const intentStr = matchEl.getAttribute('data-intent');
+    if (intentStr) {
+      try {
+        intent = JSON.parse(intentStr);
+      } catch (e) {
+        console.warn('[InteractionHandler] Failed to parse intent JSON:', e);
+      }
+    }
+
+    return {
+      text: matchEl.getAttribute('data-match-text'),
+      line: parseInt(matchEl.getAttribute('data-line')),
+      col: parseInt(matchEl.getAttribute('data-col')),
+      commandType: matchEl.getAttribute('data-command-type'),
+      commandPath: matchEl.getAttribute('data-command-path'),
+      intentPath: matchEl.getAttribute('data-intent-path'),
+      intent: intent,
+      command: {
+        id: matchEl.getAttribute('data-command-id'),
+        type: matchEl.getAttribute('data-command-type'),
+        behavior: matchEl.getAttribute('data-behavior')
+      },
+      element: matchEl
+    };
+  }
+
+  /**
+   * Cleanup event listeners
+   */
+  cleanup() {
+    this.bubbleManager.cleanup();
+    this.dropdownManager.cleanup();
+
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = null;
+    }
+  }
+
+  /**
+   * Destroy handler
+   */
+  destroy() {
+    this.cleanup();
+    this.bubbleManager.destroy();
+    this.dropdownManager.destroy();
+    console.log('[InteractionHandler] Destroyed');
+  }
+}
+
+// StyleManager - Handles all inline styling for textarea, wrapper, and overlay
+// Makes TrustQuery completely self-contained without requiring external CSS
+
+class StyleManager {
+  /**
+   * Create style manager
+   * @param {Object} options - Theme and style options
+   */
+  constructor(options = {}) {
+    this.options = {
+      // Theme colors
+      backgroundColor: options.backgroundColor || '#fff',
+      textColor: options.textColor || '#333',
+      caretColor: options.caretColor || '#000',
+      borderColor: options.borderColor || '#ddd',
+      borderColorFocus: options.borderColorFocus || '#4a90e2',
+
+      // Match colors (can be overridden)
+      matchBackgroundColor: options.matchBackgroundColor || 'rgba(74, 144, 226, 0.15)',
+      matchTextColor: options.matchTextColor || '#2b6cb0',
+      matchHoverBackgroundColor: options.matchHoverBackgroundColor || 'rgba(74, 144, 226, 0.25)',
+
+      // Font settings (optional, will use textarea's if not specified)
+      fontFamily: options.fontFamily || null,
+      fontSize: options.fontSize || null,
+      lineHeight: options.lineHeight || null,
+
+      ...options
+    };
+
+    console.log('[StyleManager] Initialized with theme:', this.options);
+  }
+
+  /**
+   * Apply all styles to wrapper, textarea, and overlay
+   * @param {HTMLElement} wrapper - Wrapper element
+   * @param {HTMLElement} textarea - Textarea element
+   * @param {HTMLElement} overlay - Overlay element
+   */
+  applyAllStyles(wrapper, textarea, overlay) {
+    // Get computed styles from original textarea
+    const computedStyle = window.getComputedStyle(textarea);
+
+    // Apply styles to each element
+    this.applyWrapperStyles(wrapper, computedStyle);
+    this.applyTextareaStyles(textarea, computedStyle);
+    this.applyOverlayStyles(overlay, computedStyle);
+
+    // Apply focus handlers
+    this.setupFocusStyles(wrapper, textarea);
+
+    console.log('[StyleManager] All styles applied');
+  }
+
+  /**
+   * Apply wrapper styles (container for both textarea and overlay)
+   * @param {HTMLElement} wrapper - Wrapper element
+   * @param {CSSStyleDeclaration} computedStyle - Computed styles from textarea
+   */
+  applyWrapperStyles(wrapper, computedStyle) {
+    Object.assign(wrapper.style, {
+      position: 'relative',
+      display: 'block',
+      width: '100%',
+      background: this.options.backgroundColor,
+      border: `1px solid ${this.options.borderColor}`,
+      borderRadius: '4px',
+      boxSizing: 'border-box',
+      transition: 'border-color 0.15s ease, box-shadow 0.15s ease'
+    });
+  }
+
+  /**
+   * Apply textarea styles (transparent text, visible caret)
+   * @param {HTMLElement} textarea - Textarea element
+   * @param {CSSStyleDeclaration} computedStyle - Original computed styles
+   */
+  applyTextareaStyles(textarea, computedStyle) {
+    // Use provided font settings or fall back to computed/defaults
+    const fontFamily = this.options.fontFamily || computedStyle.fontFamily || "'Courier New', monospace";
+    const fontSize = this.options.fontSize || computedStyle.fontSize || '14px';
+    const lineHeight = this.options.lineHeight || computedStyle.lineHeight || '1.5';
+    const padding = computedStyle.padding || '12px';
+
+    // Store existing transition if any (for FOUC prevention)
+    const existingTransition = textarea.style.transition;
+
+    Object.assign(textarea.style, {
+      fontFamily,
+      fontSize,
+      lineHeight,
+      padding,
+      border: 'none',
+      borderRadius: '0',
+      background: 'transparent',
+      color: this.options.textColor, // Set color for caret visibility
+      WebkitTextFillColor: 'transparent', // Make text transparent but keep caret
+      caretColor: this.options.caretColor,
+      resize: 'none',
+      width: '100%',
+      boxSizing: 'border-box',
+      position: 'relative',
+      zIndex: '0', // Below overlay so hover events reach overlay matches
+      whiteSpace: 'pre-wrap',
+      wordWrap: 'break-word',
+      overflowWrap: 'break-word',
+      outline: 'none',
+      margin: '0',
+      transition: existingTransition // Preserve opacity transition from HTML
+    });
+
+    // Add CSS to make placeholder visible (not affected by -webkit-text-fill-color)
+    this.ensurePlaceholderStyles();
+
+    // Store computed values for overlay to use
+    this._textareaStyles = {
+      fontFamily,
+      fontSize,
+      lineHeight,
+      padding
+    };
+  }
+
+  /**
+   * Apply overlay styles (must match textarea exactly for alignment)
+   * @param {HTMLElement} overlay - Overlay element
+   * @param {CSSStyleDeclaration} computedStyle - Computed styles from textarea
+   */
+  applyOverlayStyles(overlay, computedStyle) {
+    // Use the stored textarea styles to ensure perfect alignment
+    const { fontFamily, fontSize, lineHeight, padding } = this._textareaStyles;
+
+    Object.assign(overlay.style, {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      right: '0',
+      bottom: '0',
+      fontFamily,
+      fontSize,
+      lineHeight,
+      padding,
+      color: this.options.textColor,
+      pointerEvents: 'none', // Let clicks pass through to textarea (except on match spans with pointer-events: auto)
+      overflow: 'hidden',
+      whiteSpace: 'pre-wrap',
+      wordWrap: 'break-word',
+      overflowWrap: 'break-word',
+      zIndex: '1', // Above textarea so match spans can receive hover/click events
+      boxSizing: 'border-box',
+      margin: '0'
+    });
+  }
+
+  /**
+   * Setup focus styles (apply on focus, remove on blur)
+   * @param {HTMLElement} wrapper - Wrapper element
+   * @param {HTMLElement} textarea - Textarea element
+   */
+  setupFocusStyles(wrapper, textarea) {
+    textarea.addEventListener('focus', () => {
+      wrapper.style.borderColor = this.options.borderColorFocus;
+      wrapper.style.boxShadow = `0 0 0 3px ${this.options.borderColorFocus}1a`; // 1a = 10% opacity
+    });
+
+    textarea.addEventListener('blur', () => {
+      wrapper.style.borderColor = this.options.borderColor;
+      wrapper.style.boxShadow = 'none';
+    });
+  }
+
+  /**
+   * Apply match (highlighted word) styles
+   * @param {HTMLElement} matchElement - Span element for matched word
+   * @param {string} matchType - Type of match (keyword, mention, command, etc.)
+   */
+  applyMatchStyles(matchElement, matchType = 'default') {
+    // Base match styles
+    Object.assign(matchElement.style, {
+      pointerEvents: 'auto', // Enable interactions
+      cursor: 'pointer',
+      padding: '2px 4px',
+      margin: '-2px -4px',
+      borderRadius: '3px',
+      transition: 'background-color 0.15s ease',
+      backgroundColor: this.options.matchBackgroundColor,
+      color: this.options.matchTextColor
+    });
+
+    // Hover styles (on mouseover)
+    matchElement.addEventListener('mouseenter', () => {
+      matchElement.style.backgroundColor = this.options.matchHoverBackgroundColor;
+    });
+
+    matchElement.addEventListener('mouseleave', () => {
+      matchElement.style.backgroundColor = this.options.matchBackgroundColor;
+    });
+  }
+
+  /**
+   * Apply bubble (tooltip) styles
+   * @param {HTMLElement} bubble - Bubble element
+   */
+  applyBubbleStyles(bubble) {
+    Object.assign(bubble.style, {
+      position: 'absolute',
+      background: '#ffffff',
+      border: `1px solid ${this.options.borderColor}`,
+      borderRadius: '6px',
+      padding: '0',
+      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+      zIndex: '10000',
+      maxWidth: '300px',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+      fontSize: '13px',
+      lineHeight: '1.4',
+      color: this.options.textColor,
+      pointerEvents: 'auto',
+      opacity: '1',
+      overflow: 'hidden',
+      animation: 'tq-bubble-appear 0.15s ease-out'
+    });
+
+    // Add animation keyframes if not already added
+    this.ensureAnimationStyles();
+
+    // Style the content container
+    const contentContainer = bubble.querySelector('.tq-bubble-content');
+    if (contentContainer) {
+      Object.assign(contentContainer.style, {
+        padding: '8px 12px',
+        fontSize: '12px',
+        lineHeight: '1.4'
+      });
+    }
+  }
+
+  /**
+   * Apply bubble header styles
+   * @param {HTMLElement} header - Header container element
+   * @param {string} messageState - Message state (error, warning, info)
+   */
+  applyBubbleHeaderStyles(header, messageState) {
+    const colorMap = {
+      'error': '#991b1b',
+      'warning': '#92400e',
+      'info': '#065f46'
+    };
+
+    const bgColorMap = {
+      'error': '#fee2e2',
+      'warning': '#fef3c7',
+      'info': '#d1fae5'
+    };
+
+    const color = colorMap[messageState] || '#2b6cb0';
+    const bgColor = bgColorMap[messageState] || '#e0f2fe';
+
+    Object.assign(header.style, {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      padding: '10px 12px',
+      backgroundColor: bgColor,
+      color: color,
+      fontWeight: '600',
+      fontSize: '11px',
+      borderBottom: `1px solid ${this.options.borderColor}`
+    });
+  }
+
+  /**
+   * Apply dropdown (menu) styles
+   * @param {HTMLElement} dropdown - Dropdown element
+   */
+  applyDropdownStyles(dropdown) {
+    Object.assign(dropdown.style, {
+      position: 'absolute',
+      background: '#ffffff',
+      border: `1px solid ${this.options.borderColor}`,
+      borderRadius: '6px',
+      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+      zIndex: '10000',
+      minWidth: '150px',
+      maxWidth: '300px',
+      overflow: 'hidden',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+      fontSize: '14px',
+      opacity: '1',
+      animation: 'tq-dropdown-appear 0.15s ease-out'
+    });
+
+    this.ensureAnimationStyles();
+  }
+
+  /**
+   * Apply dropdown header styles
+   * @param {HTMLElement} header - Header container element
+   * @param {string} messageState - Message state (error, warning, info)
+   */
+  applyDropdownHeaderStyles(header, messageState) {
+    const colorMap = {
+      'error': '#991b1b',
+      'warning': '#92400e',
+      'info': '#065f46'
+    };
+
+    const bgColorMap = {
+      'error': '#fee2e2',
+      'warning': '#fef3c7',
+      'info': '#d1fae5'
+    };
+
+    const color = colorMap[messageState] || '#2b6cb0';
+    const bgColor = bgColorMap[messageState] || '#e0f2fe';
+
+    Object.assign(header.style, {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      padding: '10px 12px',
+      backgroundColor: bgColor,
+      color: color,
+      fontWeight: '600',
+      fontSize: '11px',
+      borderBottom: `1px solid ${this.options.borderColor}`
+    });
+  }
+
+  /**
+   * Apply dropdown description styles
+   * @param {HTMLElement} description - Description element
+   * @param {string} messageState - Message state (error, warning, info)
+   */
+  applyDropdownDescriptionStyles(description, messageState) {
+    Object.assign(description.style, {
+      padding: '8px 12px',
+      fontSize: '12px',
+      lineHeight: '1.5',
+      color: '#4a5568',
+      backgroundColor: '#f7fafc',
+      borderBottom: `1px solid ${this.options.borderColor}`
+    });
+  }
+
+  /**
+   * Apply dropdown item styles
+   * @param {HTMLElement} item - Dropdown item element
+   */
+  applyDropdownItemStyles(item) {
+    Object.assign(item.style, {
+      padding: '8px 12px',
+      cursor: 'pointer',
+      color: this.options.textColor,
+      transition: 'background-color 0.1s ease'
+    });
+
+    item.addEventListener('mouseenter', () => {
+      item.style.backgroundColor = '#f0f4f8';
+    });
+
+    item.addEventListener('mouseleave', () => {
+      item.style.backgroundColor = 'transparent';
+    });
+
+    item.addEventListener('mousedown', () => {
+      item.style.backgroundColor = '#e2e8f0';
+    });
+  }
+
+  /**
+   * Apply user input styles
+   * @param {HTMLElement} container - User input container
+   * @param {HTMLElement} input - Input element
+   */
+  applyUserInputStyles(container, input) {
+    // Container is now a tq-dropdown-item, so don't add padding here
+    // Just set the border and background
+    Object.assign(container.style, {
+      backgroundColor: 'transparent',
+      borderTop: `1px solid ${this.options.borderColor}`,
+      // Override cursor from dropdown-item styles
+      cursor: 'text'
+    });
+
+    Object.assign(input.style, {
+      width: '100%',
+      padding: '8px 12px',
+      border: 'none',
+      borderBottom: '1px solid #ccc',
+      borderRadius: '0',
+      fontSize: '14px',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+      color: this.options.textColor,
+      backgroundColor: 'transparent',
+      boxSizing: 'border-box',
+      outline: 'none'
+    });
+
+    input.addEventListener('focus', () => {
+      input.style.borderBottom = '1px solid #ccc';
+    });
+
+    input.addEventListener('blur', () => {
+      input.style.borderBottom = '1px solid #ccc';
+    });
+  }
+
+  /**
+   * Apply dropdown filter input styles
+   * @param {HTMLElement} filterInput - Filter input element
+   */
+  applyDropdownFilterStyles(filterInput) {
+    Object.assign(filterInput.style, {
+      width: '100%',
+      padding: '8px 12px',
+      border: 'none',
+      borderBottom: `1px solid ${this.options.borderColor}`,
+      outline: 'none',
+      fontSize: '14px',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+      color: this.options.textColor,
+      backgroundColor: '#f7fafc',
+      boxSizing: 'border-box'
+    });
+
+    // Focus styles
+    filterInput.addEventListener('focus', () => {
+      filterInput.style.backgroundColor = '#fff';
+      filterInput.style.borderBottomColor = this.options.borderColorFocus;
+    });
+
+    filterInput.addEventListener('blur', () => {
+      filterInput.style.backgroundColor = '#f7fafc';
+      filterInput.style.borderBottomColor = this.options.borderColor;
+    });
+  }
+
+  /**
+   * Ensure animation keyframes are added to document (only once)
+   */
+  ensureAnimationStyles() {
+    if (document.getElementById('tq-animations')) {
+      return; // Already added
+    }
+
+    const style = document.createElement('style');
+    style.id = 'tq-animations';
+    style.textContent = `
+      @keyframes tq-bubble-appear {
+        from {
+          opacity: 0;
+          transform: translateY(-4px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes tq-dropdown-appear {
+        from {
+          opacity: 0;
+          transform: scale(0.95);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      .tq-dropdown-item-selected {
+        background-color: #e2e8f0 !important;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  /**
+   * Ensure placeholder styles are added to document (only once)
+   */
+  ensurePlaceholderStyles() {
+    if (document.getElementById('tq-placeholder-styles')) {
+      return; // Already added
+    }
+
+    const style = document.createElement('style');
+    style.id = 'tq-placeholder-styles';
+    style.textContent = `
+      .tq-textarea::placeholder {
+        color: #a0aec0 !important;
+        opacity: 1 !important;
+        -webkit-text-fill-color: #a0aec0 !important;
+      }
+
+      .tq-textarea::-webkit-input-placeholder {
+        color: #a0aec0 !important;
+        opacity: 1 !important;
+        -webkit-text-fill-color: #a0aec0 !important;
+      }
+
+      .tq-textarea::-moz-placeholder {
+        color: #a0aec0 !important;
+        opacity: 1 !important;
+      }
+
+      .tq-textarea:-ms-input-placeholder {
+        color: #a0aec0 !important;
+        opacity: 1 !important;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  /**
+   * Update theme colors dynamically
+   * @param {Object} newColors - New color options
+   */
+  updateTheme(newColors) {
+    Object.assign(this.options, newColors);
+    console.log('[StyleManager] Theme updated:', this.options);
+  }
+}
+
+// CommandHandlers - Handler registry for different command types
+// Each command type has specific styling and behavior
+
+class CommandHandlerRegistry {
+  constructor() {
+    this.handlers = new Map();
+    this.registerDefaultHandlers();
+  }
+
+  /**
+   * Register default handlers
+   */
+  registerDefaultHandlers() {
+    this.register('not-allowed', new NotAllowedHandler());
+    this.register('show-warning', new ShowWarningHandler());
+    this.register('user-select-oneOf-and-warn', new UserSelectWithWarningHandler());
+    this.register('user-select-oneOf', new UserSelectHandler());
+    this.register('api-json-table', new ApiJsonTableHandler());
+    this.register('api-md-table', new ApiMdTableHandler());
+  }
+
+  /**
+   * Register a handler
+   * @param {string} commandType - Command type (e.g., 'not-allowed', 'show-warning')
+   * @param {CommandHandler} handler - Handler instance
+   */
+  register(commandType, handler) {
+    this.handlers.set(commandType, handler);
+    console.log(`[CommandHandlerRegistry] Registered handler: ${commandType}`);
+  }
+
+  /**
+   * Get handler for a command type
+   * @param {string} commandType - Command type
+   * @returns {CommandHandler|null} Handler or null
+   */
+  getHandler(commandType) {
+    return this.handlers.get(commandType) || null;
+  }
+
+  /**
+   * Get styles for a command type (or based on message-state)
+   * @param {string} commandType - Command type
+   * @param {Object} matchData - Match data including intent/handler
+   * @returns {Object} Style configuration
+   */
+  getStyles(commandType, matchData = null) {
+    // If matchData is provided, check message-state first
+    if (matchData && matchData.intent && matchData.intent.handler) {
+      const messageState = matchData.intent.handler['message-state'];
+      if (messageState) {
+        return this.getStylesForMessageState(messageState);
+      }
+    }
+
+    // Fall back to command type handler
+    const handler = this.getHandler(commandType);
+    return handler ? handler.getStyles() : this.getDefaultStyles();
+  }
+
+  /**
+   * Get styles based on message-state
+   * @param {string} messageState - Message state (error, warning, info)
+   * @returns {Object} Style configuration
+   */
+  getStylesForMessageState(messageState) {
+    const stateStyles = {
+      'error': {
+        backgroundColor: 'rgba(220, 38, 38, 0.15)', // Red
+        color: '#991b1b',
+        textDecoration: 'none',
+        borderBottom: '2px solid #dc2626',
+        borderRadius: '0',
+        cursor: 'not-allowed'
+      },
+      'warning': {
+        backgroundColor: 'rgba(245, 158, 11, 0.15)', // Orange
+        color: '#92400e',
+        textDecoration: 'none',
+        borderBottom: '2px solid #f59e0b',
+        borderRadius: '0',
+        cursor: 'help'
+      },
+      'info': {
+        backgroundColor: 'rgba(16, 185, 129, 0.15)', // Green
+        color: '#065f46',
+        textDecoration: 'none',
+        borderBottom: '2px solid #10b981',
+        borderRadius: '0',
+        cursor: 'pointer'
+      }
+    };
+
+    return stateStyles[messageState] || this.getDefaultStyles();
+  }
+
+  /**
+   * Get bubble content for a match
+   * @param {string} commandType - Command type
+   * @param {Object} matchData - Match data including intent info
+   * @returns {string} HTML content for bubble
+   */
+  getBubbleContent(commandType, matchData) {
+    const handler = this.getHandler(commandType);
+    return handler ? handler.getBubbleContent(matchData) : null;
+  }
+
+  /**
+   * Get default styles (fallback)
+   */
+  getDefaultStyles() {
+    return {
+      backgroundColor: 'rgba(74, 144, 226, 0.15)',
+      color: '#2b6cb0',
+      textDecoration: 'none',
+      borderBottom: 'none'
+    };
+  }
+}
+
+/**
+ * Base handler class
+ */
+class CommandHandler {
+  getStyles() {
+    return {};
+  }
+
+  getBubbleContent(matchData) {
+    return null;
+  }
+
+  shouldBlockSubmit(matchData) {
+    return false;
+  }
+}
+
+/**
+ * Handler for not-allowed commands (errors/forbidden)
+ * Red background, red underline
+ */
+class NotAllowedHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(220, 38, 38, 0.15)', // Red background
+      color: '#991b1b', // Dark red text
+      textDecoration: 'none',
+      borderBottom: '2px solid #dc2626', // Red underline
+      borderRadius: '0', // No radius to avoid curved bottom border
+      cursor: 'not-allowed'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    const intent = matchData.intent || {};
+    const handler = intent.handler || {};
+
+    const description = intent.description || 'Not allowed';
+    const message = handler['message-content'] || description;
+
+    return `
+      <div style="color: #991b1b;">
+        <div style="font-weight: 600; margin-bottom: 4px; display: flex; align-items: center;">
+          <span style="margin-right: 6px;">⛔</span>
+          Not Allowed
+        </div>
+        <div style="font-size: 12px; line-height: 1.4;">
+          ${this.escapeHtml(message)}
+        </div>
+      </div>
+    `;
+  }
+
+  shouldBlockSubmit(matchData) {
+    const handler = matchData.intent?.handler || {};
+    return handler['block-submit'] === true;
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}
+
+/**
+ * Handler for show-warning commands
+ * Yellow/orange background, orange underline
+ */
+class ShowWarningHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(245, 158, 11, 0.15)', // Amber/orange background
+      color: '#92400e', // Dark amber text
+      textDecoration: 'none',
+      borderBottom: '2px solid #f59e0b', // Orange underline
+      borderRadius: '0', // No radius to avoid curved bottom border
+      cursor: 'help'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    const intent = matchData.intent || {};
+    const handler = intent.handler || {};
+
+    const description = intent.description || 'Warning';
+    const message = handler['message-content'] || description;
+
+    return `
+      <div style="color: #92400e;">
+        <div style="font-weight: 600; margin-bottom: 4px; display: flex; align-items: center;">
+          <span style="margin-right: 6px;">⚠️</span>
+          Warning
+        </div>
+        <div style="font-size: 12px; line-height: 1.4;">
+          ${this.escapeHtml(message)}
+        </div>
+      </div>
+    `;
+  }
+
+  shouldBlockSubmit(matchData) {
+    const handler = matchData.intent?.handler || {};
+    return handler['block-submit'] === true;
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}
+
+/**
+ * Handler for user-select-oneOf-and-warn commands
+ * Shows warning + dropdown
+ */
+class UserSelectWithWarningHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(245, 158, 11, 0.15)',
+      color: '#92400e',
+      textDecoration: 'none',
+      borderBottom: '2px solid #f59e0b',
+      cursor: 'pointer'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    // Will show dropdown on click instead of bubble
+    return null;
+  }
+}
+
+/**
+ * Handler for user-select-oneOf commands
+ * Shows dropdown without warning
+ */
+class UserSelectHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(59, 130, 246, 0.15)', // Blue background
+      color: '#1e40af', // Dark blue text
+      textDecoration: 'none',
+      borderBottom: '2px solid #3b82f6', // Blue underline
+      cursor: 'pointer'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    // Will show dropdown on click instead of bubble
+    return null;
+  }
+}
+
+/**
+ * Handler for api-json-table commands
+ */
+class ApiJsonTableHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(16, 185, 129, 0.15)', // Green background
+      color: '#065f46', // Dark green text
+      textDecoration: 'none',
+      borderBottom: '2px solid #10b981',
+      cursor: 'pointer'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    const intent = matchData.intent || {};
+    const description = intent.description || 'Click to view data';
+
+    return `
+      <div style="color: #065f46;">
+        <div style="font-weight: 600; margin-bottom: 4px;">
+          📊 Data Table
+        </div>
+        <div style="font-size: 12px;">
+          ${this.escapeHtml(description)}
+        </div>
+      </div>
+    `;
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}
+
+/**
+ * Handler for api-md-table commands
+ */
+class ApiMdTableHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(16, 185, 129, 0.15)',
+      color: '#065f46',
+      textDecoration: 'none',
+      borderBottom: '2px solid #10b981',
+      cursor: 'pointer'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    const intent = matchData.intent || {};
+    const description = intent.description || 'Click to view data';
+
+    return `
+      <div style="color: #065f46;">
+        <div style="font-weight: 600; margin-bottom: 4px;">
+          📊 Data Table
+        </div>
+        <div style="font-size: 12px;">
+          ${this.escapeHtml(description)}
+        </div>
+      </div>
+    `;
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}
+
+// AutoGrow - Automatically grows textarea height based on content
+
+class AutoGrow {
+  /**
+   * Create auto-grow feature
+   * @param {HTMLElement} textarea - Textarea element
+   * @param {Object} options - Configuration
+   */
+  constructor(textarea, options = {}) {
+    this.textarea = textarea;
+    this.options = {
+      maxHeight: options.maxHeight || 300,
+      minHeight: options.minHeight || 44,
+      ...options
+    };
+
+    this.initialize();
+    console.log('[AutoGrow] Initialized with max height:', this.options.maxHeight);
+  }
+
+  /**
+   * Initialize auto-grow functionality
+   */
+  initialize() {
+    // Set initial min-height
+    this.textarea.style.minHeight = `${this.options.minHeight}px`;
+
+    // Listen for input changes
+    this.textarea.addEventListener('input', () => this.adjust());
+
+    // Listen for keyboard events (for line breaks)
+    this.textarea.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        setTimeout(() => this.adjust(), 0);
+      }
+    });
+
+    // Initial adjustment
+    this.adjust();
+  }
+
+  /**
+   * Adjust textarea height based on content
+   */
+  adjust() {
+    // Reset height to calculate new height
+    this.textarea.style.height = 'auto';
+
+    // Calculate new height (respecting max height)
+    const newHeight = Math.min(
+      Math.max(this.textarea.scrollHeight, this.options.minHeight),
+      this.options.maxHeight
+    );
+
+    this.textarea.style.height = newHeight + 'px';
+  }
+
+  /**
+   * Destroy auto-grow (remove listeners and reset styles)
+   */
+  destroy() {
+    this.textarea.style.height = '';
+    this.textarea.style.minHeight = '';
+    console.log('[AutoGrow] Destroyed');
+  }
+}
+
+// TrustQuery - Lightweight library to make textareas interactive
+// Turns matching words into interactive elements with hover bubbles and click actions
+
+
+class TrustQuery {
+  // Store all instances
+  static instances = new Map();
+
+  /**
+   * Initialize TrustQuery on a textarea
+   * @param {string|HTMLElement} textareaId - ID or element of textarea
+   * @param {Object} options - Configuration options
+   * @returns {TrustQuery} Instance
+   */
+  static init(textareaId, options = {}) {
+    const textarea = typeof textareaId === 'string'
+      ? document.getElementById(textareaId)
+      : textareaId;
+
+    if (!textarea) {
+      console.error('[TrustQuery] Textarea not found:', textareaId);
+      return null;
+    }
+
+    // Check if already initialized
+    const existingInstance = TrustQuery.instances.get(textarea);
+    if (existingInstance) {
+      console.warn('[TrustQuery] Already initialized on this textarea, returning existing instance');
+      return existingInstance;
+    }
+
+    // Create new instance
+    const instance = new TrustQuery(textarea, options);
+    TrustQuery.instances.set(textarea, instance);
+
+    console.log('[TrustQuery] Initialized successfully on:', textarea.id || textarea);
+    return instance;
+  }
+
+  /**
+   * Get existing instance
+   * @param {string|HTMLElement} textareaId - ID or element
+   * @returns {TrustQuery|null} Instance or null
+   */
+  static getInstance(textareaId) {
+    const textarea = typeof textareaId === 'string'
+      ? document.getElementById(textareaId)
+      : textareaId;
+    return TrustQuery.instances.get(textarea) || null;
+  }
+
+  /**
+   * Create a TrustQuery instance
+   * @param {HTMLElement} textarea - Textarea element
+   * @param {Object} options - Configuration
+   */
+  constructor(textarea, options = {}) {
+    this.textarea = textarea;
+
+    // Normalize options (support both old and new API)
+    this.options = this.normalizeOptions(options);
+
+    this.commandMap = null;
+    this.isReady = false;
+    this.features = {};
+
+    // Initialize components
+    this.init();
+  }
+
+  /**
+   * Normalize options - support both old and new API
+   * @param {Object} options - Raw options
+   * @returns {Object} Normalized options
+   */
+  normalizeOptions(options) {
+    // New API structure
+    const triggerMap = options.triggerMap || {};
+    const features = options.features || {};
+    const ui = options.ui || {};
+    const events = options.events || {};
+
+    // Build normalized config (backward compatible)
+    return {
+      // Trigger map configuration
+      commandMapUrl: triggerMap.url || options.commandMapUrl || null,
+      commandMap: triggerMap.data || options.commandMap || null,
+      autoLoadCommandMap: options.autoLoadCommandMap !== false,
+      triggerMapSource: triggerMap.source || (triggerMap.url ? 'url' : triggerMap.data ? 'inline' : null),
+      triggerMapApi: triggerMap.api || null,
+
+      // Features
+      autoGrow: features.autoGrow || false,
+      autoGrowMaxHeight: features.maxHeight || 300,
+      debug: features.debug || false,
+
+      // UI settings
+      theme: ui.theme || options.theme || 'light',
+      bubbleDelay: ui.bubbleDelay !== undefined ? ui.bubbleDelay : (options.bubbleDelay || 200),
+      dropdownOffset: ui.dropdownOffset !== undefined ? ui.dropdownOffset : (options.dropdownOffset || 28),
+
+      // Events (callbacks)
+      onWordClick: events.onWordClick || options.onWordClick || null,
+      onWordHover: events.onWordHover || options.onWordHover || null,
+
+      // Theme/style options (passed to StyleManager)
+      backgroundColor: ui.backgroundColor || options.backgroundColor,
+      textColor: ui.textColor || options.textColor,
+      caretColor: ui.caretColor || options.caretColor,
+      borderColor: ui.borderColor || options.borderColor,
+      borderColorFocus: ui.borderColorFocus || options.borderColorFocus,
+      matchBackgroundColor: ui.matchBackgroundColor || options.matchBackgroundColor,
+      matchTextColor: ui.matchTextColor || options.matchTextColor,
+      matchHoverBackgroundColor: ui.matchHoverBackgroundColor || options.matchHoverBackgroundColor,
+      fontFamily: ui.fontFamily || options.fontFamily,
+      fontSize: ui.fontSize || options.fontSize,
+      lineHeight: ui.lineHeight || options.lineHeight,
+
+      ...options
+    };
+  }
+
+  /**
+   * Initialize all components
+   */
+  async init() {
+    console.log('[TrustQuery] Starting initialization...');
+
+    // Initialize command handler registry
+    this.commandHandlers = new CommandHandlerRegistry();
+
+    // Initialize style manager (handles all inline styling)
+    this.styleManager = new StyleManager(this.options);
+
+    // Create wrapper and overlay structure
+    this.createOverlayStructure();
+
+    // Initialize renderer
+    this.renderer = new OverlayRenderer(this.overlay, {
+      theme: this.options.theme,
+      commandHandlers: this.commandHandlers // Pass handlers for styling
+    });
+
+    // Initialize scanner (will be configured when command map loads)
+    this.scanner = new CommandScanner();
+
+    // Initialize interaction handler
+    this.interactionHandler = new InteractionHandler(this.overlay, {
+      bubbleDelay: this.options.bubbleDelay,
+      dropdownOffset: this.options.dropdownOffset,
+      onWordClick: this.options.onWordClick,
+      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
+    });
+
+    // Initialize features
+    this.initializeFeatures();
+
+    // Setup textarea event listeners
+    this.setupTextareaListeners();
+
+    // Load command map
+    if (this.options.autoLoadCommandMap) {
+      await this.loadCommandMap();
+    } else if (this.options.commandMap) {
+      this.updateCommandMap(this.options.commandMap);
+    }
+
+    // Initial render
+    this.render();
+
+    this.isReady = true;
+
+    // Auto-focus textarea to show cursor
+    setTimeout(() => {
+      this.textarea.focus();
+    }, 100);
+
+    console.log('[TrustQuery] Initialization complete');
+  }
+
+  /**
+   * Initialize optional features based on configuration
+   */
+  initializeFeatures() {
+    // Auto-grow textarea feature
+    if (this.options.autoGrow) {
+      this.features.autoGrow = new AutoGrow(this.textarea, {
+        maxHeight: this.options.autoGrowMaxHeight,
+        minHeight: 44
+      });
+      console.log('[TrustQuery] AutoGrow feature enabled');
+    }
+
+    // Debug logging feature
+    if (this.options.debug) {
+      this.enableDebugLogging();
+      console.log('[TrustQuery] Debug logging enabled');
+    }
+  }
+
+  /**
+   * Enable debug logging for events
+   */
+  enableDebugLogging() {
+    const originalOnWordHover = this.options.onWordHover;
+    const originalOnWordClick = this.options.onWordClick;
+
+    this.options.onWordHover = (matchData) => {
+      console.log('[TrustQuery Debug] Word Hover:', matchData);
+      if (originalOnWordHover) originalOnWordHover(matchData);
+    };
+
+    this.options.onWordClick = (matchData) => {
+      console.log('[TrustQuery Debug] Word Click:', matchData);
+      if (originalOnWordClick) originalOnWordClick(matchData);
+    };
+  }
+
+  /**
+   * Create the overlay structure
+   */
+  createOverlayStructure() {
+    // Create wrapper to contain both textarea and overlay
+    const wrapper = document.createElement('div');
+    wrapper.className = 'tq-wrapper';
+
+    // Wrap textarea
+    this.textarea.parentNode.insertBefore(wrapper, this.textarea);
+    wrapper.appendChild(this.textarea);
+
+    // Add TrustQuery class to textarea
+    this.textarea.classList.add('tq-textarea');
+
+    // Create overlay
+    this.overlay = document.createElement('div');
+    this.overlay.className = 'tq-overlay';
+    wrapper.appendChild(this.overlay);
+
+    // Store wrapper reference
+    this.wrapper = wrapper;
+
+    // Apply all inline styles via StyleManager
+    this.styleManager.applyAllStyles(wrapper, this.textarea, this.overlay);
+
+    // Show textarea now that structure is ready (prevents FOUC)
+    this.textarea.style.opacity = '1';
+
+    console.log('[TrustQuery] Overlay structure created with inline styles');
+  }
+
+  /**
+   * Setup textarea event listeners
+   */
+  setupTextareaListeners() {
+    // Input event - re-render on content change
+    this.textarea.addEventListener('input', () => {
+      this.render();
+    });
+
+    // Scroll event - sync overlay scroll with textarea
+    this.textarea.addEventListener('scroll', () => {
+      this.overlay.scrollTop = this.textarea.scrollTop;
+      this.overlay.scrollLeft = this.textarea.scrollLeft;
+    });
+
+    // Focus/blur events - add/remove focus class
+    this.textarea.addEventListener('focus', () => {
+      this.wrapper.classList.add('tq-focused');
+    });
+
+    this.textarea.addEventListener('blur', (e) => {
+      // Close dropdown when textarea loses focus (unless interacting with dropdown)
+      if (this.interactionHandler) {
+        // Use setTimeout to let the new focus target be set and check if clicking on dropdown
+        setTimeout(() => {
+          const activeElement = document.activeElement;
+          const isDropdownRelated = activeElement && (
+            activeElement.classList.contains('tq-dropdown-filter') ||
+            activeElement.closest('.tq-dropdown') // Check if clicking anywhere in dropdown
+          );
+
+          // Only close if not interacting with dropdown
+          if (!isDropdownRelated) {
+            this.interactionHandler.hideDropdown();
+          }
+
+          // Remove focus class only if we're truly leaving the component
+          if (!isDropdownRelated) {
+            this.wrapper.classList.remove('tq-focused');
+          }
+        }, 0);
+      }
+    });
+
+    console.log('[TrustQuery] Textarea listeners attached');
+  }
+
+  /**
+   * Load command map (static tql-triggers.json or from URL)
+   */
+  async loadCommandMap() {
+    try {
+      // Default to static file if no URL provided
+      const url = this.options.commandMapUrl || '/trustquery/tql-triggers.json';
+
+      console.log('[TrustQuery] Loading trigger map from:', url);
+      const response = await fetch(url);
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      this.updateCommandMap(data);
+
+      console.log('[TrustQuery] Trigger map loaded successfully');
+    } catch (error) {
+      console.error('[TrustQuery] Failed to load trigger map:', error);
+    }
+  }
+
+  /**
+   * Update command map
+   * @param {Object} commandMap - New command map
+   */
+  updateCommandMap(commandMap) {
+    this.commandMap = commandMap;
+    this.scanner.setCommandMap(commandMap);
+    console.log('[TrustQuery] Command map updated');
+
+    // Re-render with new command map
+    if (this.isReady) {
+      this.render();
+    }
+  }
+
+  /**
+   * Render the overlay with styled text
+   */
+  render() {
+    const text = this.textarea.value;
+
+    // Scan text for matches
+    const matches = this.scanner.scan(text);
+
+    // Render overlay with matches
+    this.renderer.render(text, matches);
+
+    // Update interaction handler with new elements
+    this.interactionHandler.update();
+  }
+
+  /**
+   * Destroy instance and cleanup
+   */
+  destroy() {
+    console.log('[TrustQuery] Destroying instance');
+
+    // Remove event listeners
+    this.textarea.removeEventListener('input', this.render);
+    this.textarea.removeEventListener('scroll', this.syncScroll);
+
+    // Cleanup interaction handler
+    if (this.interactionHandler) {
+      this.interactionHandler.destroy();
+    }
+
+    // Unwrap textarea
+    const parent = this.wrapper.parentNode;
+    parent.insertBefore(this.textarea, this.wrapper);
+    parent.removeChild(this.wrapper);
+
+    // Remove from instances
+    TrustQuery.instances.delete(this.textarea);
+
+    console.log('[TrustQuery] Destroyed');
+  }
+
+  /**
+   * Get current value
+   */
+  getValue() {
+    return this.textarea.value;
+  }
+
+  /**
+   * Set value
+   */
+  setValue(value) {
+    this.textarea.value = value;
+    this.render();
+  }
+}
+
+export { TrustQuery as default };
+//# sourceMappingURL=trustquery.js.map