@prosopo/procaptcha-puzzle 2.13.3 → 2.14.0

package/dist/cjs/components/puzzleCanvas.cjs

@@ -0,0 +1,450 @@
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+//#region src/components/puzzleCanvas.ts
+var CONTAINER_WIDTH = 300;
+var CONTAINER_HEIGHT = 200;
+var PIECE_CSS_CLASS = "prosopo-puzzle-piece";
+var STEP_PX = 10;
+var FINE_STEP_PX = 2;
+var ANNOUNCE_DEBOUNCE_MS = 400;
+var VISUALLY_HIDDEN = {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	padding: 0,
+	margin: "-1px",
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	border: 0
+};
+var stylesheet = (focusRingColor) => `
+@keyframes prosopo-puzzle-shake {
+	0%, 100% { transform: translateX(0); }
+	10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
+	20%, 40%, 60%, 80% { transform: translateX(4px); }
+}
+.${PIECE_CSS_CLASS}:focus-visible {
+	outline: 3px solid ${focusRingColor};
+	outline-offset: 2px;
+}
+`;
+var KALEIDOSCOPE_TILES = [
+	[
+		0,
+		0,
+		-1,
+		-1
+	],
+	[
+		1,
+		0,
+		1,
+		-1
+	],
+	[
+		2,
+		0,
+		-1,
+		-1
+	],
+	[
+		0,
+		1,
+		-1,
+		1
+	],
+	[
+		1,
+		1,
+		1,
+		1
+	],
+	[
+		2,
+		1,
+		-1,
+		1
+	],
+	[
+		0,
+		2,
+		-1,
+		-1
+	],
+	[
+		1,
+		2,
+		1,
+		-1
+	],
+	[
+		2,
+		2,
+		-1,
+		-1
+	]
+];
+var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+var instanceCount = 0;
+var mountPuzzleCanvas = (initialProps) => {
+	const teardown = new _prosopo_procaptcha_common.Teardown();
+	let props = initialProps;
+	let posX = props.originX;
+	let posY = props.originY;
+	let dragging = false;
+	let puzzleEvents = [];
+	let dragOffset = {
+		x: 0,
+		y: 0
+	};
+	let visible = false;
+	let shaking = false;
+	let shakeTimer;
+	let announceTimer;
+	let keyboardDragging = false;
+	const baseId = `prosopo-puzzle-${instanceCount++}`;
+	const instructionId = `${baseId}-instruction`;
+	const keyboardHintId = `${baseId}-keyboard-hint`;
+	const t = (key, options) => props.translator.t(key, options);
+	const style = (0, _prosopo_procaptcha_common.createElement)("style", { text: stylesheet(props.theme.palette.primary.main) });
+	const announcer = (0, _prosopo_procaptcha_common.createElement)("output", {
+		style: VISUALLY_HIDDEN,
+		attributes: {
+			"aria-live": "polite",
+			"aria-atomic": "true"
+		}
+	});
+	const keyboardHint = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: VISUALLY_HIDDEN,
+		attributes: { id: keyboardHintId }
+	});
+	const backgroundTiles = KALEIDOSCOPE_TILES.map(([column, row, sx, sy]) => (0, _prosopo_procaptcha_common.createElement)("img", {
+		style: {
+			position: "absolute",
+			left: `${column * CONTAINER_WIDTH}px`,
+			top: `${row * CONTAINER_HEIGHT}px`,
+			width: `${CONTAINER_WIDTH}px`,
+			height: `${CONTAINER_HEIGHT}px`,
+			transform: `scale(${sx}, ${sy})`,
+			pointerEvents: "none",
+			userSelect: "none"
+		},
+		attributes: {
+			alt: "",
+			draggable: false
+		}
+	}));
+	const backgroundLayer = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			left: `-${CONTAINER_WIDTH}px`,
+			top: `-${CONTAINER_HEIGHT}px`,
+			position: "absolute",
+			width: `${CONTAINER_WIDTH * 3}px`,
+			height: `${CONTAINER_HEIGHT * 3}px`,
+			pointerEvents: "none",
+			userSelect: "none",
+			transformOrigin: "center center",
+			willChange: "transform, filter"
+		},
+		children: backgroundTiles
+	});
+	const piece = (0, _prosopo_procaptcha_common.createElement)("div", {
+		className: PIECE_CSS_CLASS,
+		style: {
+			position: "absolute",
+			backgroundSize: "100% 100%",
+			touchAction: "none"
+		},
+		attributes: {
+			role: "application",
+			"aria-describedby": `${instructionId} ${keyboardHintId}`
+		}
+	});
+	if ("production" !== process.env.NODE_ENV) (0, _prosopo_procaptcha_common.applyAttributes)(piece, { "data-cy": "prosopo-puzzle-piece" });
+	const area = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			position: "relative",
+			width: `${CONTAINER_WIDTH}px`,
+			height: `${CONTAINER_HEIGHT}px`,
+			borderRadius: "0 0 20px 20px",
+			overflow: "hidden",
+			userSelect: "none",
+			transition: "opacity 0.2s ease"
+		},
+		children: [backgroundLayer, piece]
+	});
+	const instruction = (0, _prosopo_procaptcha_common.createElement)("div", {
+		attributes: { id: instructionId },
+		style: {
+			borderRadius: "20px 20px 0 0",
+			padding: "12px 20px",
+			width: `${CONTAINER_WIDTH}px`,
+			boxSizing: "border-box",
+			textAlign: "center",
+			fontSize: "14px",
+			fontWeight: 500,
+			transition: "color 0.3s ease, border-color 0.3s ease"
+		}
+	});
+	const panel = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: "0",
+			transition: "opacity 0.3s ease, transform 0.3s ease"
+		},
+		children: [instruction, area]
+	});
+	const surfaceProps = () => ({
+		show: true,
+		placement: props.placement,
+		anchor: props.anchor,
+		onDismiss: props.onDismiss,
+		scrim: visible ? "dim" : "none",
+		dialogLabel: t("WIDGET.PUZZLE.DIALOG_LABEL", { defaultValue: "Puzzle challenge" })
+	});
+	const surface = (0, _prosopo_procaptcha_common.mountChallengeSurface)(surfaceProps());
+	surface.content.append(style, announcer, keyboardHint, panel);
+	const announce = (message, delayMs = 0) => {
+		if (void 0 !== announceTimer) {
+			clearTimeout(announceTimer);
+			announceTimer = void 0;
+		}
+		if (0 === delayMs) {
+			announcer.textContent = message;
+			return;
+		}
+		announceTimer = setTimeout(() => {
+			announcer.textContent = message;
+		}, delayMs);
+	};
+	const describePosition = (x, y) => t("WIDGET.PUZZLE.POSITION", {
+		defaultValue: "{{x}} percent across, {{y}} percent down",
+		x: Math.round(x / CONTAINER_WIDTH * 100),
+		y: Math.round(y / CONTAINER_HEIGHT * 100)
+	});
+	const applyPiecePosition = () => {
+		(0, _prosopo_procaptcha_common.applyStyles)(piece, {
+			left: `${posX - props.pieceSize / 2}px`,
+			top: `${posY - props.pieceSize / 2}px`
+		});
+	};
+	const applyPieceChrome = () => {
+		(0, _prosopo_procaptcha_common.applyStyles)(piece, {
+			width: `${props.pieceSize}px`,
+			height: `${props.pieceSize}px`,
+			backgroundImage: `url(${props.piece})`,
+			cursor: props.submitting ? "default" : dragging ? "grabbing" : "grab",
+			filter: dragging ? "drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45))" : "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35))",
+			transition: dragging ? "none" : "filter 0.2s ease, left 0.3s ease, top 0.3s ease"
+		});
+	};
+	const PARALLAX_FACTOR = .08;
+	const applyBackgroundMotion = () => {
+		const deltaX = posX - props.originX;
+		const deltaY = posY - props.originY;
+		const dragDistance = Math.hypot(deltaX, deltaY);
+		const translateX = dragging ? -deltaX * PARALLAX_FACTOR : 0;
+		const translateY = dragging ? -deltaY * PARALLAX_FACTOR : 0;
+		const scale = dragging ? 1.03 : 1;
+		const hueShift = dragging ? clamp(deltaX * .12, -18, 18) : 0;
+		const satBoost = dragging ? 1 + Math.min(.25, dragDistance * .0035) : 1;
+		const brightness = dragging ? 1 - Math.min(.06, dragDistance * 8e-4) : 1;
+		(0, _prosopo_procaptcha_common.applyStyles)(backgroundLayer, {
+			transform: `translate(${translateX.toFixed(2)}px, ${translateY.toFixed(2)}px) scale(${scale.toFixed(3)})`,
+			filter: `hue-rotate(${hueShift.toFixed(2)}deg) saturate(${satBoost.toFixed(3)}) brightness(${brightness.toFixed(3)})`,
+			transition: dragging ? "none" : "transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease"
+		});
+	};
+	const render = () => {
+		const { theme } = props;
+		(0, _prosopo_procaptcha_common.applyStyles)(panel, {
+			opacity: visible ? 1 : 0,
+			transform: visible ? "scale(1)" : "scale(0.9)",
+			animation: shaking ? "prosopo-puzzle-shake 0.5s ease" : "none"
+		});
+		instruction.textContent = props.showRetry ? t("WIDGET.PUZZLE.RETRY", { defaultValue: "Not quite — try again" }) : t("WIDGET.PUZZLE.DRAG", { defaultValue: "Drag the piece to the target" });
+		keyboardHint.textContent = t("WIDGET.PUZZLE.KEYBOARD_HINT", { defaultValue: "Use the arrow keys to move the piece, holding shift for smaller steps. Press Enter to submit it, Home to put it back at the start, or Escape to cancel." });
+		(0, _prosopo_procaptcha_common.applyStyles)(instruction, {
+			backgroundColor: theme.palette.surface,
+			fontFamily: theme.font.fontFamily,
+			color: props.showRetry ? theme.palette.error.main : theme.palette.onSurface,
+			borderBottom: `2px solid ${props.showRetry ? theme.palette.error.main : "transparent"}`
+		});
+		(0, _prosopo_procaptcha_common.applyStyles)(area, {
+			background: `linear-gradient(135deg, ${theme.palette.surface} 0%, ${theme.palette.primaryContainer.main} 50%, ${theme.palette.surface} 100%)`,
+			opacity: props.submitting ? .6 : 1,
+			pointerEvents: props.submitting ? "none" : "auto"
+		});
+		for (const tile of backgroundTiles) tile.src = props.background;
+		(0, _prosopo_procaptcha_common.applyAttributes)(piece, {
+			tabindex: props.submitting ? -1 : 0,
+			"aria-roledescription": t("WIDGET.PUZZLE.PIECE_ROLE", { defaultValue: "draggable puzzle piece" }),
+			"aria-label": t("WIDGET.PUZZLE.PIECE_LABEL", { defaultValue: "Puzzle piece" })
+		});
+		applyPiecePosition();
+		applyPieceChrome();
+		applyBackgroundMotion();
+		surface.update(surfaceProps());
+	};
+	const containerOffset = () => {
+		const rect = area.getBoundingClientRect();
+		return {
+			x: rect.left,
+			y: rect.top
+		};
+	};
+	const complete = (finalX, finalY) => {
+		props.onComplete(finalX, finalY, [...puzzleEvents]);
+	};
+	const handleMove = (clientX, clientY) => {
+		if (!dragging) return;
+		const offset = containerOffset();
+		posX = clamp(clientX - offset.x - dragOffset.x, 0, CONTAINER_WIDTH);
+		posY = clamp(clientY - offset.y - dragOffset.y, 0, CONTAINER_HEIGHT);
+		applyPiecePosition();
+		applyBackgroundMotion();
+		puzzleEvents.push({
+			x: posX,
+			y: posY,
+			t: Date.now()
+		});
+	};
+	const handleEnd = () => {
+		if (!dragging) return;
+		dragging = false;
+		applyPieceChrome();
+		applyBackgroundMotion();
+		const lastEvent = puzzleEvents[puzzleEvents.length - 1];
+		complete(lastEvent ? lastEvent.x : props.originX, lastEvent ? lastEvent.y : props.originY);
+	};
+	const beginDrag = (clientX, clientY) => {
+		if (props.submitting) return;
+		dragging = true;
+		keyboardDragging = false;
+		puzzleEvents = [];
+		const offset = containerOffset();
+		dragOffset = {
+			x: clientX - offset.x - posX,
+			y: clientY - offset.y - posY
+		};
+		applyPieceChrome();
+		applyBackgroundMotion();
+	};
+	const moveByKeyboard = (deltaX, deltaY) => {
+		if (!keyboardDragging) {
+			keyboardDragging = true;
+			puzzleEvents = [];
+		}
+		posX = clamp(posX + deltaX, 0, CONTAINER_WIDTH);
+		posY = clamp(posY + deltaY, 0, CONTAINER_HEIGHT);
+		applyPiecePosition();
+		puzzleEvents.push({
+			x: posX,
+			y: posY,
+			t: Date.now()
+		});
+		announce(describePosition(posX, posY), ANNOUNCE_DEBOUNCE_MS);
+	};
+	const keyboardMove = (key, step) => {
+		switch (key) {
+			case "ArrowLeft": return [-step, 0];
+			case "ArrowRight": return [step, 0];
+			case "ArrowUp": return [0, -step];
+			case "ArrowDown": return [0, step];
+			case "Home": return [props.originX - posX, props.originY - posY];
+			default: return;
+		}
+	};
+	teardown.addEventListener(piece, "keydown", (event) => {
+		if (props.submitting || !(0, _prosopo_procaptcha_common.isEventTrusted)(event)) return;
+		const keyboardEvent = event;
+		const step = keyboardEvent.shiftKey ? FINE_STEP_PX : STEP_PX;
+		const move = keyboardMove(keyboardEvent.key, step);
+		if (move) {
+			keyboardEvent.preventDefault();
+			moveByKeyboard(move[0], move[1]);
+			return;
+		}
+		if ("Enter" === keyboardEvent.key || " " === keyboardEvent.key) {
+			keyboardEvent.preventDefault();
+			keyboardDragging = false;
+			complete(posX, posY);
+		}
+	});
+	teardown.addEventListener(piece, "focus", () => {
+		announce(describePosition(posX, posY));
+	});
+	teardown.addEventListener(piece, "mousedown", (event) => {
+		const mouseEvent = event;
+		beginDrag(mouseEvent.clientX, mouseEvent.clientY);
+	});
+	teardown.addEventListener(piece, "touchstart", (event) => {
+		const touch = event.touches[0];
+		if (touch) beginDrag(touch.clientX, touch.clientY);
+	});
+	teardown.addEventListener(document, "mousemove", (event) => {
+		const mouseEvent = event;
+		handleMove(mouseEvent.clientX, mouseEvent.clientY);
+	});
+	teardown.addEventListener(document, "mouseup", handleEnd);
+	teardown.addEventListener(document, "touchmove", (event) => {
+		const touch = event.touches[0];
+		if (touch) handleMove(touch.clientX, touch.clientY);
+	});
+	teardown.addEventListener(document, "touchend", handleEnd);
+	render();
+	const frame = requestAnimationFrame(() => {
+		visible = true;
+		render();
+	});
+	teardown.add(() => cancelAnimationFrame(frame));
+	const startShake = () => {
+		shaking = true;
+		render();
+		if (void 0 !== shakeTimer) clearTimeout(shakeTimer);
+		shakeTimer = setTimeout(() => {
+			shaking = false;
+			render();
+		}, 500);
+	};
+	teardown.add(() => {
+		if (void 0 !== shakeTimer) clearTimeout(shakeTimer);
+		if (void 0 !== announceTimer) clearTimeout(announceTimer);
+	});
+	const announceSubmitting = () => {
+		announce(t("WIDGET.PUZZLE.CHECKING", { defaultValue: "Checking your answer" }));
+	};
+	const announceRetry = () => {
+		announce(t("WIDGET.PUZZLE.RETRY_ANNOUNCEMENT", { defaultValue: "Not quite. A new puzzle has loaded and the piece is back at the start." }));
+	};
+	if (props.submitting) announceSubmitting();
+	else if (props.showRetry) announceRetry();
+	if (props.showRetry) startShake();
+	return {
+		update: (nextProps) => {
+			const previous = props;
+			props = nextProps;
+			if (nextProps.originX !== previous.originX || nextProps.originY !== previous.originY) {
+				posX = nextProps.originX;
+				posY = nextProps.originY;
+				keyboardDragging = false;
+			}
+			if (nextProps.submitting && !previous.submitting) announceSubmitting();
+			if (nextProps.showRetry && !previous.showRetry) announceRetry();
+			if (nextProps.showRetry && !previous.showRetry) {
+				startShake();
+				return;
+			}
+			render();
+		},
+		destroy: () => {
+			teardown.run();
+			surface.destroy();
+		}
+	};
+};
+//#endregion
+exports.mountPuzzleCanvas = mountPuzzleCanvas;

