@prosopo/procaptcha-puzzle 2.15.0 → 2.17.0

package/.turbo/turbo-build$colon$cjs.log

@@ -43,10 +43,10 @@ Bundle build started
 ✓ 6 modules transformed.
 rendering chunks...
 computing gzip size...
+dist/cjs/components/procaptchaPuzzle.cjs   0.47 kB │ gzip: 0.22 kB
 dist/cjs/index.cjs                         0.60 kB │ gzip: 0.21 kB
-dist/cjs/components/procaptchaPuzzle.cjs   0.74 kB │ gzip: 0.38 kB
-dist/cjs/components/procaptchaWidget.cjs   8.32 kB │ gzip: 2.28 kB
-dist/cjs/services/Manager.cjs             10.16 kB │ gzip: 2.82 kB
-dist/cjs/components/puzzleCanvas.cjs      14.77 kB │ gzip: 4.39 kB
+dist/cjs/services/Manager.cjs              8.66 kB │ gzip: 2.45 kB
+dist/cjs/components/procaptchaWidget.cjs   8.86 kB │ gzip: 2.40 kB
+dist/cjs/components/puzzleCanvas.cjs      16.87 kB │ gzip: 4.79 kB
 
-✓ built in 61ms
+✓ built in 85ms

package/.turbo/turbo-build$colon$tsc.log

@@ -1,5 +1,5 @@
 $ tsc --build --verbose
-1:37:59 PM - Projects in this build: 
+11:33:49 AM - Projects in this build: 
     * ../../dev/config/tsconfig.json
     * ../util/tsconfig.json
     * ../locale/tsconfig.json
@@ -17,37 +17,37 @@ $ tsc --build --verbose
     * ../procaptcha-common/tsconfig.json
     * tsconfig.json
 
-1:37:59 PM - Project '../../dev/config/tsconfig.json' is up to date because newest input '../../dev/config/src/webpack/webpack.config.ts' is older than output '../../dev/config/tsconfig.tsbuildinfo'
+11:33:49 AM - Project '../../dev/config/tsconfig.json' is up to date because newest input '../../dev/config/src/webpack/webpack.config.ts' is older than output '../../dev/config/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../util/tsconfig.json' is up to date because newest input '../util/src/url.ts' is older than output '../util/tsconfig.tsbuildinfo'
+11:33:49 AM - Project '../util/tsconfig.json' is up to date because newest input '../util/src/url.ts' is older than output '../util/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../locale/tsconfig.json' is up to date because newest input '../locale/src/translationKey.ts' is older than output '../locale/tsconfig.tsbuildinfo'
+11:33:49 AM - Project '../locale/tsconfig.json' is up to date because newest input '../locale/src/translationKey.ts' is older than output '../locale/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../util-crypto/tsconfig.json' is up to date because newest input '../util-crypto/src/types.ts' is older than output '../util-crypto/tsconfig.tsbuildinfo'
+11:33:49 AM - Project '../util-crypto/tsconfig.json' is up to date because newest input '../util-crypto/src/types.ts' is older than output '../util-crypto/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../types/tsconfig.json' is up to date because newest input '../types/src/types.test-d.ts' is older than output '../types/tsconfig.tsbuildinfo'
+11:33:49 AM - Project '../types/tsconfig.json' is up to date because newest input '../types/src/types.test-d.ts' is older than output '../types/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../api/tsconfig.json' is up to date because newest input '../api/src/tests/apiHarness.ts' is older than output '../api/tsconfig.tsbuildinfo'
+11:33:49 AM - Project '../api/tsconfig.json' is up to date because newest input '../api/src/tests/apiHarness.ts' is older than output '../api/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../logger/tsconfig.json' is up to date because newest input '../logger/src/index.ts' is older than output '../logger/tsconfig.tsbuildinfo'
+11:33:49 AM - Project '../logger/tsconfig.json' is up to date because newest input '../logger/src/index.ts' is older than output '../logger/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../common/tsconfig.json' is up to date because newest input '../common/src/index.ts' is older than output '../common/tsconfig.tsbuildinfo'
+11:33:49 AM - Project '../common/tsconfig.json' is up to date because newest input '../common/src/error.ts' is older than output '../common/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../load-balancer/tsconfig.json' is up to date because newest input '../load-balancer/src/developmentProviderUrl.ts' is older than output '../load-balancer/tsconfig.tsbuildinfo'
+11:33:50 AM - Project '../load-balancer/tsconfig.json' is up to date because newest input '../load-balancer/src/balancer.ts' is older than output '../load-balancer/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../widget-skeleton/tsconfig.json' is up to date because newest input '../widget-skeleton/src/theme.ts' is older than output '../widget-skeleton/tsconfig.tsbuildinfo'
+11:33:50 AM - Project '../widget-skeleton/tsconfig.json' is up to date because newest input '../widget-skeleton/src/webComponent/createWidget.ts' is older than output '../widget-skeleton/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../fingerprintjs/tsconfig.json' is up to date because newest input '../fingerprintjs/src/utils/browser.ts' is older than output '../fingerprintjs/tsconfig.tsbuildinfo'
+11:33:50 AM - Project '../fingerprintjs/tsconfig.json' is up to date because newest input '../fingerprintjs/src/utils/browser.ts' is older than output '../fingerprintjs/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../fingerprint/tsconfig.json' is up to date because newest input '../fingerprint/src/index.ts' is older than output '../fingerprint/tsconfig.tsbuildinfo'
+11:33:50 AM - Project '../fingerprint/tsconfig.json' is up to date because newest input '../fingerprint/src/index.ts' is older than output '../fingerprint/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../keyring/tsconfig.json' is up to date because newest input '../keyring/src/pair/decode.ts' is older than output '../keyring/tsconfig.tsbuildinfo'
+11:33:50 AM - Project '../keyring/tsconfig.json' is up to date because newest input '../keyring/src/pair/decode.ts' is older than output '../keyring/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../account/tsconfig.json' is up to date because newest input '../account/src/custom.d.ts' is older than output '../account/tsconfig.tsbuildinfo'
+11:33:50 AM - Project '../account/tsconfig.json' is up to date because newest input '../account/src/custom.d.ts' is older than output '../account/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project '../procaptcha-common/tsconfig.json' is up to date because newest input '../procaptcha-common/src/extensionLoader.ts' is older than output '../procaptcha-common/tsconfig.tsbuildinfo'
+11:33:50 AM - Project '../procaptcha-common/tsconfig.json' is up to date because newest input '../procaptcha-common/src/state/managerLifecycle.ts' is older than output '../procaptcha-common/tsconfig.tsbuildinfo'
 
