@prosopo/procaptcha-react 2.12.0 → 2.13.1

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

@@ -1,5 +1,5 @@
 
-> @prosopo/procaptcha-react@2.12.0 build:cjs
+> @prosopo/procaptcha-react@2.13.1 build:cjs
 > NODE_ENV=${NODE_ENV:-development}; vite build --config vite.cjs.config.ts --mode $NODE_ENV
 
 ViteCommonJSConfig: .
@@ -7,8 +7,8 @@ ViteCommonJSConfig: .
   tsConfigPaths: [
     '/home/runner/work/captcha/captcha/packages/common/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/locale/tsconfig.json',
-    '/home/runner/work/captcha/captcha/packages/logger/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/util/tsconfig.json',
+    '/home/runner/work/captcha/captcha/packages/logger/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/types/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/util-crypto/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/procaptcha/tsconfig.json',
@@ -27,8 +27,8 @@ ViteCommonJSConfig: .
   externals: [
     '@prosopo/common',
     '@prosopo/locale',
-    '@prosopo/logger',
     '@prosopo/util',
+    '@prosopo/logger',
     '@prosopo/types',
     '@prosopo/util-crypto',
     '@prosopo/procaptcha',
@@ -54,11 +54,11 @@ dist/cjs/util/index.cjs                   0.56 kB │ gzip: 0.35 kB
 dist/cjs/components/procaptcha.cjs        0.75 kB │ gzip: 0.41 kB
 dist/cjs/components/index.cjs             0.89 kB │ gzip: 0.22 kB
 dist/cjs/index.cjs                        1.04 kB │ gzip: 0.28 kB
-dist/cjs/components/modal.cjs             1.10 kB │ gzip: 0.55 kB
+dist/cjs/components/modal.cjs             1.39 kB │ gzip: 0.64 kB
 dist/cjs/components/collector.cjs         1.53 kB │ gzip: 0.68 kB
-dist/cjs/components/button.cjs            3.31 kB │ gzip: 1.23 kB
+dist/cjs/components/button.cjs            3.28 kB │ gzip: 1.24 kB
 dist/cjs/components/procaptchaWidget.cjs  6.33 kB │ gzip: 2.06 kB
-dist/cjs/components/captchaWidget.cjs     6.47 kB │ gzip: 2.29 kB
-dist/cjs/components/captchaComponent.cjs  7.25 kB │ gzip: 1.89 kB
+dist/cjs/components/captchaWidget.cjs     7.49 kB │ gzip: 2.70 kB
+dist/cjs/components/captchaComponent.cjs  8.29 kB │ gzip: 2.17 kB
 
-✓ built in 48ms
+✓ built in 40ms

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

@@ -1,11 +1,11 @@
 
-> @prosopo/procaptcha-react@2.12.0 build:tsc
+> @prosopo/procaptcha-react@2.13.1 build:tsc
 > tsc --build --verbose
 
-11:04:34 AM - Projects in this build: 
+10:40:51 PM - Projects in this build: 
     * ../../dev/config/tsconfig.json
-    * ../locale/tsconfig.json
     * ../util/tsconfig.json
+    * ../locale/tsconfig.json
     * ../logger/tsconfig.json
     * ../util-crypto/tsconfig.json
     * ../types/tsconfig.json
@@ -22,41 +22,41 @@
     * ../procaptcha/tsconfig.json
     * tsconfig.json
 
-11:04:34 AM - Project '../../dev/config/tsconfig.json' is up to date because newest input '../../dev/config/src/vite/NodejsPolarsDirnamePlugin.ts' is older than output '../../dev/config/tsconfig.tsbuildinfo'
+10:40:51 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:04:34 AM - Project '../locale/tsconfig.json' is up to date because newest input '../locale/src/process.ts' is older than output '../locale/tsconfig.tsbuildinfo'
+10:40:51 PM - Project '../util/tsconfig.json' is up to date because newest input '../util/src/url.ts' is older than output '../util/tsconfig.tsbuildinfo'
 
-11:04:34 AM - Project '../util/tsconfig.json' is up to date because newest input '../util/src/ofLen.ts' is older than output '../util/tsconfig.tsbuildinfo'
+10:40:51 PM - Project '../locale/tsconfig.json' is up to date because newest input '../locale/src/process.ts' is older than output '../locale/tsconfig.tsbuildinfo'
 
-11:04:34 AM - Project '../logger/tsconfig.json' is up to date because newest input '../logger/src/index.ts' is older than output '../logger/tsconfig.tsbuildinfo'
+10:40:51 PM - Project '../logger/tsconfig.json' is up to date because newest input '../logger/src/tests/loggerBrowser.unit.test.ts' is older than output '../logger/tsconfig.tsbuildinfo'
 
-11:04:34 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'
+10:40:51 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:04:34 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'
+10:40:51 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:04:34 AM - Project '../common/tsconfig.json' is up to date because newest input '../common/src/utils/batches.ts' is older than output '../common/tsconfig.tsbuildinfo'
+10:40:51 PM - Project '../common/tsconfig.json' is up to date because newest input '../common/src/tests/utils/objectUtils.unit.test.ts' is older than output '../common/tsconfig.tsbuildinfo'
 
-11:04:34 AM - Project '../datasets/tsconfig.json' is up to date because newest input '../datasets/src/index.ts' is older than output '../datasets/tsconfig.tsbuildinfo'
+10:40:51 PM - Project '../datasets/tsconfig.json' is up to date because newest input '../datasets/src/tests/captcha.unit.test.ts' is older than output '../datasets/tsconfig.tsbuildinfo'
 
-11:04:34 AM - Project '../api/tsconfig.json' is up to date because newest input '../api/src/index.ts' is older than output '../api/tsconfig.tsbuildinfo'
+10:40:51 PM - Project '../api/tsconfig.json' is up to date because newest input '../api/src/index.ts' is older than output '../api/tsconfig.tsbuildinfo'
 
-11:04:34 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'
+10:40:51 PM - 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'
 
-11:04:34 AM - Project '../widget-skeleton/tsconfig.json' is up to date because newest input '../widget-skeleton/src/index.ts' is older than output '../widget-skeleton/tsconfig.tsbuildinfo'
+10:40:51 PM - 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'
 
-11:04:34 AM - Project '../fingerprintjs/tsconfig.json' is up to date because newest input '../fingerprintjs/src/utils/async.ts' is older than output '../fingerprintjs/tsconfig.tsbuildinfo'
+10:40:51 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:04:34 AM - Project '../fingerprint/tsconfig.json' is up to date because newest input '../fingerprint/src/index.ts' is older than output '../fingerprint/tsconfig.tsbuildinfo'
+10:40:51 PM - Project '../fingerprint/tsconfig.json' is up to date because newest input '../fingerprint/src/index.ts' is older than output '../fingerprint/tsconfig.tsbuildinfo'
 
-11:04:34 AM - Project '../keyring/tsconfig.json' is up to date because newest input '../keyring/src/keyring/keyring.test.ts' is older than output '../keyring/tsconfig.tsbuildinfo'
+10:40:51 PM - Project '../keyring/tsconfig.json' is up to date because newest input '../keyring/src/index.ts' is older than output '../keyring/tsconfig.tsbuildinfo'
 
-11:04:34 AM - Project '../account/tsconfig.json' is up to date because newest input '../account/src/custom.d.ts' is older than output '../account/tsconfig.tsbuildinfo'
+10:40:51 PM - Project '../account/tsconfig.json' is up to date because newest input '../account/src/workers/cryptoWorker.ts' is older than output '../account/tsconfig.tsbuildinfo'
 
-11:04:34 AM - Project '../procaptcha-common/tsconfig.json' is up to date because newest input '../procaptcha-common/src/tests/challengeSurfaceRender.unit.test.ts' is older than output '../procaptcha-common/tsconfig.tsbuildinfo'
+10:40:51 PM - Project '../procaptcha-common/tsconfig.json' is up to date because newest input '../procaptcha-common/src/tests/testModeBanner.unit.test.ts' is older than output '../procaptcha-common/tsconfig.tsbuildinfo'
 
-11:04:34 AM - Project '../procaptcha/tsconfig.json' is up to date because newest input '../procaptcha/src/modules/Manager.ts' is older than output '../procaptcha/tsconfig.tsbuildinfo'
+10:40:51 PM - Project '../procaptcha/tsconfig.json' is up to date because newest input '../procaptcha/src/modules/Manager.ts' is older than output '../procaptcha/tsconfig.tsbuildinfo'
 
-11:04:34 AM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
+10:40:51 PM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
 
-11:04:34 AM - Building project '/home/runner/work/captcha/captcha/packages/procaptcha-react/tsconfig.json'...
+10:40:51 PM - Building project '/home/runner/work/captcha/captcha/packages/procaptcha-react/tsconfig.json'...
 

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 
-> @prosopo/procaptcha-react@2.12.0 build
+> @prosopo/procaptcha-react@2.13.1 build
 > npm run build:cross-env -- --mode ${NODE_ENV:-development}
 
 
-> @prosopo/procaptcha-react@2.12.0 build:cross-env
+> @prosopo/procaptcha-react@2.13.1 build:cross-env
 > vite build --config vite.esm.config.ts --mode production
 
 ViteEsmConfig: .
@@ -11,8 +11,8 @@ ViteEsmConfig: .
   tsConfigPaths: [
     '/home/runner/work/captcha/captcha/packages/common/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/locale/tsconfig.json',
-    '/home/runner/work/captcha/captcha/packages/logger/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/util/tsconfig.json',
+    '/home/runner/work/captcha/captcha/packages/logger/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/types/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/util-crypto/tsconfig.json',
     '/home/runner/work/captcha/captcha/packages/procaptcha/tsconfig.json',
@@ -31,8 +31,8 @@ ViteEsmConfig: .
   externals: [
     '@prosopo/common',
     '@prosopo/locale',
-    '@prosopo/logger',
     '@prosopo/util',
+    '@prosopo/logger',
     '@prosopo/types',
     '@prosopo/util-crypto',
     '@prosopo/procaptcha',
@@ -59,11 +59,11 @@ dist/components/index.js             0.53 kB │ gzip: 0.19 kB
 dist/util/index.js                   0.56 kB │ gzip: 0.35 kB
 dist/index.js                        0.65 kB │ gzip: 0.21 kB
 dist/components/procaptcha.js        0.68 kB │ gzip: 0.38 kB
-dist/components/modal.js             1.01 kB │ gzip: 0.53 kB
+dist/components/modal.js             1.22 kB │ gzip: 0.61 kB
 dist/components/collector.js         1.44 kB │ gzip: 0.66 kB
-dist/components/button.js            3.07 kB │ gzip: 1.21 kB
-dist/components/captchaWidget.js     5.98 kB │ gzip: 2.27 kB
+dist/components/button.js            3.03 kB │ gzip: 1.22 kB
 dist/components/procaptchaWidget.js  6.00 kB │ gzip: 2.05 kB
-dist/components/captchaComponent.js  6.34 kB │ gzip: 1.85 kB
+dist/components/captchaWidget.js     6.92 kB │ gzip: 2.68 kB
+dist/components/captchaComponent.js  7.28 kB │ gzip: 2.13 kB
 
-✓ built in 45ms
+✓ built in 40ms

package/CHANGELOG.md

@@ -1,5 +1,91 @@
 # @prosopo/procaptcha-react
 
+## 2.13.1
+### Patch Changes
+
+- aed164d: Make asset signing survive contact with a CDN that actually enforces it.
+  
+  Signing image URLs is optional and has been off in practice, so two paths that only break when a zone starts checking tokens have never been exercised. Both are fixed here, so enabling enforcement is a config change rather than a config change plus an incident.
+  
+  **A dataset could not be imported.** Hashing an item downloads the image from the URL stored in the dataset, and that URL is the canonical, unsigned one. Against an enforcing zone every one of those downloads is rejected, so a dataset becomes impossible to import on exactly the configuration it is meant to be served from. `downloadImage` now signs the URL when a signing key is configured, and leaves it alone when one is not.
+  
+  **A failed image never recovered.** The widget retried a broken image by appending a cache-busting query parameter. A token is a signature over the query string, so on a signed URL that parameter invalidates it and every retry is rejected — a transient failure turned permanent. The retry now re-requests the signed URL unchanged, and keeps the cache-buster for unsigned URLs, where it is still worth having and costs nothing.
+  
+  The token scheme itself now lives in one place, `@prosopo/datasets`, rather than being written out twice. The provider keeps its synchronous implementation, because `resolveAsset` cannot await, but both ends build the string to hash and encode the result through the same helpers.
+- 3d45c37: Stop the widget's hover highlights costing a phone user their first tap.
+  
+  Tapping the checkbox on an iPhone did nothing the first time. The second tap worked. The cause is a rule iOS applies to every page: if the first tap on a control changes what is under the finger, Safari treats it as "show me the hover state" rather than "activate this", and withholds the click. Every control in the widget that lights up on hover was therefore asking to be tapped twice.
+  
+  Hover feedback is now drawn only where a pointer can actually rest on something. On a desktop nothing changes. On a touch screen the highlight never appears and the first tap activates the control, which is what a visitor expects.
+  
+  Four places had it, and only one of them was the checkbox:
+  
+  - the **checkbox** — a state layer around the box
+  - the **reload button** in the challenge dialog — a fill change
+  - the dialog's **action buttons**, Cancel, Next and Submit — a state layer
+  - the **widget container** itself, via a CSS `:hover` rule. This one is easy to miss and matters most: the box that lights up is the one the checkbox sits inside, so it repaints under the finger even when the tap never touches a control with its own hover.
+  
+  The first three ask `matchMedia("(hover: hover)")` before listening for the pointer at all; the fourth is wrapped in the matching media query. The image tiles never had hover feedback and are unchanged.
+  
+  None of this came from the recent randomisation work — the React components these replaced carried the same handlers, so it has been there as long as the widget has.
+  
+  Covered by a test per control asserting no state layer is drawn when the device reports it cannot hover, plus tests for the check itself, including that it assumes a pointer when the environment cannot answer — which is what keeps the existing desktop behaviour, and every existing hover test, intact.
+- 4cc28db: Fix the image challenge laying out two columns instead of three on a phone, which pushed the last images below the screen where they could not be reached.
+  
+  On a Samsung A52s the image grid is 345.578px wide. Each tile asked for `calc(33.333% - 5.33px)` at an 8px gap, so three tiles and the two gaps between them came to 345.584px — **six thousandths of a pixel too wide**. That is enough for the browser to wrap, so the challenge drew two columns and five rows rather than three and three. The panel went from about 370px tall to about 1080px, and three of the nine images ended up below a 718px viewport.
+  
+  The tile width is now written as `calc((100% - 16px) / 3)`, leaving both the subtraction and the division to the browser. There is nothing left to round, so three tiles and their gaps come to exactly the width of the row at every gap the grid draws.
+  
+  This arrived with the dialog randomisation, which replaced a fixed `calc(33.333% - 10px)` with a width derived from the randomised gap. The old value subtracted a whole gap per tile where only two thirds was needed, so it happened to leave about 10px of slack and always fitted. Deriving the width exactly removed the slack, and the rounding then tipped it over. Which gaps break depends on the arithmetic — 8, 11 and 14 round down and overflow, the rest do not — so it looked intermittent.
+  
+  The panel that holds the images is also `touch-action: pan-y` rather than `touch-action: none` now. It is an `overflow-y: auto` box, so on a phone it is the thing a finger has to drag when the images do not fit, and `none` told the browser not to pan it at all — which is what turned "some images are off-screen" into "some images cannot be reached". Stopping the page behind from scrolling is `overscroll-behavior`'s job and it still does it. That one is older than the randomisation; it came in with the React to vanilla rewrite, and the React component before it had the same thing.
+  
+  Covered by a test that works out where three tiles and two gaps land for every gap the challenge draws, against a set of panel widths including the A52s' 345.578px. It fails on the old expression with exactly the numbers measured on the device.
+- Updated dependencies [3d45c37]
+- Updated dependencies [4cc28db]
+- Updated dependencies [d3b3286]
+  - @prosopo/widget-skeleton@2.10.0
+  - @prosopo/procaptcha-common@2.17.1
+  - @prosopo/procaptcha@2.11.19
+
+## 2.13.0
+### Minor Changes
+
+- 5e5fb9e: Give the image challenge dialog different class names, a different DOM shape, different element types for its controls and slightly different spacing on every page load, so a solver script cannot hardcode a way to find or click anything inside it.
+  
+  This is the same treatment the checkbox got. Until now the dialog was identical for every user, forever: the panel was always `.prosopo-modalInner` inside `.prosopo-modalOuter` inside `.prosopo-challenge-content`, every tile and every action was a `<button>`, the grid gap was always 10px, and the whole thing sat at the same offsets. The end-to-end suite was itself finding the images by climbing four parents and stepping sideways from the instruction line — which is the clearest possible evidence that the markup was a reliable handle.
+  
+  Four things now change, all drawn fresh each time a challenge mounts:
+  
+  - **The names.** Every class the dialog renders — the two modal layers, the challenge surface and its panel, the reload control — is an 8-character token drawn at mount. Selectors scraped from one page load are dead on the next. The challenge surface is shared with the puzzle, so the puzzle gets this too. Nothing in the widget's own CSS referenced these names, but a site that had written its own rules against `.prosopo-modalOuter`, `.prosopo-modalInner`, `.prosopo-challenge-content` or `.reload-button` will find they no longer match. `image-captcha` on the widget root stays fixed, as `prosopo-checkbox` did, because that one sits in the embedding page's light DOM.
+  - **The shape.** The panel, the header, the grid, the action row, each action and each tile sit inside a random number of randomly named `div` or `span` wrappers. The wrappers are `display: contents`, so they generate no boxes and cannot move anything: depth varies, layout does not. Only elements with no accessible role are used, so nothing new is announced to a screen reader.
+  - **The element each control is made of.** Every tile and every action is now randomly either a real `<button>` or a `<div role="button" tabindex="0">`, so `button` no longer finds them all. The generic variant is given by hand what the button gave for free: it is in the tab order, it activates on Enter and on Space, Space does not scroll the dialog, and it carries the same `aria-pressed` state. The surface's focus trap already matched `[tabindex]:not([tabindex="-1"])`, so both variants are trapped and tabbable alike.
+  - **The spacing.** The grid gap, the grid's and the header's padding, the action row's padding and the panel's own margins are each nudged a few pixels, so tile centres are not where they were last time. Each of these changes the panel's size rather than moving the panel, so the surface still centres it and a panel taller than the viewport still scrolls to its own edges. The tile and action widths are now derived from the gap they were drawn with — three columns fit only if each cell gives up two thirds of a gap, and the old hardcoded basis would have wrapped the row at the wide end of the range.
+  
+  Three related fixes come with it:
+  
+  - The tick badge on a selected tile was shipping `data-testid="CheckIcon"` to production, plus an `aria-label` on an `aria-hidden` element that nothing could ever read and a stray `color="#fff"` attribute. All three are gone.
+  - The reload button acted on any click, including one a script dispatched. It now takes the same trusted-event gate every other control in the widget has.
+  - The end-to-end suite no longer depends on the markup at all. It uses `data-cy` hooks — the instruction line, the challenge panel, the round, the reload control — that are withheld from production builds, exactly as the checkbox withholds `captcha-checkbox`.
+  
+  Note what this does not do. The dialog still says it is a dialog, the tiles still expose the button role and their pressed state, and the images still carry alt text. A script that looks for what these things mean rather than what they are called will still find them. That is the price of the challenge being usable with a screen reader, and it is the right price; the point here is to kill the cheap selector, not to claim the dialog is unfindable.
+
+### Patch Changes
+
+- Updated dependencies [94929c3]
+- Updated dependencies [a9141c3]
+- Updated dependencies [a9141c3]
+- Updated dependencies [a9141c3]
+- Updated dependencies [e180281]
+- Updated dependencies [5e5fb9e]
+  - @prosopo/procaptcha-common@2.17.0
+  - @prosopo/locale@3.6.0
+  - @prosopo/common@3.1.59
+  - @prosopo/types@5.10.0
+  - @prosopo/util@3.3.11
+  - @prosopo/widget-skeleton@2.9.0
+  - @prosopo/procaptcha@2.11.18
+
 ## 2.12.0
 ### Minor Changes
 

package/dist/cjs/components/button.cjs

@@ -27,7 +27,10 @@ var mountButton = (container, initialProps) => {
 	let props = initialProps;
 	let hover = false;
 	let focusVisible = false;
-	const button = (0, _prosopo_procaptcha_common.createElement)("button");
+	const button = (0, _prosopo_procaptcha_common.createControl)(teardown, { onActivate: (event) => {
+		event.preventDefault();
+		props.onClick();
+	} });
 	const buttonStyle = () => {
 		const theme = "light" === props.themeColor ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme;
 		const baseStyle = {
@@ -62,14 +65,16 @@ var mountButton = (container, initialProps) => {
 		});
 		button.textContent = props.text;
 	};
-	teardown.addEventListener(button, "mouseenter", () => {
-		hover = true;
-		render();
-	});
-	teardown.addEventListener(button, "mouseleave", () => {
-		hover = false;
-		render();
-	});
+	if ((0, _prosopo_widget_skeleton.canHover)()) {
+		teardown.addEventListener(button, "mouseenter", () => {
+			hover = true;
+			render();
+		});
+		teardown.addEventListener(button, "mouseleave", () => {
+			hover = false;
+			render();
+		});
+	}
 	teardown.addEventListener(button, "focus", () => {
 		focusVisible = button.matches(":focus-visible");
 		render();
@@ -78,11 +83,6 @@ var mountButton = (container, initialProps) => {
 		focusVisible = false;
 		render();
 	});
-	teardown.addEventListener(button, "click", (event) => {
-		if (!(0, _prosopo_procaptcha_common.isEventTrusted)(event)) return;
-		event.preventDefault();
-		props.onClick();
-	});
 	render();
 	container.appendChild(button);
 	return {

package/dist/cjs/components/captchaComponent.cjs

@@ -17,7 +17,7 @@ var outerStyle = (theme) => ({
 	borderRadius: theme.shape.card,
 	backgroundColor: theme.palette.background.default,
 	userSelect: "none",
-	touchAction: "none",
+	touchAction: "pan-y",
 	overscrollBehavior: "none"
 });
 var promptStyle = (theme) => ({
@@ -34,11 +34,22 @@ var targetStyle = (theme) => ({
 	color: theme.palette.titleAccent,
 	fontWeight: 700
 });
-var columnStyle = {
+var columnStyle = (gap) => ({
 	position: "relative",
 	flexGrow: 1,
-	flexBasis: "calc(33.333% - 10px)"
-};
+	flexBasis: (0, _prosopo_procaptcha_common.threeColumnBasis)(gap)
+});
+var SPACING_JITTER = 4;
+var MIN_CONTROL_GAP = 6;
+var MAX_CONTROL_GAP = 14;
+var HEADER_PADDING_Y = 12;
+var HEADER_PADDING_X = 14;
+var HEADER_PADDING_JITTER = 3;
+var MIN_WRAPPER_DEPTH = 0;
+var MAX_WRAPPER_DEPTH = 2;
+var decoy = (element) => (0, _prosopo_procaptcha_common.wrapRandomly)(element, MIN_WRAPPER_DEPTH, MAX_WRAPPER_DEPTH);
+/** A spacing token moved by a few pixels, never below zero. */
+var jittered = (base, jitter = SPACING_JITTER) => Math.max(0, base + (0, _prosopo_widget_skeleton.randomInt)(-jitter, jitter));
 var mountCaptchaComponent = (container, initialProps) => {
 	let props = initialProps;
 	const themeOf = (themeColor) => "light" === themeColor ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme;
@@ -46,26 +57,29 @@ var mountCaptchaComponent = (container, initialProps) => {
 	const currentSolution = () => (0, _prosopo_util.at)(props.solutions, props.index, { noWrap: true });
 	const isLastRound = () => props.index >= props.challenge.captchas.length - 1;
 	const theme = themeOf(props.themeColor);
-	const doubleSpacing = `${theme.spacing.unit * 2}px`;
-	const fullSpacing = `${theme.spacing.unit}px`;
+	const controlGap = (0, _prosopo_widget_skeleton.randomInt)(MIN_CONTROL_GAP, MAX_CONTROL_GAP);
+	const column = columnStyle(controlGap);
 	const targetLabel = (0, _prosopo_procaptcha_common.createElement)("span", { style: targetStyle(theme) });
-	const promptText = (0, _prosopo_procaptcha_common.createElement)("p", { style: promptStyle(theme) });
+	const promptText = (0, _prosopo_procaptcha_common.createElement)("p", {
+		style: promptStyle(theme),
+		attributes: require_index.default({ dev: { cy: "captcha-prompt" } })
+	});
 	const hintText = (0, _prosopo_procaptcha_common.createElement)("p", { style: hintStyle(theme) });
 	const header = (0, _prosopo_procaptcha_common.createElement)("div", {
 		style: {
-			padding: "12px 14px",
+			padding: `${jittered(HEADER_PADDING_Y, HEADER_PADDING_JITTER)}px ${jittered(HEADER_PADDING_X, HEADER_PADDING_JITTER)}px`,
 			fontFamily: theme.font.fontFamily
 		},
-		children: [promptText, hintText]
+		children: [decoy(promptText), decoy(hintText)]
 	});
 	const headerBar = (0, _prosopo_procaptcha_common.createElement)("div", {
 		style: {
 			backgroundColor: theme.palette.primaryContainer.main,
 			borderRadius: theme.shape.header,
 			width: "100%",
-			marginTop: fullSpacing
+			marginTop: `${jittered(theme.spacing.unit)}px`
 		},
-		children: [header]
+		children: [decoy(header)]
 	});
 	const headerRow = (0, _prosopo_procaptcha_common.createElement)("div", {
 		style: {
@@ -73,15 +87,15 @@ var mountCaptchaComponent = (container, initialProps) => {
 			alignItems: "center",
 			width: "100%"
 		},
-		children: [headerBar]
+		children: [decoy(headerBar)]
 	});
 	const gridHost = (0, _prosopo_procaptcha_common.createElement)("div", {
 		style: { overflow: "hidden" },
 		attributes: require_index.default({ dev: { cy: `captcha-${props.index}` } })
 	});
-	const cancelHost = (0, _prosopo_procaptcha_common.createElement)("div", { style: columnStyle });
-	const reloadHost = (0, _prosopo_procaptcha_common.createElement)("div", { style: columnStyle });
-	const nextHost = (0, _prosopo_procaptcha_common.createElement)("div", { style: columnStyle });
+	const cancelHost = (0, _prosopo_procaptcha_common.createElement)("div", { style: column });
+	const reloadHost = (0, _prosopo_procaptcha_common.createElement)("div", { style: column });
+	const nextHost = (0, _prosopo_procaptcha_common.createElement)("div", { style: column });
 	const controls = (0, _prosopo_procaptcha_common.createElement)("div", {
 		style: {
 			width: "100%",
@@ -89,12 +103,12 @@ var mountCaptchaComponent = (container, initialProps) => {
 			display: "flex",
 			flexDirection: "row",
 			justifyContent: "space-between",
-			gap: "10px"
+			gap: `${controlGap}px`
 		},
 		children: [
-			cancelHost,
-			reloadHost,
-			nextHost
+			decoy(cancelHost),
+			decoy(reloadHost),
+			decoy(nextHost)
 		]
 	});
 	const controlsRow = (0, _prosopo_procaptcha_common.createElement)("div", {
@@ -103,9 +117,9 @@ var mountCaptchaComponent = (container, initialProps) => {
 			alignItems: "center",
 			justifyContent: "space-between",
 			lineHeight: 1.75,
-			padding: `${fullSpacing} 0 ${doubleSpacing} 0`
+			padding: `${jittered(theme.spacing.unit)}px 0 ${jittered(theme.spacing.unit * 2)}px 0`
 		},
-		children: [controls]
+		children: [decoy(controls)]
 	});
 	const inner = (0, _prosopo_procaptcha_common.createElement)("div", {
 		style: {
@@ -113,19 +127,20 @@ var mountCaptchaComponent = (container, initialProps) => {
 			display: "flex",
 			flexDirection: "column",
 			minWidth: "300px",
-			marginLeft: fullSpacing,
-			marginRight: fullSpacing,
+			marginLeft: `${jittered(theme.spacing.unit)}px`,
+			marginRight: `${jittered(theme.spacing.unit)}px`,
 			justifyContent: "center"
 		},
 		children: [
-			headerRow,
-			gridHost,
-			controlsRow
+			decoy(headerRow),
+			decoy(gridHost),
+			decoy(controlsRow)
 		]
 	});
 	const root = (0, _prosopo_procaptcha_common.createElement)("div", {
 		style: outerStyle(theme),
-		children: [inner]
+		attributes: require_index.default({ dev: { cy: "captcha-panel" } }),
+		children: [decoy(inner)]
 	});
 	const grid = require_captchaWidget.mountCaptchaWidget(gridHost, {
 		challenge: currentCaptcha(),

package/dist/cjs/components/captchaWidget.cjs

@@ -6,23 +6,41 @@ var getHash = (item) => {
 	if (!item.hash) throw new _prosopo_common.ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", { context: { item } });
 	return item.hash;
 };
-var imageStyle = {
+var cellStyle = (gap) => ({
 	flexGrow: 1,
-	flexBasis: "calc(33.333% - 10px)",
+	flexBasis: (0, _prosopo_procaptcha_common.threeColumnBasis)(gap),
 	boxSizing: "border-box"
-};
+});
+var MIN_GRID_GAP = 8;
+var MAX_GRID_GAP = 15;
+var GRID_PADDING_JITTER = 4;
+var MIN_WRAPPER_DEPTH = 0;
+var MAX_WRAPPER_DEPTH = 2;
 var CHECK_ICON_PATH = "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z";
+/**
+* Asset signing is optional, so both shapes of URL arrive here. An unsigned one
+* gets the cache-buster it always got; a signed one cannot, because its token
+* is a signature over the query string and any addition invalidates it —
+* turning a transient failure into a permanent 403.
+*/
+var retrySrc = (url) => url.includes("token=") ? url : `${url}${url.includes("?") ? "&" : "?"}retry=${Date.now()}`;
 var themeOf = (themeColor) => "light" === themeColor ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme;
-var gridStyle = (theme) => ({
+/** Drawn once per mounted grid, so tile centres move between page loads. */
+var generateMetrics = (theme) => ({
+	gap: (0, _prosopo_widget_skeleton.randomInt)(MIN_GRID_GAP, MAX_GRID_GAP),
+	paddingTop: Math.max(0, theme.spacing.unit + (0, _prosopo_widget_skeleton.randomInt)(-GRID_PADDING_JITTER, GRID_PADDING_JITTER)),
+	paddingBottom: Math.max(0, theme.spacing.unit + (0, _prosopo_widget_skeleton.randomInt)(-GRID_PADDING_JITTER, GRID_PADDING_JITTER))
+});
+var gridStyle = (metrics) => ({
 	width: "100%",
 	height: "100%",
 	display: "flex",
 	flexDirection: "row",
 	flexWrap: "wrap",
 	justifyContent: "space-between",
-	paddingTop: `${theme.spacing.unit}px`,
-	paddingBottom: `${theme.spacing.unit}px`,
-	gap: "10px"
+	paddingTop: `${metrics.paddingTop}px`,
+	paddingBottom: `${metrics.paddingBottom}px`,
+	gap: `${metrics.gap}px`
 });
 var selectionStyle = (theme, selected) => ({
 	borderRadius: selected ? theme.shape.tileSelected : theme.shape.tile,
@@ -42,7 +60,8 @@ var mountCaptchaWidget = (container, initialProps) => {
 	let renderedChallenge;
 	let tiles = [];
 	let focusedHash = null;
-	const grid = (0, _prosopo_procaptcha_common.createElement)("div", { style: gridStyle(themeOf(initialProps.themeColor)) });
+	const metrics = generateMetrics(themeOf(initialProps.themeColor));
+	const grid = (0, _prosopo_procaptcha_common.createElement)("div", { style: gridStyle(metrics) });
 	const buildTile = (item, index) => {
 		const hash = getHash(item);
 		const theme = themeOf(props.themeColor);
@@ -67,7 +86,10 @@ var mountCaptchaWidget = (container, initialProps) => {
 		teardown.addEventListener(image, "error", () => {
 			const retryCount = Number(image.dataset.retryCount ?? "0") + 1;
 			image.dataset.retryCount = String(retryCount);
-			if (retryCount <= 3) image.src = `${item.data}?retry=${Date.now()}`;
+			if (retryCount <= 3) {
+				image.removeAttribute("src");
+				image.src = retrySrc(item.data);
+			}
 		});
 		const icon = (0, _prosopo_procaptcha_common.createSvgElement)("svg", {
 			style: {
@@ -84,11 +106,8 @@ var mountCaptchaWidget = (container, initialProps) => {
 			},
 			attributes: {
 				focusable: "false",
-				color: "#fff",
 				"aria-hidden": "true",
-				viewBox: "0 0 24 24",
-				"data-testid": "CheckIcon",
-				"aria-label": "Check icon"
+				viewBox: "0 0 24 24"
 			},
 			children: [(0, _prosopo_procaptcha_common.createSvgElement)("path", { attributes: { d: CHECK_ICON_PATH } })]
 		});
@@ -110,7 +129,7 @@ var mountCaptchaWidget = (container, initialProps) => {
 			},
 			children: [icon]
 		});
-		const clickable = (0, _prosopo_procaptcha_common.createElement)("button", {
+		const clickable = (0, _prosopo_procaptcha_common.createControl)(teardown, {
 			style: {
 				position: "relative",
 				cursor: "pointer",
@@ -123,13 +142,11 @@ var mountCaptchaWidget = (container, initialProps) => {
 				appearance: "none",
 				display: "block"
 			},
-			attributes: { type: "button" },
-			children: [image, overlay]
-		});
-		teardown.addEventListener(clickable, "click", (event) => {
-			if (!(0, _prosopo_procaptcha_common.isEventTrusted)(event)) return;
-			const mouseEvent = event;
-			props.onClick(hash, mouseEvent.clientX, mouseEvent.clientY);
+			children: [image, overlay],
+			onActivate: (event) => {
+				const fromPointer = "clientX" in event;
+				props.onClick(hash, fromPointer ? event.clientX : 0, fromPointer ? event.clientY : 0);
+			}
 		});
 		teardown.addEventListener(clickable, "focus", () => {
 			focusedHash = clickable.matches(":focus-visible") ? hash : null;
@@ -140,10 +157,10 @@ var mountCaptchaWidget = (container, initialProps) => {
 			applyFocusRing();
 		});
 		const cell = (0, _prosopo_procaptcha_common.createElement)("div", {
-			style: imageStyle,
+			style: cellStyle(metrics.gap),
 			children: [clickable]
 		});
-		grid.appendChild(cell);
+		grid.appendChild((0, _prosopo_procaptcha_common.wrapRandomly)(cell, MIN_WRAPPER_DEPTH, MAX_WRAPPER_DEPTH));
 		return {
 			hash,
 			image,
@@ -165,7 +182,7 @@ var mountCaptchaWidget = (container, initialProps) => {
 		teardown.run();
 		teardown = new _prosopo_procaptcha_common.Teardown();
 		(0, _prosopo_procaptcha_common.clearElement)(grid);
-		(0, _prosopo_procaptcha_common.applyStyles)(grid, gridStyle(themeOf(props.themeColor)));
+		(0, _prosopo_procaptcha_common.applyStyles)(grid, gridStyle(metrics));
 		tiles = props.challenge.items.map(buildTile);
 		renderedChallenge = props.challenge;
 	};

package/dist/cjs/components/modal.cjs

@@ -1,10 +1,13 @@
 let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
 //#region src/components/modal.ts
+var MIN_WRAPPER_DEPTH = 1;
+var MAX_WRAPPER_DEPTH = 3;
 /**
 * The image captcha's dialog frame; positioning lives in `ChallengeSurface`.
 */
 var mountModal = (initialProps) => {
-	const inner = (0, _prosopo_procaptcha_common.createElement)("div", { className: "prosopo-modalInner" });
+	const inner = (0, _prosopo_procaptcha_common.createElement)("div", { className: (0, _prosopo_widget_skeleton.randomToken)() });
 	(0, _prosopo_procaptcha_common.applyStyles)(inner, {
 		maxWidth: "500px",
 		maxHeight: "100%",
@@ -14,17 +17,18 @@ var mountModal = (initialProps) => {
 		alignSelf: "center",
 		boxSizing: "border-box"
 	});
+	const outerClassName = (0, _prosopo_widget_skeleton.randomToken)();
 	const surfaceProps = (props) => ({
 		show: props.show,
 		placement: props.placement,
 		anchor: props.anchor,
 		onDismiss: props.onDismiss,
 		scrim: "none",
-		className: "prosopo-modalOuter",
+		className: outerClassName,
 		dialogLabel: props.dialogLabel
 	});
 	const surface = (0, _prosopo_procaptcha_common.mountChallengeSurface)(surfaceProps(initialProps));
-	surface.content.appendChild(inner);
+	surface.content.appendChild((0, _prosopo_procaptcha_common.wrapRandomly)(inner, MIN_WRAPPER_DEPTH, MAX_WRAPPER_DEPTH));
 	return {
 		content: inner,
 		update: (props) => surface.update(surfaceProps(props)),