@prosopo/client-bundle-example 2.10.22 → 2.10.24

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

@@ -1,5 +1,5 @@
 
-> @prosopo/client-bundle-example@2.10.22 build:cjs
+> @prosopo/client-bundle-example@2.10.24 build:cjs
 > NODE_ENV=${NODE_ENV:-development}; vite build --config vite.cjs.config.ts --mode $NODE_ENV
 
 ViteCommonJSConfig: .
@@ -32,4 +32,4 @@ rendering chunks...
 computing gzip size...
 dist/cjs/index.cjs  1.41 kB │ gzip: 0.64 kB
 
-✓ built in 50ms
+✓ built in 51ms

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

@@ -1,8 +1,8 @@
 
-> @prosopo/client-bundle-example@2.10.22 build:tsc
+> @prosopo/client-bundle-example@2.10.24 build:tsc
 > tsc --build --verbose
 
-10:09:56 PM - Projects in this build: 
+1:04:08 PM - Projects in this build: 
     * ../../dev/config/tsconfig.json
     * ../../packages/util/tsconfig.json
     * ../../packages/logger/tsconfig.json
@@ -12,21 +12,21 @@
     * ../../packages/types/tsconfig.json
     * tsconfig.json
 
-10:09:56 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'
+1:04:08 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'
 
-10:09:57 PM - Project '../../packages/util/tsconfig.json' is up to date because newest input '../../packages/util/src/url.ts' is older than output '../../packages/util/tsconfig.tsbuildinfo'
+1:04:08 PM - Project '../../packages/util/tsconfig.json' is up to date because newest input '../../packages/util/src/url.ts' is older than output '../../packages/util/tsconfig.tsbuildinfo'
 
-10:09:57 PM - Project '../../packages/logger/tsconfig.json' is up to date because newest input '../../packages/logger/src/index.ts' is older than output '../../packages/logger/tsconfig.tsbuildinfo'
+1:04:08 PM - Project '../../packages/logger/tsconfig.json' is up to date because newest input '../../packages/logger/src/logger.ts' is older than output '../../packages/logger/tsconfig.tsbuildinfo'
 
-10:09:57 PM - Project '../../packages/dotenv/tsconfig.json' is up to date because newest input '../../packages/dotenv/src/index.ts' is older than output '../../packages/dotenv/tsconfig.tsbuildinfo'
+1:04:08 PM - Project '../../packages/dotenv/tsconfig.json' is up to date because newest input '../../packages/dotenv/src/env.ts' is older than output '../../packages/dotenv/tsconfig.tsbuildinfo'
 
-10:09:57 PM - Project '../../packages/locale/tsconfig.json' is up to date because newest input '../../packages/locale/src/translationKey.ts' is older than output '../../packages/locale/tsconfig.tsbuildinfo'
+1:04:08 PM - Project '../../packages/locale/tsconfig.json' is up to date because newest input '../../packages/locale/src/translationKey.ts' is older than output '../../packages/locale/tsconfig.tsbuildinfo'
 
-10:09:57 PM - Project '../../packages/util-crypto/tsconfig.json' is up to date because newest input '../../packages/util-crypto/src/types.ts' is older than output '../../packages/util-crypto/tsconfig.tsbuildinfo'
+1:04:08 PM - Project '../../packages/util-crypto/tsconfig.json' is up to date because newest input '../../packages/util-crypto/src/types.ts' is older than output '../../packages/util-crypto/tsconfig.tsbuildinfo'
 
-10:09:57 PM - Project '../../packages/types/tsconfig.json' is up to date because newest input '../../packages/types/src/types.test-d.ts' is older than output '../../packages/types/tsconfig.tsbuildinfo'
+1:04:08 PM - Project '../../packages/types/tsconfig.json' is up to date because newest input '../../packages/types/src/types.test-d.ts' is older than output '../../packages/types/tsconfig.tsbuildinfo'
 
-10:09:57 PM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
+1:04:08 PM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
 
-10:09:57 PM - Building project '/home/runner/work/captcha/captcha/demos/client-bundle-example/tsconfig.json'...
+1:04:08 PM - Building project '/home/runner/work/captcha/captcha/demos/client-bundle-example/tsconfig.json'...
 

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 
-> @prosopo/client-bundle-example@2.10.22 build
+> @prosopo/client-bundle-example@2.10.24 build
 > npm run build:cross-env -- --mode ${NODE_ENV:-development}
 
 