package/dist/cjs/index.cjs

@@ -1,3 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_ProcaptchaPuzzle = require("./components/ProcaptchaPuzzle.cjs");
-exports.ProcaptchaPuzzle = require_ProcaptchaPuzzle.ProcaptchaPuzzle;
+const require_puzzleCanvas = require("./components/puzzleCanvas.cjs");
+const require_procaptchaWidget = require("./components/procaptchaWidget.cjs");
+const require_procaptchaPuzzle = require("./components/procaptchaPuzzle.cjs");
+exports.loadProcaptchaPuzzle = require_procaptchaPuzzle.loadProcaptchaPuzzle;
+exports.mountProcaptchaPuzzle = require_procaptchaPuzzle.mountProcaptchaPuzzle;
+exports.mountProcaptchaPuzzleWidget = require_procaptchaWidget.default;
+exports.mountPuzzleCanvas = require_puzzleCanvas.mountPuzzleCanvas;

package/dist/components/procaptchaPuzzle.d.ts

@@ -0,0 +1,7 @@
+import type { ProcaptchaProps } from "@prosopo/types";
+import type { ProcaptchaPuzzleHandle } from "./procaptchaWidget.js";
+export type { ProcaptchaPuzzleHandle };
+export type ProcaptchaPuzzleMountFn = (container: HTMLElement, props: ProcaptchaProps) => ProcaptchaPuzzleHandle;
+export declare const loadProcaptchaPuzzle: () => Promise<ProcaptchaPuzzleMountFn>;
+export declare const mountProcaptchaPuzzle: (container: HTMLElement, props: ProcaptchaProps) => ProcaptchaPuzzleHandle;
+//# sourceMappingURL=procaptchaPuzzle.d.ts.map

