@trustquery/browser 0.3.0 → 0.3.2

package/dist/trustquery.js

@@ -3249,6 +3249,1376 @@ class MobileKeyboardHandler {
   }
 }
 
+// AttachmentManager - Handles CSV file attachments with drag & drop
+// Single responsibility: manage attachment state and file operations
+
+class AttachmentManager {
+  /**
+   * Create attachment manager
+   * @param {Object} options - Configuration options
+   */
+  constructor(options = {}) {
+    this.options = {
+      container: options.container || null,
+      dropZone: options.dropZone || null,
+      styleManager: options.styleManager || null,
+      commandScanner: options.commandScanner || null, // For scanning CSV columns
+      dropdownManager: options.dropdownManager || null, // For showing dropdown on warning click
+      csvModalManager: options.csvModalManager || null, // For displaying CSV content in modal
+      onAttachmentAdd: options.onAttachmentAdd || null,
+      onAttachmentRemove: options.onAttachmentRemove || null,
+      debug: options.debug || false,
+      ...options
+    };
+
+    this.attachedFiles = new Map(); // Store attached files
+
+    if (this.options.debug) {
+      console.log('[AttachmentManager] Initialized');
+    }
+  }
+
+  /**
+   * Initialize drag & drop handlers
+   */
+  init() {
+    if (!this.options.container || !this.options.dropZone) {
+      console.warn('[AttachmentManager] Missing container or dropZone');
+      return;
+    }
+
+    this.setupDragAndDrop();
+
+    if (this.options.debug) {
+      console.log('[AttachmentManager] Drag & drop initialized');
+    }
+  }
+
+  /**
+   * Setup drag & drop event handlers
+   */
+  setupDragAndDrop() {
+    const dropZone = this.options.dropZone;
+
+    dropZone.addEventListener('dragover', this.handleDragOver);
+    dropZone.addEventListener('dragleave', this.handleDragLeave);
+    dropZone.addEventListener('drop', this.handleDrop);
+  }
+
+  /**
+   * Handle drag over event
+   */
+  handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.options.dropZone.style.background = '#f0f9ff';
+    this.options.dropZone.style.borderColor = '#3b82f6';
+  };
+
+  /**
+   * Handle drag leave event
+   */
+  handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.options.dropZone.style.background = '';
+    this.options.dropZone.style.borderColor = '';
+  };
+
+  /**
+   * Handle drop event
+   */
+  handleDrop = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.options.dropZone.style.background = '';
+    this.options.dropZone.style.borderColor = '';
+
+    const files = Array.from(e.dataTransfer.files);
+    for (const file of files) {
+      await this.addAttachment(file);
+    }
+  };
+
+  /**
+   * Parse CSV and extract metadata
+   * @param {string} csvText - CSV file content
+   * @returns {Object} - { rows, columns, headers }
+   */
+  parseCSVMetadata(csvText) {
+    const lines = csvText.trim().split('\n');
+    const rows = lines.length;
+
+    // Parse first row as headers
+    const firstLine = lines[0] || '';
+    const headers = firstLine.split(',').map(h => h.trim());
+    const columns = headers.length;
+
+    return { rows, columns, headers };
+  }
+
+  /**
+   * Scan CSV headers for trigger matches
+   * @param {Array} headers - CSV column headers
+   * @returns {Array} - Array of matches
+   */
+  scanCSVHeaders(headers) {
+    if (!this.options.commandScanner) {
+      return [];
+    }
+
+    const matches = [];
+
+    // Get CSV-specific triggers from command map
+    const commandMap = this.options.commandScanner.commandMap;
+    if (!commandMap || !commandMap['tql-triggers']) {
+      return [];
+    }
+
+    // Check warning triggers for csv-match-column type
+    const warnings = commandMap['tql-triggers'].warning || [];
+    const csvTriggers = warnings.filter(t => t.type === 'csv-match-column');
+
+    // Check each header against CSV triggers
+    headers.forEach((header, index) => {
+      csvTriggers.forEach(trigger => {
+        if (trigger.match && trigger.match.includes(header)) {
+          matches.push({
+            header,
+            columnIndex: index,
+            trigger,
+            intent: {
+              category: trigger.category,
+              handler: trigger.handler
+            }
+          });
+        }
+      });
+    });
+
+    return matches;
+  }
+
+  /**
+   * Format file size in KB
+   * @param {number} bytes - File size in bytes
+   * @returns {string} - Formatted size
+   */
+  formatFileSize(bytes) {
+    return (bytes / 1024).toFixed(1) + ' KB';
+  }
+
+  /**
+   * Create attachment wrapper with icon placeholder and card
+   * @param {File} file - File object
+   * @param {string} csvText - CSV file content
+   * @param {Object} metadata - { rows, columns, headers }
+   * @param {Array} matches - CSV header matches
+   * @returns {HTMLElement} - Wrapper element
+   */
+  createAttachmentCard(file, csvText, metadata, matches = []) {
+    // Create wrapper container
+    const wrapper = document.createElement('div');
+    wrapper.className = 'tq-attachment-wrapper';
+
+    // Create icon placeholder
+    const iconPlaceholder = document.createElement('div');
+    iconPlaceholder.className = 'tq-attachment-icon-placeholder';
+
+    // Add warning/error/info icon if matches found
+    let icon = null;
+    if (matches.length > 0) {
+      const match = matches[0];
+      const messageState = match.intent?.handler?.['message-state'] || 'warning';
+
+      // Map message state to icon filename
+      const iconMap = {
+        'error': 'trustquery-error.svg',
+        'warning': 'trustquery-warning.svg',
+        'info': 'trustquery-info.svg'
+      };
+
+      icon = document.createElement('img');
+      icon.className = 'tq-attachment-icon';
+      icon.src = `./assets/${iconMap[messageState] || iconMap.warning}`;
+      icon.title = `CSV column ${messageState} - click to review`;
+
+      // Handle icon click - show dropdown (using mousedown to prevent double-firing)
+      icon.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.handleWarningClick(icon, matches, wrapper, file.name);
+      });
+
+      iconPlaceholder.appendChild(icon);
+    }
+
+    // Create card
+    const card = document.createElement('div');
+    card.className = 'tq-attachment-card';
+
+    // Remove button
+    const removeBtn = document.createElement('button');
+    removeBtn.className = 'tq-attachment-remove';
+    removeBtn.innerHTML = '×';
+    removeBtn.onclick = () => this.removeAttachment(file.name, wrapper);
+
+    // File name header
+    const fileNameHeader = document.createElement('div');
+    fileNameHeader.className = 'tq-attachment-header';
+    fileNameHeader.textContent = file.name;
+
+    // Metadata row
+    const metaRow = document.createElement('div');
+    metaRow.className = 'tq-attachment-meta';
+
+    const sizeSpan = document.createElement('span');
+    sizeSpan.textContent = this.formatFileSize(file.size);
+
+    const rowsSpan = document.createElement('span');
+    rowsSpan.textContent = `${metadata.rows} rows`;
+
+    const colsSpan = document.createElement('span');
+    colsSpan.textContent = `${metadata.columns} cols`;
+
+    metaRow.appendChild(sizeSpan);
+    metaRow.appendChild(rowsSpan);
+    metaRow.appendChild(colsSpan);
+
+    card.appendChild(removeBtn);
+    card.appendChild(fileNameHeader);
+    card.appendChild(metaRow);
+
+    // Apply styles via StyleManager
+    if (this.options.styleManager) {
+      this.options.styleManager.applyWrapperStyles(wrapper);
+      this.options.styleManager.applyIconPlaceholderStyles(iconPlaceholder, matches.length > 0);
+      this.options.styleManager.applyIconStyles(icon);
+      this.options.styleManager.applyCardStyles(card);
+      this.options.styleManager.applyRemoveButtonStyles(removeBtn);
+      this.options.styleManager.applyHeaderStyles(fileNameHeader);
+      this.options.styleManager.applyMetaStyles(metaRow);
+    }
+
+    // Add click handler to card to open CSV modal
+    card.style.cursor = 'pointer';
+    card.addEventListener('click', (e) => {
+      // Don't open modal if clicking remove button
+      if (e.target === removeBtn || removeBtn.contains(e.target)) {
+        return;
+      }
+
+      if (this.options.csvModalManager) {
+        // Get the latest CSV text from attachedFiles (in case it was updated)
+        const attachment = this.attachedFiles.get(file.name);
+        const currentText = attachment ? attachment.text : csvText;
+        const currentMetadata = attachment ? attachment.metadata : metadata;
+
+        this.options.csvModalManager.show({
+          file,
+          text: currentText,
+          metadata: currentMetadata
+        });
+      }
+    });
+
+    // Assemble structure
+    wrapper.appendChild(iconPlaceholder);
+    wrapper.appendChild(card);
+
+    return wrapper;
+  }
+
+  /**
+   * Update CSV column header in stored text
+   * @param {string} fileName - File name
+   * @param {number} colIndex - Column index
+   * @param {string} appendText - Text to append (e.g., "/PST")
+   */
+  updateCSVColumnHeader(fileName, colIndex, appendText) {
+    const attachment = this.attachedFiles.get(fileName);
+    if (!attachment) {
+      console.warn('[AttachmentManager] File not found:', fileName);
+      return;
+    }
+
+    // Parse CSV and update header
+    const lines = attachment.text.split('\n');
+    if (lines.length === 0) {
+      return;
+    }
+
+    const headers = lines[0].split(',').map(h => h.trim());
+    if (colIndex >= headers.length) {
+      return;
+    }
+
+    // Remove any existing suffix (text after /)
+    const baseHeader = headers[colIndex].split('/')[0];
+    headers[colIndex] = baseHeader + appendText;
+
+    // Update first line
+    lines[0] = headers.join(', ');
+
+    // Update stored text
+    attachment.text = lines.join('\n');
+
+    // Update metadata
+    attachment.metadata.headers = headers;
+
+    // Re-scan headers for matches
+    const newMatches = this.scanCSVHeaders(headers);
+    attachment.matches = newMatches;
+
+    // Update icon visibility based on matches
+    if (attachment.wrapper) {
+      const iconPlaceholder = attachment.wrapper.querySelector('.tq-attachment-icon-placeholder');
+      const existingIcon = iconPlaceholder?.querySelector('.tq-attachment-icon');
+
+      if (newMatches.length === 0 && existingIcon) {
+        // No more matches - remove the icon
+        existingIcon.remove();
+        if (this.options.debug) {
+          console.log('[AttachmentManager] Removed warning icon - all warnings resolved');
+        }
+      } else if (newMatches.length > 0 && !existingIcon) {
+        // New matches appeared - add icon (shouldn't happen in normal flow, but handle it)
+        const match = newMatches[0];
+        const messageState = match.intent?.handler?.['message-state'] || 'warning';
+        const iconMap = {
+          'error': 'trustquery-error.svg',
+          'warning': 'trustquery-warning.svg',
+          'info': 'trustquery-info.svg'
+        };
+
+        const icon = document.createElement('img');
+        icon.className = 'tq-attachment-icon';
+        icon.src = `./assets/${iconMap[messageState] || iconMap.warning}`;
+        icon.title = `CSV column ${messageState} - click to review`;
+
+        // Handle icon click
+        icon.addEventListener('mousedown', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.handleWarningClick(icon, newMatches, attachment.wrapper, fileName);
+        });
+
+        // Apply styles if styleManager exists
+        if (this.options.styleManager) {
+          this.options.styleManager.applyIconStyles(icon);
+        }
+
+        iconPlaceholder?.appendChild(icon);
+
+        if (this.options.debug) {
+          console.log('[AttachmentManager] Added warning icon - new warnings detected');
+        }
+      }
+    }
+
+    if (this.options.debug) {
+      console.log('[AttachmentManager] Updated CSV column', colIndex, 'to', headers[colIndex]);
+    }
+  }
+
+  /**
+   * Handle warning icon click - show dropdown
+   * @param {HTMLElement} iconEl - Warning icon element
+   * @param {Array} matches - CSV header matches
+   * @param {HTMLElement} wrapper - Wrapper element
+   * @param {string} fileName - File name for tracking
+   */
+  handleWarningClick(iconEl, matches, wrapper, fileName) {
+    if (!this.options.dropdownManager || matches.length === 0) {
+      return;
+    }
+
+    // Use the first match (could be enhanced to handle multiple)
+    const match = matches[0];
+
+    // Create match data similar to text matches
+    const matchData = {
+      text: match.header,
+      command: {
+        id: `csv-column-${match.columnIndex}`,
+        match: match.header,
+        matchType: 'csv-column',
+        messageState: match.intent.handler['message-state'] || 'warning',
+        category: match.intent.category,
+        intent: match.intent,
+        handler: match.intent.handler
+      },
+      intent: match.intent,
+      // Add context for attachment icon click
+      isAttachmentIcon: true,
+      fileName: fileName,
+      csvColumnIndex: match.columnIndex
+    };
+
+    // Show dropdown using DropdownManager
+    this.options.dropdownManager.showDropdown(iconEl, matchData);
+
+    if (this.options.debug) {
+      console.log('[AttachmentManager] Showing dropdown for CSV column:', match.header);
+    }
+  }
+
+  /**
+   * Add attachment to container
+   * @param {File} file - File to attach
+   */
+  async addAttachment(file) {
+    if (!file.name.endsWith('.csv')) {
+      alert('Only CSV files are supported');
+      return;
+    }
+
+    // Check if already attached
+    if (this.attachedFiles.has(file.name)) {
+      console.warn('[AttachmentManager] File already attached:', file.name);
+      return;
+    }
+
+    // Read file to get metadata
+    const text = await file.text();
+    const metadata = this.parseCSVMetadata(text);
+
+    // Scan CSV headers for trigger matches
+    const matches = this.scanCSVHeaders(metadata.headers || []);
+
+    // Create wrapper with card and icon
+    const wrapper = this.createAttachmentCard(file, text, metadata, matches);
+
+    // Store file reference with matches and text
+    this.attachedFiles.set(file.name, { file, text, wrapper, metadata, matches });
+
+    // Add to container
+    this.options.container.appendChild(wrapper);
+    this.options.container.classList.add('has-attachments');
+
+    // Trigger callback
+    if (this.options.onAttachmentAdd) {
+      this.options.onAttachmentAdd({ file, metadata, matches });
+    }
+
+    if (this.options.debug) {
+      console.log('[AttachmentManager] Added:', file.name, metadata, 'matches:', matches);
+    }
+  }
+
+  /**
+   * Remove attachment
+   * @param {string} fileName - File name to remove
+   * @param {HTMLElement} wrapper - Wrapper element
+   */
+  removeAttachment(fileName, wrapper) {
+    wrapper.remove();
+    const attachment = this.attachedFiles.get(fileName);
+    this.attachedFiles.delete(fileName);
+
+    // Remove has-attachments class if no attachments left
+    if (this.attachedFiles.size === 0) {
+      this.options.container.classList.remove('has-attachments');
+    }
+
+    // Trigger callback
+    if (this.options.onAttachmentRemove && attachment) {
+      this.options.onAttachmentRemove({ file: attachment.file, metadata: attachment.metadata });
+    }
+
+    if (this.options.debug) {
+      console.log('[AttachmentManager] Removed:', fileName);
+    }
+  }
+
+  /**
+   * Get all attached files
+   * @returns {Array} - Array of { file, metadata }
+   */
+  getAttachments() {
+    return Array.from(this.attachedFiles.values());
+  }
+
+  /**
+   * Clear all attachments
+   */
+  clearAll() {
+    this.attachedFiles.forEach((attachment, fileName) => {
+      this.removeAttachment(fileName, attachment.wrapper);
+    });
+  }
+
+  /**
+   * Cleanup
+   */
+  destroy() {
+    if (this.options.dropZone) {
+      this.options.dropZone.removeEventListener('dragover', this.handleDragOver);
+      this.options.dropZone.removeEventListener('dragleave', this.handleDragLeave);
+      this.options.dropZone.removeEventListener('drop', this.handleDrop);
+    }
+
+    this.clearAll();
+
+    if (this.options.debug) {
+      console.log('[AttachmentManager] Destroyed');
+    }
+  }
+}
+
+// AttachmentStyleManager - Handles all styling for attachment cards
+// Single responsibility: apply consistent inline styles to attachment UI elements
+
+class AttachmentStyleManager {
+  /**
+   * Create attachment style manager
+   * @param {Object} options - Style options
+   */
+  constructor(options = {}) {
+    this.options = {
+      // Card colors
+      cardBackground: options.cardBackground || '#f0f9ff', // Light blue background
+      cardBorder: options.cardBorder || '#e2e8f0',
+
+      // Text colors
+      headerColor: options.headerColor || '#1e293b',
+      metaColor: options.metaColor || '#64748b',
+
+      // Remove button colors
+      removeBackground: options.removeBackground || '#ef4444',
+      removeBackgroundHover: options.removeBackgroundHover || '#dc2626',
+
+      ...options
+    };
+  }
+
+  /**
+   * Apply wrapper styles (container for icon + card)
+   * @param {HTMLElement} wrapper - Wrapper element
+   */
+  applyWrapperStyles(wrapper) {
+    Object.assign(wrapper.style, {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      marginBottom: '6px'
+    });
+  }
+
+  /**
+   * Apply icon placeholder styles
+   * @param {HTMLElement} placeholder - Icon placeholder element
+   * @param {boolean} hasIcon - Whether icon is present
+   */
+  applyIconPlaceholderStyles(placeholder, hasIcon) {
+    Object.assign(placeholder.style, {
+      width: '24px',
+      minWidth: '24px',
+      height: '48px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: '0'
+    });
+  }
+
+  /**
+   * Apply icon styles
+   * @param {HTMLElement} icon - Icon element
+   */
+  applyIconStyles(icon) {
+    if (!icon) return;
+
+    Object.assign(icon.style, {
+      width: '20px',
+      height: '20px',
+      cursor: 'pointer',
+      transition: 'transform 0.2s'
+    });
+
+    // Hover effect - slight scale
+    icon.addEventListener('mouseenter', () => {
+      icon.style.transform = 'scale(1.1)';
+    });
+
+    icon.addEventListener('mouseleave', () => {
+      icon.style.transform = 'scale(1)';
+    });
+  }
+
+  /**
+   * Apply card styles (reduced padding to prevent cutoff)
+   * @param {HTMLElement} card - Card element
+   */
+  applyCardStyles(card) {
+    Object.assign(card.style, {
+      position: 'relative',
+      background: this.options.cardBackground,
+      border: `1px solid ${this.options.cardBorder}`,
+      borderRadius: '6px',
+      padding: '6px 10px',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2px',
+      boxSizing: 'border-box',
+      maxHeight: '48px',
+      overflow: 'hidden',
+      flex: '1' // Take remaining space in wrapper
+    });
+  }
+
+  /**
+   * Apply remove button styles (dark icon, no background)
+   * @param {HTMLElement} button - Remove button element
+   */
+  applyRemoveButtonStyles(button) {
+    Object.assign(button.style, {
+      position: 'absolute',
+      top: '4px', // Adjusted for reduced padding
+      right: '6px',
+      background: 'transparent',
+      color: '#64748b',
+      border: 'none',
+      borderRadius: '3px',
+      width: '18px',
+      height: '18px',
+      fontSize: '18px',
+      lineHeight: '1',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transition: 'color 0.2s',
+      padding: '0',
+      fontWeight: '400'
+    });
+
+    // Hover effect - darker color
+    button.addEventListener('mouseenter', () => {
+      button.style.color = '#1e293b'; // Darker on hover
+    });
+
+    button.addEventListener('mouseleave', () => {
+      button.style.color = '#64748b'; // Back to gray
+    });
+  }
+
+  /**
+   * Apply header (file name) styles - smaller size
+   * @param {HTMLElement} header - Header element
+   */
+  applyHeaderStyles(header) {
+    Object.assign(header.style, {
+      fontWeight: '600',
+      fontSize: '11px', // Further reduced from 12px to 11px
+      color: this.options.headerColor,
+      paddingRight: '22px',
+      wordBreak: 'break-word',
+      lineHeight: '1.2' // Tighter line height
+    });
+  }
+
+  /**
+   * Apply metadata row styles
+   * @param {HTMLElement} metaRow - Metadata row element
+   */
+  applyMetaStyles(metaRow) {
+    Object.assign(metaRow.style, {
+      display: 'flex',
+      gap: '10px', // Slightly reduced from 12px
+      fontSize: '10px', // Reduced from 11px
+      color: this.options.metaColor,
+      lineHeight: '1.2'
+    });
+  }
+
+  /**
+   * Update theme colors dynamically
+   * @param {Object} newColors - New color options
+   */
+  updateTheme(newColors) {
+    Object.assign(this.options, newColors);
+  }
+}
+
+// CSVModalManager - Handles CSV modal display with trigger matching
+// Single responsibility: manage CSV modal lifecycle and rendering
+
+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');
+    }
+  }
+}
+
+// CSVModalStyleManager - Handles styling for CSV modal
+// Single responsibility: apply consistent styles to CSV modal elements
+
+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);
+  }
+}
+
 // TrustQuery - Lightweight library to make textareas interactive
 // Turns matching words into interactive elements with hover bubbles and click actions
 
@@ -3794,5 +5164,5 @@ class TrustQuery {
   }
 }
 
-export { TrustQuery as default };
+export { AttachmentManager, AttachmentStyleManager, CSVModalManager, CSVModalStyleManager, TrustQuery as default };
 //# sourceMappingURL=trustquery.js.map