@cap.js/widget 0.1.37 → 0.1.38

package/README.md

@@ -2,4 +2,4 @@
 
 Client-side widget for Cap, the self-hosted CAPTCHA for the modern web.
 
-**[Learn more](https://github.com/tiagozip/cap)**
+**[Learn more](https://github.com/tiagozip/cap)**

package/cap.compat.min.js

@@ -1 +1,408 @@
-!function(){let e;const t="0.0.5",r=function(){return window?.CAP_CUSTOM_FETCH?window.CAP_CUSTOM_FETCH(...arguments):fetch(...arguments)};window.CAP_CUSTOM_WASM_URL||[`https://cdn.jsdelivr.net/npm/@cap.js/wasm@${t}/browser/cap_wasm.min.js`,`https://cdn.jsdelivr.net/npm/@cap.js/wasm@${t}/browser/cap_wasm_bg.wasm`].forEach((e=>{const t=document.createElement("link");t.rel="prefetch",t.href=e,t.as=e.endsWith(".wasm")?"fetch":"script",document.head.appendChild(t)}));class s extends HTMLElement{#e="";#t=null;#r=navigator.hardwareConcurrency||8;token=null;#s;#i;#n;#a=!1;#o;getI18nText(e,t){return this.getAttribute(`data-cap-i18n-${e}`)||t}static get observedAttributes(){return["onsolve","onprogress","onreset","onerror","data-cap-worker-count","data-cap-i18n-initial-state","[cap]"]}constructor(){super(),this.#o&&this.#o.forEach(((e,t)=>{this.removeEventListener(t.slice(2),e)})),this.#o=new Map,this.boundHandleProgress=this.handleProgress.bind(this),this.boundHandleSolve=this.handleSolve.bind(this),this.boundHandleError=this.handleError.bind(this),this.boundHandleReset=this.handleReset.bind(this)}initialize(){this.#e=URL.createObjectURL(new Blob([e],{type:"application/javascript"}))}attributeChangedCallback(e,t,r){if(e.startsWith("on")){const t=e.slice(2),s=this.#o.get(e);if(s&&this.removeEventListener(t,s),r){const r=t=>{const r=this.getAttribute(e);"function"==typeof window[r]&&window[r].call(this,t)};this.#o.set(e,r),this.addEventListener(t,r)}}"data-cap-worker-count"===e&&this.setWorkersCount(parseInt(r)),"data-cap-i18n-initial-state"===e&&this.#i&&this.#i?.querySelector("p")?.innerText&&(this.#i.querySelector("p").innerText=this.getI18nText("initial-state","I'm a human"))}async connectedCallback(){this.#n=this,this.#s=this.attachShadow({mode:"open"}),this.#i=document.createElement("div"),this.createUI(),this.addEventListeners(),await this.initialize(),this.#i.removeAttribute("disabled");const e=this.getAttribute("data-cap-worker-count"),t=e?parseInt(e,10):null;this.setWorkersCount(t||navigator.hardwareConcurrency||8);const r=this.getAttribute("data-cap-hidden-field-name")||"cap-token";this.#n.innerHTML=`<input type="hidden" name="${r}">`}async solve(){if(!this.#a)try{this.#a=!0,this.updateUI("verifying",this.getI18nText("verifying-label","Verifying..."),!0),this.dispatchEvent("progress",{progress:0});try{const e=this.getAttribute("data-cap-api-endpoint");if(!e)throw new Error("Missing API endpoint");const{challenge:t,token:s}=await(await r(`${e}challenge`,{method:"POST"})).json(),i=await this.solveChallenges(t),n=await(await r(`${e}redeem`,{method:"POST",body:JSON.stringify({token:s,solutions:i}),headers:{"Content-Type":"application/json"}})).json();if(this.dispatchEvent("progress",{progress:100}),!n.success)throw new Error("Invalid solution");const a=this.getAttribute("data-cap-hidden-field-name")||"cap-token";this.querySelector(`input[name='${a}']`)&&(this.querySelector(`input[name='${a}']`).value=n.token),this.dispatchEvent("solve",{token:n.token}),this.token=n.token,this.#t&&clearTimeout(this.#t);const o=new Date(n.expires).getTime()-Date.now();return o>0&&o<864e5?this.#t=setTimeout((()=>this.reset()),o):this.error("Invalid expiration time"),{success:!0,token:this.token}}catch(e){throw this.error(e.message),e}}finally{this.#a=!1}}async solveChallenges(e){const r=e.length;let s=0;const i=Array(this.#r).fill(null).map((()=>{try{return new Worker(this.#e)}catch(e){throw console.error("[cap] Failed to create worker:",e),new Error("Worker creation failed")}})),n=([e,n],a)=>new Promise(((o,c)=>{const d=i[a];if(!d)return void c(new Error("Worker not available"));const h=setTimeout((()=>{try{d.terminate(),i[a]=new Worker(this.#e)}catch(e){console.error("[cap] Error terminating/recreating worker:",e)}c(new Error("Worker timeout"))}),3e4);d.onmessage=({data:t})=>{t.found&&(clearTimeout(h),s++,this.dispatchEvent("progress",{progress:Math.round(s/r*100)}),o([e,n,t.nonce]))},d.onerror=e=>{clearTimeout(h),this.error(`Error in worker: ${e.message||e}`),c(e)},d.postMessage({salt:e,target:n,wasmUrl:window.CAP_CUSTOM_WASM_URL||`https://cdn.jsdelivr.net/npm/@cap.js/wasm@${t}/browser/cap_wasm.min.js`})})),a=[];try{for(let t=0;t<e.length;t+=this.#r){const r=e.slice(t,Math.min(t+this.#r,e.length)),s=await Promise.all(r.map(((e,t)=>n(e,t))));a.push(...s)}}finally{i.forEach((e=>{if(e)try{e.terminate()}catch(e){console.error("[cap] Error terminating worker:",e)}}))}return a}setWorkersCount(e){const t=parseInt(e,10),r=Math.min(navigator.hardwareConcurrency||8,16);this.#r=!isNaN(t)&&t>0&&t<=r?t:navigator.hardwareConcurrency||8}createUI(){this.#i.classList.add("captcha"),this.#i.setAttribute("role","button"),this.#i.setAttribute("tabindex","0"),this.#i.setAttribute("disabled","true"),this.#i.innerHTML=`<div class="checkbox"></div><p>${this.getI18nText("initial-state","I'm a human")}</p><a href="https://capjs.js.org/" class="credits" target="_blank" rel="follow noopener"><span>Secured by&nbsp;</span>Cap</a>`,this.#s.innerHTML='<style>\n\n.captcha * {box-sizing:border-box;}\n\n.captcha{background-color:var(--cap-background,#fdfdfd);border:1px solid var(--cap-border-color,#dddddd8f);border-radius:var(--cap-border-radius,14px);\nuser-select:none;\n\nheight:var(--cap-widget-height, 30px);\n\nwidth:var(--cap-widget-width, 230px);display:flex;align-items:center;padding:var(--cap-widget-padding,14px);gap:var(--cap-gap,15px);cursor:pointer;transition:filter .2s,transform .2s;position:relative;-webkit-tap-highlight-color:rgba(255,255,255,0);overflow:hidden;color:var(--cap-color,#212121)}.captcha:hover{filter:brightness(98%)}\n\n.checkbox{width:var(--cap-checkbox-size,25px);height:var(--cap-checkbox-size,25px);border:var(--cap-checkbox-border,1px solid #aaaaaad1);border-radius:var(--cap-checkbox-border-radius,6px);background-color:var(--cap-checkbox-background,#fafafa91);transition:opacity .2s;margin-top:var(--cap-checkbox-margin,2px);margin-bottom:var(--cap-checkbox-margin,2px)}.captcha *{font-family:var(--cap-font,system,-apple-system,"BlinkMacSystemFont",".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande","Ubuntu","arial",sans-serif)}\n\n.captcha p{margin:0;font-weight:500;font-size:15px;user-select:none;transition:opacity .2s}.captcha[data-state=verifying] .checkbox{background: none;display:flex;align-items:center;justify-content:center;transform: scale(1.1);border: none;border-radius: 50%;background: conic-gradient(var(--cap-spinner-color,#000) 0%, var(--cap-spinner-color,#000) var(--progress, 0%), var(--cap-spinner-background-color,#eee) var(--progress, 0%), var(--cap-spinner-background-color,#eee) 100%);position: relative;}.captcha[data-state=verifying] .checkbox::after {content: "";background-color: var(--cap-background,#fdfdfd);width: calc(100% - var(--cap-spinner-thickness,5px));height: calc(100% - var(--cap-spinner-thickness,5px));border-radius: 50%;margin:calc(var(--cap-spinner-thickness,5px) / 2)}.captcha[data-state=done] .checkbox{border:1px solid transparent;background-image:var(--cap-checkmark,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cstyle%3E%40keyframes%20anim%7B0%25%7Bstroke-dashoffset%3A23.21320343017578px%7Dto%7Bstroke-dashoffset%3A0%7D%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2300a67d%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m5%2012%205%205L20%207%22%20style%3D%22stroke-dashoffset%3A0%3Bstroke-dasharray%3A23.21320343017578px%3Banimation%3Aanim%20.5s%20ease%22%2F%3E%3C%2Fsvg%3E"));background-size:cover}.captcha[data-state=error] .checkbox{border:1px solid transparent;background-image:var(--cap-error-cross,url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'96\' height=\'96\' viewBox=\'0 0 24 24\'%3E%3Cpath fill=\'%23f55b50\' d=\'M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8\'/%3E%3C/svg%3E"));background-size:cover}.captcha[disabled]{cursor:not-allowed}.captcha[disabled][data-state=verifying]{cursor:progress}.captcha[disabled][data-state=done]{cursor:default}.captcha .credits{position:absolute;bottom:10px;right:10px;font-size:var(--cap-credits-font-size,12px);color:var(--cap-color,#212121);opacity:var(--cap-opacity-hover,0.8)}.captcha .credits span{display:none;text-decoration:underline}.captcha .credits:hover span{display:inline-block}</style>',this.#s.appendChild(this.#i)}addEventListeners(){this.#i&&(this.#i.querySelector("a").addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault(),window.open("https://capjs.js.org","_blank")})),this.#i.addEventListener("click",(()=>{this.#i.hasAttribute("disabled")||this.solve()})),this.#i.addEventListener("keydown",(e=>{"Enter"!==e.key&&" "!==e.key||this.#i.hasAttribute("disabled")||(e.preventDefault(),this.solve())})),this.addEventListener("progress",this.boundHandleProgress),this.addEventListener("solve",this.boundHandleSolve),this.addEventListener("error",this.boundHandleError),this.addEventListener("reset",this.boundHandleReset))}updateUI(e,t,r=!1){this.#i&&(this.#i.setAttribute("data-state",e),this.#i.querySelector("p").innerText=t,r?this.#i.setAttribute("disabled","true"):this.#i.removeAttribute("disabled"))}handleProgress(e){if(!this.#i)return;const t=this.#i.querySelector("p"),r=this.#i.querySelector(".checkbox");t&&r&&(r.style.setProperty("--progress",`${e.detail.progress}%`),t.innerText=`${this.getI18nText("verifying-label","Verifying...")} ${e.detail.progress}%`),this.executeAttributeCode("onprogress",e)}handleSolve(e){this.updateUI("done",this.getI18nText("solved-label","You're a human"),!0),this.executeAttributeCode("onsolve",e)}handleError(e){this.updateUI("error",this.getI18nText("error-label","Error. Try again.")),this.executeAttributeCode("onerror",e)}handleReset(e){this.updateUI("",this.getI18nText("initial-state","I'm a human")),this.executeAttributeCode("onreset",e)}executeAttributeCode(e,t){const r=this.getAttribute(e);if(r)try{new Function("event",r).call(this,t)}catch(t){console.error(`[cap] Error executing ${e}:`,t)}}error(e="Unknown error"){console.error("[cap] Error:",e),this.dispatchEvent("error",{isCap:!0,message:e})}dispatchEvent(e,t={}){const r=new CustomEvent(e,{bubbles:!0,composed:!0,detail:t});super.dispatchEvent(r)}reset(){this.#t&&(clearTimeout(this.#t),this.#t=null),this.dispatchEvent("reset"),this.token=null;const e=this.getAttribute("data-cap-hidden-field-name")||"cap-token";this.querySelector(`input[name='${e}']`)&&(this.querySelector(`input[name='${e}']`).value="")}get tokenValue(){return this.token}disconnectedCallback(){this.removeEventListener("progress",this.boundHandleProgress),this.removeEventListener("solve",this.boundHandleSolve),this.removeEventListener("error",this.boundHandleError),this.removeEventListener("reset",this.boundHandleReset),this.#o.forEach(((e,t)=>{this.removeEventListener(t.slice(2),e)})),this.#o.clear(),this.#s&&(this.#s.innerHTML=""),this.reset(),this.cleanup()}cleanup(){this.#t&&(clearTimeout(this.#t),this.#t=null),this.#e&&(URL.revokeObjectURL(this.#e),this.#e="")}}class i{constructor(e={},t){let r=t||document.createElement("cap-widget");if(Object.entries(e).forEach((([e,t])=>{r.setAttribute(e,t)})),!e.apiEndpoint)throw r.remove(),new Error("Missing API endpoint");r.setAttribute("data-cap-api-endpoint",e.apiEndpoint),this.widget=r,this.solve=this.widget.solve.bind(this.widget),this.reset=this.widget.reset.bind(this.widget),this.addEventListener=this.widget.addEventListener.bind(this.widget),Object.defineProperty(this,"token",{get:()=>r.token,configurable:!0,enumerable:!0}),t||(r.style.display="none",document.documentElement.appendChild(r))}}e=`(() => {${function(){if("object"!=typeof WebAssembly||"function"!=typeof WebAssembly?.instantiate)return self.onmessage=async({data:{salt:e,target:t}})=>{let r=0;let s=0;const i=new TextEncoder,n=new Uint8Array(t.length/2);for(let e=0;e<n.length;e++)n[e]=parseInt(t.substring(2*e,2*e+2),16);const a=n.length;for(;;)try{for(let t=0;t<5e4;t++){const t=e+r,s=i.encode(t),o=await crypto.subtle.digest("SHA-256",s),c=new Uint8Array(o,0,a);let d=!0;for(let e=0;e<a;e++)if(c[e]!==n[e]){d=!1;break}if(d)return void self.postMessage({nonce:r,found:!0});r++}s+=5e4}catch(e){return console.error("[cap] fallback worker error",e),void self.postMessage({found:!1,error:e.message})}},console.warn("[cap] WebAssembly is not supported, falling back to alternative solver.");let e,t;self.onmessage=async({data:{salt:r,target:s,wasmUrl:i}})=>{e!==i&&(e=i,await import(i).then((e=>e.default().then((r=>{t=(r&&r.exports?r.exports:e).solve_pow})))).catch((e=>{console.error("[cap] using fallback solver due to error:",e)})));try{const e=performance.now(),i=t(r,s),n=performance.now();self.postMessage({nonce:Number(i),found:!0,durationMs:(n-e).toFixed(2)})}catch(e){console.error("[cap] solver error",e),self.postMessage({found:!1,error:e.message||String(e)})}},self.onerror=e=>{self.postMessage({found:!1,error:`Worker error: ${e.message||e}`})}}.toString().replace(/^function\s*\([^\)]*\)\s*{|\}$/g,"").trim()}})()`,window.Cap=i,customElements.get("cap-widget")?console.warn("The cap-widget element has already been defined. Skipping re-defining it."):customElements.define("cap-widget",s),"object"==typeof exports&&"undefined"!=typeof module?module.exports=i:"function"==typeof define&&define.amd&&define([],(function(){return i})),"undefined"!=typeof exports&&(exports.default=i)}();
+!(function () {
+  let e;
+  const t = "0.0.5",
+    r = function () {
+      return window?.CAP_CUSTOM_FETCH ? window.CAP_CUSTOM_FETCH(...arguments) : fetch(...arguments);
+    };
+  window.CAP_CUSTOM_WASM_URL ||
+    [
+      `https://cdn.jsdelivr.net/npm/@cap.js/wasm@${t}/browser/cap_wasm.min.js`,
+      `https://cdn.jsdelivr.net/npm/@cap.js/wasm@${t}/browser/cap_wasm_bg.wasm`,
+    ].forEach((e) => {
+      const t = document.createElement("link");
+      ((t.rel = "prefetch"),
+        (t.href = e),
+        (t.as = e.endsWith(".wasm") ? "fetch" : "script"),
+        document.head.appendChild(t));
+    });
+  class s extends HTMLElement {
+    #e = "";
+    #t = null;
+    #r = navigator.hardwareConcurrency || 8;
+    token = null;
+    #s;
+    #i;
+    #n;
+    #a = !1;
+    #o;
+    getI18nText(e, t) {
+      return this.getAttribute(`data-cap-i18n-${e}`) || t;
+    }
+    static get observedAttributes() {
+      return [
+        "onsolve",
+        "onprogress",
+        "onreset",
+        "onerror",
+        "data-cap-worker-count",
+        "data-cap-i18n-initial-state",
+        "[cap]",
+      ];
+    }
+    constructor() {
+      (super(),
+        this.#o &&
+          this.#o.forEach((e, t) => {
+            this.removeEventListener(t.slice(2), e);
+          }),
+        (this.#o = new Map()),
+        (this.boundHandleProgress = this.handleProgress.bind(this)),
+        (this.boundHandleSolve = this.handleSolve.bind(this)),
+        (this.boundHandleError = this.handleError.bind(this)),
+        (this.boundHandleReset = this.handleReset.bind(this)));
+    }
+    initialize() {
+      this.#e = URL.createObjectURL(new Blob([e], { type: "application/javascript" }));
+    }
+    attributeChangedCallback(e, t, r) {
+      if (e.startsWith("on")) {
+        const t = e.slice(2),
+          s = this.#o.get(e);
+        if ((s && this.removeEventListener(t, s), r)) {
+          const r = (t) => {
+            const r = this.getAttribute(e);
+            "function" == typeof window[r] && window[r].call(this, t);
+          };
+          (this.#o.set(e, r), this.addEventListener(t, r));
+        }
+      }
+      ("data-cap-worker-count" === e && this.setWorkersCount(parseInt(r)),
+        "data-cap-i18n-initial-state" === e &&
+          this.#i &&
+          this.#i?.querySelector("p")?.innerText &&
+          (this.#i.querySelector("p").innerText = this.getI18nText(
+            "initial-state",
+            "I'm a human",
+          )));
+    }
+    async connectedCallback() {
+      ((this.#n = this),
+        (this.#s = this.attachShadow({ mode: "open" })),
+        (this.#i = document.createElement("div")),
+        this.createUI(),
+        this.addEventListeners(),
+        await this.initialize(),
+        this.#i.removeAttribute("disabled"));
+      const e = this.getAttribute("data-cap-worker-count"),
+        t = e ? parseInt(e, 10) : null;
+      this.setWorkersCount(t || navigator.hardwareConcurrency || 8);
+      const r = this.getAttribute("data-cap-hidden-field-name") || "cap-token";
+      this.#n.innerHTML = `<input type="hidden" name="${r}">`;
+    }
+    async solve() {
+      if (!this.#a)
+        try {
+          ((this.#a = !0),
+            this.updateUI("verifying", this.getI18nText("verifying-label", "Verifying..."), !0),
+            this.dispatchEvent("progress", { progress: 0 }));
+          try {
+            const e = this.getAttribute("data-cap-api-endpoint");
+            if (!e) throw new Error("Missing API endpoint");
+            const { challenge: t, token: s } = await (
+                await r(`${e}challenge`, { method: "POST" })
+              ).json(),
+              i = await this.solveChallenges(t),
+              n = await (
+                await r(`${e}redeem`, {
+                  method: "POST",
+                  body: JSON.stringify({ token: s, solutions: i }),
+                  headers: { "Content-Type": "application/json" },
+                })
+              ).json();
+            if ((this.dispatchEvent("progress", { progress: 100 }), !n.success))
+              throw new Error("Invalid solution");
+            const a = this.getAttribute("data-cap-hidden-field-name") || "cap-token";
+            (this.querySelector(`input[name='${a}']`) &&
+              (this.querySelector(`input[name='${a}']`).value = n.token),
+              this.dispatchEvent("solve", { token: n.token }),
+              (this.token = n.token),
+              this.#t && clearTimeout(this.#t));
+            const o = new Date(n.expires).getTime() - Date.now();
+            return (
+              o > 0 && o < 864e5
+                ? (this.#t = setTimeout(() => this.reset(), o))
+                : this.error("Invalid expiration time"),
+              { success: !0, token: this.token }
+            );
+          } catch (e) {
+            throw (this.error(e.message), e);
+          }
+        } finally {
+          this.#a = !1;
+        }
+    }
+    async solveChallenges(e) {
+      const r = e.length;
+      let s = 0;
+      const i = Array(this.#r)
+          .fill(null)
+          .map(() => {
+            try {
+              return new Worker(this.#e);
+            } catch (e) {
+              throw (
+                console.error("[cap] Failed to create worker:", e),
+                new Error("Worker creation failed")
+              );
+            }
+          }),
+        n = ([e, n], a) =>
+          new Promise((o, c) => {
+            const d = i[a];
+            if (!d) return void c(new Error("Worker not available"));
+            const h = setTimeout(
+              () => {
+                try {
+                  (d.terminate(), (i[a] = new Worker(this.#e)));
+                } catch (e) {
+                  console.error("[cap] Error terminating/recreating worker:", e);
+                }
+                c(new Error("Worker timeout"));
+              },
+              3e4,
+            );
+            ((d.onmessage = ({ data: t }) => {
+              t.found &&
+                (clearTimeout(h),
+                s++,
+                this.dispatchEvent("progress", { progress: Math.round((s / r) * 100) }),
+                o([e, n, t.nonce]));
+            }),
+              (d.onerror = (e) => {
+                (clearTimeout(h), this.error(`Error in worker: ${e.message || e}`), c(e));
+              }),
+              d.postMessage({
+                salt: e,
+                target: n,
+                wasmUrl:
+                  window.CAP_CUSTOM_WASM_URL ||
+                  `https://cdn.jsdelivr.net/npm/@cap.js/wasm@${t}/browser/cap_wasm.min.js`,
+              }));
+          }),
+        a = [];
+      try {
+        for (let t = 0; t < e.length; t += this.#r) {
+          const r = e.slice(t, Math.min(t + this.#r, e.length)),
+            s = await Promise.all(r.map((e, t) => n(e, t)));
+          a.push(...s);
+        }
+      } finally {
+        i.forEach((e) => {
+          if (e)
+            try {
+              e.terminate();
+            } catch (e) {
+              console.error("[cap] Error terminating worker:", e);
+            }
+        });
+      }
+      return a;
+    }
+    setWorkersCount(e) {
+      const t = parseInt(e, 10),
+        r = Math.min(navigator.hardwareConcurrency || 8, 16);
+      this.#r = !isNaN(t) && t > 0 && t <= r ? t : navigator.hardwareConcurrency || 8;
+    }
+    createUI() {
+      (this.#i.classList.add("captcha"),
+        this.#i.setAttribute("role", "button"),
+        this.#i.setAttribute("tabindex", "0"),
+        this.#i.setAttribute("disabled", "true"),
+        (this.#i.innerHTML = `<div class="checkbox"></div><p>${this.getI18nText("initial-state", "I'm a human")}</p><a href="https://capjs.js.org/" class="credits" target="_blank" rel="follow noopener"><span>Secured by&nbsp;</span>Cap</a>`),
+        (this.#s.innerHTML =
+          '<style>\n\n.captcha * {box-sizing:border-box;}\n\n.captcha{background-color:var(--cap-background,#fdfdfd);border:1px solid var(--cap-border-color,#dddddd8f);border-radius:var(--cap-border-radius,14px);\nuser-select:none;\n\nheight:var(--cap-widget-height, 30px);\n\nwidth:var(--cap-widget-width, 230px);display:flex;align-items:center;padding:var(--cap-widget-padding,14px);gap:var(--cap-gap,15px);cursor:pointer;transition:filter .2s,transform .2s;position:relative;-webkit-tap-highlight-color:rgba(255,255,255,0);overflow:hidden;color:var(--cap-color,#212121)}.captcha:hover{filter:brightness(98%)}\n\n.checkbox{width:var(--cap-checkbox-size,25px);height:var(--cap-checkbox-size,25px);border:var(--cap-checkbox-border,1px solid #aaaaaad1);border-radius:var(--cap-checkbox-border-radius,6px);background-color:var(--cap-checkbox-background,#fafafa91);transition:opacity .2s;margin-top:var(--cap-checkbox-margin,2px);margin-bottom:var(--cap-checkbox-margin,2px)}.captcha *{font-family:var(--cap-font,system,-apple-system,"BlinkMacSystemFont",".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande","Ubuntu","arial",sans-serif)}\n\n.captcha p{margin:0;font-weight:500;font-size:15px;user-select:none;transition:opacity .2s}.captcha[data-state=verifying] .checkbox{background: none;display:flex;align-items:center;justify-content:center;transform: scale(1.1);border: none;border-radius: 50%;background: conic-gradient(var(--cap-spinner-color,#000) 0%, var(--cap-spinner-color,#000) var(--progress, 0%), var(--cap-spinner-background-color,#eee) var(--progress, 0%), var(--cap-spinner-background-color,#eee) 100%);position: relative;}.captcha[data-state=verifying] .checkbox::after {content: "";background-color: var(--cap-background,#fdfdfd);width: calc(100% - var(--cap-spinner-thickness,5px));height: calc(100% - var(--cap-spinner-thickness,5px));border-radius: 50%;margin:calc(var(--cap-spinner-thickness,5px) / 2)}.captcha[data-state=done] .checkbox{border:1px solid transparent;background-image:var(--cap-checkmark,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cstyle%3E%40keyframes%20anim%7B0%25%7Bstroke-dashoffset%3A23.21320343017578px%7Dto%7Bstroke-dashoffset%3A0%7D%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2300a67d%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m5%2012%205%205L20%207%22%20style%3D%22stroke-dashoffset%3A0%3Bstroke-dasharray%3A23.21320343017578px%3Banimation%3Aanim%20.5s%20ease%22%2F%3E%3C%2Fsvg%3E"));background-size:cover}.captcha[data-state=error] .checkbox{border:1px solid transparent;background-image:var(--cap-error-cross,url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'96\' height=\'96\' viewBox=\'0 0 24 24\'%3E%3Cpath fill=\'%23f55b50\' d=\'M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8\'/%3E%3C/svg%3E"));background-size:cover}.captcha[disabled]{cursor:not-allowed}.captcha[disabled][data-state=verifying]{cursor:progress}.captcha[disabled][data-state=done]{cursor:default}.captcha .credits{position:absolute;bottom:10px;right:10px;font-size:var(--cap-credits-font-size,12px);color:var(--cap-color,#212121);opacity:var(--cap-opacity-hover,0.8)}.captcha .credits span{display:none;text-decoration:underline}.captcha .credits:hover span{display:inline-block}</style>'),
+        this.#s.appendChild(this.#i));
+    }
+    addEventListeners() {
+      this.#i &&
+        (this.#i.querySelector("a").addEventListener("click", (e) => {
+          (e.stopPropagation(), e.preventDefault(), window.open("https://capjs.js.org", "_blank"));
+        }),
+        this.#i.addEventListener("click", () => {
+          this.#i.hasAttribute("disabled") || this.solve();
+        }),
+        this.#i.addEventListener("keydown", (e) => {
+          ("Enter" !== e.key && " " !== e.key) ||
+            this.#i.hasAttribute("disabled") ||
+            (e.preventDefault(), this.solve());
+        }),
+        this.addEventListener("progress", this.boundHandleProgress),
+        this.addEventListener("solve", this.boundHandleSolve),
+        this.addEventListener("error", this.boundHandleError),
+        this.addEventListener("reset", this.boundHandleReset));
+    }
+    updateUI(e, t, r = !1) {
+      this.#i &&
+        (this.#i.setAttribute("data-state", e),
+        (this.#i.querySelector("p").innerText = t),
+        r ? this.#i.setAttribute("disabled", "true") : this.#i.removeAttribute("disabled"));
+    }
+    handleProgress(e) {
+      if (!this.#i) return;
+      const t = this.#i.querySelector("p"),
+        r = this.#i.querySelector(".checkbox");
+      (t &&
+        r &&
+        (r.style.setProperty("--progress", `${e.detail.progress}%`),
+        (t.innerText = `${this.getI18nText("verifying-label", "Verifying...")} ${e.detail.progress}%`)),
+        this.executeAttributeCode("onprogress", e));
+    }
+    handleSolve(e) {
+      (this.updateUI("done", this.getI18nText("solved-label", "You're a human"), !0),
+        this.executeAttributeCode("onsolve", e));
+    }
+    handleError(e) {
+      (this.updateUI("error", this.getI18nText("error-label", "Error. Try again.")),
+        this.executeAttributeCode("onerror", e));
+    }
+    handleReset(e) {
+      (this.updateUI("", this.getI18nText("initial-state", "I'm a human")),
+        this.executeAttributeCode("onreset", e));
+    }
+    executeAttributeCode(e, t) {
+      const r = this.getAttribute(e);
+      if (r)
+        try {
+          new Function("event", r).call(this, t);
+        } catch (t) {
+          console.error(`[cap] Error executing ${e}:`, t);
+        }
+    }
+    error(e = "Unknown error") {
+      (console.error("[cap] Error:", e), this.dispatchEvent("error", { isCap: !0, message: e }));
+    }
+    dispatchEvent(e, t = {}) {
+      const r = new CustomEvent(e, { bubbles: !0, composed: !0, detail: t });
+      super.dispatchEvent(r);
+    }
+    reset() {
+      (this.#t && (clearTimeout(this.#t), (this.#t = null)),
+        this.dispatchEvent("reset"),
+        (this.token = null));
+      const e = this.getAttribute("data-cap-hidden-field-name") || "cap-token";
+      this.querySelector(`input[name='${e}']`) &&
+        (this.querySelector(`input[name='${e}']`).value = "");
+    }
+    get tokenValue() {
+      return this.token;
+    }
+    disconnectedCallback() {
+      (this.removeEventListener("progress", this.boundHandleProgress),
+        this.removeEventListener("solve", this.boundHandleSolve),
+        this.removeEventListener("error", this.boundHandleError),
+        this.removeEventListener("reset", this.boundHandleReset),
+        this.#o.forEach((e, t) => {
+          this.removeEventListener(t.slice(2), e);
+        }),
+        this.#o.clear(),
+        this.#s && (this.#s.innerHTML = ""),
+        this.reset(),
+        this.cleanup());
+    }
+    cleanup() {
+      (this.#t && (clearTimeout(this.#t), (this.#t = null)),
+        this.#e && (URL.revokeObjectURL(this.#e), (this.#e = "")));
+    }
+  }
+  class i {
+    constructor(e = {}, t) {
+      let r = t || document.createElement("cap-widget");
+      if (
+        (Object.entries(e).forEach(([e, t]) => {
+          r.setAttribute(e, t);
+        }),
+        !e.apiEndpoint)
+      )
+        throw (r.remove(), new Error("Missing API endpoint"));
+      (r.setAttribute("data-cap-api-endpoint", e.apiEndpoint),
+        (this.widget = r),
+        (this.solve = this.widget.solve.bind(this.widget)),
+        (this.reset = this.widget.reset.bind(this.widget)),
+        (this.addEventListener = this.widget.addEventListener.bind(this.widget)),
+        Object.defineProperty(this, "token", {
+          get: () => r.token,
+          configurable: !0,
+          enumerable: !0,
+        }),
+        t || ((r.style.display = "none"), document.documentElement.appendChild(r)));
+    }
+  }
+  ((e = `(() => {${function () {
+    if ("object" != typeof WebAssembly || "function" != typeof WebAssembly?.instantiate)
+      return (
+        (self.onmessage = async ({ data: { salt: e, target: t } }) => {
+          let r = 0;
+          let s = 0;
+          const i = new TextEncoder(),
+            n = new Uint8Array(t.length / 2);
+          for (let e = 0; e < n.length; e++) n[e] = parseInt(t.substring(2 * e, 2 * e + 2), 16);
+          const a = n.length;
+          for (;;)
+            try {
+              for (let t = 0; t < 5e4; t++) {
+                const t = e + r,
+                  s = i.encode(t),
+                  o = await crypto.subtle.digest("SHA-256", s),
+                  c = new Uint8Array(o, 0, a);
+                let d = !0;
+                for (let e = 0; e < a; e++)
+                  if (c[e] !== n[e]) {
+                    d = !1;
+                    break;
+                  }
+                if (d) return void self.postMessage({ nonce: r, found: !0 });
+                r++;
+              }
+              s += 5e4;
+            } catch (e) {
+              return (
+                console.error("[cap] fallback worker error", e),
+                void self.postMessage({ found: !1, error: e.message })
+              );
+            }
+        }),
+        console.warn("[cap] WebAssembly is not supported, falling back to alternative solver.")
+      );
+    let e, t;
+    ((self.onmessage = async ({ data: { salt: r, target: s, wasmUrl: i } }) => {
+      e !== i &&
+        ((e = i),
+        await import(i)
+          .then((e) =>
+            e.default().then((r) => {
+              t = (r && r.exports ? r.exports : e).solve_pow;
+            }),
+          )
+          .catch((e) => {
+            console.error("[cap] using fallback solver due to error:", e);
+          }));
+      try {
+        const e = performance.now(),
+          i = t(r, s),
+          n = performance.now();
+        self.postMessage({ nonce: Number(i), found: !0, durationMs: (n - e).toFixed(2) });
+      } catch (e) {
+        (console.error("[cap] solver error", e),
+          self.postMessage({ found: !1, error: e.message || String(e) }));
+      }
+    }),
+      (self.onerror = (e) => {
+        self.postMessage({ found: !1, error: `Worker error: ${e.message || e}` });
+      }));
+  }
+    .toString()
+    .replace(/^function\s*\([^\)]*\)\s*{|\}$/g, "")
+    .trim()}})()`),
+    (window.Cap = i),
+    customElements.get("cap-widget")
+      ? console.warn("The cap-widget element has already been defined. Skipping re-defining it.")
+      : customElements.define("cap-widget", s),
+    "object" == typeof exports && "undefined" != typeof module
+      ? (module.exports = i)
+      : "function" == typeof define &&
+        define.amd &&
+        define([], function () {
+          return i;
+        }),
+    "undefined" != typeof exports && (exports.default = i));
+})();

package/cap.d.ts

@@ -70,40 +70,16 @@ interface CapWidget extends HTMLElement {
   reset(): void;
   setWorkersCount(workers: number): void;
 
-  addEventListener(
-    type: "progress",
-    listener: (event: CapProgressEvent) => void
-  ): void;
-  addEventListener(
-    type: "solve",
-    listener: (event: CapSolveEvent) => void
-  ): void;
-  addEventListener(
-    type: "error",
-    listener: (event: CapErrorEvent) => void
-  ): void;
-  addEventListener(
-    type: "reset",
-    listener: (event: CapResetEvent) => void
-  ): void;
+  addEventListener(type: "progress", listener: (event: CapProgressEvent) => void): void;
+  addEventListener(type: "solve", listener: (event: CapSolveEvent) => void): void;
+  addEventListener(type: "error", listener: (event: CapErrorEvent) => void): void;
+  addEventListener(type: "reset", listener: (event: CapResetEvent) => void): void;
   addEventListener(type: string, listener: EventListener): void;
 
-  removeEventListener(
-    type: "progress",
-    listener: (event: CapProgressEvent) => void
-  ): void;
-  removeEventListener(
-    type: "solve",
-    listener: (event: CapSolveEvent) => void
-  ): void;
-  removeEventListener(
-    type: "error",
-    listener: (event: CapErrorEvent) => void
-  ): void;
-  removeEventListener(
-    type: "reset",
-    listener: (event: CapResetEvent) => void
-  ): void;
+  removeEventListener(type: "progress", listener: (event: CapProgressEvent) => void): void;
+  removeEventListener(type: "solve", listener: (event: CapSolveEvent) => void): void;
+  removeEventListener(type: "error", listener: (event: CapErrorEvent) => void): void;
+  removeEventListener(type: "reset", listener: (event: CapResetEvent) => void): void;
   removeEventListener(type: string, listener: EventListener): void;
 }
 
@@ -116,22 +92,10 @@ declare class Cap {
   solve(): Promise<SolveResult>;
   reset(): void;
 
-  addEventListener(
-    type: "progress",
-    listener: (event: CapProgressEvent) => void
-  ): void;
-  addEventListener(
-    type: "solve",
-    listener: (event: CapSolveEvent) => void
-  ): void;
-  addEventListener(
-    type: "error",
-    listener: (event: CapErrorEvent) => void
-  ): void;
-  addEventListener(
-    type: "reset",
-    listener: (event: CapResetEvent) => void
-  ): void;
+  addEventListener(type: "progress", listener: (event: CapProgressEvent) => void): void;
+  addEventListener(type: "solve", listener: (event: CapSolveEvent) => void): void;
+  addEventListener(type: "error", listener: (event: CapErrorEvent) => void): void;
+  addEventListener(type: "reset", listener: (event: CapResetEvent) => void): void;
   addEventListener(type: string, listener: EventListener): void;
 }