@trustquery/browser 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustquery/browser",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Turn any textarea into an interactive trigger-based editor with inline styling",
   "type": "module",
   "main": "dist/trustquery.js",

package/src/AttachmentManager.js

@@ -0,0 +1,516 @@
+// AttachmentManager - Handles CSV file attachments with drag & drop
+// Single responsibility: manage attachment state and file operations
+
+export default 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');
+    }
+  }
+}

package/src/AttachmentStyleManager.js

@@ -0,0 +1,174 @@
+// AttachmentStyleManager - Handles all styling for attachment cards
+// Single responsibility: apply consistent inline styles to attachment UI elements
+
+export default 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);
+  }
+}