@cognior/iap-sdk 0.1.0

package/src/utils/validationInterceptor.ts

@@ -0,0 +1,650 @@
+/**
+ * Validation Interceptor
+ * Disables browser-native validation tooltips and replaces them with DAP tooltips
+ */
+
+export class ValidationInterceptor {
+  private static instance: ValidationInterceptor | null = null;
+  private observerRef: MutationObserver | null = null;
+  private isInitialized: boolean = false;
+  
+  static getInstance(): ValidationInterceptor {
+    if (!ValidationInterceptor.instance) {
+      ValidationInterceptor.instance = new ValidationInterceptor();
+    }
+    return ValidationInterceptor.instance;
+  }
+
+  /**
+   * Inject CSS styles for validation tooltips and error states
+   */
+  private injectValidationStyles(): void {
+    const existingStyles = document.querySelector('#dap-validation-styles');
+    if (existingStyles) return;
+    
+    const style = document.createElement('style');
+    style.id = 'dap-validation-styles';
+    style.textContent = `
+      /* Validation error state for inputs */
+      .dap-validation-error {
+        border-color: #ef4444 !important;
+        box-shadow: 0 0 0 1px #ef4444 !important;
+      }
+      
+      /* Fallback validation tooltip */
+      .dap-validation-tooltip-fallback {
+        position: absolute !important;
+        background: #ef4444 !important;
+        color: white !important;
+        padding: 8px 12px !important;
+        border-radius: 4px !important;
+        font-size: 14px !important;
+        font-family: system-ui, -apple-system, sans-serif !important;
+        z-index: 10000 !important;
+        max-width: 200px !important;
+        word-wrap: break-word !important;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
+        pointer-events: none !important;
+        transform: translateY(-2px) !important;
+      }
+      
+      .dap-validation-tooltip-fallback::before {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 12px;
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 6px solid #ef4444;
+      }
+      
+      /* Hide native validation bubbles */
+      input:invalid {
+        box-shadow: none !important;
+      }
+      
+      /* Ensure tooltips appear above everything */
+      .dap-tip-layer {
+        z-index: 10001 !important;
+      }
+    `;
+    
+    document.head.appendChild(style);
+  }
+
+  /**
+   * Initialize validation interception for the entire page
+   */
+  public initialize(): void {
+    if (this.isInitialized) {
+      console.debug("[DAP] Validation interceptor already initialized");
+      return;
+    }
+    
+    console.debug("[DAP] Initializing validation interceptor for DAP tooltips");
+    
+    // Add validation tooltip styles immediately
+    this.injectValidationStyles();
+    
+    // Focus on DAP tooltip replacement rather than prevention (handled by immediate prevention)
+    this.setupDAPTooltipTriggers();
+    
+    this.isInitialized = true;
+    console.debug("[DAP] Validation interceptor initialized successfully");
+  }
+
+  /**
+   * Set up DAP tooltip triggers for validation errors
+   */
+  private setupDAPTooltipTriggers(): void {
+    // Listen for validation events to trigger DAP tooltips
+    document.addEventListener('submit', async (event) => {
+      const form = event.target as HTMLFormElement;
+      if (form.tagName === 'FORM') {
+        // Check for validation manually and show DAP tooltips
+        const firstInvalidInput = this.validateForm(form);
+        if (firstInvalidInput) {
+          event.preventDefault();
+          firstInvalidInput.focus();
+          await this.triggerDAPValidation(firstInvalidInput);
+        }
+      }
+    }, { passive: false });
+    
+    // Also listen for input blur events for real-time validation
+    document.addEventListener('blur', async (event) => {
+      const input = event.target as HTMLInputElement;
+      if (input && (input.tagName === 'INPUT' || input.tagName === 'TEXTAREA') && input.hasAttribute('required')) {
+        if (!this.isInputValid(input)) {
+          await this.triggerDAPValidation(input);
+        }
+      }
+    }, { capture: true });
+  }
+
+  /**
+   * Disable native validation on all forms in the document
+   */
+  private disableNativeValidationOnForms(): void {
+    const forms = document.querySelectorAll('form');
+    forms.forEach(form => {
+      this.disableFormValidation(form);
+    });
+    
+    if (forms.length > 0) {
+      console.debug("[DAP] Browser validation suppressed on", forms.length, "forms");
+    }
+    
+    // Also run after DOM is fully loaded in case forms are added dynamically
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => {
+        setTimeout(() => {
+          const newForms = document.querySelectorAll('form:not([novalidate])');
+          newForms.forEach(form => {
+            this.disableFormValidation(form as HTMLFormElement);
+          });
+          if (newForms.length > 0) {
+            console.debug("[DAP] Additional forms processed after DOM load:", newForms.length);
+          }
+        }, 100);
+      });
+    }
+  }
+
+  /**
+   * Disable native validation on a specific form
+   */
+  private disableFormValidation(form: HTMLFormElement): void {
+    // Add novalidate attribute to prevent browser validation UI
+    form.setAttribute('novalidate', '');
+    
+    // Also set the noValidate property for extra security
+    form.noValidate = true;
+    
+    // Add event listeners to handle validation manually
+    form.addEventListener('submit', this.handleFormSubmit.bind(this), { capture: true, passive: false });
+    
+    // Add listeners to form inputs for real-time validation
+    const inputs = form.querySelectorAll('input, select, textarea');
+    inputs.forEach(input => {
+      this.setupInputValidation(input as HTMLElement);
+    });
+    
+    console.debug("[DAP] Form validation disabled for:", form);
+  }
+
+  /**
+   * Set up validation listeners on individual inputs
+   */
+  private setupInputValidation(input: HTMLElement): void {
+    // Prevent browser validation tooltips aggressively
+    input.addEventListener('invalid', this.preventBrowserTooltip.bind(this), { capture: true, passive: false });
+    
+    // Clear any existing validation state
+    if ('setCustomValidity' in input) {
+      (input as HTMLInputElement).setCustomValidity('');
+    }
+    
+    // Add validation on blur/change for better UX
+    input.addEventListener('blur', this.validateInput.bind(this));
+    input.addEventListener('input', this.clearValidationErrors.bind(this));
+    
+    // Also prevent validation on focus
+    input.addEventListener('focus', (event) => {
+      const inputElement = event.target as HTMLInputElement;
+      if ('setCustomValidity' in inputElement) {
+        inputElement.setCustomValidity('');
+      }
+    });
+    
+    console.debug("[DAP] Input validation setup for:", input);
+  }
+
+  /**
+   * Prevent browser validation tooltips from appearing
+   */
+  private preventBrowserTooltip(event: Event): void {
+    console.debug("[DAP] Browser validation suppressed for element:", event.target);
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    
+    // Clear any validation state on the element
+    const target = event.target as HTMLInputElement;
+    if (target && 'setCustomValidity' in target) {
+      target.setCustomValidity('');
+    }
+    
+    // Trigger DAP validation instead
+    this.triggerDAPValidation(event.target as HTMLElement);
+  }
+
+  /**
+   * Handle form submission with custom validation
+   */
+  private handleFormSubmit(event: Event): void {
+    const form = event.target as HTMLFormElement;
+    const firstInvalidInput = this.validateForm(form);
+    
+    if (firstInvalidInput) {
+      event.preventDefault();
+      event.stopPropagation();
+      
+      // Focus the first invalid input and show DAP tooltip
+      firstInvalidInput.focus();
+      this.triggerDAPValidation(firstInvalidInput);
+    }
+  }
+
+  /**
+   * Validate a form and return first invalid input
+   */
+  private validateForm(form: HTMLFormElement): HTMLElement | null {
+    const inputs = form.querySelectorAll('input[required], select[required], textarea[required]');
+    
+    for (let i = 0; i < inputs.length; i++) {
+      const element = inputs[i] as HTMLInputElement;
+      if (!this.isInputValid(element)) {
+        return element;
+      }
+    }
+    
+    return null;
+  }
+
+  /**
+   * Validate individual input
+   */
+  private validateInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    
+    if (!this.isInputValid(input)) {
+      this.triggerDAPValidation(input);
+    } else {
+      this.clearValidationErrors(event);
+    }
+  }
+
+  /**
+   * Check if an input is valid
+   */
+  private isInputValid(input: HTMLInputElement): boolean {
+    // Check required fields
+    if (input.hasAttribute('required') && !input.value.trim()) {
+      return false;
+    }
+    
+    // Check email format
+    if (input.type === 'email' && input.value) {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      return emailRegex.test(input.value);
+    }
+    
+    // Check URL format
+    if (input.type === 'url' && input.value) {
+      try {
+        new URL(input.value);
+        return true;
+      } catch {
+        return false;
+      }
+    }
+    
+    // Add more validation rules as needed
+    return true;
+  }
+
+  /**
+   * Trigger DAP validation tooltip
+   */
+  private async triggerDAPValidation(input: HTMLElement): Promise<void> {
+    // Prevent duplicate tooltips
+    this.clearAllTooltips();
+    
+    console.debug("[DAP] DAP validation tooltip triggered for:", input);
+    
+    const validationMessage = this.getValidationMessage(input);
+    
+    // Create a validation tooltip experience
+    const validationExperience = {
+      elementSelector: input.id ? `#${input.id}` : this.generateSelector(input),
+      elementTrigger: 'validation_error',
+      elementLocation: window.location.pathname,
+      content: {
+        text: validationMessage,
+        placement: 'top'
+      }
+    };
+    
+    // Add visual error state to input
+    input.classList.add('dap-validation-error');
+    
+    // Trigger DAP tooltip programmatically
+    await this.showDAPTooltip(input, validationExperience);
+  }
+
+  /**
+   * Get appropriate validation message for an input
+   */
+  private getValidationMessage(input: HTMLElement): string {
+    const inputElement = input as HTMLInputElement;
+    const fieldName = this.getFieldName(input);
+    
+    if (inputElement.hasAttribute('required') && !inputElement.value.trim()) {
+      return `Please enter ${fieldName}`;
+    }
+    
+    if (inputElement.type === 'email' && inputElement.value) {
+      return 'Please enter a valid email address';
+    }
+    
+    if (inputElement.type === 'url' && inputElement.value) {
+      return 'Please enter a valid URL';
+    }
+    
+    return `Please check the ${fieldName} field`;
+  }
+
+  /**
+   * Get user-friendly field name
+   */
+  private getFieldName(input: HTMLElement): string {
+    // Try label text
+    const label = document.querySelector(`label[for="${input.id}"]`);
+    if (label) {
+      return label.textContent?.trim().replace(':', '') || 'field';
+    }
+    
+    // Try placeholder
+    const placeholder = (input as HTMLInputElement).placeholder;
+    if (placeholder) {
+      return placeholder;
+    }
+    
+    // Try name attribute
+    const name = (input as HTMLInputElement).name;
+    if (name) {
+      return name.replace(/[_-]/g, ' ').toLowerCase();
+    }
+    
+    return 'field';
+  }
+
+  /**
+   * Generate CSS selector for element
+   */
+  private generateSelector(element: HTMLElement): string {
+    if (element.id) {
+      return `#${element.id}`;
+    }
+    
+    if (element.className) {
+      return `.${element.className.split(' ')[0]}`;
+    }
+    
+    return element.tagName.toLowerCase();
+  }
+
+  /**
+   * Show DAP tooltip for validation
+   */
+  private async showDAPTooltip(element: HTMLElement, experience: any): Promise<void> {
+    try {
+      // Import tooltip renderer
+      const { renderDirectTooltip } = await import('../experiences/tooltip');
+      
+      const tooltipPayload = {
+        targetSelector: experience.elementSelector,
+        text: experience.content.text,
+        placement: experience.content.placement || 'top',
+        trigger: 'click' as const // Use click trigger for validation tooltips
+      };
+      
+      console.debug('[DAP] Showing DAP validation tooltip:', tooltipPayload);
+      await renderDirectTooltip(tooltipPayload);
+      
+    } catch (error) {
+      console.error('[DAP] Failed to load tooltip renderer:', error);
+      console.debug('[DAP] Using enhanced fallback tooltip');
+      // Enhanced fallback with DAP-like styling
+      this.showDAPStyledFallbackTooltip(element, experience.content.text);
+    }
+  }
+
+  /**
+   * Enhanced fallback tooltip with DAP styling
+   */
+  private showDAPStyledFallbackTooltip(element: HTMLElement, message: string): void {
+    // Remove any existing tooltips
+    this.clearAllTooltips();
+    
+    // Create tooltip wrapper similar to DAP tooltip structure
+    const tooltipWrapper = document.createElement('div');
+    tooltipWrapper.className = 'dap-validation-tooltip-wrap';
+    tooltipWrapper.style.cssText = `
+      position: absolute;
+      z-index: 10001;
+      pointer-events: none;
+    `;
+    
+    // Create tooltip bubble with DAP styling
+    const tooltip = document.createElement('div');
+    tooltip.className = 'dap-validation-tooltip-bubble';
+    tooltip.style.cssText = `
+      background: #2563eb;
+      color: white;
+      padding: 12px 16px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-family: system-ui, -apple-system, sans-serif;
+      max-width: 280px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      position: relative;
+      word-wrap: break-word;
+      line-height: 1.4;
+    `;
+    tooltip.textContent = message;
+    
+    // Create arrow pointing to the element
+    const arrow = document.createElement('div');
+    arrow.className = 'dap-validation-tooltip-arrow';
+    arrow.style.cssText = `
+      position: absolute;
+      top: 100%;
+      left: 20px;
+      width: 0;
+      height: 0;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 8px solid #2563eb;
+    `;
+    
+    tooltip.appendChild(arrow);
+    tooltipWrapper.appendChild(tooltip);
+    
+    // Position relative to element
+    const rect = element.getBoundingClientRect();
+    const tooltipTop = Math.max(10, rect.top - 50 + window.scrollY);
+    const tooltipLeft = Math.max(10, Math.min(rect.left + window.scrollX, window.innerWidth - 300));
+    
+    tooltipWrapper.style.top = `${tooltipTop}px`;
+    tooltipWrapper.style.left = `${tooltipLeft}px`;
+    
+    console.debug('[DAP] DAP-styled fallback tooltip positioned at:', tooltipTop, tooltipLeft);
+    
+    document.body.appendChild(tooltipWrapper);
+    
+    // Auto-remove after 4 seconds
+    setTimeout(() => {
+      if (tooltipWrapper.parentNode) {
+        tooltipWrapper.parentNode.removeChild(tooltipWrapper);
+      }
+    }, 4000);
+  }
+
+  /**
+   * Clear all validation tooltips (both DAP and fallback)
+   */
+  private clearAllTooltips(): void {
+    // Clear DAP tooltips
+    const dapTooltips = document.querySelectorAll('.dap-tip-layer, .dap-tooltip-wrap');
+    dapTooltips.forEach(tooltip => tooltip.remove());
+    
+    // Clear fallback tooltips
+    const fallbackTooltips = document.querySelectorAll('.dap-validation-tooltip-fallback, .dap-validation-tooltip-wrap');
+    fallbackTooltips.forEach(tooltip => tooltip.remove());
+    
+    console.debug('[DAP] All validation tooltips cleared');
+  }
+
+  /**
+   * Fallback tooltip if DAP tooltip fails (DEPRECATED - use DAP styled version)
+   */
+  private showFallbackTooltip(element: HTMLElement, message: string): void {
+    // Remove any existing fallback tooltips
+    this.clearFallbackTooltips();
+    
+    const tooltip = document.createElement('div');
+    tooltip.className = 'dap-validation-tooltip-fallback';
+    tooltip.textContent = message;
+    tooltip.style.cssText = `
+      position: absolute;
+      background: #ef4444;
+      color: white;
+      padding: 8px 12px;
+      border-radius: 4px;
+      font-size: 14px;
+      z-index: 10000;
+      max-width: 200px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+      pointer-events: none;
+    `;
+    
+    // Position relative to element with better bounds checking
+    const rect = element.getBoundingClientRect();
+    const tooltipTop = Math.max(10, rect.top - 35 + window.scrollY); // Ensure minimum 10px from top
+    const tooltipLeft = Math.max(10, Math.min(rect.left + window.scrollX, window.innerWidth - 220)); // Stay in viewport
+    
+    tooltip.style.top = `${tooltipTop}px`;
+    tooltip.style.left = `${tooltipLeft}px`;
+    
+    console.debug('[DAP] Fallback tooltip positioned at:', tooltipTop, tooltipLeft);
+    
+    document.body.appendChild(tooltip);
+    
+    // Auto-remove after 3 seconds (shorter duration)
+    setTimeout(() => {
+      if (tooltip.parentNode) {
+        tooltip.parentNode.removeChild(tooltip);
+      }
+    }, 3000);
+  }
+
+  /**
+   * Clear validation errors when user starts typing
+   */
+  private clearValidationErrors(event: Event): void {
+    const input = event.target as HTMLElement;
+    
+    // Remove custom validation classes
+    input.classList.remove('dap-validation-error');
+    
+    // Clear all validation tooltips
+    this.clearAllTooltips();
+  }
+
+  /**
+   * Clear fallback tooltips
+   */
+  private clearFallbackTooltips(): void {
+    const tooltips = document.querySelectorAll('.dap-validation-tooltip-fallback');
+    tooltips.forEach(tooltip => tooltip.remove());
+  }
+
+  /**
+   * Dismiss DAP tooltips
+   */
+  private dismissDAPTooltips(): void {
+    console.debug("[DAP] DAP tooltip dismissed");
+    
+    // Try to dismiss any active DAP tooltips
+    const activeTooltips = document.querySelectorAll('.dap-tooltip-wrap');
+    activeTooltips.forEach(tooltip => {
+      const closeButton = tooltip.querySelector('.dap-tooltip-close') as HTMLElement;
+      if (closeButton) {
+        closeButton.click();
+      } else {
+        // Force remove if no close button
+        tooltip.remove();
+      }
+    });
+  }
+
+  /**
+   * Set up observer for dynamically added forms
+   */
+  private setupFormObserver(): void {
+    this.observerRef = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node as HTMLElement;
+            
+            // Check if the added node is a form
+            if (element.tagName === 'FORM') {
+              this.disableFormValidation(element as HTMLFormElement);
+            }
+            
+            // Check for forms within the added node
+            const forms = element.querySelectorAll?.('form');
+            forms?.forEach(form => {
+              this.disableFormValidation(form);
+            });
+          }
+        });
+      });
+    });
+    
+    this.observerRef.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  /**
+   * Set up additional validation listeners for enhanced coverage
+   */
+  private setupValidationListeners(): void {
+    // Additional validation prevention as backup
+    window.addEventListener('invalid', this.preventBrowserTooltip.bind(this), { capture: true, passive: false });
+    
+    // Prevent any validation tooltips on focus/blur
+    document.addEventListener('focusin', (event) => {
+      const input = event.target as HTMLInputElement;
+      if (input.tagName === 'INPUT' || input.tagName === 'TEXTAREA' || input.tagName === 'SELECT') {
+        // Remove any browser validation state
+        input.setCustomValidity('');
+      }
+    }, { capture: true });
+  }
+
+  /**
+   * Cleanup and destroy the interceptor
+   */
+  public destroy(): void {
+    if (this.observerRef) {
+      this.observerRef.disconnect();
+      this.observerRef = null;
+    }
+    
+    // Remove event listeners
+    document.removeEventListener('invalid', this.preventBrowserTooltip.bind(this), true);
+    
+    // Clear any active tooltips
+    this.clearFallbackTooltips();
+    
+    ValidationInterceptor.instance = null;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"]
+}

package/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  clean: true,
+  format: ["esm", "iife"],        // ESM + browser global
+  globalName: "DAP",              // window.DAP for IIFE
+  sourcemap: true,
+  minify: true,
+  outDir: "public/dist",          // serve directly in /public
+  target: "es2020",
+  dts: { entry: "src/index.ts" }  // types for consumers of ESM entry
+});