@trustquery/browser 0.2.8 → 0.2.10

package/dist/trustquery.js

@@ -764,8 +764,123 @@ class BubbleManager {
   }
 }
 
+// EdgeDetectionHelper - Calculates dropdown positioning to prevent overflow off viewport edges
+
+class EdgeDetectionHelper {
+  /**
+   * Calculate optimal position for dropdown to prevent viewport overflow
+   * @param {Object} options - Positioning options
+   * @param {DOMRect} options.matchRect - Bounding rect of the match element
+   * @param {DOMRect} options.dropdownRect - Bounding rect of the dropdown
+   * @param {number} options.offset - Offset from match element (default: 28)
+   * @param {number} options.padding - Padding from viewport edges (default: 10)
+   * @returns {Object} - { top, left } position in pixels
+   */
+  static calculatePosition({ matchRect, dropdownRect, offset = 28, padding = 10 }) {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    console.log('[EdgeDetectionHelper] Calculation inputs:');
+    console.log('  Match rect:', { left: matchRect.left, top: matchRect.top, width: matchRect.width });
+    console.log('  Dropdown rect:', { width: dropdownRect.width, height: dropdownRect.height });
+    console.log('  Viewport:', { width: viewportWidth, height: viewportHeight });
+    console.log('  Scroll:', { x: window.scrollX, y: window.scrollY });
+
+    // Calculate initial position (above match by default, since input is at bottom)
+    let top = matchRect.top + window.scrollY - dropdownRect.height - offset;
+    let left = matchRect.left + window.scrollX;
+
+    console.log('  Initial position:', { left, top });
+
+    // Vertical positioning: Check if dropdown goes off top edge
+    if (top < window.scrollY) {
+      // Position below match instead
+      top = matchRect.bottom + window.scrollY + offset;
+      console.log('  Adjusted for top overflow, new top:', top);
+    }
+
+    // Horizontal positioning: Check if dropdown goes off right edge
+    const rightEdge = left + dropdownRect.width;
+    const viewportRightEdge = viewportWidth + window.scrollX;
+
+    console.log('  Right edge check:', { rightEdge, viewportRightEdge: viewportRightEdge - padding });
+
+    if (rightEdge > viewportRightEdge - padding) {
+      // Calculate how much we overflow past the right edge
+      const overflow = rightEdge - (viewportRightEdge - padding);
+      console.log('  Right overflow detected:', overflow, 'px');
+
+      // Shift left by the overflow amount
+      left = left - overflow;
+      console.log('  Adjusted left position:', left);
+
+      // Ensure we don't go off the left edge either
+      const minLeft = window.scrollX + padding;
+      if (left < minLeft) {
+        console.log('  Hit left edge, clamping to:', minLeft);
+        left = minLeft;
+      }
+    }
+
+    // Also check left edge (in case match is near left edge)
+    const minLeft = window.scrollX + padding;
+    if (left < minLeft) {
+      console.log('  Left edge adjustment:', minLeft);
+      left = minLeft;
+    }
+
+    console.log('[EdgeDetectionHelper] Final position:', { left, top });
+
+    return { top, left };
+  }
+
+  /**
+   * Check if dropdown would overflow the right edge
+   * @param {DOMRect} matchRect - Match element rect
+   * @param {DOMRect} dropdownRect - Dropdown rect
+   * @param {number} padding - Padding from edge
+   * @returns {boolean} - True if would overflow
+   */
+  static wouldOverflowRight(matchRect, dropdownRect, padding = 10) {
+    const left = matchRect.left + window.scrollX;
+    const rightEdge = left + dropdownRect.width;
+    const viewportRightEdge = window.innerWidth + window.scrollX;
+
+    return rightEdge > viewportRightEdge - padding;
+  }
+
+  /**
+   * Check if dropdown would overflow the top edge
+   * @param {DOMRect} matchRect - Match element rect
+   * @param {DOMRect} dropdownRect - Dropdown rect
+   * @param {number} offset - Offset from match
+   * @returns {boolean} - True if would overflow
+   */
+  static wouldOverflowTop(matchRect, dropdownRect, offset = 28) {
+    const top = matchRect.top + window.scrollY - dropdownRect.height - offset;
+    return top < window.scrollY;
+  }
+
+  /**
+   * Calculate overflow amount on the right edge
+   * @param {DOMRect} matchRect - Match element rect
+   * @param {DOMRect} dropdownRect - Dropdown rect
+   * @param {number} padding - Padding from edge
+   * @returns {number} - Overflow amount in pixels (0 if no overflow)
+   */
+  static calculateRightOverflow(matchRect, dropdownRect, padding = 10) {
+    const left = matchRect.left + window.scrollX;
+    const rightEdge = left + dropdownRect.width;
+    const viewportRightEdge = window.innerWidth + window.scrollX;
+
+    const overflow = rightEdge - (viewportRightEdge - padding);
+    return Math.max(0, overflow);
+  }
+}
+
 // DropdownManager - Handles dropdown menus with filtering, keyboard navigation, and selection
 
