@nuasite/components 0.0.36 → 0.0.38

package/package.json

@@ -2,7 +2,7 @@
   "name": "@nuasite/components",
   "description": "Nua Site astro components.",
   "license": "Apache-2.0",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "files": [
     "dist/**",
     "src/**",
@@ -23,7 +23,8 @@
   "types": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./Form.astro": "./src/form/index.astro"
+    "./Form.astro": "./src/form/index.astro",
+    "./Image.astro": "./src/image/index.astro"
   },
   "peerDependencies": {
     "typescript": "^5"

package/src/astro.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="astro/client" />
 
-declare module "*.astro" {
-  type Props = any;
-  const Component: (props: Props) => any;
+declare module '*.astro' {
+	type Props = any
+	const Component: (props: Props) => any
 
-  export default Component;
-  export type { Props };
+	export default Component
+	export type { Props }
 }

package/src/form/index.astro

@@ -1,6 +1,6 @@
 ---
-import type { FormProps } from './types';
-import { submitButtonRegex } from './utils';
+import type { FormProps } from './types'
+import { submitButtonRegex, honeypotConflictRegex, honeypotFields } from './utils'
 
 export type Props = FormProps
 
@@ -15,19 +15,23 @@ const {
 	tryAgainMessage = "Try again",
 	fastSubmitMessage = "Please wait a moment before submitting.",
 	...rest
-} = Astro.props;
+} = Astro.props
 
-const slotContent = await Astro.slots.render("default");
+const slotContent = await Astro.slots.render("default")
 
 if (!submitButtonRegex.test(slotContent)) {
-	console.error(`❌ No submit button found in form "${formId}".`);
-	throw new Error(`Form "${formId}" is missing a submit button`);
+	console.error(`❌ No submit button found in form "${formId}".`)
+	throw new Error(`Form "${formId}" is missing a submit button`)
 }
 
-const honeypotFieldName = `contact_required`;
-const honeypotId = `${honeypotFieldName}_${formId}`;
-const tokenFieldName = `token_${crypto.randomUUID().substring(0, 8)}`;
-const tokenId = `${tokenFieldName}_${formId}`;
+if (honeypotConflictRegex.test(slotContent)) {
+	console.error(`❌ Form "${formId}" contains field names ending with "_required" which conflict with honeypot fields.`)
+	throw new Error(`Form "${formId}" has conflicting field names. Avoid using field names ending with "_required" as they are reserved for honeypot fields.`)
+}
+
+const cssHoneypotField = `css_trap_${crypto.randomUUID().substring(0, 8)}`
+const tokenFieldName = `token_${crypto.randomUUID().substring(0, 8)}`
+const tokenId = `${tokenFieldName}_${formId}`
 ---
 
 <astro-form>
@@ -35,7 +39,6 @@ const tokenId = `${tokenFieldName}_${formId}`;
 		action={action}
 		class="astro-from"
 		data-form-id={formId}
-		data-honeypot-field={honeypotFieldName}
 		data-token-field={tokenFieldName}
 		data-success-message={successMessage}
 		data-error-message={errorMessage}
@@ -43,40 +46,52 @@ const tokenId = `${tokenFieldName}_${formId}`;
 		data-network-error-message={networkErrorMessage}
 		data-try-again-message={tryAgainMessage}
 		data-fast-submit-message={fastSubmitMessage}
+		data-required-fields={honeypotFields.map(field => field.name).join(',')}
 		method={method}
 		{...rest}
 	>
 		<div class="relative index-1">
 			<div class="sr-only">
-				<label for={honeypotId}>Leave this field empty</label>
-				<input
-					type="text"
-					id={honeypotId}
-					name={honeypotFieldName}
-					tabindex="-1"
-					autocomplete="off"
-					aria-hidden="true"
-				/>
+				{honeypotFields.map(field => (
+					<label for={`${field.name}_${formId}`}>Leave this {field.name} empty</label>
+					<input
+						type={field.type}
+						id={`${field.name}_${formId}`}
+						name={field.name}
+						tabindex="-1"
+						autocomplete="off"
+						aria-hidden="true"
+					/>
+				))}
 			</div>
+
+			<input
+				type="text"
+				name={cssHoneypotField}
+				style="position: absolute; left: -9999px; opacity: 0;"
+				tabindex="-1"
+				autocomplete="nope"
+			/>
+
 			<slot />
 		</div>
 
 		<input type="hidden" id={tokenId} name={tokenFieldName} value="" />
 
 		<div id={`${formId}-status`} class="mt-4 hidden" role="alert" aria-live="polite">
-			<div class="status-success hidden text-green-600 bg-green-50 border border-green-200 rounded-md p-3 mb-4">
+			<div data-status="success" class="hidden text-green-600 bg-green-50 border border-green-200 rounded-md p-3 mb-4">
 				<svg class="w-5 h-5 inline mr-2" fill="currentColor" viewBox="0 0 20 20">
 					<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
 				</svg>
 				<span>{successMessage}</span>
 			</div>
-			<div class="status-error hidden text-red-600 bg-red-50 border border-red-200 rounded-md p-3 mb-4">
+			<div data-status="error" class="hidden text-red-600 bg-red-50 border border-red-200 rounded-md p-3 mb-4">
 				<svg class="w-5 h-5 inline mr-2" fill="currentColor" viewBox="0 0 20 20">
 					<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
 				</svg>
 				<span>{errorMessage}</span>
 			</div>
-			<div class="status-loading hidden text-blue-600 bg-blue-50 border border-blue-200 rounded-md p-3 mb-4">
+			<div data-status="loading" class="hidden text-blue-600 bg-blue-50 border border-blue-200 rounded-md p-3 mb-4">
 				<svg class="w-5 h-5 inline mr-2 animate-spin" fill="none" viewBox="0 0 24 24">
 					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 					<path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@@ -89,6 +104,14 @@ const tokenId = `${tokenFieldName}_${formId}`;
 
 <script>
 	class AstroForm extends HTMLElement {
+		private interactionScore = 0;
+		private fieldInteractions = new Set<string>();
+		private mouseMovements = 0;
+		private keyboardEvents = 0;
+		private focusEvents = 0;
+		private startTime = Date.now();
+		private honeypotFieldNames: string[] = []
+
 		connectedCallback() {
 			const form = this.querySelector('form')
 
@@ -97,9 +120,10 @@ const tokenId = `${tokenFieldName}_${formId}`;
 				return
 			}
 
+			this.setupInteractionTracking(form)
+
 			const minSubmitDelay = 1200
 			const formId = form?.dataset.formId
-			const honeypotFieldName = form.dataset.honeypotField
 			const tokenFieldName = form.dataset.tokenField
 			const successMessage = form.dataset.successMessage
 			const errorMessage = form.dataset.errorMessage
@@ -107,11 +131,12 @@ const tokenId = `${tokenFieldName}_${formId}`;
 			const networkErrorMessage = form.dataset.networkErrorMessage
 			const tryAgainMessage = form.dataset.tryAgainMessage
 			const fastSubmitMessage = form.dataset.fastSubmitMessage
+			this.honeypotFieldNames = form.dataset.requiredFields?.split(',') || []
 
 			const statusContainer = document.getElementById(`${formId}-status`)
-			const successStatus = statusContainer?.querySelector('.status-success')
-			const errorStatus = statusContainer?.querySelector('.status-error')
-			const loadingStatus = statusContainer?.querySelector('.status-loading')
+			const successStatus = statusContainer?.querySelector('[data-status="success"]')
+			const errorStatus = statusContainer?.querySelector('[data-status="error"]')
+			const loadingStatus = statusContainer?.querySelector('[data-status="loading"]')
 
 			const hideAllStatus = () => {
 				statusContainer?.classList.add('hidden')
@@ -187,8 +212,22 @@ const tokenId = `${tokenFieldName}_${formId}`;
 			form.addEventListener('submit', async (e) => {
 				e.preventDefault()
 
-				const honey = honeypotFieldName && form.querySelector(`[name="${honeypotFieldName}"]`) as HTMLInputElement
-				if (honey && honey.value) {
+				if (!this.passesHumanityChecks(form)) {
+					showError(tryAgainMessage)
+					return
+				}
+
+				for (const fieldName of this.honeypotFieldNames) {
+					const field = form.querySelector(`[name="${fieldName}"]`) as HTMLInputElement;
+					if (field && field.value.trim()) {
+						showError(tryAgainMessage)
+						return
+					}
+				}
+
+				// Check CSS honeypot
+				const cssHoneypot = form.querySelector('input[style*="position: absolute; left: -9999px"]') as HTMLInputElement;
+				if (cssHoneypot && cssHoneypot.value.trim()) {
 					showError(tryAgainMessage)
 					return
 				}
@@ -231,6 +270,83 @@ const tokenId = `${tokenFieldName}_${formId}`;
 				}
 			})
 		}
+
+		private setupInteractionTracking(form: HTMLFormElement) {
+			let mouseMoveTimeout: NodeJS.Timeout;
+			document.addEventListener('mousemove', () => {
+				clearTimeout(mouseMoveTimeout);
+				mouseMoveTimeout = setTimeout(() => {
+					this.mouseMovements++;
+					this.updateInteractionScore();
+				}, 100);
+			});
+
+			form.addEventListener('keydown', (e) => {
+				if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+					this.keyboardEvents++;
+					this.updateInteractionScore();
+				}
+			});
+
+			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();
+				});
+			});
+		}
+
+		private updateInteractionScore() {
+			this.interactionScore =
+				(this.mouseMovements > 0 ? 1 : 0) +
+				(this.keyboardEvents > 5 ? 1 : 0) +
+				(this.focusEvents > 1 ? 1 : 0) +
+				(this.fieldInteractions.size > 1 ? 1 : 0);
+		}
+
+		private detectSuspiciousBrowser(): boolean {
+			// Check for headless browser indicators
+			const suspiciousIndicators = [
+				// Missing expected browser features
+				!window.navigator.webdriver === undefined,
+				!window.navigator.plugins.length,
+				!window.navigator.languages.length,
+
+				// Headless Chrome indicators
+				window.navigator.userAgent.includes('HeadlessChrome'),
+				window.outerWidth === 0,
+				window.outerHeight === 0,
+
+				// Puppeteer indicators
+				(window as any).__nightmare,
+				(window as any)._phantom,
+				(window as any).callPhantom,
+			];
+
+			return suspiciousIndicators.some(indicator => indicator);
+		}
+
+		private passesHumanityChecks(form: HTMLFormElement): boolean {
+			const timeSpent = Date.now() - this.startTime;
+
+			if (timeSpent < 3000) return false;
+
+			if (this.interactionScore < 2) return false;
+
+			for (const fieldName of this.honeypotFieldNames) {
+				const field = form.querySelector(`[name="${fieldName}"]`) as HTMLInputElement
+				if (field && field.value.trim()) return false
+			}
+
+			const cssHoneypot = form.querySelector('input[style*="position: absolute; left: -9999px"]') as HTMLInputElement
+			if (cssHoneypot && cssHoneypot.value.trim()) return false
+
+			if (this.detectSuspiciousBrowser()) return false
+
+			return true
+		}
 	}
 
 	customElements.define('astro-form', AstroForm)

