@prosopo/client-bundle-example 2.10.24 → 2.11.0

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

@@ -1,5 +1,5 @@
 
-> @prosopo/client-bundle-example@2.10.24 build:cjs
+> @prosopo/client-bundle-example@2.11.0 build:cjs
 > NODE_ENV=${NODE_ENV:-development}; vite build --config vite.cjs.config.ts --mode $NODE_ENV
 
 ViteCommonJSConfig: .
@@ -27,9 +27,10 @@ ViteCommonJSConfig: .
 vite v8.1.5 building ssr environment for production...
 Bundle build started
 
-✓ 2 modules transformed.
+✓ 3 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/cjs/index.cjs  1.41 kB │ gzip: 0.64 kB
+dist/cjs/index.cjs          0.71 kB │ gzip: 0.27 kB
+dist/cjs/plugins/pages.cjs  4.63 kB │ gzip: 1.20 kB
 
-✓ built in 51ms
+✓ built in 55ms

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

@@ -1,8 +1,8 @@
 
-> @prosopo/client-bundle-example@2.10.24 build:tsc
+> @prosopo/client-bundle-example@2.11.0 build:tsc
 > tsc --build --verbose
 
-1:04:08 PM - Projects in this build: 
+2:42:19 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
 
-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'
+2:42:19 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 '../../packages/util/tsconfig.json' is up to date because newest input '../../packages/util/src/url.ts' is older than output '../../packages/util/tsconfig.tsbuildinfo'
+2:42:19 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/logger/tsconfig.json' is up to date because newest input '../../packages/logger/src/logger.ts' is older than output '../../packages/logger/tsconfig.tsbuildinfo'
+2:42:19 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/dotenv/tsconfig.json' is up to date because newest input '../../packages/dotenv/src/env.ts' is older than output '../../packages/dotenv/tsconfig.tsbuildinfo'
+2:42:19 PM - Project '../../packages/dotenv/tsconfig.json' is up to date because newest input '../../packages/dotenv/src/tests/env.unit.test.ts' is older than output '../../packages/dotenv/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'
+2:42:19 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/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'
+2:42:19 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/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'
+2:42:19 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 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
+2:42:19 PM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
 
-1:04:08 PM - Building project '/home/runner/work/captcha/captcha/demos/client-bundle-example/tsconfig.json'...
+2:42:19 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.24 build
+> @prosopo/client-bundle-example@2.11.0 build
 > npm run build:cross-env -- --mode ${NODE_ENV:-development}
 
 
-> @prosopo/client-bundle-example@2.10.24 build:cross-env
+> @prosopo/client-bundle-example@2.11.0 build:cross-env
 > vite build --config vite.esm.config.ts --mode production
 
 ViteEsmConfig: .
@@ -31,10 +31,11 @@ ViteEsmConfig: .
 vite v8.1.5 building ssr environment for production...
 Bundle build started
 
-✓ 2 modules transformed.
+✓ 3 modules transformed.
 rendering chunks...
 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
+dist/index.js                       0.42 kB │ gzip: 0.19 kB
+dist/plugins/pages.js               4.04 kB │ gzip: 1.15 kB
 
-✓ built in 124ms
+✓ built in 151ms

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @prosopo/client-bundle-example
 
+## 2.11.0
+### Minor Changes
+
+- 2256f94: Redesign the demo site as a Prosopo-branded playground. Every demo page now has the prosopo.io header, a sidebar to switch captcha type, mode, rendering and challenge placement, the event log and the code for the current setup side by side, and sign-up links. The home page is now the frictionless captcha instead of the image captcha, which moves to `/image-implicit.html`; the cypress configs that opened the home page for the image captcha now open that page. The MUI stylesheet and the float-label script are gone.
+
+### Patch Changes
+
+- 7291d30: Fix the demo pages' status log dropping the captcha token. Its `onActionHandler` wrapper took no arguments, so invisible implicit pages (image and frictionless) called the real handler without a token, showed "Must complete captcha" and never submitted the form.
+- 2fc615d: Restore the `frictionless-implicit.html` demo page.
+  
+  The playground redesign renamed it to `image-implicit.html` and switched it to
+  an image site key, which left nothing serving that path. Suites outside this
+  repo navigate to it directly and were being answered by the dev server's
+  fallback to the index page — which happens to render a frictionless widget, so
+  they passed by luck rather than because the page they asked for existed.
+
 ## 2.10.24
 ### Patch Changes
 