-1:37:59 PM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
+11:33:50 AM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
 
-1:37:59 PM - Building project '/home/runner/work/captcha/captcha/packages/procaptcha-puzzle/tsconfig.json'...
+11:33:50 AM - Building project '/home/runner/work/captcha/captcha/packages/procaptcha-puzzle/tsconfig.json'...
 

package/.turbo/turbo-build.log

@@ -45,10 +45,10 @@ Bundle build started
 rendering chunks...
 computing gzip size...
 dist/_virtual/_rolldown/runtime.js    0.04 kB │ gzip: 0.06 kB
+dist/components/procaptchaPuzzle.js   0.33 kB │ gzip: 0.19 kB
 dist/index.js                         0.38 kB │ gzip: 0.16 kB
-dist/components/procaptchaPuzzle.js   0.65 kB │ gzip: 0.36 kB
-dist/components/procaptchaWidget.js   7.98 kB │ gzip: 2.28 kB
-dist/services/Manager.js              9.62 kB │ gzip: 2.78 kB
-dist/components/puzzleCanvas.js      14.04 kB │ gzip: 4.36 kB
+dist/services/Manager.js              8.12 kB │ gzip: 2.41 kB
+dist/components/procaptchaWidget.js   8.49 kB │ gzip: 2.40 kB
+dist/components/puzzleCanvas.js      16.04 kB │ gzip: 4.78 kB
 
-✓ built in 72ms
+✓ built in 78ms

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @prosopo/procaptcha-puzzle
 