package/src/form/types.ts

@@ -1,25 +1,27 @@
 /**
-	* Base properties for form components containing optional message strings
-	*/
-export interface BaseProps extends astroHTML.JSX.FormHTMLAttributes {
+ * Base properties for form components containing optional message strings
+ */
+interface BaseProps extends astroHTML.JSX.FormHTMLAttributes {
 	/** Message to display when form submission is successful */
-	successMessage?: string;
+	successMessage?: string
 	/** Message to display when form submission encounters an error */
-	errorMessage?: string;
+	errorMessage?: string
 	/** Message to display while form is being submitted */
-	submittingMessage?: string;
+	submittingMessage?: string
 	/** Message to display when a network error occurs */
-	networkErrorMessage?: string;
+	networkErrorMessage?: string
 	/** Message to display for retry prompt */
-	tryAgainMessage?: string;
+	tryAgainMessage?: string
 	/** Message to display when form submission is fast */
-	fastSubmitMessage?: string;
+	fastSubmitMessage?: string
 }
 
 /**
-	* Form properties that extend BaseProps and require either a formId or action (or both)
-	*/
-export type FormProps = BaseProps & (
-	| { formId: string; action?: string }
-	| { formId?: string; action: string }
-);
+ * Form properties that extend BaseProps and require either a formId or action (or both)
+ */
+export type FormProps =
+	& BaseProps
+	& (
+		| { formId: string; action?: string }
+		| { formId?: string; action: string }
+	)

package/src/form/utils.ts

@@ -1 +1,9 @@
-export const submitButtonRegex = /<button(?![^>]*type\s*=\s*["']button["'])[^>]*>|<input[^>]*type\s*=\s*["']submit["'][^>]*>/i;
+export const submitButtonRegex = /<button(?![^>]*type\s*=\s*["']button["'])[^>]*>|<input[^>]*type\s*=\s*["']submit["'][^>]*>/i
+export const honeypotConflictRegex = /<input[^>]*name\s*=\s*["'][^"']*_required["'][^>]*>/i
+
+export const honeypotFields = [
+	{ name: `contact_required`, type: 'text' },
+	{ name: `website_url_required`, type: 'url' },
+	{ name: `phone_number_required`, type: 'tel' },
+	{ name: `company_name_required`, type: 'text' },
+] as const

package/src/image/index.astro

@@ -0,0 +1,62 @@
+---
+import type { CloudflareImageTransformOptions, ImageProps } from './types'
+import { serializeOptions } from './utils'
+
+export type Props = ImageProps
+
+const {
+  src,
+  alt,
+  widths = [480, 768, 1024, 1400],
+  sizes = '(min-width: 1024px) 50vw, 100vw',
+  quality = 85,
+  format = 'auto',
+  transformOptions = {},
+  deliveryBase = '/cdn-cgi/image',
+  loading = 'lazy',
+  decoding = 'async',
+  ...rest
+} = Astro.props
+
+const isAbsoluteSrc = typeof src === 'string' && (src.startsWith('http://') || src.startsWith('https://'))
+const parsedSrc = isAbsoluteSrc ? new URL(src) : null
+const baseFromSrc = parsedSrc ? parsedSrc.origin : ''
+const normalizeBaseRaw = deliveryBase.endsWith('/') ? deliveryBase.slice(0, -1) : deliveryBase
+const normalizeBase =
+  isAbsoluteSrc && normalizeBaseRaw.startsWith('/')
+    ? `${baseFromSrc}${normalizeBaseRaw}`
+    : normalizeBaseRaw
+const normalizeSource = parsedSrc
+  ? `${parsedSrc.pathname}${parsedSrc.search}`
+  : src?.replace(/^\/+/, '')
+
+const baseOptions: CloudflareImageTransformOptions = {
+  quality,
+  format,
+  ...transformOptions,
+}
+
+const buildUrl = (width: number) => {
+  const optionsWithWidth: CloudflareImageTransformOptions = {
+    ...baseOptions,
+    width,
+  }
+
+  const optionsString = serializeOptions(optionsWithWidth)
+  return `${normalizeBase}/${optionsString}${normalizeSource}`
+}
+
+const effectiveWidths = widths.length ? widths : [1400]
+const srcset = effectiveWidths.map((width) => `${buildUrl(width)} ${width}w`).join(', ')
+const fallbackSrc = buildUrl(effectiveWidths[effectiveWidths.length - 1]!)
+---
+
+<img
+  src={fallbackSrc}
+  srcset={srcset}
+  sizes={sizes}
+  alt={alt}
+  loading={loading}
+  decoding={decoding}
+  {...rest}
+/>

package/src/image/types.ts

@@ -0,0 +1,103 @@
+/** Passthrough `<img>` props accepted by the Astro component. */
+interface BaseProps extends astroHTML.JSX.ImgHTMLAttributes {}
+
+type CloudflareImageFormat = 'auto' | 'webp' | 'avif' | 'jpeg' | 'baseline-jpeg' | 'json'
+type CloudflareImageQuality =
+	| number
+	| 'high'
+	| 'medium-high'
+	| 'medium-low'
+	| 'low'
+type CloudflareImageFit = 'scale-down' | 'contain' | 'cover' | 'crop' | 'pad' | 'squeeze'
+type CloudflareImageGravity =
+	| 'auto'
+	| 'face'
+	| 'left'
+	| 'right'
+	| 'top'
+	| 'bottom'
+	| `${number}x${number}`
+
+/** Options mapped to Cloudflare Image Transform `/cdn-cgi/image/<options>/<src>` parameters. */
+export type CloudflareImageTransformOptions = {
+	/** Preserve animation frames (set false to flatten GIFs). */
+	anim?: boolean
+	/** Background color used for transparent images or fit=pad. */
+	background?: string
+	/** Blur radius 1-250. */
+	blur?: number
+	/** Border CSS color and widths (comma-joined string). */
+	border?: string
+	/** Brightness multiplier, 0.5-2.0. */
+	brightness?: number
+	/** Compression strategy override. */
+	compression?: 'fast'
+	/** Contrast multiplier, 0.5-2.0. */
+	contrast?: number
+	/** Device pixel ratio multiplier. */
+	dpr?: number
+	/** Resize fit mode. */
+	fit?: CloudflareImageFit
+	/** Flip image horizontally/vertically. */
+	flip?: 'h' | 'v' | 'hv'
+	/** Output format; defaults to auto negotiation. */
+	format?: CloudflareImageFormat
+	/** Exposure adjustment. */
+	gamma?: number
+	/** Crop focal point (auto, face, sides, or coordinates). */
+	gravity?: CloudflareImageGravity
+	/** Target height. */
+	height?: number
+	/** Metadata preservation strategy. */
+	metadata?: 'copyright' | 'keep' | 'none'
+	/** Redirect to origin on fatal resize error. */
+	onError?: 'redirect'
+	/** Quality scalar or perceptual presets. */
+	quality?: CloudflareImageQuality
+	/** Rotate degrees. */
+	rotate?: 90 | 180 | 270
+	/** Saturation multiplier (0 = grayscale). */
+	saturation?: number
+	/** Background segmentation toggle. */
+	segment?: 'foreground'
+	/** Sharpen strength 0-10. */
+	sharpen?: number
+	/** Override quality for slow connections. */
+	slowConnectionQuality?: CloudflareImageQuality
+	/** Trim pixels or border detection. */
+	trim?: 'border' | string | number
+	/** Trim border color (CSS syntax). */
+	trimBorderColor?: string
+	/** Trim border tolerance (0-255). */
+	trimBorderTolerance?: number
+	/** Pixels of original border to keep. */
+	trimBorderKeep?: number
+	/** Trim rectangle width. */
+	trimWidth?: number
+	/** Trim rectangle height. */
+	trimHeight?: number
+	/** Trim offset from left. */
+	trimLeft?: number
+	/** Trim offset from top. */
+	trimTop?: number
+	/** Target width or auto width negotiation. */
+	width?: number | 'auto'
+	/** Face zoom when gravity=face. */
+	zoom?: number
+}
+
+/** Props for the responsive Cloudflare image component. */
+export type ImageProps = BaseProps & {
+	/** Width breakpoints used to build `srcset` (defaults applied). */
+	widths?: number[]
+	/** `sizes` attribute string. */
+	sizes?: string
+	/** Default quality applied to all generated URLs. */
+	quality?: CloudflareImageQuality
+	/** Default format applied to all generated URLs. */
+	format?: CloudflareImageFormat
+	/** Additional Cloudflare transform params applied to every variant. */
+	transformOptions?: CloudflareImageTransformOptions
+	/** Prefix for transform delivery path, defaults to `/cdn-cgi/image`. */
+	deliveryBase?: string
+}

package/src/image/utils.ts

@@ -0,0 +1,54 @@
+import type { CloudflareImageTransformOptions } from './types'
+
+export const optionKeyMap: Record<keyof CloudflareImageTransformOptions, string> = {
+	anim: 'anim',
+	background: 'background',
+	blur: 'blur',
+	border: 'border',
+	brightness: 'brightness',
+	compression: 'compression',
+	contrast: 'contrast',
+	dpr: 'dpr',
+	fit: 'fit',
+	flip: 'flip',
+	format: 'format',
+	gamma: 'gamma',
+	gravity: 'gravity',
+	height: 'height',
+	metadata: 'metadata',
+	onError: 'onerror',
+	quality: 'quality',
+	rotate: 'rotate',
+	saturation: 'saturation',
+	segment: 'segment',
+	sharpen: 'sharpen',
+	slowConnectionQuality: 'slow-connection-quality',
+	trim: 'trim',
+	trimBorderColor: 'trim.border.color',
+	trimBorderTolerance: 'trim.border.tolerance',
+	trimBorderKeep: 'trim.border.keep',
+	trimWidth: 'trim.width',
+	trimHeight: 'trim.height',
+	trimLeft: 'trim.left',
+	trimTop: 'trim.top',
+	width: 'width',
+	zoom: 'zoom',
+}
+
+export const serializeOptions = (options: CloudflareImageTransformOptions) =>
+	Object.entries(options)
+		.filter(([, value]) => value !== undefined && value !== null)
+		.map(([rawKey, value]) => {
+			const key = optionKeyMap[rawKey as keyof CloudflareImageTransformOptions] ?? rawKey
+			const stringValue = typeof value === 'string'
+				? value
+				: typeof value === 'boolean'
+				? String(value)
+				: Number.isFinite(value)
+				? String(value)
+				: ''
+
+			return stringValue ? `${key}=${encodeURIComponent(stringValue)}` : ''
+		})
+		.filter(Boolean)
+		.join(',')

package/src/index.ts

@@ -1,2 +1,4 @@
 export { default as Form } from './form/index.astro'
-export type { BaseProps, FormProps } from './form/types'
+export type { FormProps } from './form/types'
+export { default as Image } from './image/index.astro'
+export type { CloudflareImageTransformOptions, ImageProps } from './image/types'