component (which wraps this overlay along with page tiles)
+ * handles visual rotation via CSS transforms — same as TilingLayer,
+ * AnnotationLayer, and LinkLayer.
*/
+import React, { useCallback, useMemo, memo } from 'react';
+import { useDocumentState } from '@embedpdf/core/react';
+import { useFormFill, useFieldValue } from '@app/tools/formFill/FormFillContext';
+import type { FormField, WidgetCoordinates } from '@app/tools/formFill/types';
+
+interface WidgetInputProps {
+ field: FormField;
+ widget: WidgetCoordinates;
+ isActive: boolean;
+ error?: string;
+ scaleX: number;
+ scaleY: number;
+ onFocus: (fieldName: string) => void;
+ onChange: (fieldName: string, value: string) => void;
+}
+
+/**
+ * WidgetInput subscribes to its own field value via useSyncExternalStore,
+ * so it only re-renders when its specific value changes — not when ANY
+ * form value in the entire document changes.
+ */
+function WidgetInputInner({
+ field,
+ widget,
+ isActive,
+ error,
+ scaleX,
+ scaleY,
+ onFocus,
+ onChange,
+}: WidgetInputProps) {
+ // Per-field value subscription — only this widget re-renders when its value changes
+ const value = useFieldValue(field.name);
+
+ // Coordinates are in visual CSS space (top-left origin).
+ // Multiply by per-axis scale to get rendered pixel coordinates.
+ const left = widget.x * scaleX;
+ const top = widget.y * scaleY;
+ const width = widget.width * scaleX;
+ const height = widget.height * scaleY;
+
+ const borderColor = error ? '#f44336' : (isActive ? '#2196F3' : 'rgba(33, 150, 243, 0.4)');
+ const bgColor = error
+ ? '#FFEBEE' // Red 50 (Opaque)
+ : (isActive ? '#E3F2FD' : '#FFFFFF'); // Blue 50 (Opaque) : White (Opaque)
+
+ const commonStyle: React.CSSProperties = {
+ position: 'absolute',
+ left,
+ top,
+ width,
+ height,
+ zIndex: 10,
+ boxSizing: 'border-box',
+ border: `1px solid ${borderColor}`,
+ borderRadius: 1,
+ background: isActive ? bgColor : 'transparent',
+ transition: 'border-color 0.15s, background 0.15s, box-shadow 0.15s',
+ boxShadow:
+ isActive && field.type !== 'radio' && field.type !== 'checkbox'
+ ? `0 0 0 2px ${error ? 'rgba(244, 67, 54, 0.25)' : 'rgba(33, 150, 243, 0.25)'}`
+ : 'none',
+ cursor: field.readOnly ? 'default' : 'text',
+ pointerEvents: 'auto',
+ display: 'flex',
+ alignItems: field.multiline ? 'stretch' : 'center',
+ };
+
+ const stopPropagation = (e: React.SyntheticEvent) => {
+ e.stopPropagation();
+ // Also stop immediate propagation to native listeners to block non-React subscribers
+ if (e.nativeEvent) {
+ e.nativeEvent.stopImmediatePropagation?.();
+ }
+ };
+
+ const commonProps = {
+ style: commonStyle,
+ onPointerDown: stopPropagation,
+ onPointerUp: stopPropagation,
+ onMouseDown: stopPropagation,
+ onMouseUp: stopPropagation,
+ onClick: stopPropagation,
+ onDoubleClick: stopPropagation,
+ onKeyDown: stopPropagation,
+ onKeyUp: stopPropagation,
+ onKeyPress: stopPropagation,
+ onDragStart: stopPropagation,
+ onSelect: stopPropagation,
+ onContextMenu: stopPropagation,
+ };
+
+ const captureStopProps = {
+ onPointerDownCapture: stopPropagation,
+ onPointerUpCapture: stopPropagation,
+ onMouseDownCapture: stopPropagation,
+ onMouseUpCapture: stopPropagation,
+ onClickCapture: stopPropagation,
+ onKeyDownCapture: stopPropagation,
+ onKeyUpCapture: stopPropagation,
+ onKeyPressCapture: stopPropagation,
+ };
+
+ const fontSize = widget.fontSize
+ ? widget.fontSize * scaleY
+ : field.multiline
+ ? Math.max(6, Math.min(height * 0.60, 14))
+ : Math.max(6, height * 0.65);
+
+ const inputBaseStyle: React.CSSProperties = {
+ width: '100%',
+ height: '100%',
+ border: 'none',
+ outline: 'none',
+ background: 'transparent',
+ padding: 0,
+ paddingLeft: `${Math.max(2, 4 * scaleX)}px`,
+ paddingRight: `${Math.max(2, 4 * scaleX)}px`,
+ fontSize: `${fontSize}px`,
+ fontFamily: 'Helvetica, Arial, sans-serif',
+ color: '#000',
+ boxSizing: 'border-box',
+ lineHeight: 'normal',
+ };
+
+ const handleFocus = () => onFocus(field.name);
+
+ switch (field.type) {
+ case 'text':
+ return (
+
+ {field.multiline ? (
+