package/dist/components/procaptchaPuzzle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"procaptchaPuzzle.d.ts","sourceRoot":"","sources":["../../src/components/procaptchaPuzzle.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAEpE,YAAY,EAAE,sBAAsB,EAAE,CAAC;AAEvC,MAAM,MAAM,uBAAuB,GAAG,CACrC,SAAS,EAAE,WAAW,EACtB,KAAK,EAAE,eAAe,KAClB,sBAAsB,CAAC;AAM5B,eAAO,MAAM,oBAAoB,QACtB,OAAO,CAAC,uBAAuB,CAC2B,CAAC;AAEtE,eAAO,MAAM,qBAAqB,cACtB,WAAW,SACf,eAAe,KACpB,sBAkBF,CAAC"}

package/dist/components/procaptchaPuzzle.js

@@ -0,0 +1,21 @@
+//#region src/components/procaptchaPuzzle.ts
+/**
+* Dynamic import so the puzzle widget lands in its own chunk, replacing the
+* `lazy()` + `<Suspense>` pair that used to provide the split.
+*/
+var loadProcaptchaPuzzle = async () => (await import("./procaptchaWidget.js")).mountProcaptchaPuzzleWidget;
+var mountProcaptchaPuzzle = (container, props) => {
+	let destroyed = false;
+	let inner;
+	loadProcaptchaPuzzle().then((mount) => {
+		if (destroyed) return;
+		inner = mount(container, props);
+	});
+	return { destroy: () => {
+		destroyed = true;
+		inner?.destroy();
+		inner = void 0;
+	} };
+};
+//#endregion
+export { loadProcaptchaPuzzle, mountProcaptchaPuzzle };

