@hubpav/hwio-web-runtime 0.9.0 → 0.9.1

package/dist/turnstile.d.ts

@@ -24,6 +24,10 @@ declare global {
  * Lazy explicit Turnstile: the third-party script loads on first form interaction (focus or
  * pointer-enter) and the widget id is stored on its form so the submit handler resets exactly
  * the token it consumed. Markup: <div class="cf-turnstile" data-sitekey="..."> inside a <form>.
+ *
+ * The widget takes the page's scheme when it renders, and Turnstile cannot change the theme of a
+ * rendered widget, so a switch of the site theme (hwio:themechange) redraws every widget in the
+ * new scheme; the redrawn widget issues a fresh token.
  */
 export declare function hwioTurnstileRuntime(): import("./mount.js").HWioBinder;
 /** Waits (bounded) for the lazily rendered widget to produce a token before the form is snapshotted. */

package/dist/turnstile.js

@@ -35,22 +35,51 @@ function loadApi() {
     });
     return window.__hwioTurnstileLoader;
 }
+function draw(api, container) {
+    return api.render(container, { sitekey: container.dataset.sitekey ?? '', theme: hwioResolvedScheme(), size: widgetSize(container) });
+}
+function storeId(form, id) {
+    form.hwioTurnstileWidgetId = id;
+    form.hwTurnstileWidgetId = id; // legacy-ok
+}
 /**
  * Lazy explicit Turnstile: the third-party script loads on first form interaction (focus or
  * pointer-enter) and the widget id is stored on its form so the submit handler resets exactly
  * the token it consumed. Markup: <div class="cf-turnstile" data-sitekey="..."> inside a <form>.
+ *
+ * The widget takes the page's scheme when it renders, and Turnstile cannot change the theme of a
+ * rendered widget, so a switch of the site theme (hwio:themechange) redraws every widget in the
+ * new scheme; the redrawn widget issues a fresh token.
  */
 export function hwioTurnstileRuntime() {
     let controller = null;
-    let widgetIds = [];
+    let widgets = [];
+    let themeBound = false;
     function cleanup() {
         controller?.abort();
         controller = null;
-        widgetIds.forEach((id) => { try {
+        themeBound = false;
+        widgets.forEach(({ id }) => { try {
             window.turnstile?.remove(id);
         }
         catch { /* gone */ } });
-        widgetIds = [];
+        widgets = [];
+    }
+    function redraw() {
+        const api = window.turnstile;
+        if (!api)
+            return;
+        widgets = widgets.filter((w) => w.container.isConnected).map((w) => {
+            try {
+                api.remove(w.id);
+            }
+            catch { /* gone */ }
+            const id = draw(api, w.container);
+            if (id === undefined)
+                return w;
+            storeId(w.form, id);
+            return { ...w, id };
+        });
     }
     function bind() {
         const containers = Array.from(document.querySelectorAll('.cf-turnstile:not([data-hwio-turnstile-bound])'));
@@ -58,6 +87,10 @@ export function hwioTurnstileRuntime() {
             return;
         controller ??= new AbortController();
         const { signal } = controller;
+        if (!themeBound) {
+            themeBound = true;
+            window.addEventListener('hwio:themechange', redraw, { signal });
+        }
         containers.forEach((container) => {
             const form = container.closest('form');
             if (!form)
@@ -68,11 +101,10 @@ export function hwioTurnstileRuntime() {
                 if (signal.aborted || !container.isConnected || state === 'rendered')
                     return;
                 state = 'rendered';
-                const id = api.render(container, { sitekey: container.dataset.sitekey ?? '', theme: hwioResolvedScheme(), size: widgetSize(container) });
+                const id = draw(api, container);
                 if (id !== undefined) {
-                    widgetIds.push(id);
-                    form.hwioTurnstileWidgetId = id;
-                    form.hwTurnstileWidgetId = id; // legacy-ok
+                    widgets.push({ container, form, id });
+                    storeId(form, id);
                 }
             };
             const load = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-web-runtime",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Framework-free browser runtime for the HARDWARIO websites: consent (Consent Mode v2 + GTM), HubSpot forms with Turnstile, attribution, theme, CTA tracking and small behaviours. View-transition safe.",
   "license": "MIT",
   "type": "module",