package/dist/cjs/index.cjs

@@ -1,41 +1,13 @@
-//#region src/index.ts
-(() => {
-	function whenDOMReady(fn) {
-		if (document.readyState !== "loading") fn();
-		else document.addEventListener("DOMContentLoaded", fn);
-	}
-	whenDOMReady(() => {
-		const wrappers = Array.from(document.querySelectorAll(".mui-textfield--float-label"));
-		for (const wrapper of wrappers) {
-			const input = wrapper.querySelector("input, textarea, select");
-			const label = wrapper.querySelector("label");
-			if (!input || !label) return;
-			if (!input.getAttribute("aria-label") && label.textContent) input.setAttribute("aria-label", label.textContent.trim());
-			const update = () => {
-				const hasValue = input.type === "checkbox" || input.type === "radio" ? input.checked : input.value && input.value.trim() !== "";
-				if (document.activeElement === input || hasValue) wrapper.classList.add("label-hidden");
-				else wrapper.classList.remove("label-hidden");
-			};
-			for (const evt of [
-				"focus",
-				"input",
-				"blur",
-				"change",
-				"keyup",
-				"paste"
-			]) input.addEventListener(evt, update, { passive: true });
-			update();
-		}
-		const maxChecks = 12;
-		let checks = 0;
-		const iv = setInterval(() => {
-			checks++;
-			for (const w of wrappers) {
-				const input = w.querySelector("input,textarea,select");
-				if (input) input.dispatchEvent(new Event("input", { bubbles: true }));
-			}
-			if (checks >= maxChecks) clearInterval(iv);
-		}, 250);
-	});
-})();
-//#endregion
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_pages = require("./plugins/pages.cjs");
+exports.captchaTypeOptions = require_pages.captchaTypeOptions;
+exports.defaultSetup = require_pages.defaultSetup;
+exports.demoPages = require_pages.demoPages;
+exports.findPageByPath = require_pages.findPageByPath;
+exports.labelOf = require_pages.labelOf;
+exports.modeOptions = require_pages.modeOptions;
+exports.pagePathFromFilename = require_pages.pagePathFromFilename;
+exports.relativePrefix = require_pages.relativePrefix;
+exports.renderingOptions = require_pages.renderingOptions;
+exports.renderingsFor = require_pages.renderingsFor;
+exports.resolvePage = require_pages.resolvePage;

package/dist/cjs/plugins/pages.cjs