package/dist/components/procaptchaPuzzle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"procaptchaPuzzle.js","sourceRoot":"","sources":["../../src/components/procaptchaPuzzle.ts"],"names":[],"mappings":"AA4BA,MAAM,CAAC,MAAM,oBAAoB,GAChC,KAAK,IAAsC,EAAE,CAC5C,CAAC,MAAM,MAAM,CAAC,uBAAuB,CAAC,CAAC,CAAC,2BAA2B,CAAC;AAEtE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACpC,SAAsB,EACtB,KAAsB,EACG,EAAE;IAC3B,IAAI,SAAS,GAAG,KAAK,CAAC;IACtB,IAAI,KAAyC,CAAC;IAE9C,KAAK,oBAAoB,EAAE,CAAC,IAAI,CAAC,CAAC,KAA8B,EAAE,EAAE;QACnE,IAAI,SAAS,EAAE,CAAC;YACf,OAAO;QACR,CAAC;QACD,KAAK,GAAG,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,OAAO;QACN,OAAO,EAAE,GAAG,EAAE;YACb,SAAS,GAAG,IAAI,CAAC;YACjB,KAAK,EAAE,OAAO,EAAE,CAAC;YACjB,KAAK,GAAG,SAAS,CAAC;QACnB,CAAC;KACD,CAAC;AACH,CAAC,CAAC"}

package/dist/components/procaptchaWidget.d.ts

@@ -0,0 +1,7 @@
+import { type ProcaptchaProps } from "@prosopo/types";
+export interface ProcaptchaPuzzleHandle {
+    destroy(): void;
+}
+export declare const mountProcaptchaPuzzleWidget: (container: HTMLElement, props: ProcaptchaProps) => ProcaptchaPuzzleHandle;
+export default mountProcaptchaPuzzleWidget;
+//# sourceMappingURL=procaptchaWidget.d.ts.map

package/dist/components/procaptchaWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"procaptchaWidget.d.ts","sourceRoot":"","sources":["../../src/components/procaptchaWidget.ts"],"names":[],"mappings":"AA6BA,OAAO,EAGN,KAAK,eAAe,EAGpB,MAAM,gBAAgB,CAAC;AAUxB,MAAM,WAAW,sBAAsB;IACtC,OAAO,IAAI,IAAI,CAAC;CAChB;AAED,eAAO,MAAM,2BAA2B,cAC5B,WAAW,SACf,eAAe,KACpB,sBAiVF,CAAC;AAEF,eAAe,2BAA2B,CAAC"}