-> @prosopo/client-bundle-example@2.10.22 build:cross-env
+> @prosopo/client-bundle-example@2.10.24 build:cross-env
 > vite build --config vite.esm.config.ts --mode production
 
 ViteEsmConfig: .
@@ -37,4 +37,4 @@ computing gzip size...
 dist/_virtual/_rolldown/runtime.js  0.04 kB │ gzip: 0.06 kB
 dist/index.js                       1.47 kB │ gzip: 0.68 kB
 
-✓ built in 112ms
+✓ built in 124ms

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @prosopo/client-bundle-example
 
+## 2.10.24
+### Patch Changes
+
+- f4e4a83: chore(deps): roll up the open dependabot bumps (react 19.3, mongoose 9.10, @polkadot/util 14, redis 6, cron-parser 5, react-i18next 17 with i18next 26, @scure/base 2, cypress 16, rollup/babel plugin majors, vitest 4.1.11, angular 20.3.28, js-yaml)
+
+## 2.10.23
+### Patch Changes
+
+- 89dd38a: chore(deps): batch the outstanding dependabot bumps into one upgrade
+  
+  Rolls up dependabot PRs #3112, #3127-#3134 and #3159. Majors: `mongoose`
+  8 -> 9, `bson` 6 -> 7, `@noble/curves` 1 -> 2, `@polkadot/util-crypto`
+  13 -> 14, `@typegoose/auto-increment` 4 -> 5, `@babel/preset-env` 7 -> 8,
+  `@types/jsdom` 21 -> 30, `@types/bcrypt` 5 -> 6, `@actions/github` 6 -> 9,
+  `testcontainers` 11 -> 12. The rest are minor/patch.
+  
+  Code changes the majors forced:
+  - `@noble/curves` v2 requires `.js` specifiers and renamed the point API,
+    so `secp256k1.ProjectivePoint.fromHex(...).toRawBytes()` becomes
+    `secp256k1.Point.fromBytes(...).toBytes()`, `RistrettoPoint` becomes
+    `ristretto255.Point`, and `abstract/utils` moves to `utils.js`.
+  - mongoose 9 drops `RootFilterQuery` (now `QueryFilter`), no longer sets
+    `background: true` on schema indexes by default, and no longer declares
+    `id` on `Document`, which un-hid a mismatch between
+    `updateDappUserCommitment`'s `Hash` parameter and the `string` `id` it
+    filters on.
+  - mongoose 9 rejects an aggregation-pipeline update (an array) unless the
+    call passes `updatePipeline: true`, so the six pipeline writes in
+    `ProviderDatabase` now opt in explicitly.
+  - mongoose 9's `castUpdate` throws on a `$setOnInsert` key inside `$set`.
+    `storeUserImageCaptchaSolution` passed its record straight in as the
+    update, and mongoose's `moveImmutableProperties` mutates that object on
+    an upsert -- adding the very `$setOnInsert` key the record then carried
+    into `CentralDbStreamer.streamImageRecord`. Image records stopped
+    reaching the central DB (the streamer is fire-and-forget, so it only
+    logged) and signup verification returned 500. The update is now an
+    explicit `$set` over a shallow copy.
+  - `@prosopo/database` moves from mongodb 6.20 to 7.5 to match the driver
+    mongoose 9 pulls, so bson 7 is the only copy resolvable in the package.
+  - `vitest`/`@vitest/coverage-v8` go to 4.1.11 alongside dependabot's
+    `@vitest/spy` bump; leaving them at 4.1.10 installed a second copy of
+    `@vitest/spy` and broke type inference in the provider test utils.
+- 80f73c1: Sites can now control when the widget starts working.
+  
+  By default the widget runs bot detection, starts the behavioural collectors and calls `/frictionless` as soon as it mounts. Rendering with `data-start-mode="manual"` (or `startMode: "manual"` in the render options) keeps all of that off the page load: the checkbox still appears immediately, at its final size, so nothing shifts, but the widget does nothing else until one of two things happens.
+  
+  - The site calls `window.procaptcha.start()`, optionally with a widget id, or dispatches a `procaptcha:start` event on `document`. The frictionless flow runs and the widget then waits for a click exactly as it does today.
+  - The visitor clicks the checkbox. The frictionless flow runs and whichever challenge the provider chooses opens straight away, carrying that click's position, so the visitor is never asked to click twice.
+  
+  Both triggers are one-shot: whichever comes first wins and the other is ignored. `window.procaptcha.execute()` also starts a manual widget, opening its challenge immediately. Widgets in the default `auto` mode are unaffected.
+
 ## 2.10.22
 ### Patch Changes
 