+## 2.17.0
+### Minor Changes
+
+- 4570692: Let a user swap the puzzle captcha for an image challenge, on sites where Prosopo has switched it on.
+  
+  Sites get a new staff-only setting, `widgetFeatureFlags.puzzleImageSwitch`. It is off by default and has no stored default. When it is on and the site allows image challenges, the puzzle response says `imageSwitchAvailable: true`. The puzzle then shows a small grid icon next to its title, with a "Switch to an image challenge" tooltip on hover or keyboard focus. After two wrong answers or refreshes in a row, the icon fills with the primary colour and its tooltip shows without a hover, because a touch screen has no hover. The tooltip goes away once the user starts moving the piece.
+  
+  Pressing it re-mints the session the same way refresh does, with `switchToImage: true`. The provider only honours that when the request is a refresh of a puzzle session on the same site and the switch is on. The new session is then an image challenge with reason `PUZZLE_USER_SWITCH`. Like the refresh limit, it only ever moves from puzzle to image, so a client that fakes the request can only make its own challenge harder.
+  
+  Also fixes a wrong puzzle answer restarting the whole widget. The user was sent back to the checkbox instead of getting a new puzzle with "Not quite — try again", and a wasted `/frictionless` request went out. The puzzle now retries in place.
+
+### Patch Changes
+
+- Updated dependencies [4570692]
+  - @prosopo/procaptcha-common@2.21.0
+  - @prosopo/api@4.6.0
+  - @prosopo/types@5.15.0
+  - @prosopo/locale@3.9.0
+  - @prosopo/common@3.1.64
+
+## 2.16.0
+### Minor Changes
+
+- b299a91: An audio challenge, offered only as an accessibility alternative, like reCAPTCHA's audio option. The user hears a short sequence of spoken digits and types them in.
+  
+  It is off by default and needs two switches. Prosopo has to turn on the `captchaTypeFeatureFlags.audio` feature flag for the site, which the site owner cannot do, and the site owner has to set `audioAccessibilityEnabled`. When both are on, image, puzzle and icon-order challenges show a "Use audio instead" button. Pressing it swaps the visual challenge for the audio one. After a wrong answer the user stays on audio and gets a fresh clip.
+  
+  Audio is never a captcha type that can be selected or routed to. A site's `captchaType`, traffic-filter categories, Restrict rules and the site-key CLI all reject it, and routing, PoW escalation and the severity tiers leave it out. The provider only serves audio against the visual session the user was already given, and only on a site with both switches on; any other audio request is refused before the session is used up, and a request without a session is always refused.
+  
+  The spoken digits are synthesised by `@prosopo/audio-assets`, so there is no recorded set of clips to collect. The answer never leaves the provider, and a challenge can be submitted and verified only once, even under concurrent requests. `@prosopo/procaptcha-audio` is the widget. It and the "Use audio instead" button are built on the shared widget code in `@prosopo/procaptcha-common`, and the provider side is built on the shared interactive-captcha code that puzzle and icon-order use.
+  
+  The demo playground has audio pages, and there is an end-to-end test for it.
+
+### Patch Changes
+
+- e13d7a8: New captcha type: `iconOrder`. The user is shown a frame of icons and a legend, and clicks the legend's icons in the order given.
+  
+  Icon-order is off by default. Only Prosopo can switch it on for a site, with the `captchaTypeFeatureFlags.iconOrder` feature flag; the site owner cannot. A site without the flag is never served icon-order by any route, and the challenge endpoint refuses it. Once the flag is on, the owner can still keep icon-order out of the frictionless flow with `frictionlessTypes.iconOrder`, the same way as image and puzzle.
+  
+  The answer never leaves the provider. Icon positions are stored on the challenge record, and the widget receives only the rendered frame and legend. Grading checks order as well as position, and each icon's hit radius scales with its size. Verifying a token is single-use under concurrent requests.
+  
+  `@prosopo/icon-order-assets` draws the imagery, and `@prosopo/procaptcha-icon-order` is the widget. Its text is translated into every supported language.
+  
+  Puzzle and icon-order now share their server code: challenge and solution handlers, the verify route, the submit and verify pipeline, and the database record methods. The widget code they have in common moves into `@prosopo/procaptcha-common`: the lazy mount wrapper, manager expiry and dispose, spent-session handling, behavioural data encryption and trusted click coordinates. Puzzle's behaviour is unchanged.
+  
+  The demo playground has icon-order pages, and there is an end-to-end test for it.
+- Updated dependencies [b299a91]
+- Updated dependencies [e13d7a8]
+- Updated dependencies [270395d]
+  - @prosopo/types@5.14.0
+  - @prosopo/api@4.5.0
+  - @prosopo/procaptcha-common@2.20.0
+  - @prosopo/locale@3.8.0
+  - @prosopo/common@3.1.63
+
 ## 2.15.0
 ### Minor Changes
 

package/dist/cjs/components/procaptchaPuzzle.cjs

@@ -1,22 +1,7 @@
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
 //#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 Promise.resolve().then(() => require("./procaptchaWidget.cjs"))).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;
