@nuasite/components 0.15.2 → 0.16.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@nuasite/components",
   "description": "Nua Site astro components.",
   "license": "Apache-2.0",
-  "version": "0.15.2",
+  "version": "0.16.1",
   "files": [
     "dist/**",
     "src/**",

package/src/form/index.astro

@@ -112,13 +112,15 @@ const tokenId = `${tokenFieldName}_${formId}`
 
 <script>
 	class AstroForm extends HTMLElement {
-		private interactionScore = 0;
 		private fieldInteractions = new Set<string>();
-		private mouseMovements = 0;
+		private hasPointerActivity = false;
 		private keyboardEvents = 0;
+		private inputEvents = 0;
 		private focusEvents = 0;
+		private scrolled = false;
 		private startTime = Date.now();
 		private honeypotFieldNames: string[] = []
+		private abortController = new AbortController()
 
 		connectedCallback() {
 			const form = this.querySelector('form')
@@ -219,16 +221,32 @@ const tokenId = `${tokenFieldName}_${formId}`
 
 			refreshSubmissionGuards()
 
+			const trackForm = (action: string, detail?: Record<string, unknown>) => {
+				if (typeof window !== 'undefined' && (window as any).analytics?.form) {
+					(window as any).analytics.form(formId, action, detail)
+				}
+			}
+
 			form.addEventListener('submit', async (e) => {
 				e.preventDefault()
 
+				const formDataForTracking = Object.fromEntries(
+					Array.from(new FormData(form).entries())
+						.filter(([k]) => !this.honeypotFieldNames.includes(k) && !/^token_/.test(k) && !form.querySelector(`[name="${k}"][aria-hidden="true"]`))
+						.map(([k, v]) => [k, typeof v === 'string' ? v.slice(0, 100) : '[File]']),
+				)
+
+				trackForm('attempt', { formData: formDataForTracking })
+
 				if (!this.passesHumanityChecks(form)) {
+					trackForm('reject', { reason: 'humanity_check_failed', formData: formDataForTracking })
 					showError(tryAgainMessage)
 					return
 				}
 
 				const elapsed = performance.now() - activationTime
 				if (minSubmitDelay > 0 && elapsed < minSubmitDelay) {
+					trackForm('reject', { reason: 'submitted_too_fast', formData: formDataForTracking })
 					showError(fastSubmitMessage || tryAgainMessage)
 					return
 				}
@@ -236,6 +254,7 @@ const tokenId = `${tokenFieldName}_${formId}`
 				activationTime = performance.now()
 
 				if (tokenInput && !tokenInput.value) {
+					trackForm('reject', { reason: 'missing_token', formData: formDataForTracking })
 					showError(tryAgainMessage)
 					return
 				}
@@ -254,65 +273,84 @@ const tokenId = `${tokenFieldName}_${formId}`
 
 					if (response.ok && 'success' in result && result.success) {
 						const message = hasCustomSuccess ? successMessage : (result.message || successMessage)
+						trackForm('success', { formData: formDataForTracking })
 						showSuccess(message)
 						form.reset()
 						refreshSubmissionGuards()
 					} else {
 						const message = hasCustomError ? errorMessage : (result.error || result.message || errorMessage)
+						trackForm('error', { reason: result.error || `http_${response.status}`, formData: formDataForTracking })
 						showError(message)
 					}
 				} catch (err) {
 					console.error('Form submission error:', err);
+					trackForm('error', { reason: err instanceof Error ? err.message : 'network_error', formData: formDataForTracking })
 					showError(networkErrorMessage)
 				}
 			})
 		}
 
 		private setupInteractionTracking(form: HTMLFormElement) {
-			let mouseMoveTimeout: NodeJS.Timeout;
-			document.addEventListener('mousemove', () => {
-				clearTimeout(mouseMoveTimeout);
-				mouseMoveTimeout = setTimeout(() => {
-					this.mouseMovements++;
-					this.updateInteractionScore();
-				}, 100);
-			});
+			const signal = this.abortController.signal
+
+			document.addEventListener('mousemove', () => { this.hasPointerActivity = true }, { signal, once: true });
+			document.addEventListener('touchstart', () => { this.hasPointerActivity = true }, { signal, passive: true, once: true });
+			document.addEventListener('scroll', () => { this.scrolled = true }, { signal, passive: true, once: true });
 
 			form.addEventListener('keydown', (e) => {
 				if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
 					this.keyboardEvents++;
-					this.updateInteractionScore();
 				}
-			});
+			}, { signal });
 
-			const inputs = form.querySelectorAll('input[type="text"], input[type="email"], textarea');
-			inputs.forEach(input => {
-				input.addEventListener('focus', () => {
-					this.focusEvents++;
-					this.fieldInteractions.add((input as HTMLInputElement).name);
-					this.updateInteractionScore();
-				});
+			// Fires for autofill, paste, voice input, and virtual keyboards
+			form.addEventListener('input', (e) => {
+				if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement) {
+					this.inputEvents++;
+					this.fieldInteractions.add(e.target.name);
+				}
+			}, { signal });
+
+			// Fires on selects, checkboxes, date pickers
+			form.addEventListener('change', (e) => {
+				if (e.target instanceof HTMLInputElement || e.target instanceof HTMLSelectElement) {
+					this.fieldInteractions.add(e.target.name);
+				}
+			}, { signal });
+
+			form.querySelectorAll<HTMLElement>('input:not([type="hidden"]):not([aria-hidden="true"]), textarea, select').forEach(input => {
+				input.addEventListener('focus', () => { this.focusEvents++ }, { signal });
 			});
 		}
 
-		private updateInteractionScore() {
-			this.interactionScore =
-				(this.mouseMovements > 0 ? 1 : 0) +
-				(this.keyboardEvents > 5 ? 1 : 0) +
+		disconnectedCallback() {
+			this.abortController.abort()
+		}
+
+		private getInteractionScore(): number {
+			return (
+				(this.hasPointerActivity ? 1 : 0) +
+				(this.keyboardEvents > 5 || this.inputEvents > 2 ? 1 : 0) +
 				(this.focusEvents > 1 ? 1 : 0) +
-				(this.fieldInteractions.size > 1 ? 1 : 0);
+				(this.fieldInteractions.size > 1 ? 1 : 0) +
+				(this.scrolled ? 1 : 0)
+			);
 		}
 
 		private detectSuspiciousBrowser(): boolean {
+			const ua = window.navigator.userAgent
+			const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(ua)
+
 			// Check for headless browser indicators
 			const suspiciousIndicators = [
-				// Missing expected browser features
-				!window.navigator.webdriver === undefined,
-				!window.navigator.plugins.length,
+				// WebDriver API presence (set to true in automated browsers)
+				navigator.webdriver === true,
+				// Empty plugins list is only suspicious on desktop — mobile browsers normally have none
+				!isMobile && !window.navigator.plugins.length,
 				!window.navigator.languages.length,
 
 				// Headless Chrome indicators
-				window.navigator.userAgent.includes('HeadlessChrome'),
+				ua.includes('HeadlessChrome'),
 				window.outerWidth === 0,
 				window.outerHeight === 0,
 
@@ -330,7 +368,7 @@ const tokenId = `${tokenFieldName}_${formId}`
 
 			if (timeSpent < 3000) return false;
 
-			if (this.interactionScore < 2) return false;
+			if (this.getInteractionScore() < 2) return false;
 
 			for (const fieldName of this.honeypotFieldNames) {
 				const field = form.querySelector(`[name="${fieldName}"]`) as HTMLInputElement