@trustquery/browser 0.2.10 → 0.3.1

package/src/CSVModalManager.js

@@ -0,0 +1,417 @@
+// CSVModalManager - Handles CSV modal display with trigger matching
+// Single responsibility: manage CSV modal lifecycle and rendering
+
+export default class CSVModalManager {
+  /**
+   * Create CSV modal manager
+   * @param {Object} options - Configuration options
+   */
+  constructor(options = {}) {
+    this.options = {
+      styleManager: options.styleManager || null,
+      commandScanner: options.commandScanner || null,
+      dropdownManager: options.dropdownManager || null,
+      onCellClick: options.onCellClick || null,
+      debug: options.debug || false,
+      ...options
+    };
+
+    this.modal = null;
+    this.currentCSVData = null;
+    this.parsedData = null;
+
+    if (this.options.debug) {
+      console.log('[CSVModalManager] Initialized');
+    }
+  }
+
+  /**
+   * Parse CSV text into 2D array
+   * @param {string} csvText - Raw CSV text
+   * @returns {Array} - 2D array of cells
+   */
+  parseCSV(csvText) {
+    const lines = csvText.trim().split('\n');
+    return lines.map(line => {
+      // Simple CSV parsing (handles basic cases)
+      return line.split(',').map(cell => cell.trim());
+    });
+  }
+
+  /**
+   * Check if a cell value matches any triggers
+   * @param {string} cellValue - Cell content
+   * @returns {Object|null} - Match data or null
+   */
+  checkCellForTriggers(cellValue) {
+    if (!this.options.commandScanner || !cellValue) {
+      return null;
+    }
+
+    const commandMap = this.options.commandScanner.commandMap;
+    if (!commandMap || !commandMap['tql-triggers']) {
+      return null;
+    }
+
+    // Check all trigger states (error, warning, info)
+    const triggers = commandMap['tql-triggers'];
+    const allTriggers = [
+      ...(triggers.error || []),
+      ...(triggers.warning || []),
+      ...(triggers.info || [])
+    ];
+
+    // Check each trigger
+    for (const trigger of allTriggers) {
+      // Handle 'match' type triggers
+      if (trigger.type === 'match' && trigger.match) {
+        for (const matchText of trigger.match) {
+          if (cellValue.toLowerCase() === matchText.toLowerCase()) {
+            return {
+              text: cellValue,
+              trigger,
+              matchType: 'exact',
+              messageState: trigger.handler?.['message-state'] || 'info'
+            };
+          }
+        }
+      }
+
+      // Handle 'csv-match-column' type triggers (for CSV headers)
+      if (trigger.type === 'csv-match-column' && trigger.match) {
+        for (const matchText of trigger.match) {
+          if (cellValue.toLowerCase() === matchText.toLowerCase()) {
+            return {
+              text: cellValue,
+              trigger,
+              matchType: 'csv-column',
+              messageState: trigger.handler?.['message-state'] || 'info'
+            };
+          }
+        }
+      }
+
+      // Handle 'regex' type triggers
+      if (trigger.type === 'regex' && trigger.regex) {
+        for (const pattern of trigger.regex) {
+          const regex = new RegExp(pattern);
+          if (regex.test(cellValue)) {
+            return {
+              text: cellValue,
+              trigger,
+              matchType: 'regex',
+              messageState: trigger.handler?.['message-state'] || 'info'
+            };
+          }
+        }
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Create table cell with optional trigger highlighting
+   * @param {string} cellValue - Cell content
+   * @param {boolean} isHeader - Whether this is a header cell
+   * @param {number} rowIndex - Row index
+   * @param {number} colIndex - Column index
+   * @returns {HTMLElement} - Table cell element
+   */
+  createCell(cellValue, isHeader, rowIndex, colIndex) {
+    const cell = document.createElement(isHeader ? 'th' : 'td');
+
+    // Check for trigger matches
+    const match = this.checkCellForTriggers(cellValue);
+
+    if (match) {
+      // Create highlighted span
+      const span = document.createElement('span');
+      span.className = 'tq-csv-match';
+      span.textContent = cellValue;
+      span.setAttribute('data-message-state', match.messageState);
+      span.setAttribute('data-row', rowIndex);
+      span.setAttribute('data-col', colIndex);
+
+      // Apply highlighting styles
+      if (this.options.styleManager) {
+        this.options.styleManager.applyCellMatchStyles(span, match.messageState);
+      }
+
+      // Add click handler to show dropdown
+      span.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.handleCellMatchClick(span, match, rowIndex, colIndex);
+      });
+
+      cell.appendChild(span);
+    } else {
+      cell.textContent = cellValue;
+    }
+
+    // Apply cell styles
+    if (this.options.styleManager) {
+      if (isHeader) {
+        this.options.styleManager.applyHeaderCellStyles(cell);
+      } else {
+        this.options.styleManager.applyDataCellStyles(cell);
+      }
+    }
+
+    return cell;
+  }
+
+  /**
+   * Handle click on matched cell
+   * @param {HTMLElement} cellEl - Cell element
+   * @param {Object} match - Match data
+   * @param {number} rowIndex - Row index
+   * @param {number} colIndex - Column index
+   */
+  handleCellMatchClick(cellEl, match, rowIndex, colIndex) {
+    if (!this.options.dropdownManager) {
+      return;
+    }
+
+    // Create match data for dropdown
+    const matchData = {
+      text: match.text,
+      command: {
+        id: `csv-cell-${rowIndex}-${colIndex}`,
+        matchType: match.matchType,
+        messageState: match.messageState,
+        category: match.trigger.category,
+        intent: {
+          category: match.trigger.category,
+          handler: match.trigger.handler
+        },
+        handler: match.trigger.handler
+      },
+      intent: {
+        category: match.trigger.category,
+        handler: match.trigger.handler
+      },
+      // Store cell position for updates
+      csvCellPosition: {
+        rowIndex,
+        colIndex,
+        isHeader: rowIndex === 0
+      }
+    };
+
+    // Show dropdown
+    this.options.dropdownManager.showDropdown(cellEl, matchData);
+
+    if (this.options.debug) {
+      console.log('[CSVModalManager] Showing dropdown for cell:', match.text, 'at', rowIndex, colIndex);
+    }
+  }
+
+  /**
+   * Update column header with selected option
+   * @param {number} colIndex - Column index
+   * @param {string} appendText - Text to append (e.g., "/PST")
+   */
+  updateColumnHeader(colIndex, appendText) {
+    if (!this.parsedData || !this.parsedData[0]) {
+      return;
+    }
+
+    // Update parsed data
+    const originalHeader = this.parsedData[0][colIndex];
+
+    // Remove any existing suffix (text after /)
+    const baseHeader = originalHeader.split('/')[0];
+    this.parsedData[0][colIndex] = baseHeader + appendText;
+
+    // Update the displayed table
+    this.refreshTable();
+
+    if (this.options.debug) {
+      console.log('[CSVModalManager] Updated column', colIndex, 'from', originalHeader, 'to', this.parsedData[0][colIndex]);
+    }
+  }
+
+  /**
+   * Refresh the table display
+   */
+  refreshTable() {
+    if (!this.modal || !this.parsedData) {
+      return;
+    }
+
+    // Find table container
+    const tableContainer = this.modal.querySelector('.tq-csv-table-container');
+    if (!tableContainer) {
+      return;
+    }
+
+    // Clear and rebuild table
+    tableContainer.innerHTML = '';
+    const table = this.createTable(this.parsedData);
+    tableContainer.appendChild(table);
+  }
+
+  /**
+   * Create HTML table from parsed CSV data
+   * @param {Array} data - 2D array of cells
+   * @returns {HTMLElement} - Table element
+   */
+  createTable(data) {
+    const table = document.createElement('table');
+    table.className = 'tq-csv-table';
+
+    // Create header row
+    if (data.length > 0) {
+      const thead = document.createElement('thead');
+      const headerRow = document.createElement('tr');
+
+      data[0].forEach((cellValue, colIndex) => {
+        const cell = this.createCell(cellValue, true, 0, colIndex);
+        headerRow.appendChild(cell);
+      });
+
+      thead.appendChild(headerRow);
+      table.appendChild(thead);
+    }
+
+    // Create data rows
+    if (data.length > 1) {
+      const tbody = document.createElement('tbody');
+
+      for (let i = 1; i < data.length; i++) {
+        const row = document.createElement('tr');
+
+        data[i].forEach((cellValue, colIndex) => {
+          const cell = this.createCell(cellValue, false, i, colIndex);
+          row.appendChild(cell);
+        });
+
+        tbody.appendChild(row);
+      }
+
+      table.appendChild(tbody);
+    }
+
+    // Apply table styles
+    if (this.options.styleManager) {
+      this.options.styleManager.applyTableStyles(table);
+    }
+
+    return table;
+  }
+
+  /**
+   * Show CSV modal
+   * @param {Object} csvData - { file, text, metadata }
+   */
+  show(csvData) {
+    // Close any existing modal
+    this.hide();
+
+    this.currentCSVData = csvData;
+    this.parsedData = this.parseCSV(csvData.text);
+
+    // Create modal backdrop
+    const backdrop = document.createElement('div');
+    backdrop.className = 'tq-csv-modal-backdrop';
+
+    // Create modal
+    const modal = document.createElement('div');
+    modal.className = 'tq-csv-modal';
+
+    // Create header
+    const header = document.createElement('div');
+    header.className = 'tq-csv-modal-header';
+
+    const title = document.createElement('div');
+    title.className = 'tq-csv-modal-title';
+    title.textContent = csvData.file.name;
+
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'tq-csv-modal-close';
+    closeBtn.innerHTML = '×';
+    closeBtn.onclick = () => this.hide();
+
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+
+    // Create table container (scrollable)
+    const tableContainer = document.createElement('div');
+    tableContainer.className = 'tq-csv-table-container';
+
+    // Create table
+    const table = this.createTable(this.parsedData);
+    tableContainer.appendChild(table);
+
+    // Assemble modal
+    modal.appendChild(header);
+    modal.appendChild(tableContainer);
+
+    // Apply styles
+    if (this.options.styleManager) {
+      this.options.styleManager.applyBackdropStyles(backdrop);
+      this.options.styleManager.applyModalStyles(modal);
+      this.options.styleManager.applyHeaderStyles(header);
+      this.options.styleManager.applyTitleStyles(title);
+      this.options.styleManager.applyCloseButtonStyles(closeBtn);
+      this.options.styleManager.applyTableContainerStyles(tableContainer);
+    }
+
+    // Add to document
+    backdrop.appendChild(modal);
+    document.body.appendChild(backdrop);
+
+    this.modal = backdrop;
+
+    // Close on backdrop click
+    backdrop.addEventListener('click', (e) => {
+      if (e.target === backdrop) {
+        this.hide();
+      }
+    });
+
+    // Close on Escape key
+    this.escapeHandler = (e) => {
+      if (e.key === 'Escape') {
+        this.hide();
+      }
+    };
+    document.addEventListener('keydown', this.escapeHandler);
+
+    if (this.options.debug) {
+      console.log('[CSVModalManager] Modal shown for:', csvData.file.name);
+    }
+  }
+
+  /**
+   * Hide modal
+   */
+  hide() {
+    if (this.modal) {
+      this.modal.remove();
+      this.modal = null;
+      this.currentCSVData = null;
+      this.parsedData = null;
+    }
+
+    if (this.escapeHandler) {
+      document.removeEventListener('keydown', this.escapeHandler);
+      this.escapeHandler = null;
+    }
+
+    if (this.options.debug) {
+      console.log('[CSVModalManager] Modal hidden');
+    }
+  }
+
+  /**
+   * Cleanup
+   */
+  destroy() {
+    this.hide();
+    if (this.options.debug) {
+      console.log('[CSVModalManager] Destroyed');
+    }
+  }
+}

package/src/CSVModalStyleManager.js

@@ -0,0 +1,259 @@
+// CSVModalStyleManager - Handles styling for CSV modal
+// Single responsibility: apply consistent styles to CSV modal elements
+
+export default class CSVModalStyleManager {
+  /**
+   * Create CSV modal style manager
+   * @param {Object} options - Style options
+   */
+  constructor(options = {}) {
+    this.options = {
+      // Modal colors
+      backdropColor: options.backdropColor || 'rgba(0, 0, 0, 0.5)',
+      modalBackground: options.modalBackground || '#ffffff',
+
+      // Header colors
+      headerBackground: options.headerBackground || '#f8fafc',
+      headerBorder: options.headerBorder || '#e2e8f0',
+
+      // Table colors
+      tableBorder: options.tableBorder || '#e2e8f0',
+      headerCellBackground: options.headerCellBackground || '#f1f5f9',
+      cellBorder: options.cellBorder || '#e2e8f0',
+
+      // Highlight colors (matching textarea triggers)
+      errorHighlight: options.errorHighlight || '#fee2e2',
+      errorBorder: options.errorBorder || '#ef4444',
+      warningHighlight: options.warningHighlight || '#fef3c7',
+      warningBorder: options.warningBorder || '#f59e0b',
+      infoHighlight: options.infoHighlight || '#dbeafe',
+      infoBorder: options.infoBorder || '#3b82f6',
+
+      ...options
+    };
+  }
+
+  /**
+   * Apply backdrop styles
+   * @param {HTMLElement} backdrop - Backdrop element
+   */
+  applyBackdropStyles(backdrop) {
+    Object.assign(backdrop.style, {
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      backgroundColor: this.options.backdropColor,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: '10000',
+      padding: '20px'
+    });
+  }
+
+  /**
+   * Apply modal styles
+   * @param {HTMLElement} modal - Modal element
+   */
+  applyModalStyles(modal) {
+    Object.assign(modal.style, {
+      backgroundColor: this.options.modalBackground,
+      borderRadius: '8px',
+      boxShadow: '0 10px 40px rgba(0, 0, 0, 0.2)',
+      maxWidth: '90vw',
+      maxHeight: '90vh',
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden'
+    });
+  }
+
+  /**
+   * Apply header styles
+   * @param {HTMLElement} header - Header element
+   */
+  applyHeaderStyles(header) {
+    Object.assign(header.style, {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: '16px 20px',
+      borderBottom: `1px solid ${this.options.headerBorder}`,
+      backgroundColor: this.options.headerBackground,
+      flexShrink: '0'
+    });
+  }
+
+  /**
+   * Apply title styles
+   * @param {HTMLElement} title - Title element
+   */
+  applyTitleStyles(title) {
+    Object.assign(title.style, {
+      fontSize: '18px',
+      fontWeight: '600',
+      color: '#1e293b'
+    });
+  }
+
+  /**
+   * Apply close button styles
+   * @param {HTMLElement} button - Close button element
+   */
+  applyCloseButtonStyles(button) {
+    Object.assign(button.style, {
+      background: 'transparent',
+      border: 'none',
+      fontSize: '28px',
+      color: '#64748b',
+      cursor: 'pointer',
+      lineHeight: '1',
+      padding: '0',
+      width: '32px',
+      height: '32px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: '4px',
+      transition: 'background-color 0.2s, color 0.2s'
+    });
+
+    button.addEventListener('mouseenter', () => {
+      button.style.backgroundColor = '#f1f5f9';
+      button.style.color = '#1e293b';
+    });
+
+    button.addEventListener('mouseleave', () => {
+      button.style.backgroundColor = 'transparent';
+      button.style.color = '#64748b';
+    });
+  }
+
+  /**
+   * Apply table container styles (scrollable)
+   * @param {HTMLElement} container - Table container element
+   */
+  applyTableContainerStyles(container) {
+    Object.assign(container.style, {
+      flex: '1',
+      overflow: 'auto',
+      padding: '20px'
+    });
+  }
+
+  /**
+   * Apply table styles
+   * @param {HTMLElement} table - Table element
+   */
+  applyTableStyles(table) {
+    Object.assign(table.style, {
+      borderCollapse: 'collapse',
+      width: '100%',
+      fontSize: '14px',
+      backgroundColor: '#ffffff'
+    });
+  }
+
+  /**
+   * Apply header cell styles
+   * @param {HTMLElement} cell - Header cell element
+   */
+  applyHeaderCellStyles(cell) {
+    Object.assign(cell.style, {
+      padding: '12px 16px',
+      textAlign: 'left',
+      fontWeight: '600',
+      backgroundColor: this.options.headerCellBackground,
+      border: `1px solid ${this.options.tableBorder}`,
+      color: '#1e293b',
+      position: 'sticky',
+      top: '0',
+      zIndex: '10',
+      whiteSpace: 'nowrap'
+    });
+  }
+
+  /**
+   * Apply data cell styles
+   * @param {HTMLElement} cell - Data cell element
+   */
+  applyDataCellStyles(cell) {
+    Object.assign(cell.style, {
+      padding: '10px 16px',
+      border: `1px solid ${this.options.cellBorder}`,
+      color: '#334155',
+      whiteSpace: 'nowrap'
+    });
+  }
+
+  /**
+   * Apply match highlighting styles to cell content
+   * @param {HTMLElement} span - Span element
+   * @param {string} messageState - Message state (error, warning, info)
+   */
+  applyCellMatchStyles(span, messageState) {
+    const colorMap = {
+      'error': {
+        background: this.options.errorHighlight,
+        border: this.options.errorBorder
+      },
+      'warning': {
+        background: this.options.warningHighlight,
+        border: this.options.warningBorder
+      },
+      'info': {
+        background: this.options.infoHighlight,
+        border: this.options.infoBorder
+      }
+    };
+
+    const colors = colorMap[messageState] || colorMap.info;
+
+    Object.assign(span.style, {
+      backgroundColor: colors.background,
+      borderBottom: `2px solid ${colors.border}`,
+      padding: '2px 4px',
+      borderRadius: '3px',
+      cursor: 'pointer',
+      transition: 'background-color 0.2s',
+      display: 'inline-block'
+    });
+
+    // Hover effect
+    span.addEventListener('mouseenter', () => {
+      span.style.backgroundColor = this.adjustBrightness(colors.background, -10);
+    });
+
+    span.addEventListener('mouseleave', () => {
+      span.style.backgroundColor = colors.background;
+    });
+  }
+
+  /**
+   * Adjust color brightness
+   * @param {string} color - Hex color
+   * @param {number} amount - Amount to adjust (-255 to 255)
+   * @returns {string} - Adjusted color
+   */
+  adjustBrightness(color, amount) {
+    // Simple brightness adjustment for hex colors
+    const hex = color.replace('#', '');
+    const num = parseInt(hex, 16);
+    const r = Math.max(0, Math.min(255, (num >> 16) + amount));
+    const g = Math.max(0, Math.min(255, ((num >> 8) & 0x00FF) + amount));
+    const b = Math.max(0, Math.min(255, (num & 0x0000FF) + amount));
+    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+  }
+
+  /**
+   * Update theme colors dynamically
+   * @param {Object} newColors - New color options
+   */
+  updateTheme(newColors) {
+    Object.assign(this.options, newColors);
+  }
+}

package/src/DropdownManager.js

@@ -102,8 +102,9 @@ export default class DropdownManager {
     // Setup keyboard navigation
     this.setupKeyboardHandlers();
 
-    // Close on click outside
+    // Close on click outside (using mousedown to match icon behavior)
     setTimeout(() => {
+      document.addEventListener('mousedown', this.closeDropdownHandler);
       document.addEventListener('click', this.closeDropdownHandler);
     }, 0);
 
@@ -428,6 +429,7 @@ export default class DropdownManager {
       this.dropdownOptions = null;
       this.dropdownMatchData = null;
       this.selectedDropdownIndex = 0;
+      document.removeEventListener('mousedown', this.closeDropdownHandler);
       document.removeEventListener('click', this.closeDropdownHandler);
       document.removeEventListener('keydown', this.keyboardHandler);
     }
@@ -437,8 +439,12 @@ export default class DropdownManager {
    * Close dropdown handler (bound to document)
    */
   closeDropdownHandler = (e) => {
-    // Only close if clicking outside the dropdown
+    // Only close if clicking outside the dropdown AND not on the trigger element
     if (this.activeDropdown && !this.activeDropdown.contains(e.target)) {
+      // Check if clicking on the trigger element itself - don't close in that case
+      if (this.activeDropdownMatch && (this.activeDropdownMatch === e.target || this.activeDropdownMatch.contains(e.target))) {
+        return;
+      }
       this.hideDropdown();
     }
   }