-	} };
-};
+var mountProcaptchaPuzzle = (0, _prosopo_procaptcha_common.lazyMount)(loadProcaptchaPuzzle);
 //#endregion
 exports.loadProcaptchaPuzzle = loadProcaptchaPuzzle;
 exports.mountProcaptchaPuzzle = mountProcaptchaPuzzle;

package/dist/cjs/components/procaptchaWidget.cjs

@@ -5,7 +5,7 @@ let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
 let _prosopo_types = require("@prosopo/types");
 let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
 //#region src/components/procaptchaWidget.ts
-var PROCAPTCHA_EXECUTE_EVENT = "procaptcha:execute";
+var IMAGE_SWITCH_HIGHLIGHT_AFTER = 2;
 var mountProcaptchaPuzzleWidget = (container, props) => {
 	const teardown = new _prosopo_procaptcha_common.Teardown();
 	const config = props.config;
@@ -26,7 +26,8 @@ var mountProcaptchaPuzzleWidget = (container, props) => {
 	let checkbox;
 	let puzzle;
 	const updateState = (0, _prosopo_procaptcha_common.buildUpdateState)(store.state, store.update);
-	const manager = require_Manager.Manager(config, store.state, updateState, callbacks, frictionlessState, () => honeypot?.getValue());
+	const remintsSession = void 0 !== frictionlessState?.sessionId && void 0 !== props.onReload;
+	const manager = require_Manager.Manager(config, store.state, updateState, callbacks, frictionlessState, () => honeypot?.getValue(), { widgetReloadsOnFailure: remintsSession });
 	const root = (0, _prosopo_procaptcha_common.createElement)("div");
 	container.appendChild(root);
 	if (frictionlessState?.hp) honeypot = (0, _prosopo_procaptcha_common.mountHoneypot)(root, { encodedQuestion: frictionlessState.hp });
@@ -53,10 +54,10 @@ var mountProcaptchaPuzzleWidget = (container, props) => {
 		await replaceChallenge({ showRetry: true });
 	};
 	const replaceChallenge = async (options) => {
-		if (frictionlessState?.sessionId && props.onReload) {
+		if (remintsSession) {
 			puzzlePhase = "submitting";
 			scheduler.schedule();
-			props.onReload(lastCoords?.x, lastCoords?.y, options);
+			props.onReload?.(lastCoords?.x, lastCoords?.y, options);
 			return;
 		}
 		try {
@@ -85,6 +86,18 @@ var mountProcaptchaPuzzleWidget = (container, props) => {
 		scheduler.schedule();
 		replaceChallenge({ refresh: true });
 	};
+	const handleSwitchToImage = () => {
+		if ("dragging" !== puzzlePhase) return;
+		callbacks.onReload?.();
+		showRetry = false;
+		puzzlePhase = "submitting";
+		scheduler.schedule();
+		replaceChallenge({
+			refresh: true,
+			switchToImage: true
+		});
+	};
+	const canSwitchToImage = (challenge) => true === challenge.imageSwitchAvailable && remintsSession;
 	const handleDismiss = () => {
 		puzzlePhase = "checkbox";
 		challengeData = null;
@@ -108,7 +121,12 @@ var mountProcaptchaPuzzleWidget = (container, props) => {
 		placement: config.placement,
 		anchor: props.container,
 		onDismiss: handleDismiss,
-		onRefresh: handleRefresh
+		audioAlternative: (0, _prosopo_procaptcha_common.audioAlternativeOffer)(props, translator.isReady() ? translator.t("WIDGET.AUDIO_ALTERNATIVE") : ""),
+		onRefresh: handleRefresh,
+		...canSwitchToImage(challenge) && {
+			onSwitchToImage: handleSwitchToImage,
+			imageSwitchHighlighted: (props.startReplacementCount ?? 0) >= IMAGE_SWITCH_HIGHLIGHT_AFTER
+		}
 	});
 	const runErrorEffect = () => {
 		if (store.state.error === lastError) return;
@@ -158,18 +176,7 @@ var mountProcaptchaPuzzleWidget = (container, props) => {
 			loading = true;
 			showRetry = false;
 			scheduler.schedule();
-			let x = 0;
-			let y = 0;
-			if (!(0, _prosopo_procaptcha_common.isEventTrusted)(event)) {} else if ("touches" in event && event.touches.length > 0) {
-				const touch = event.touches[0];
-				if (touch) {
-					x = touch.clientX;
-					y = touch.clientY;
-				}
-			} else if ("clientX" in event && "clientY" in event) {
-				x = event.clientX;
-				y = event.clientY;
-			}
+			const { x, y } = (0, _prosopo_procaptcha_common.trustedClickCoords)(event);
 			lastCoords = {
 				x,
 				y
@@ -212,8 +219,8 @@ var mountProcaptchaPuzzleWidget = (container, props) => {
 			}
 		})();
 	};
-	if (props.container) teardown.addEventListener(props.container, PROCAPTCHA_EXECUTE_EVENT, handleExecute);
-	if (isInvisible) teardown.addEventListener(document, PROCAPTCHA_EXECUTE_EVENT, handleExecute);
+	if (props.container) teardown.addEventListener(props.container, _prosopo_procaptcha_common.PROCAPTCHA_EXECUTE_EVENT, handleExecute);
+	if (isInvisible) teardown.addEventListener(document, _prosopo_procaptcha_common.PROCAPTCHA_EXECUTE_EVENT, handleExecute);
 	if (config.language) if (i18n) {
 		if (i18n.language !== config.language) i18n.changeLanguage(config.language);
 	} else (0, _prosopo_locale.loadI18next)(false, config.language);

package/dist/cjs/components/puzzleCanvas.cjs

@@ -104,6 +104,7 @@ var mountPuzzleCanvas = (initialProps) => {
 	let shakeTimer;
 	let announceTimer;
 	let keyboardDragging = false;
+	let hasMovedPiece = false;
 	const baseId = `prosopo-puzzle-${instanceCount++}`;
 	const instructionId = `${baseId}-instruction`;
 	const keyboardHintId = `${baseId}-keyboard-hint`;
@@ -182,6 +183,13 @@ var mountPuzzleCanvas = (initialProps) => {
 		top: "50%",
 		transform: "translateY(-50%)"
 	} });
+	const switchSlot = (0, _prosopo_procaptcha_common.createElement)("div", { style: {
+		position: "absolute",
+		left: "8px",
+		top: "50%",
+		transform: "translateY(-50%)",
+		zIndex: "1"
+	} });
 	const instruction = (0, _prosopo_procaptcha_common.createElement)("div", {
 		style: {
 			position: "relative",
@@ -194,7 +202,11 @@ var mountPuzzleCanvas = (initialProps) => {
 			fontWeight: 500,
 			transition: "color 0.3s ease, border-color 0.3s ease"
 		},
-		children: [instructionText, refreshSlot]
+		children: [
+			instructionText,
+			refreshSlot,
+			switchSlot
+		]
 	});
 	const panel = (0, _prosopo_procaptcha_common.createElement)("div", {
 		style: {
@@ -215,6 +227,29 @@ var mountPuzzleCanvas = (initialProps) => {
 		}
 	});
 	const refreshButton = props.onRefresh ? (0, _prosopo_procaptcha_common.mountReloadButton)(refreshSlot, refreshButtonProps()) : void 0;
+	const imageSwitchButtonProps = () => ({
+		themeColor: _prosopo_widget_skeleton.lightTheme === props.theme ? "light" : "dark",
+		label: t("WIDGET.PUZZLE.SWITCH_TO_IMAGE", { defaultValue: "Switch to an image challenge" }),
+		tooltipPinned: true === props.imageSwitchHighlighted && !hasMovedPiece,
+		onSwitch: () => {
+			if (!props.submitting && !dragging) props.onSwitchToImage?.();
+		}
+	});
+	let imageSwitchButton;
+	const hidePinnedSwitchTooltip = () => {
+		if (hasMovedPiece) return;
+		hasMovedPiece = true;
+		imageSwitchButton?.update(imageSwitchButtonProps());
+	};
+	const syncImageSwitchButton = () => {
+		if (void 0 === props.onSwitchToImage) {
+			imageSwitchButton?.destroy();
+			imageSwitchButton = void 0;
+			return;
+		}
+		if (imageSwitchButton) imageSwitchButton.update(imageSwitchButtonProps());
+		else imageSwitchButton = (0, _prosopo_procaptcha_common.mountImageSwitchButton)(switchSlot, imageSwitchButtonProps());
+	};
 	const surfaceProps = () => ({
 		show: true,
 		placement: props.placement,
@@ -225,6 +260,12 @@ var mountPuzzleCanvas = (initialProps) => {
 	});
 	const surface = (0, _prosopo_procaptcha_common.mountChallengeSurface)(surfaceProps());
 	surface.content.append(style, announcer, keyboardHint, panel);
+	const audioAlternativeFooterProps = () => ({
+		offer: props.audioAlternative,
+		theme: props.theme,
+		width: CONTAINER_WIDTH
+	});
+	const audioAlternativeFooter = (0, _prosopo_procaptcha_common.mountAudioAlternativeFooter)(panel, audioAlternativeFooterProps());
 	const announce = (message, delayMs = 0) => {
 		if (void 0 !== announceTimer) {
 			clearTimeout(announceTimer);
@@ -293,11 +334,15 @@ var mountPuzzleCanvas = (initialProps) => {
 		});
 		(0, _prosopo_procaptcha_common.applyStyles)(refreshSlot, { visibility: props.submitting ? "hidden" : "visible" });
 		refreshButton?.update(refreshButtonProps());
+		syncImageSwitchButton();
+		(0, _prosopo_procaptcha_common.applyStyles)(switchSlot, { visibility: props.submitting ? "hidden" : "visible" });
 		(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"
+			pointerEvents: props.submitting ? "none" : "auto",
+			borderRadius: props.audioAlternative ? "0" : "0 0 20px 20px"
 		});
+		audioAlternativeFooter.update(audioAlternativeFooterProps());
 		for (const tile of backgroundTiles) tile.src = props.background;
 		(0, _prosopo_procaptcha_common.applyAttributes)(piece, {
 			tabindex: props.submitting ? -1 : 0,
@@ -346,6 +391,7 @@ var mountPuzzleCanvas = (initialProps) => {
 		dragging = true;
 		keyboardDragging = false;
 		puzzleEvents = [];
+		hidePinnedSwitchTooltip();
 		const offset = containerOffset();
 		dragOffset = {
 			x: clientX - offset.x - posX,
@@ -358,6 +404,7 @@ var mountPuzzleCanvas = (initialProps) => {
 		if (!keyboardDragging) {
 			keyboardDragging = true;
 			puzzleEvents = [];
+			hidePinnedSwitchTooltip();
 		}
 		posX = clamp(posX + deltaX, 0, CONTAINER_WIDTH);
 		posY = clamp(posY + deltaY, 0, CONTAINER_HEIGHT);
@@ -439,7 +486,9 @@ var mountPuzzleCanvas = (initialProps) => {
 		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." }));
+		const retry = t("WIDGET.PUZZLE.RETRY_ANNOUNCEMENT", { defaultValue: "Not quite. A new puzzle has loaded and the piece is back at the start." });
+		const offerSwitch = void 0 !== props.onSwitchToImage && true === props.imageSwitchHighlighted;
+		announce(offerSwitch ? `${retry} ${t("WIDGET.PUZZLE.SWITCH_TO_IMAGE_ANNOUNCEMENT", { defaultValue: "You can also switch to an image challenge." })}` : retry);
 	};
 	if (props.submitting) announceSubmitting();
 	else if (props.showRetry) announceRetry();
@@ -463,7 +512,9 @@ var mountPuzzleCanvas = (initialProps) => {
 		},
 		destroy: () => {
 			teardown.run();
+			audioAlternativeFooter.destroy();
 			refreshButton?.destroy();
+			imageSwitchButton?.destroy();
 			surface.destroy();
 		}
 	};

package/dist/cjs/services/Manager.cjs

@@ -6,7 +6,7 @@ let _prosopo_common = require("@prosopo/common");
 let _prosopo_util = require("@prosopo/util");
 let _prosopo_util_crypto = require("@prosopo/util-crypto");
 //#region src/services/Manager.ts
-var Manager = (configInput, state, onStateUpdate, callbacks, frictionlessState, getHoneypotValue) => {
+var Manager = (configInput, state, onStateUpdate, callbacks, frictionlessState, getHoneypotValue, options = {}) => {
 	const events = (0, _prosopo_procaptcha_common.getDefaultEvents)(callbacks);
 	let storedChallengeResponse;
 	let storedProviderApi;
@@ -15,7 +15,7 @@ var Manager = (configInput, state, onStateUpdate, callbacks, frictionlessState,
 	let storedClickX;
 	let storedClickY;
 	let previousProviderUrl;
-	let spentSessionId;
+	const spentSession = (0, _prosopo_procaptcha_common.createSpentSessionGuard)();
 	const defaultState = () => {
 		return {
 			showModal: false,
@@ -28,21 +28,13 @@ var Manager = (configInput, state, onStateUpdate, callbacks, frictionlessState,
 			account: void 0
 		};
 	};
-	const clearTimeout = () => {
-		window.clearTimeout(Number(state.timeout));
-		updateState({ timeout: void 0 });
-	};
 	const onFailed = () => {
 		updateState({
 			isHuman: false,
 			loading: false
 		});
 		events.onFailed();
-		resetState(frictionlessState?.restart);
-	};
-	const clearSuccessfulChallengeTimeout = () => {
-		window.clearTimeout(Number(state.successfullChallengeTimeout));
-		updateState({ successfullChallengeTimeout: void 0 });
+		resetState(options.widgetReloadsOnFailure ? void 0 : frictionlessState?.restart);
 	};
 	const getConfig = () => {
 		const config = {
@@ -61,9 +53,9 @@ var Manager = (configInput, state, onStateUpdate, callbacks, frictionlessState,
 		return state.dappAccount;
 	};
 	const updateState = (0, _prosopo_procaptcha_common.buildUpdateState)(state, onStateUpdate);
+	const lifecycle = (0, _prosopo_procaptcha_common.createManagerLifecycle)(state, updateState);
 	const resetState = (frictionlessRestart) => {
-		clearTimeout();
-		clearSuccessfulChallengeTimeout();
+		lifecycle.clearTimers();
 		updateState(defaultState());
 		events.onReset();
 		if (frictionlessRestart) frictionlessRestart();
@@ -75,14 +67,11 @@ var Manager = (configInput, state, onStateUpdate, callbacks, frictionlessState,
 		storedClickY = void 0;
 	};
 	const setValidChallengeTimeout = () => {
-		const timeMillis = getConfig().captchas.puzzle.solutionTimeout;
-		const successfullChallengeTimeout = setTimeout(() => {
-			if (disposed) return;
+		lifecycle.expireSolutionAfter(getConfig().captchas.puzzle.solutionTimeout, () => {
 			updateState({ isHuman: false });
 			events.onExpired();
 			resetState(frictionlessState?.restart);
-		}, timeMillis);
-		updateState({ successfullChallengeTimeout });
+		});
 	};
 	const start = async (x = 0, y = 0) => {
 		await (0, _prosopo_procaptcha_common.providerRetry)(async () => {
@@ -117,7 +106,7 @@ var Manager = (configInput, state, onStateUpdate, callbacks, frictionlessState,
 			previousProviderUrl = providerUrl;
 			const providerApi = new _prosopo_api.ProviderApi(providerUrl, getDappAccount());
 			const challengeSessionId = frictionlessState?.sessionId;
-			if (challengeSessionId && challengeSessionId === spentSessionId) {
+			if (spentSession.isSpent(challengeSessionId)) {
 				updateState({
 					loading: false,
 					error: {
@@ -130,7 +119,7 @@ var Manager = (configInput, state, onStateUpdate, callbacks, frictionlessState,
 			}
 			const simdReadingsOnChallenge = frictionlessState?.getSimdReadings ? await frictionlessState.getSimdReadings(0) : void 0;
 			const challenge = await providerApi.getPuzzleCaptchaChallenge(userAccount, getDappAccount(), challengeSessionId, simdReadingsOnChallenge);
-			if (challengeSessionId) spentSessionId = challengeSessionId;
+			spentSession.markSpent(challengeSessionId);
 			if (challenge.error) {
 				updateState({
 					loading: false,
@@ -169,18 +158,7 @@ var Manager = (configInput, state, onStateUpdate, callbacks, frictionlessState,
 				data: (0, _polkadot_util_string.stringToHex)(challenge[_prosopo_types.ApiParams.timestamp].toString()),
 				type: "bytes"
 			});
-			let encryptedBehavioralData;
-			if (frictionlessState?.encryptBehavioralData && (frictionlessState?.behaviorCollector1 || frictionlessState?.behaviorCollector2 || frictionlessState?.behaviorCollector3 || frictionlessState?.behaviorCollector4)) try {
-				const behavioralData = {
-					collector1: frictionlessState.behaviorCollector1?.getData() || [],
-					collector2: frictionlessState.behaviorCollector2?.getData() || [],
-					collector3: frictionlessState.behaviorCollector3?.getData() || [],
-					collector4: frictionlessState.behaviorCollector4?.getData() || [],
-					deviceCapability: frictionlessState.deviceCapability || "unknown"
-				};
-				const dataToEncrypt = frictionlessState.packBehavioralData ? frictionlessState.packBehavioralData(behavioralData) : behavioralData;
-				encryptedBehavioralData = await frictionlessState.encryptBehavioralData(JSON.stringify(dataToEncrypt));
-			} catch {}
+			const encryptedBehavioralData = await (0, _prosopo_procaptcha_common.encryptBehavioralDataForSubmit)(frictionlessState);
 			let salt;
 			if (storedClickX !== void 0 && storedClickY !== void 0) {
 				const coords = [storedClickX, storedClickY];
@@ -190,7 +168,7 @@ var Manager = (configInput, state, onStateUpdate, callbacks, frictionlessState,
 			const simdReadings = await (0, _prosopo_procaptcha_common.getSimdReadingsForSubmit)(frictionlessState);
 			const clientMetaData = (0, _prosopo_procaptcha_common.buildClientMetaData)(getHoneypotValue?.(), getConfig().clientSessionId);
 			const verifiedSolution = await providerApi.submitPuzzleCaptchaSolution(challenge, getAccount().account.account.address, getDappAccount(), finalX, finalY, puzzleEvents, userTimestampSignature.signature.toString(), encryptedBehavioralData, salt, simdReadings, clientMetaData);
-			if (disposed) return false;
+			if (lifecycle.isDisposed()) return false;
 			if (verifiedSolution[_prosopo_types.ApiParams.verified]) {
 				updateState({
 					isHuman: true,
@@ -218,23 +196,11 @@ var Manager = (configInput, state, onStateUpdate, callbacks, frictionlessState,
 			throw error;
 		}
 	};
-	let disposed = false;
-	/**
-	* Stops this manager's challenge and solution-expiry timers without firing
-	* any event. Left running after the widget is destroyed (reset(), a
-	* restart, an SPA route change) they fired onExpired/onReset later on,
-	* which also cleared the replacement widget's token from the form.
-	*/
-	const dispose = () => {
-		disposed = true;
-		window.clearTimeout(Number(state.timeout));
-		window.clearTimeout(Number(state.successfullChallengeTimeout));
-	};
 	return {
 		start,
 		submitSolution,
 		resetState,
-		dispose
+		dispose: lifecycle.dispose
 	};
 };
 //#endregion

package/dist/components/procaptchaPuzzle.d.ts

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

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

@@ -1 +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"}
+{"version":3,"file":"procaptchaPuzzle.d.ts","sourceRoot":"","sources":["../../src/components/procaptchaPuzzle.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,aAAa,EAAa,MAAM,4BAA4B,CAAC;AAC3E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAEpE,YAAY,EAAE,sBAAsB,EAAE,CAAC;AAEvC,MAAM,MAAM,uBAAuB,GAAG,aAAa,CAAC,sBAAsB,CAAC,CAAC;AAE5E,eAAO,MAAM,oBAAoB,QACtB,OAAO,CAAC,uBAAuB,CAC2B,CAAC;AAEtE,eAAO,MAAM,qBAAqB,EAAE,uBACJ,CAAC"}

package/dist/components/procaptchaPuzzle.js

@@ -1,21 +1,6 @@
+import { lazyMount } from "@prosopo/procaptcha-common";
 //#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;
-	} };
-};
+var mountProcaptchaPuzzle = lazyMount(loadProcaptchaPuzzle);
 //#endregion
 export { loadProcaptchaPuzzle, mountProcaptchaPuzzle };

package/dist/components/procaptchaPuzzle.js.map

@@ -1 +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"}
+{"version":3,"file":"procaptchaPuzzle.js","sourceRoot":"","sources":["../../src/components/procaptchaPuzzle.ts"],"names":[],"mappings":"AAcA,OAAO,EAAsB,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAO3E,MAAM,CAAC,MAAM,oBAAoB,GAChC,KAAK,IAAsC,EAAE,CAC5C,CAAC,MAAM,MAAM,CAAC,uBAAuB,CAAC,CAAC,CAAC,2BAA2B,CAAC;AAEtE,MAAM,CAAC,MAAM,qBAAqB,GACjC,SAAS,CAAC,oBAAoB,CAAC,CAAC"}

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

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