+
 class DropdownManager {
   /**
    * Create dropdown manager
@@ -819,9 +934,10 @@ class DropdownManager {
     const dropdown = document.createElement('div');
     dropdown.className = 'tq-dropdown';
 
-    // Apply inline styles via StyleManager
+    // Apply inline styles via StyleManager (pass category for width adjustment)
+    const category = matchData.intent?.category || '';
     if (this.options.styleManager) {
-      this.options.styleManager.applyDropdownStyles(dropdown);
+      this.options.styleManager.applyDropdownStyles(dropdown, category);
     }
 
     // Add header container based on message-state
@@ -1005,6 +1121,10 @@ class DropdownManager {
    * @param {Object} matchData - Match data
    */
   createDropdownItems(dropdown, options, matchData) {
+    // Check if this is a display-menu-with-uri category
+    const category = matchData.intent?.category || '';
+    const hasUriSupport = category === 'display-menu-with-uri';
+
     options.forEach((option, index) => {
       // Check if this is a user-input option
       if (typeof option === 'object' && option['user-input'] === true) {
@@ -1014,7 +1134,82 @@ class DropdownManager {
 
       const item = document.createElement('div');
       item.className = 'tq-dropdown-item';
-      item.textContent = typeof option === 'string' ? option : option.label || option.value;
+
+      // Create label text
+      const labelText = typeof option === 'string' ? option : option.label || option.value;
+
+      // If display-menu-with-uri and option has uri, create label + link icon
+      if (hasUriSupport && typeof option === 'object' && option.uri) {
+        // Create label span
+        const labelSpan = document.createElement('span');
+        labelSpan.className = 'tq-dropdown-item-label';
+        labelSpan.textContent = labelText;
+        labelSpan.style.flex = '1';
+        labelSpan.style.cursor = 'pointer';
+
+        // Create link with truncated URI text
+        const linkIcon = document.createElement('a');
+        linkIcon.className = 'tq-dropdown-item-link';
+        linkIcon.href = option.uri;
+        linkIcon.target = '_blank';
+        linkIcon.rel = 'noopener noreferrer';
+
+        // Truncate URI to 20 characters
+        let displayUri = option.uri;
+        if (displayUri.length > 20) {
+          displayUri = displayUri.substring(0, 20) + '...';
+        }
+        linkIcon.textContent = displayUri;
+
+        linkIcon.style.marginLeft = '8px';
+        linkIcon.style.fontSize = '12px';
+        linkIcon.style.color = '#3b82f6';
+        linkIcon.style.textDecoration = 'underline';
+        linkIcon.style.opacity = '0.7';
+        linkIcon.style.transition = 'opacity 0.2s';
+        linkIcon.style.whiteSpace = 'nowrap';
+        linkIcon.title = option.uri;
+        linkIcon.setAttribute('aria-label', `Open ${labelText} documentation`);
+
+        // Hover effect for link icon
+        linkIcon.addEventListener('mouseenter', () => {
+          linkIcon.style.opacity = '1';
+        });
+        linkIcon.addEventListener('mouseleave', () => {
+          linkIcon.style.opacity = '0.6';
+        });
+
+        // Prevent link click from selecting the option
+        linkIcon.addEventListener('click', (e) => {
+          e.stopPropagation();
+          // Link will open naturally via href
+        });
+
+        // Set item to flex layout
+        item.style.display = 'flex';
+        item.style.alignItems = 'center';
+        item.style.justifyContent = 'space-between';
+
+        item.appendChild(labelSpan);
+        item.appendChild(linkIcon);
+
+        // Only label click should select the option
+        labelSpan.addEventListener('click', (e) => {
+          e.stopPropagation();
+          this.handleDropdownSelect(option, matchData);
+          this.hideDropdown();
+        });
+      } else {
+        // Regular option without URI
+        item.textContent = labelText;
+
+        // Click anywhere on item to select
+        item.addEventListener('click', (e) => {
+          e.stopPropagation();
+          this.handleDropdownSelect(option, matchData);
+          this.hideDropdown();
+        });
+      }
 
       // Highlight first item by default
       if (index === 0) {
@@ -1026,11 +1221,6 @@ class DropdownManager {
         this.options.styleManager.applyDropdownItemStyles(item);
       }
 
-      item.addEventListener('click', (e) => {
-        e.stopPropagation();
-        this.handleDropdownSelect(option, matchData);
-        this.hideDropdown();
-      });
       dropdown.appendChild(item);
     });
   }
@@ -1138,26 +1328,49 @@ class DropdownManager {
    * @param {HTMLElement} matchEl - Match element
    */
   positionDropdown(dropdown, matchEl) {
-    const rect = matchEl.getBoundingClientRect();
+    const matchRect = matchEl.getBoundingClientRect();
+
+    // Force a layout calculation by accessing offsetWidth
+    // This ensures we get the correct dropdown dimensions after styles are applied
+    dropdown.offsetWidth;
+
     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;
+    console.log('[DropdownManager] Positioning Debug:');
+    console.log('  Trigger position (x, y):', matchRect.left, matchRect.top);
+    console.log('  Dropdown width:', dropdownRect.width);
+    console.log('  Viewport width:', window.innerWidth);
+
+    // Use EdgeDetectionHelper to calculate optimal position
+    // Increased padding to account for body margins/transforms and ensure visible clearance
+    const position = EdgeDetectionHelper.calculatePosition({
+      matchRect,
+      dropdownRect,
+      offset: this.options.dropdownOffset,
+      padding: 35
+    });
 
-    // If dropdown goes off top edge, position below instead
-    if (top < window.scrollY) {
-      top = rect.bottom + window.scrollY + offset;
-    }
+    console.log('  Calculated dropdown position (x, y):', position.left, position.top);
 
-    // Check if dropdown goes off right edge
-    if (left + dropdownRect.width > window.innerWidth) {
-      left = window.innerWidth - dropdownRect.width - 10;
-    }
+    dropdown.style.top = `${position.top}px`;
+    dropdown.style.left = `${position.left}px`;
 
-    dropdown.style.top = `${top}px`;
-    dropdown.style.left = `${left}px`;
+    // Verify the position was actually applied
+    const computedStyle = window.getComputedStyle(dropdown);
+    const actualRect = dropdown.getBoundingClientRect();
+    console.log('  Verified applied styles:');
+    console.log('    styleTop:', dropdown.style.top);
+    console.log('    styleLeft:', dropdown.style.left);
+    console.log('    computedPosition:', computedStyle.position);
+    console.log('    actualBoundingRect:', JSON.stringify({
+      left: actualRect.left,
+      top: actualRect.top,
+      right: actualRect.right,
+      bottom: actualRect.bottom,
+      width: actualRect.width,
+      height: actualRect.height
+    }));
+    console.log('  Dropdown right edge:', actualRect.left + actualRect.width, 'vs viewport width:', window.innerWidth);
   }
 
   /**
@@ -1946,8 +2159,12 @@ class StyleManager {
   /**
    * Apply dropdown (menu) styles
    * @param {HTMLElement} dropdown - Dropdown element
+   * @param {string} category - Optional category to adjust styles
    */
-  applyDropdownStyles(dropdown) {
+  applyDropdownStyles(dropdown, category = '') {
+    // Use wider maxWidth for display-menu-with-uri to accommodate links
+    const maxWidth = category === 'display-menu-with-uri' ? '450px' : '300px';
+
     Object.assign(dropdown.style, {
       position: 'absolute',
       background: '#ffffff',
@@ -1956,7 +2173,7 @@ class StyleManager {
       boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
       zIndex: '10000',
       minWidth: '150px',
-      maxWidth: '300px',
+      maxWidth: maxWidth,
       overflow: 'hidden',
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
       fontSize: '14px',
@@ -2215,6 +2432,8 @@ class CommandHandlerRegistry {
     this.register('user-select-oneOf', new UserSelectHandler());
     this.register('api-json-table', new ApiJsonTableHandler());
     this.register('api-md-table', new ApiMdTableHandler());
+    this.register('display-menu', new DisplayMenuHandler());
+    this.register('display-menu-with-uri', new DisplayMenuWithUriHandler());
   }
 
   /**
@@ -2545,6 +2764,48 @@ class ApiMdTableHandler extends CommandHandler {
   }
 }
 
+/**
+ * Handler for display-menu category
+ * Shows dropdown menu with selectable options
+ */
+class DisplayMenuHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(16, 185, 129, 0.15)', // Green background
+      color: '#065f46', // Dark green text
+      textDecoration: 'none',
+      borderBottom: '2px solid #10b981', // Green underline
+      cursor: 'pointer'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    // Display menu shows dropdown, not bubble
+    return null;
+  }
+}
+
+/**
+ * Handler for display-menu-with-uri category
+ * Shows dropdown menu with selectable options and clickable URI links
+ */
+class DisplayMenuWithUriHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(16, 185, 129, 0.15)', // Green background
+      color: '#065f46', // Dark green text
+      textDecoration: 'none',
+      borderBottom: '2px solid #10b981', // Green underline
+      cursor: 'pointer'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    // Display menu with URI shows dropdown, not bubble
+    return null;
+  }
+}
+
 // AutoGrow - Automatically grows textarea height based on content
 
 class AutoGrow {
@@ -2741,6 +3002,247 @@ class ValidationStateManager {
   }
 }
 
+// MobileKeyboardHandler - Handles mobile virtual keyboard behavior
+// Detects keyboard appearance and adjusts layout to keep textarea visible
+
+class MobileKeyboardHandler {
+  /**
+   * Create mobile keyboard handler
+   * @param {Object} options - Configuration options
+   */
+  constructor(options = {}) {
+    this.options = {
+      textarea: options.textarea || null,
+      wrapper: options.wrapper || null,
+      debug: options.debug || false,
+      ...options
+    };
+
+    this.isKeyboardVisible = false;
+    this.lastViewportHeight = window.innerHeight;
+    this.visualViewport = window.visualViewport;
+
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Initialized');
+    }
+  }
+
+  /**
+   * Initialize keyboard detection
+   */
+  init() {
+    if (!this.options.textarea) {
+      console.warn('[MobileKeyboardHandler] No textarea provided');
+      return;
+    }
+
+    // Use Visual Viewport API if available (preferred method)
+    if (this.visualViewport) {
+      this.visualViewport.addEventListener('resize', this.handleViewportResize);
+      this.visualViewport.addEventListener('scroll', this.handleViewportScroll);
+
+      if (this.options.debug) {
+        console.log('[MobileKeyboardHandler] Using Visual Viewport API');
+      }
+    } else {
+      // Fallback to window resize
+      window.addEventListener('resize', this.handleWindowResize);
+
+      if (this.options.debug) {
+        console.log('[MobileKeyboardHandler] Using window resize fallback');
+      }
+    }
+
+    // Handle focus events
+    this.options.textarea.addEventListener('focus', this.handleFocus);
+    this.options.textarea.addEventListener('blur', this.handleBlur);
+  }
+
+  /**
+   * Handle Visual Viewport resize (keyboard appearance/disappearance)
+   */
+  handleViewportResize = () => {
+    if (!this.visualViewport) return;
+
+    const viewportHeight = this.visualViewport.height;
+    const windowHeight = window.innerHeight;
+
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Viewport resize:', {
+        viewportHeight,
+        windowHeight,
+        scale: this.visualViewport.scale
+      });
+    }
+
+    // Keyboard is visible if viewport height is significantly smaller than window height
+    const wasKeyboardVisible = this.isKeyboardVisible;
+    this.isKeyboardVisible = viewportHeight < windowHeight * 0.75;
+
+    if (this.isKeyboardVisible !== wasKeyboardVisible) {
+      if (this.isKeyboardVisible) {
+        this.onKeyboardShow();
+      } else {
+        this.onKeyboardHide();
+      }
+    }
+
+    // Always adjust layout when viewport changes
+    if (this.isKeyboardVisible) {
+      this.adjustLayout();
+    }
+  };
+
+  /**
+   * Handle Visual Viewport scroll
+   */
+  handleViewportScroll = () => {
+    if (this.isKeyboardVisible) {
+      // Ensure textarea stays in view during scroll
+      this.ensureTextareaVisible();
+    }
+  };
+
+  /**
+   * Handle window resize (fallback)
+   */
+  handleWindowResize = () => {
+    const currentHeight = window.innerHeight;
+    const heightDifference = this.lastViewportHeight - currentHeight;
+
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Window resize:', {
+        lastHeight: this.lastViewportHeight,
+        currentHeight,
+        difference: heightDifference
+      });
+    }
+
+    // Significant decrease in height suggests keyboard appeared
+    if (heightDifference > 150) {
+      if (!this.isKeyboardVisible) {
+        this.isKeyboardVisible = true;
+        this.onKeyboardShow();
+      }
+    }
+    // Significant increase suggests keyboard hidden
+    else if (heightDifference < -150) {
+      if (this.isKeyboardVisible) {
+        this.isKeyboardVisible = false;
+        this.onKeyboardHide();
+      }
+    }
+
+    this.lastViewportHeight = currentHeight;
+  };
+
+  /**
+   * Handle textarea focus
+   */
+  handleFocus = () => {
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Textarea focused');
+    }
+
+    // Delay to allow keyboard to appear
+    setTimeout(() => {
+      this.ensureTextareaVisible();
+    }, 300);
+  };
+
+  /**
+   * Handle textarea blur
+   */
+  handleBlur = () => {
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Textarea blurred');
+    }
+  };
+
+  /**
+   * Called when keyboard appears
+   */
+  onKeyboardShow() {
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Keyboard shown');
+    }
+
+    this.adjustLayout();
+    this.ensureTextareaVisible();
+  }
+
+  /**
+   * Called when keyboard hides
+   */
+  onKeyboardHide() {
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Keyboard hidden');
+    }
+
+    // Reset wrapper height to auto
+    if (this.options.wrapper) {
+      this.options.wrapper.style.maxHeight = '';
+    }
+  }
+
+  /**
+   * Adjust layout to accommodate keyboard
+   */
+  adjustLayout() {
+    if (!this.visualViewport || !this.options.wrapper) return;
+
+    const viewportHeight = this.visualViewport.height;
+
+    // Set wrapper max-height to visible viewport height minus some padding
+    const maxHeight = viewportHeight - 20; // 20px padding
+    this.options.wrapper.style.maxHeight = `${maxHeight}px`;
+    this.options.wrapper.style.overflow = 'auto';
+
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Adjusted wrapper height:', maxHeight);
+    }
+  }
+
+  /**
+   * Ensure textarea is visible above the keyboard
+   */
+  ensureTextareaVisible() {
+    if (!this.options.textarea) return;
+
+    // Scroll textarea into view
+    this.options.textarea.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'nearest'
+    });
+
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Scrolled textarea into view');
+    }
+  }
+
+  /**
+   * Cleanup event listeners
+   */
+  destroy() {
+    if (this.visualViewport) {
+      this.visualViewport.removeEventListener('resize', this.handleViewportResize);
+      this.visualViewport.removeEventListener('scroll', this.handleViewportScroll);
+    } else {
+      window.removeEventListener('resize', this.handleWindowResize);
+    }
+
+    if (this.options.textarea) {
+      this.options.textarea.removeEventListener('focus', this.handleFocus);
+      this.options.textarea.removeEventListener('blur', this.handleBlur);
+    }
+
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Destroyed');
+    }
+  }
+}
+
 // TrustQuery - Lightweight library to make textareas interactive
 // Turns matching words into interactive elements with hover bubbles and click actions
 
@@ -2948,6 +3450,17 @@ class TrustQuery {
       console.log('[TrustQuery] AutoGrow feature enabled');
     }
 
+    // Mobile keyboard handler (enabled by default, can be disabled via options)
+    if (this.options.mobileKeyboard !== false) {
+      this.features.mobileKeyboard = new MobileKeyboardHandler({
+        textarea: this.textarea,
+        wrapper: this.wrapper,
+        debug: this.options.debug
+      });
+      this.features.mobileKeyboard.init();
+      console.log('[TrustQuery] Mobile keyboard handler enabled');
+    }
+
     // Debug logging feature
     if (this.options.debug) {
       this.enableDebugLogging();
@@ -3238,6 +3751,16 @@ class TrustQuery {
       this.interactionHandler.destroy();
     }
 
+    // Cleanup mobile keyboard handler
+    if (this.features.mobileKeyboard) {
+      this.features.mobileKeyboard.destroy();
+    }
+
+    // Cleanup auto-grow
+    if (this.features.autoGrow) {
+      this.features.autoGrow.destroy();
+    }
+
     // Unwrap textarea
     const parent = this.wrapper.parentNode;
     parent.insertBefore(this.textarea, this.wrapper);