@@ -0,0 +1,113 @@
+let _prosopo_types = require("@prosopo/types");
+//#region src/plugins/pages.ts
+var captchaTypeOptions = [
+	{
+		value: _prosopo_types.CaptchaType.frictionless,
+		label: "Frictionless",
+		description: "Humans pass without a challenge. Bots get one."
+	},
+	{
+		value: _prosopo_types.CaptchaType.pow,
+		label: "Proof of Work",
+		description: "The browser does a quick computation."
+	},
+	{
+		value: _prosopo_types.CaptchaType.puzzle,
+		label: "Puzzle",
+		description: "Drag a piece into place."
+	},
+	{
+		value: _prosopo_types.CaptchaType.image,
+		label: "Image",
+		description: "Pick the images that match."
+	}
+];
+var modeOptions = [{
+	value: "standard",
+	label: "Standard"
+}, {
+	value: "invisible",
+	label: "Invisible"
+}];
+var renderingOptions = [
+	{
+		value: "implicit",
+		label: "Implicit",
+		description: "Add a div with your site key and the script renders the widget."
+	},
+	{
+		value: "explicit",
+		label: "Explicit",
+		description: "Your own code calls render() when it is ready."
+	},
+	{
+		value: "manual",
+		label: "Manual start",
+		description: "The widget shows straight away, but checks only start when you say."
+	},
+	{
+		value: "bound",
+		label: "Bound button",
+		description: "Your own submit button opens the challenge."
+	}
+];
+var page = (path, captchaType, mode, rendering) => ({
+	path,
+	captchaType,
+	mode,
+	rendering
+});
+var indexPage = page("index.html", _prosopo_types.CaptchaType.frictionless, "standard", "implicit");
+var defaultSetup = indexPage;
+var demoPages = [
+	indexPage,
+	page("frictionless-explicit.html", _prosopo_types.CaptchaType.frictionless, "standard", "explicit"),
+	page("frictionless-manual-start.html", _prosopo_types.CaptchaType.frictionless, "standard", "manual"),
+	page("invisible-frictionless-implicit.html", _prosopo_types.CaptchaType.frictionless, "invisible", "implicit"),
+	page("invisible-frictionless-explicit.html", _prosopo_types.CaptchaType.frictionless, "invisible", "explicit"),
+	page("pow-implicit.html", _prosopo_types.CaptchaType.pow, "standard", "implicit"),
+	page("pow-explicit.html", _prosopo_types.CaptchaType.pow, "standard", "explicit"),
+	page("invisible-pow-implicit.html", _prosopo_types.CaptchaType.pow, "invisible", "implicit"),
+	page("invisible-pow-explicit.html", _prosopo_types.CaptchaType.pow, "invisible", "explicit"),
+	page("puzzle-implicit.html", _prosopo_types.CaptchaType.puzzle, "standard", "implicit"),
+	page("puzzle-explicit.html", _prosopo_types.CaptchaType.puzzle, "standard", "explicit"),
+	page("puzzle-bind-explicit.html", _prosopo_types.CaptchaType.puzzle, "standard", "bound"),
+	page("invisible-puzzle-implicit.html", _prosopo_types.CaptchaType.puzzle, "invisible", "implicit"),
+	page("invisible-puzzle-explicit.html", _prosopo_types.CaptchaType.puzzle, "invisible", "explicit"),
+	page("image-implicit.html", _prosopo_types.CaptchaType.image, "standard", "implicit"),
+	page("image-explicit.html", _prosopo_types.CaptchaType.image, "standard", "explicit"),
+	page("invisible-image-implicit.html", _prosopo_types.CaptchaType.image, "invisible", "implicit"),
+	page("invisible-image-explicit.html", _prosopo_types.CaptchaType.image, "invisible", "explicit")
+];
+var isSetup = (candidate, setup) => candidate.captchaType === setup.captchaType && candidate.mode === setup.mode && candidate.rendering === setup.rendering;
+var findPageByPath = (path) => demoPages.find((demoPage) => demoPage.path === path);
+var resolvePage = (setup) => demoPages.find((demoPage) => isSetup(demoPage, setup)) ?? demoPages.find((demoPage) => isSetup(demoPage, {
+	...setup,
+	rendering: "implicit"
+})) ?? demoPages.find((demoPage) => isSetup(demoPage, {
+	...setup,
+	mode: "standard",
+	rendering: "implicit"
+})) ?? indexPage;
+var renderingsFor = (captchaType, mode) => renderingOptions.filter(({ value }) => demoPages.some((demoPage) => isSetup(demoPage, {
+	captchaType,
+	mode,
+	rendering: value
+})));
+var labelOf = (options, value) => options.find((option) => option.value === value)?.label ?? String(value);
+var pagePathFromFilename = (filename) => {
+	return (filename ?? "").replace(/\\/g, "/").match(/^(?:.*\/)?(?:src|dist)\/(.+)$/)?.[1] ?? "";
+};
+var relativePrefix = (pagePath) => "../".repeat((pagePath.match(/\//g) ?? []).length);
+//#endregion
+exports.captchaTypeOptions = captchaTypeOptions;
+exports.defaultSetup = defaultSetup;
+exports.demoPages = demoPages;
+exports.findPageByPath = findPageByPath;
+exports.labelOf = labelOf;
+exports.modeOptions = modeOptions;
+exports.pagePathFromFilename = pagePathFromFilename;
+exports.relativePrefix = relativePrefix;
+exports.renderingOptions = renderingOptions;
+exports.renderingsFor = renderingsFor;
+exports.resolvePage = resolvePage;

package/dist/index.js

@@ -1,43 +1,3 @@
 import "./_virtual/_rolldown/runtime.js";
-//#region src/index.ts
-(() => {
-	function whenDOMReady(fn) {
-		if (document.readyState !== "loading") fn();
-		else document.addEventListener("DOMContentLoaded", fn);
-	}
-	whenDOMReady(() => {
-		const wrappers = Array.from(document.querySelectorAll(".mui-textfield--float-label"));
-		for (const wrapper of wrappers) {
-			const input = wrapper.querySelector("input, textarea, select");
-			const label = wrapper.querySelector("label");
-			if (!input || !label) return;
-			if (!input.getAttribute("aria-label") && label.textContent) input.setAttribute("aria-label", label.textContent.trim());
-			const update = () => {
-				const hasValue = input.type === "checkbox" || input.type === "radio" ? input.checked : input.value && input.value.trim() !== "";
-				if (document.activeElement === input || hasValue) wrapper.classList.add("label-hidden");
-				else wrapper.classList.remove("label-hidden");
-			};
-			for (const evt of [
-				"focus",
-				"input",
-				"blur",
-				"change",
-				"keyup",
-				"paste"
-			]) input.addEventListener(evt, update, { passive: true });
-			update();
-		}
-		const maxChecks = 12;
-		let checks = 0;
-		const iv = setInterval(() => {
-			checks++;
-			for (const w of wrappers) {
-				const input = w.querySelector("input,textarea,select");
-				if (input) input.dispatchEvent(new Event("input", { bubbles: true }));
-			}
-			if (checks >= maxChecks) clearInterval(iv);
-		}, 250);
-	});
-})();
-//#endregion
-export {};
+import { captchaTypeOptions, defaultSetup, demoPages, findPageByPath, labelOf, modeOptions, pagePathFromFilename, relativePrefix, renderingOptions, renderingsFor, resolvePage } from "./plugins/pages.js";
+export { captchaTypeOptions, defaultSetup, demoPages, findPageByPath, labelOf, modeOptions, pagePathFromFilename, relativePrefix, renderingOptions, renderingsFor, resolvePage };

package/dist/plugins/pages.js

@@ -0,0 +1,103 @@
+import { CaptchaType } from "@prosopo/types";
+//#region src/plugins/pages.ts
+var captchaTypeOptions = [
+	{
+		value: CaptchaType.frictionless,
+		label: "Frictionless",
+		description: "Humans pass without a challenge. Bots get one."
+	},
+	{
+		value: CaptchaType.pow,
+		label: "Proof of Work",
+		description: "The browser does a quick computation."
+	},
+	{
+		value: CaptchaType.puzzle,
+		label: "Puzzle",
+		description: "Drag a piece into place."
+	},
+	{
+		value: CaptchaType.image,
+		label: "Image",
+		description: "Pick the images that match."
+	}
+];
+var modeOptions = [{
+	value: "standard",
+	label: "Standard"
+}, {
+	value: "invisible",
+	label: "Invisible"
+}];
+var renderingOptions = [
+	{
+		value: "implicit",
+		label: "Implicit",
+		description: "Add a div with your site key and the script renders the widget."
+	},
+	{
+		value: "explicit",
+		label: "Explicit",
+		description: "Your own code calls render() when it is ready."
+	},
+	{
+		value: "manual",
+		label: "Manual start",
+		description: "The widget shows straight away, but checks only start when you say."
+	},
+	{
+		value: "bound",
+		label: "Bound button",
+		description: "Your own submit button opens the challenge."
+	}
+];
+var page = (path, captchaType, mode, rendering) => ({
+	path,
+	captchaType,
+	mode,
+	rendering
+});
+var indexPage = page("index.html", CaptchaType.frictionless, "standard", "implicit");
+var defaultSetup = indexPage;
+var demoPages = [
+	indexPage,
+	page("frictionless-explicit.html", CaptchaType.frictionless, "standard", "explicit"),
+	page("frictionless-manual-start.html", CaptchaType.frictionless, "standard", "manual"),
+	page("invisible-frictionless-implicit.html", CaptchaType.frictionless, "invisible", "implicit"),
+	page("invisible-frictionless-explicit.html", CaptchaType.frictionless, "invisible", "explicit"),
+	page("pow-implicit.html", CaptchaType.pow, "standard", "implicit"),
+	page("pow-explicit.html", CaptchaType.pow, "standard", "explicit"),
+	page("invisible-pow-implicit.html", CaptchaType.pow, "invisible", "implicit"),
+	page("invisible-pow-explicit.html", CaptchaType.pow, "invisible", "explicit"),
+	page("puzzle-implicit.html", CaptchaType.puzzle, "standard", "implicit"),
+	page("puzzle-explicit.html", CaptchaType.puzzle, "standard", "explicit"),
+	page("puzzle-bind-explicit.html", CaptchaType.puzzle, "standard", "bound"),
+	page("invisible-puzzle-implicit.html", CaptchaType.puzzle, "invisible", "implicit"),
+	page("invisible-puzzle-explicit.html", CaptchaType.puzzle, "invisible", "explicit"),
+	page("image-implicit.html", CaptchaType.image, "standard", "implicit"),
+	page("image-explicit.html", CaptchaType.image, "standard", "explicit"),
+	page("invisible-image-implicit.html", CaptchaType.image, "invisible", "implicit"),
+	page("invisible-image-explicit.html", CaptchaType.image, "invisible", "explicit")
+];
+var isSetup = (candidate, setup) => candidate.captchaType === setup.captchaType && candidate.mode === setup.mode && candidate.rendering === setup.rendering;
+var findPageByPath = (path) => demoPages.find((demoPage) => demoPage.path === path);
+var resolvePage = (setup) => demoPages.find((demoPage) => isSetup(demoPage, setup)) ?? demoPages.find((demoPage) => isSetup(demoPage, {
+	...setup,
+	rendering: "implicit"
+})) ?? demoPages.find((demoPage) => isSetup(demoPage, {
+	...setup,
+	mode: "standard",
+	rendering: "implicit"
+})) ?? indexPage;
+var renderingsFor = (captchaType, mode) => renderingOptions.filter(({ value }) => demoPages.some((demoPage) => isSetup(demoPage, {
+	captchaType,
+	mode,
+	rendering: value
+})));
+var labelOf = (options, value) => options.find((option) => option.value === value)?.label ?? String(value);
+var pagePathFromFilename = (filename) => {
+	return (filename ?? "").replace(/\\/g, "/").match(/^(?:.*\/)?(?:src|dist)\/(.+)$/)?.[1] ?? "";
+};
+var relativePrefix = (pagePath) => "../".repeat((pagePath.match(/\//g) ?? []).length);
+//#endregion
+export { captchaTypeOptions, defaultSetup, demoPages, findPageByPath, labelOf, modeOptions, pagePathFromFilename, relativePrefix, renderingOptions, renderingsFor, resolvePage };

package/package.json

@@ -25,13 +25,13 @@
 		"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.24",
+	"version": "2.11.0",
 	"devDependencies": {
 		"@emotion/cache": "11.14.0",
 		"@prosopo/config": "3.3.17",
 		"@prosopo/dotenv": "3.0.56",
 		"@prosopo/locale": "3.4.3",
-		"@prosopo/types": "5.8.4",
+		"@prosopo/types": "5.9.0",
 		"@types/node": "22.5.5",
 		"@vitest/coverage-v8": "4.1.11",
 		"concurrently": "9.0.1",

package/src/frictionless-explicit-web3.html

@@ -1,12 +1,8 @@
 <!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 CAPTCHA</title>
-<link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
+    <title>Procaptcha demo: Frictionless, explicit rendering, web3</title>
     <script type="module">
         window.onCaptchaFailed = function () {
             console.log('Challenge failed');
@@ -142,42 +138,34 @@
             observer.observe(document.body, { childList: true, subtree: true });
         });
 
-        // updateCaptchaStatus is now provided by status-log-injector
     </script>
 </head>
 <body>
 
-<div class="mui-container">
-    <h1>Frictionless CAPTCHA - Explicit Rendering</h1>
-    <p>This example demonstrates how to use Procaptcha in frictionless mode with explicit rendering.</p>
+<div class="demo-card">
 
-    <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
-
-    <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="mui-form" id="demo-form">
-        <h2>Example Login Form</h2>
-        <div class="mui-textfield mui-textfield--float-label">
+    <!-- nosemgrep: python.django.security.django-no-csrf-token.django-no-csrf-token -->
+    <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="demo-form" id="demo-form">
+        <h2>Create an account</h2>
+        <div class="demo-field">
             <label for="name">Name</label>
             <input id="name" type="text" name="name" required/>
         </div>
-        <div class="mui-textfield mui-textfield--float-label">
+        <div class="demo-field">
             <label for="email">Email Address</label>
             <input id="email" type="email" name="email" required/>
         </div>
-        <div class="mui-textfield mui-textfield--float-label">
+        <div class="demo-field">
             <label for="password">Password</label>
             <input id="password" type="password" name="password" required/>
         </div>
-        <div class="mui-textfield mui-textfield--float-label">
+        <div class="demo-field">
             <div id="procaptcha-container"></div>
         </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>
+        <button type="button" class="demo-button" 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>
 <script type="module">
     // Pattern to avoid race condition between Procaptcha script loading and Procaptcha render function call
@@ -201,7 +189,6 @@
                                     // render a modal and get the user to select 1 account
                 const accountSelect = document.createElement('select');
                 accountSelect.id = 'account-select';
-                accountSelect.classList.add('mui-select');
                 accountSelect.classList.add('account-select');
                 accounts.forEach((account) => {
                     const option = document.createElement('option');

package/src/frictionless-explicit.html

@@ -1,12 +1,8 @@
 <!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 CAPTCHA</title>
-<link href="styles/captcha.css" rel="stylesheet" type="text/css"/>
+    <title>Procaptcha demo: Frictionless, explicit rendering</title>
     <script type="module">
         window.onCaptchaFailed = function () {
             console.log('Challenge failed');
@@ -142,42 +138,34 @@
             observer.observe(document.body, { childList: true, subtree: true });
         });
 
-        // updateCaptchaStatus is now provided by status-log-injector
     </script>
 </head>
 <body>
 
-<div class="mui-container">
-    <h1>Frictionless CAPTCHA - Explicit Rendering</h1>
-    <p>This example demonstrates how to use Procaptcha in frictionless mode with explicit rendering.</p>
+<div class="demo-card">
 
-    <!-- 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">
+    <!-- nosemgrep: python.django.security.django-no-csrf-token.django-no-csrf-token -->
+    <form action="%PROSOPO_SERVER_URL%/signup" method="POST" class="demo-form">
+        <h2>Create an account</h2>
+        <div class="demo-field">
             <label for="name">Name</label>
             <input id="name" type="text" name="name" required/>
         </div>
-        <div class="mui-textfield mui-textfield--float-label">
+        <div class="demo-field">
             <label for="email">Email Address</label>
             <input id="email" type="email" name="email" required/>
         </div>
-        <div class="mui-textfield mui-textfield--float-label">
+        <div class="demo-field">
             <label for="password">Password</label>
             <input id="password" type="password" name="password" required/>
         </div>
-        <div class="mui-textfield mui-textfield--float-label">
+        <div class="demo-field">
             <div id="procaptcha-container"></div>
         </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>
+        <button type="button" class="demo-button" 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>
 <script type="module">
     // Pattern to avoid race condition between Procaptcha script loading and Procaptcha render function call