@prosopo/procaptcha-puzzle 2.10.39 → 2.10.41

package/dist/components/PuzzleCanvas.js

@@ -1,278 +1,236 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback } from "react";
-const CONTAINER_WIDTH = 300;
-const CONTAINER_HEIGHT = 200;
-const TARGET_SIZE = 30;
-const PIECE_SIZE = 24;
-const SHAKE_KEYFRAMES = `
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+//#region src/components/PuzzleCanvas.tsx
+var CONTAINER_WIDTH = 300;
+var CONTAINER_HEIGHT = 200;
+var TARGET_SIZE = 30;
+var PIECE_SIZE = 24;
+var SHAKE_KEYFRAMES = `
 @keyframes prosopo-puzzle-shake {
 	0%, 100% { transform: translateX(0); }
 	10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
 	20%, 40%, 60%, 80% { transform: translateX(4px); }
 }
 `;
-const PuzzleCanvas = ({
-  originX,
-  originY,
-  targetX,
-  targetY,
-  onComplete,
-  showRetry,
-  submitting
-}) => {
-  const [posX, setPosX] = useState(originX);
-  const [posY, setPosY] = useState(originY);
-  const isDragging = useRef(false);
-  const puzzleEvents = useRef([]);
-  const containerRef = useRef(null);
-  const offsetRef = useRef({ x: 0, y: 0 });
-  const [visible, setVisible] = useState(false);
-  const [shaking, setShaking] = useState(false);
-  useEffect(() => {
-    setPosX(originX);
-    setPosY(originY);
-  }, [originX, originY]);
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => setVisible(true));
-    return () => cancelAnimationFrame(frame);
-  }, []);
-  useEffect(() => {
-    if (showRetry) {
-      setShaking(true);
-      const timer = setTimeout(() => setShaking(false), 500);
-      return () => clearTimeout(timer);
-    }
-    return () => {
-    };
-  }, [showRetry]);
-  const clamp = useCallback(
-    (value, min, max) => {
-      return Math.max(min, Math.min(max, value));
-    },
-    []
-  );
-  const getContainerOffset = useCallback(() => {
-    if (containerRef.current) {
-      const rect = containerRef.current.getBoundingClientRect();
-      return { x: rect.left, y: rect.top };
-    }
-    return { x: 0, y: 0 };
-  }, []);
-  const handleMoveEvent = useCallback(
-    (clientX, clientY) => {
-      if (!isDragging.current) {
-        return;
-      }
-      const containerOffset = getContainerOffset();
-      const newX = clamp(
-        clientX - containerOffset.x - offsetRef.current.x,
-        0,
-        CONTAINER_WIDTH
-      );
-      const newY = clamp(
-        clientY - containerOffset.y - offsetRef.current.y,
-        0,
-        CONTAINER_HEIGHT
-      );
-      setPosX(newX);
-      setPosY(newY);
-      puzzleEvents.current.push({ x: newX, y: newY, t: Date.now() });
-    },
-    [clamp, getContainerOffset]
-  );
-  const handleEndEvent = useCallback(() => {
-    if (!isDragging.current) {
-      return;
-    }
-    isDragging.current = false;
-    const currentEvents = [...puzzleEvents.current];
-    const lastEvent = currentEvents[currentEvents.length - 1];
-    const finalX = lastEvent ? lastEvent.x : originX;
-    const finalY = lastEvent ? lastEvent.y : originY;
-    onComplete(finalX, finalY, currentEvents);
-  }, [onComplete, originX, originY]);
-  const handleMouseMove = useCallback(
-    (event) => {
-      handleMoveEvent(event.clientX, event.clientY);
-    },
-    [handleMoveEvent]
-  );
-  const handleTouchMove = useCallback(
-    (event) => {
-      const touch = event.touches[0];
-      if (touch) {
-        handleMoveEvent(touch.clientX, touch.clientY);
-      }
-    },
-    [handleMoveEvent]
-  );
-  const handleMouseUp = useCallback(() => {
-    handleEndEvent();
-  }, [handleEndEvent]);
-  const handleTouchEnd = useCallback(() => {
-    handleEndEvent();
-  }, [handleEndEvent]);
-  useEffect(() => {
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    document.addEventListener("touchmove", handleTouchMove);
-    document.addEventListener("touchend", handleTouchEnd);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.removeEventListener("touchmove", handleTouchMove);
-      document.removeEventListener("touchend", handleTouchEnd);
-    };
-  }, [handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
-  const handlePieceMouseDown = useCallback(
-    (event) => {
-      if (submitting) return;
-      isDragging.current = true;
-      puzzleEvents.current = [];
-      const containerOffset = getContainerOffset();
-      offsetRef.current = {
-        x: event.clientX - containerOffset.x - posX,
-        y: event.clientY - containerOffset.y - posY
-      };
-    },
-    [getContainerOffset, posX, posY, submitting]
-  );
-  const handlePieceTouchStart = useCallback(
-    (event) => {
-      if (submitting) return;
-      const touch = event.touches[0];
-      if (touch) {
-        isDragging.current = true;
-        puzzleEvents.current = [];
-        const containerOffset = getContainerOffset();
-        offsetRef.current = {
-          x: touch.clientX - containerOffset.x - posX,
-          y: touch.clientY - containerOffset.y - posY
-        };
-      }
-    },
-    [getContainerOffset, posX, posY, submitting]
-  );
-  const instructionText = showRetry ? "Not quite — try again" : "Drag the piece to the target";
-  const headerBorderColor = showRetry ? "rgba(220, 53, 69, 0.4)" : "transparent";
-  const headerTextColor = showRetry ? "#dc3545" : "#333";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 2147483646,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: visible ? "rgba(0, 0, 0, 0.4)" : "rgba(0, 0, 0, 0)",
-        transition: "background-color 0.3s ease"
-      },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: SHAKE_KEYFRAMES }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: "0",
-              zIndex: 2147483647,
-              opacity: visible ? 1 : 0,
-              transform: visible ? "scale(1)" : "scale(0.9)",
-              transition: "opacity 0.3s ease, transform 0.3s ease",
-              animation: shaking ? "prosopo-puzzle-shake 0.5s ease" : "none"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    backgroundColor: "#fff",
-                    borderRadius: "8px 8px 0 0",
-                    padding: "12px 20px",
-                    width: `${CONTAINER_WIDTH}px`,
-                    boxSizing: "border-box",
-                    textAlign: "center",
-                    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-                    fontSize: "14px",
-                    fontWeight: 500,
-                    color: headerTextColor,
-                    borderBottom: `2px solid ${headerBorderColor}`,
-                    boxShadow: "0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)",
-                    transition: "color 0.3s ease, border-color 0.3s ease"
-                  },
-                  children: instructionText
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  ref: containerRef,
-                  style: {
-                    position: "relative",
-                    width: `${CONTAINER_WIDTH}px`,
-                    height: `${CONTAINER_HEIGHT}px`,
-                    background: "linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #e8eaf6 100%)",
-                    borderRadius: "0 0 8px 8px",
-                    overflow: "hidden",
-                    userSelect: "none",
-                    boxShadow: "0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)",
-                    opacity: submitting ? 0.6 : 1,
-                    pointerEvents: submitting ? "none" : "auto",
-                    transition: "opacity 0.2s ease"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          left: `${targetX - TARGET_SIZE / 2}px`,
-                          top: `${targetY - TARGET_SIZE / 2}px`,
-                          width: `${TARGET_SIZE}px`,
-                          height: `${TARGET_SIZE}px`,
-                          borderRadius: "50%",
-                          border: "2px dashed rgba(74, 144, 217, 0.6)",
-                          backgroundColor: "rgba(74, 144, 217, 0.08)",
-                          boxSizing: "border-box"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        ...process.env.NODE_ENV !== "production" && {
-                          "data-cy": "prosopo-puzzle-piece"
-                        },
-                        onMouseDown: handlePieceMouseDown,
-                        onTouchStart: handlePieceTouchStart,
-                        style: {
-                          position: "absolute",
-                          left: `${posX - PIECE_SIZE / 2}px`,
-                          top: `${posY - PIECE_SIZE / 2}px`,
-                          width: `${PIECE_SIZE}px`,
-                          height: `${PIECE_SIZE}px`,
-                          borderRadius: "50%",
-                          background: "radial-gradient(circle at 40% 40%, #6ab0ff, #4a90d9)",
-                          cursor: submitting ? "default" : isDragging.current ? "grabbing" : "grab",
-                          boxShadow: isDragging.current ? "0 4px 12px rgba(74, 144, 217, 0.5)" : "0 2px 6px rgba(74, 144, 217, 0.3)",
-                          transition: isDragging.current ? "none" : "box-shadow 0.2s ease, left 0.3s ease, top 0.3s ease"
-                        }
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  PuzzleCanvas
+var PuzzleCanvas = ({ originX, originY, targetX, targetY, onComplete, showRetry, submitting }) => {
+	const [posX, setPosX] = useState(originX);
+	const [posY, setPosY] = useState(originY);
+	const isDragging = useRef(false);
+	const puzzleEvents = useRef([]);
+	const containerRef = useRef(null);
+	const offsetRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const [visible, setVisible] = useState(false);
+	const [shaking, setShaking] = useState(false);
+	useEffect(() => {
+		setPosX(originX);
+		setPosY(originY);
+	}, [originX, originY]);
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => setVisible(true));
+		return () => cancelAnimationFrame(frame);
+	}, []);
+	useEffect(() => {
+		if (showRetry) {
+			setShaking(true);
+			const timer = setTimeout(() => setShaking(false), 500);
+			return () => clearTimeout(timer);
+		}
+		return () => {};
+	}, [showRetry]);
+	const clamp = useCallback((value, min, max) => {
+		return Math.max(min, Math.min(max, value));
+	}, []);
+	const getContainerOffset = useCallback(() => {
+		if (containerRef.current) {
+			const rect = containerRef.current.getBoundingClientRect();
+			return {
+				x: rect.left,
+				y: rect.top
+			};
+		}
+		return {
+			x: 0,
+			y: 0
+		};
+	}, []);
+	const handleMoveEvent = useCallback((clientX, clientY) => {
+		if (!isDragging.current) return;
+		const containerOffset = getContainerOffset();
+		const newX = clamp(clientX - containerOffset.x - offsetRef.current.x, 0, CONTAINER_WIDTH);
+		const newY = clamp(clientY - containerOffset.y - offsetRef.current.y, 0, CONTAINER_HEIGHT);
+		setPosX(newX);
+		setPosY(newY);
+		puzzleEvents.current.push({
+			x: newX,
+			y: newY,
+			t: Date.now()
+		});
+	}, [clamp, getContainerOffset]);
+	const handleEndEvent = useCallback(() => {
+		if (!isDragging.current) return;
+		isDragging.current = false;
+		const currentEvents = [...puzzleEvents.current];
+		const lastEvent = currentEvents[currentEvents.length - 1];
+		onComplete(lastEvent ? lastEvent.x : originX, lastEvent ? lastEvent.y : originY, currentEvents);
+	}, [
+		onComplete,
+		originX,
+		originY
+	]);
+	const handleMouseMove = useCallback((event) => {
+		handleMoveEvent(event.clientX, event.clientY);
+	}, [handleMoveEvent]);
+	const handleTouchMove = useCallback((event) => {
+		const touch = event.touches[0];
+		if (touch) handleMoveEvent(touch.clientX, touch.clientY);
+	}, [handleMoveEvent]);
+	const handleMouseUp = useCallback(() => {
+		handleEndEvent();
+	}, [handleEndEvent]);
+	const handleTouchEnd = useCallback(() => {
+		handleEndEvent();
+	}, [handleEndEvent]);
+	useEffect(() => {
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+		document.addEventListener("touchmove", handleTouchMove);
+		document.addEventListener("touchend", handleTouchEnd);
+		return () => {
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+			document.removeEventListener("touchmove", handleTouchMove);
+			document.removeEventListener("touchend", handleTouchEnd);
+		};
+	}, [
+		handleMouseMove,
+		handleMouseUp,
+		handleTouchMove,
+		handleTouchEnd
+	]);
+	const handlePieceMouseDown = useCallback((event) => {
+		if (submitting) return;
+		isDragging.current = true;
+		puzzleEvents.current = [];
+		const containerOffset = getContainerOffset();
+		offsetRef.current = {
+			x: event.clientX - containerOffset.x - posX,
+			y: event.clientY - containerOffset.y - posY
+		};
+	}, [
+		getContainerOffset,
+		posX,
+		posY,
+		submitting
+	]);
+	const handlePieceTouchStart = useCallback((event) => {
+		if (submitting) return;
+		const touch = event.touches[0];
+		if (touch) {
+			isDragging.current = true;
+			puzzleEvents.current = [];
+			const containerOffset = getContainerOffset();
+			offsetRef.current = {
+				x: touch.clientX - containerOffset.x - posX,
+				y: touch.clientY - containerOffset.y - posY
+			};
+		}
+	}, [
+		getContainerOffset,
+		posX,
+		posY,
+		submitting
+	]);
+	const instructionText = showRetry ? "Not quite — try again" : "Drag the piece to the target";
+	const headerBorderColor = showRetry ? "rgba(220, 53, 69, 0.4)" : "transparent";
+	const headerTextColor = showRetry ? "#dc3545" : "#333";
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "fixed",
+			inset: 0,
+			zIndex: 2147483646,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			backgroundColor: visible ? "rgba(0, 0, 0, 0.4)" : "rgba(0, 0, 0, 0)",
+			transition: "background-color 0.3s ease"
+		},
+		children: [/* @__PURE__ */ jsx("style", { children: SHAKE_KEYFRAMES }), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				gap: "0",
+				zIndex: 2147483647,
+				opacity: visible ? 1 : 0,
+				transform: visible ? "scale(1)" : "scale(0.9)",
+				transition: "opacity 0.3s ease, transform 0.3s ease",
+				animation: shaking ? "prosopo-puzzle-shake 0.5s ease" : "none"
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				style: {
+					backgroundColor: "#fff",
+					borderRadius: "8px 8px 0 0",
+					padding: "12px 20px",
+					width: `${CONTAINER_WIDTH}px`,
+					boxSizing: "border-box",
+					textAlign: "center",
+					fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
+					fontSize: "14px",
+					fontWeight: 500,
+					color: headerTextColor,
+					borderBottom: `2px solid ${headerBorderColor}`,
+					boxShadow: "0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)",
+					transition: "color 0.3s ease, border-color 0.3s ease"
+				},
+				children: instructionText
+			}), /* @__PURE__ */ jsxs("div", {
+				ref: containerRef,
+				style: {
+					position: "relative",
+					width: `${CONTAINER_WIDTH}px`,
+					height: `${CONTAINER_HEIGHT}px`,
+					background: "linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #e8eaf6 100%)",
+					borderRadius: "0 0 8px 8px",
+					overflow: "hidden",
+					userSelect: "none",
+					boxShadow: "0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)",
+					opacity: submitting ? .6 : 1,
+					pointerEvents: submitting ? "none" : "auto",
+					transition: "opacity 0.2s ease"
+				},
+				children: [/* @__PURE__ */ jsx("div", { style: {
+					position: "absolute",
+					left: `${targetX - TARGET_SIZE / 2}px`,
+					top: `${targetY - TARGET_SIZE / 2}px`,
+					width: `${TARGET_SIZE}px`,
+					height: `${TARGET_SIZE}px`,
+					borderRadius: "50%",
+					border: "2px dashed rgba(74, 144, 217, 0.6)",
+					backgroundColor: "rgba(74, 144, 217, 0.08)",
+					boxSizing: "border-box"
+				} }), /* @__PURE__ */ jsx("div", {
+					...process.env.NODE_ENV !== "production" && { "data-cy": "prosopo-puzzle-piece" },
+					onMouseDown: handlePieceMouseDown,
+					onTouchStart: handlePieceTouchStart,
+					style: {
+						position: "absolute",
+						left: `${posX - PIECE_SIZE / 2}px`,
+						top: `${posY - PIECE_SIZE / 2}px`,
+						width: `${PIECE_SIZE}px`,
+						height: `${PIECE_SIZE}px`,
+						borderRadius: "50%",
+						background: "radial-gradient(circle at 40% 40%, #6ab0ff, #4a90d9)",
+						cursor: submitting ? "default" : isDragging.current ? "grabbing" : "grab",
+						boxShadow: isDragging.current ? "0 4px 12px rgba(74, 144, 217, 0.5)" : "0 2px 6px rgba(74, 144, 217, 0.3)",
+						transition: isDragging.current ? "none" : "box-shadow 0.2s ease, left 0.3s ease, top 0.3s ease"
+					}
+				})]
+			})]
+		})]
+	});
 };
+//#endregion
+export { PuzzleCanvas };

package/dist/index.js

@@ -1,5 +1,3 @@
-import "./components/ProcaptchaWidget.js";
+import "./_virtual/_rolldown/runtime.js";
 import { ProcaptchaPuzzle } from "./components/ProcaptchaPuzzle.js";
-export {
-  ProcaptchaPuzzle
-};
+export { ProcaptchaPuzzle };

package/dist/services/Manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Manager.d.ts","sourceRoot":"","sources":["../../src/services/Manager.ts"],"names":[],"mappings":"AAyBA,OAAO,EAIN,KAAK,iBAAiB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,KAAK,2BAA2B,EAEhC,KAAK,eAAe,EACpB,KAAK,uBAAuB,EAC5B,KAAK,WAAW,EAEhB,MAAM,gBAAgB,CAAC;AAIxB,UAAU,mBAAmB;IAC5B,KAAK,EAAE,CACN,CAAC,CAAC,EAAE,MAAM,EACV,CAAC,CAAC,EAAE,MAAM,KACN,OAAO,CAAC,wBAAwB,GAAG,SAAS,CAAC,CAAC;IACnD,cAAc,EAAE,CACf,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,WAAW,EAAE,KACvB,OAAO,CAAC,OAAO,CAAC,CAAC;IACtB,UAAU,EAAE,CAAC,mBAAmB,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CACvD;AAED,eAAO,MAAM,OAAO,gBACN,2BAA2B,SACjC,eAAe,iBACP,uBAAuB,aAC3B,mBAAmB,sBACV,iBAAiB,qBAGlB,MAAM,MAAM,GAAG,SAAS,KACzC,mBAgZF,CAAC"}
+{"version":3,"file":"Manager.d.ts","sourceRoot":"","sources":["../../src/services/Manager.ts"],"names":[],"mappings":"AA0BA,OAAO,EAIN,KAAK,iBAAiB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,KAAK,2BAA2B,EAEhC,KAAK,eAAe,EACpB,KAAK,uBAAuB,EAC5B,KAAK,WAAW,EAEhB,MAAM,gBAAgB,CAAC;AAIxB,UAAU,mBAAmB;IAC5B,KAAK,EAAE,CACN,CAAC,CAAC,EAAE,MAAM,EACV,CAAC,CAAC,EAAE,MAAM,KACN,OAAO,CAAC,wBAAwB,GAAG,SAAS,CAAC,CAAC;IACnD,cAAc,EAAE,CACf,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,WAAW,EAAE,KACvB,OAAO,CAAC,OAAO,CAAC,CAAC;IACtB,UAAU,EAAE,CAAC,mBAAmB,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CACvD;AAED,eAAO,MAAM,OAAO,gBACN,2BAA2B,SACjC,eAAe,iBACP,uBAAuB,aAC3B,mBAAmB,sBACV,iBAAiB,qBAGlB,MAAM,MAAM,GAAG,SAAS,KACzC,mBAmZF,CAAC"}