package/package.json

@@ -25,26 +25,26 @@
 		"start": "NODE_ENV=${NODE_ENV:-development}; vite serve ./src --port 9232 --config vite.config.ts --mode=$NODE_ENV",
 		"test": "NODE_ENV=${NODE_ENV:-test}; npx vitest run --config ./vite.test.config.ts"
 	},
-	"version": "2.10.22",
+	"version": "2.10.24",
 	"devDependencies": {
 		"@emotion/cache": "11.14.0",
-		"@prosopo/config": "3.3.12",
-		"@prosopo/dotenv": "3.0.53",
-		"@prosopo/locale": "3.3.1",
-		"@prosopo/types": "5.2.6",
+		"@prosopo/config": "3.3.17",
+		"@prosopo/dotenv": "3.0.56",
+		"@prosopo/locale": "3.4.3",
+		"@prosopo/types": "5.8.4",
 		"@types/node": "22.5.5",
-		"@vitest/coverage-v8": "4.1.10",
+		"@vitest/coverage-v8": "4.1.11",
 		"concurrently": "9.0.1",
 		"del-cli": "6.0.0",
 		"jsdom": "25.0.0",
 		"npm-run-all": "4.1.5",
-		"react": "19.2.8",
-		"react-dom": "19.2.8",
+		"react": "19.3.0",
+		"react-dom": "19.3.0",
 		"tslib": "2.7.0",
 		"tsx": "4.20.3",
 		"typescript": "5.6.2",
 		"vite": "8.1.5",
-		"vitest": "4.1.10"
+		"vitest": "4.1.11"
 	},
 	"repository": {
 		"type": "git",

package/src/frictionless-explicit.html

@@ -193,9 +193,17 @@
     // Get the Element using elementId
     const captchaContainer = document.getElementById('procaptcha-container');
 
+    // ?placement=float anchors the challenge to the widget; the default is popup.
+    const placement =
+        new URLSearchParams(window.location.search).get("placement") === "float"
+            ? "float"
+            : "popup";
+    window.updateCaptchaStatus('Challenge placement: ' + placement, 'info');
+
     // Render the CAPTCHA
     const widgetId = render(captchaContainer, {
         siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
+        placement,
         callback: onCaptchaVerified,
         "failed-callback": function () {
             console.log('Challenge failed');

package/src/frictionless-manual-start.html

@@ -0,0 +1,224 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css"/>
+    <link href="styles/field.css" rel="stylesheet" type="text/css"/>
+
+    <script src="index.js"></script>
+    <title>Procaptcha demo: Frictionless - Manual Start</title>
+<link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
+    <script type="module">
+        // Function to update CAPTCHA status display is now provided by status-log-injector
+
+        window.onStartCaptcha = () => {
+            updateCaptchaStatus('window.procaptcha.start() called - frictionless flow starting', 'info');
+            window.procaptcha.start();
+        };
+
+        window.addEventListener('load', () => {
+
+            window.setIsError = (isError) => {
+                const messageContainer = document.getElementById('messageContainer');
+                messageContainer.style.color = isError ? 'red' : 'black';
+                messageContainer.style.display = 'block';
+            };
+
+            window.setMessage = (message) => {
+                document.getElementById('message').innerText = message;
+            };
+
+            window.onLoggedIn = (token) => {
+                updateCaptchaStatus('Logged in, fetching private resource', 'info');
+                const url = new URL("/private", config.serverUrl).href;
+                console.log("getting private resource with token ", token, "at", url);
+                fetch(url, {
+                    method: "GET",
+                    headers: {
+                        Origin: "http://localhost:9232", // TODO: change this to env var
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${token}`,
+                    },
+                })
+                    .then(async (res) => {
+                        try {
+                            const jsonRes = await res.json();
+                            if (res.status === 200) {
+                                updateCaptchaStatus(`Successfully accessed private resource`, 'success');
+                                setMessage(jsonRes.message);
+                            } else {
+                                updateCaptchaStatus(`Failed to access private resource: ${res.status}`, 'error');
+                            }
+                        } catch (err) {
+                            console.log(err);
+                            updateCaptchaStatus(`Error parsing response: ${err}`, 'error');
+                        }
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                        updateCaptchaStatus(`Fetch error: ${err}`, 'error');
+                    });
+            };
+
+            window.onActionHandler = () => {
+                updateCaptchaStatus('Form submission initiated', 'info');
+
+                const procaptchaElements = document.getElementsByName('procaptcha-response');
+
+                if (!procaptchaElements.length) {
+                    updateCaptchaStatus('Error: No CAPTCHA response found', 'error');
+                    alert("Must complete captcha");
+                    return
+                }
+
+                const procaptchaToken = procaptchaElements[0].value;
+                updateCaptchaStatus(`Token received: ${procaptchaToken.substring(0, 15)}...`, 'success');
+
+                const payload = {
+                    email: document.getElementById('email').value,
+                    name: document.getElementById('name').value,
+                    password: document.getElementById('password').value,
+                    siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
+                    "procaptcha-response": procaptchaToken,
+                };
+                const url = new URL('signup', import.meta.env.PROSOPO_SERVER_URL).href;
+                console.log("posting to", url, "with payload", payload);
+                fetch(url, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(payload),
+                    contentType: "application/json",
+                }).then((response) => {
+                    return new Promise((resolve) => response.json()
+                        .then((json) => resolve({
+                            status: response.status,
+                            ok: response.ok,
+                            json,
+                        })))
+                })
+                    .then(async ({status, json, ok}) => {
+                        console.log("status", status, "json", json.message, "ok", ok);
+                        console.log("json", json)
+                        try {
+                            if (status !== 200) {
+                                updateCaptchaStatus(`API Error: ${json.message}`, 'error');
+                                setIsError(true);
+                                setMessage(json.message);
+                            } else {
+                                updateCaptchaStatus(`API Success: ${json.message}`, 'success');
+                                setIsError(false);
+                                setMessage(json.message);
+                            }
+                        } catch (err) {
+                            console.log(err);
+                            updateCaptchaStatus(`Error processing response: ${err}`, 'error');
+                        }
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                        updateCaptchaStatus(`Fetch error: ${err}`, 'error');
+                        setIsError(true);
+                        setMessage("Error: " + err);
+                    });
+            };
+
+            updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
+
+            // Monitor DOM for CAPTCHA initialization
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    if (mutation.addedNodes.length) {
+                        for (let i = 0; i < mutation.addedNodes.length; i++) {
+                            const node = mutation.addedNodes[i];
+                            if (node.classList && (node.classList.contains('procaptcha') ||
+                                  node.querySelector && node.querySelector('.procaptcha'))) {
+                                updateCaptchaStatus('CAPTCHA DOM elements initialized', 'info');
+                                observer.disconnect();
+                                break;
+                            }
+                        }
+                    }
+                });
+            });
+
+            observer.observe(document.body, { childList: true, subtree: true });
+        });
+
+
+        window.onCaptchaFailed = function () {
+            console.log('Challenge failed');
+            updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
+        }
+
+        window.onCaptchaVerified = (output) => {
+            console.log('Challenge passed');
+            updateCaptchaStatus('Challenge passed successfully!', 'success');
+            updateCaptchaStatus(`Token generated: ${output.substring(0, 15)}...`, 'success');
+        }
+
+        // Add custom event listener for CAPTCHA verification stages
+        document.addEventListener('DOMContentLoaded', function() {
+            setTimeout(() => {
+                updateCaptchaStatus('CAPTCHA script loaded and initialized', 'info');
+                updateCaptchaStatus('Waiting for user interaction...', 'info');
+            }, 500);
+        });
+    </script>
+    <script id="procaptchaScript" type="module" src="%VITE_BUNDLE_URL%" async defer></script>
+</head>
+<body>
+
+<div class="mui-container">
+    <h1>Frictionless CAPTCHA - Manual Start</h1>
+    <p>
+        This example renders the widget with <code>data-start-mode="manual"</code>. The checkbox appears
+        immediately at its final size, but no bot detection, behavioural collection or provider request runs
+        until either the page calls <code>window.procaptcha.start()</code> (the button below) or the visitor
+        clicks the checkbox. A click that starts the flow also opens whichever challenge the provider picks,
+        so the visitor never has to click twice.
+    </p>
+
+    <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
+
+    <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="mui-form">
+        <h2>Example Login Form</h2>
+        <div class="mui-textfield mui-textfield--float-label">
+            <label for="name">Name</label>
+            <input id="name" type="text" name="name" required/>
+        </div>
+        <div class="mui-textfield mui-textfield--float-label">
+            <label for="email">Email Address</label>
+            <input id="email" type="email" name="email" required/>
+        </div>
+        <div class="mui-textfield mui-textfield--float-label">
+            <label for="password">Password</label>
+            <input id="password" type="password" name="password" required/>
+        </div>
+        <div class="mui-textfield mui-textfield--float-label">
+            <!-- Dev sitekey -->
+            <div
+                    class="procaptcha"
+                    data-theme="light"
+                    data-sitekey="%PROSOPO_SITE_KEY_FRICTIONLESS%"
+                    data-start-mode="manual"
+                    data-failed-callback="onCaptchaFailed"
+                    data-callback="onCaptchaVerified"
+            ></div>
+        </div>
+        <div class="mui-textfield">
+            <button type="button" class="mui-btn mui-btn--flat" onclick="onStartCaptcha()" data-cy="start-captcha-button">
+                Start CAPTCHA now
+            </button>
+        </div>
+        <div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
+        <button type="button" class="mui-btn mui-btn--raised" onclick="onActionHandler()" data-cy="submit-button">Submit</button>
+    </form>
+
+    <!-- Console output display area -->
+    <div id="console-output" class="console-output" style="display: none;"></div>
+
+    <!-- Explanation will be injected by the explanation-injector plugin -->
+</div>
+</body>
+</html>

package/src/image-explicit.html

@@ -135,8 +135,16 @@
             window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
 
             // Render the CAPTCHA
+            // ?placement=float anchors the challenge to the widget; the default is popup.
+            const placement =
+                new URLSearchParams(window.location.search).get("placement") === "float"
+                    ? "float"
+                    : "popup";
+            window.updateCaptchaStatus('Challenge placement: ' + placement, 'info');
+
             const widgetId = render(document.getElementById('procaptcha-container'), {
                 siteKey: import.meta.env.PROSOPO_SITE_KEY_IMAGE,
+                placement,
                 callback: handleCaptchaResponse,
                 "failed-callback": handleCaptchaFailed
             });

package/src/plugins/navigation-injector.ts

@@ -47,10 +47,12 @@ export default function navigationInjector(): Plugin {
 			frictionless: {
 				implicit: { path: "frictionless-implicit.html", exists: true },
 				explicit: { path: "frictionless-explicit.html", exists: true },
+				manual: { path: "frictionless-manual-start.html", exists: true },
 			},
 			puzzle: {
 				implicit: { path: "puzzle-implicit.html", exists: true },
 				explicit: { path: "puzzle-explicit.html", exists: true },
+				bound: { path: "puzzle-bind-explicit.html", exists: true },
 			},
 		},
 		invisible: {

package/src/plugins/placement-injector.ts

@@ -0,0 +1,153 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// Vite plugin to inject a popup/float placement switcher into HTML files.
+//
+// Placement is resolved once, when the widget renders, so switching it means
+// re-rendering. The switcher therefore drives `?placement=` and reloads rather
+// than mutating a live widget. The explicit pages read that query parameter
+// themselves and pass `placement` as a render option; implicit pages have no
+// script of their own, so the injected script stamps `data-placement` onto
+// their containers instead, which exercises the attribute path.
+import type { IndexHtmlTransformContext, Plugin } from "vite";
+
+export default function placementInjector(): Plugin {
+	const placementCss = `
+	<style>
+		.placement-switcher {
+			margin: 20px 0;
+			padding: 12px 15px;
+			background-color: #f0f8ff;
+			border: 2px solid #2196F3;
+			border-radius: 5px;
+			font-family: monospace;
+			font-size: 14px;
+		}
+		.placement-switcher-title {
+			font-weight: bold;
+			margin-bottom: 10px;
+			border-bottom: 1px solid #2196F3;
+			padding-bottom: 5px;
+		}
+		.placement-option {
+			display: inline-block;
+			text-decoration: none;
+			margin-right: 8px;
+			padding: 6px 14px;
+			border: 1px solid #2196F3;
+			border-radius: 4px;
+			background-color: white;
+			color: #2196F3;
+			cursor: pointer;
+			font-family: inherit;
+			font-size: inherit;
+		}
+		.placement-option[aria-current="page"] {
+			background-color: #2196F3;
+			color: white;
+			font-weight: bold;
+		}
+		.placement-note {
+			margin-top: 10px;
+			color: #555;
+		}
+	</style>
+  `;
+
+	const placementHtml = `
+	<!-- Challenge placement switcher -->
+	<div id="placement-switcher" class="placement-switcher">
+		<div class="placement-switcher-title">Challenge placement</div>
+		<a class="placement-option" data-placement-option="popup" href="?placement=popup">popup</a>
+		<a class="placement-option" data-placement-option="float" href="?placement=float">float</a>
+		<div id="placement-note" class="placement-note"></div>
+	</div>
+  `;
+
+	// Runs before DOMContentLoaded, so the attribute is on the container by the
+	// time the bundle's implicit render reads it.
+	const placementJs = `
+	<script>
+		(function () {
+			var requested = new URLSearchParams(window.location.search).get("placement");
+			var placement = requested === "float" ? "float" : "popup";
+
+			// Buttons are the invisible variant, which resolves float back to
+			// popup -- stamped anyway so the downgrade is visible rather than
+			// untested.
+			var containers = document.getElementsByClassName("procaptcha");
+			for (var i = 0; i < containers.length; i++) {
+				containers[i].setAttribute("data-placement", placement);
+			}
+
+			var invisible = containers.length > 0 &&
+				document.querySelectorAll('.procaptcha[data-size="invisible"], button.procaptcha').length > 0;
+
+			var note = document.getElementById("placement-note");
+			if (note) {
+				note.textContent = placement === "float" && invisible
+					? "float requested, but an invisible widget has nothing to anchor to, so the challenge opens as a popup."
+					: placement === "float"
+						? "The challenge opens directly above the widget and stays pinned there while you scroll. The page stays usable behind it."
+						: "The challenge opens centred over the page. This is the default.";
+			}
+
+			// Links rather than buttons, and not only because navigation is what
+			// they do: several specs reach for an element with
+			// button[type='button']:nth-of-type(2), which a pair of injected
+			// buttons answers to, and following one mid-test reloads the page.
+			var options = document.querySelectorAll("[data-placement-option]");
+			for (var j = 0; j < options.length; j++) {
+				var option = options[j];
+				var value = option.getAttribute("data-placement-option");
+				// Rebuilt from the live URL so the switch keeps any other query
+				// parameters the page was opened with.
+				var url = new URL(window.location.href);
+				url.searchParams.set("placement", value);
+				option.setAttribute("href", url.toString());
+				if (value === placement) option.setAttribute("aria-current", "page");
+			}
+		})();
+	</script>
+  `;
+
+	return {
+		name: "placement-injector",
+		transformIndexHtml: {
+			order: "post", // after the nav bar and status log are in place
+			handler(html: string, _ctx: IndexHtmlTransformContext): string {
+				if (!html.includes("<body") || !html.includes("</body>")) {
+					return html;
+				}
+
+				if (html.includes('id="placement-switcher"')) {
+					return html;
+				}
+
+				const withCss = html.replace("</head>", `${placementCss}</head>`);
+
+				// The switcher goes above the status log so the widget and its
+				// controls stay together, and the script goes last so every
+				// element it touches has been parsed.
+				const withSwitcher = withCss.includes('<div id="captcha-status"')
+					? withCss.replace(
+							'<div id="captcha-status"',
+							`${placementHtml}<div id="captcha-status"`,
+						)
+					: withCss.replace("</body>", `${placementHtml}</body>`);
+
+				return withSwitcher.replace("</body>", `${placementJs}</body>`);
+			},
+		},
+	};
+}