@hubpav/hwio-web-runtime 0.7.6 → 0.7.7

package/dist/turnstile.d.ts

@@ -2,10 +2,12 @@ interface TurnstileApi {
     render: (el: HTMLElement, opts: {
         sitekey: string;
         theme?: 'light' | 'dark' | 'auto';
+        size?: HWioTurnstileSize;
     }) => string | undefined;
     reset: (id?: string) => void;
     remove: (id: string) => void;
 }
+type HWioTurnstileSize = 'normal' | 'compact' | 'flexible';
 export type HWioTurnstileForm = HTMLFormElement & {
     hwioLoadTurnstile?: () => void;
     hwioTurnstileWidgetId?: string;

package/dist/turnstile.js

@@ -1,6 +1,22 @@
 import { hwioMount } from './mount.js';
 import { hwioResolvedScheme } from './theme.js';
 const SRC = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
+/**
+ * The widget has a fixed width (normal 300 px, compact 150 x 140 px), so a phone-width card or
+ * column narrower than 300 px gets the compact one instead of a widget that runs past the screen.
+ * A `data-size` on the container wins.
+ */
+function widgetSize(container) {
+    const requested = container.dataset.size;
+    if (requested === 'normal' || requested === 'compact' || requested === 'flexible')
+        return requested;
+    const slot = container.parentElement;
+    if (!slot)
+        return 'normal';
+    const style = getComputedStyle(slot);
+    const width = slot.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+    return width < 300 ? 'compact' : 'normal';
+}
 function loadApi() {
     if (window.turnstile)
         return Promise.resolve(window.turnstile);
@@ -52,7 +68,7 @@ export function hwioTurnstileRuntime() {
                 if (signal.aborted || !container.isConnected || state === 'rendered')
                     return;
                 state = 'rendered';
-                const id = api.render(container, { sitekey: container.dataset.sitekey ?? '', theme: hwioResolvedScheme() });
+                const id = api.render(container, { sitekey: container.dataset.sitekey ?? '', theme: hwioResolvedScheme(), size: widgetSize(container) });
                 if (id !== undefined) {
                     widgetIds.push(id);
                     form.hwioTurnstileWidgetId = id;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-web-runtime",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "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",