(null);
+
+ // Load existing fields from server on mount
+ useEffect(() => {
+ async function loadFields() {
+ try {
+ const res = await fetch(`/api/documents/${docId}/fields`);
+ if (res.ok) {
+ const data = await res.json();
+ setFields(data);
+ }
+ } catch (e) {
+ console.error('Failed to load fields:', e);
+ }
+ }
+ loadFields();
+ }, [docId]);
+
+ const handleDragEnd = useCallback(
+ (event: DragEndEvent) => {
+ setIsDraggingToken(false);
+
+ const { active, over, activatorEvent, delta } = event;
+
+ // Only process if dropped onto the PDF zone
+ if (!over || over.id !== 'pdf-drop-zone') return;
+ if (!pageInfo) return;
+
+ const containerRect = containerRef.current?.getBoundingClientRect();
+ if (!containerRect) return;
+
+ // Compute the final screen position relative to the container
+ // activatorEvent is the initial MouseEvent/TouchEvent at drag start
+ // delta is the displacement from drag start to drop
+ let clientX: number;
+ let clientY: number;
+
+ if (activatorEvent instanceof MouseEvent) {
+ clientX = activatorEvent.clientX;
+ clientY = activatorEvent.clientY;
+ } else if (activatorEvent instanceof TouchEvent && activatorEvent.touches.length > 0) {
+ clientX = activatorEvent.touches[0].clientX;
+ clientY = activatorEvent.touches[0].clientY;
+ } else {
+ // Fallback: use center of container
+ clientX = containerRect.left + containerRect.width / 2;
+ clientY = containerRect.top + containerRect.height / 2;
+ }
+
+ // finalClient = activatorClient + delta (displacement during drag)
+ const finalClientX = clientX + delta.x;
+ const finalClientY = clientY + delta.y;
+
+ // Convert to coordinates relative to the container
+ const screenX = finalClientX - containerRect.left;
+ const screenY = finalClientY - containerRect.top;
+
+ // Clamp to container bounds
+ const clampedX = Math.max(0, Math.min(screenX, containerRect.width));
+ const clampedY = Math.max(0, Math.min(screenY, containerRect.height));
+
+ // Convert screen coords to PDF user-space (Y-flip applied)
+ const { x: pdfX, y: pdfY } = screenToPdfCoords(clampedX, clampedY, containerRect, pageInfo);
+
+ const newField: SignatureFieldData = {
+ id: crypto.randomUUID(),
+ page: currentPage,
+ x: pdfX,
+ y: pdfY,
+ width: 144, // 2 inches at 72 DPI
+ height: 36, // 0.5 inches at 72 DPI
+ };
+
+ const next = [...fields, newField];
+ setFields(next);
+ persistFields(docId, next);
+ },
+ [fields, pageInfo, currentPage, docId],
+ );
+
+ // Render placed fields for the current page
+ const renderFields = () => {
+ if (!pageInfo) return null;
+ const containerRect = containerRef.current?.getBoundingClientRect();
+ if (!containerRect) return null;
+
+ return fields
+ .filter((f) => f.page === currentPage)
+ .map((field) => {
+ const { left, top } = pdfToScreenCoords(field.x, field.y, containerRect, pageInfo);
+ const widthPx = (field.width / pageInfo.originalWidth) * containerRect.width;
+ const heightPx = (field.height / pageInfo.originalHeight) * containerRect.height;
+
+ return (
+
+ Signature
+
+
+ );
+ });
+ };
+
+ return (
+ setIsDraggingToken(true)}
+ onDragEnd={handleDragEnd}
+ >
+ {/* Palette */}
+
+ Field Palette:
+
+
+
+ {/* Droppable PDF zone with field overlays */}
+
+ {children}
+ {renderFields()}
+
+
+ {/* Ghost overlay during drag */}
+
+ {isDraggingToken ? (
+
+ Signature
+
+ ) : null}
+
+
+ );
+}