altcha 3.0.3 → 3.0.5

package/README.md

@@ -228,6 +228,74 @@ For simple implementations, the widget supports a subset of configuration option
 - **`timeout`**: Verification timeout in milliseconds (Default: `90_000`).
 - **`verifyFunction`**: A custom verification handler that overrides default network verification.
 
+## Algorithms
+
+ALTCHA supports multiple proof-of-work algorithms. `PBKDF2/*` and `SHA-*` are bundled with the main widget by default. `Argon2` and `Scrypt` are memory-bound algorithms that resist hardware acceleration (ASICs/GPUs) but require importing their workers separately.
+
+**Supported algorithms:**
+
+- `PBKDF2/SHA-256` (default, bundled)
+- `PBKDF2/SHA-384` (bundled)
+- `PBKDF2/SHA-512` (bundled)
+- `SHA-256` (bundled)
+- `SHA-384` (bundled)
+- `SHA-512` (bundled)
+- `ARGON2ID` (requires separate worker import)
+- `SCRYPT` (requires separate worker import)
+
+If you use `Argon2` or `Scrypt`, import their workers and register them via the `$altcha.algorithms` global before the widget initializes.
+
+### Adding Argon2 / Scrypt Workers (Vite)
+
+Works with both `altcha` and `altcha/external`:
+
+```ts
+import 'altcha'; // or 'altcha/external'
+import Argon2idWorker from 'altcha/workers/argon2id?worker';
+import ScryptWorker from 'altcha/workers/scrypt?worker';
+
+$altcha.algorithms.set('ARGON2ID', () => new Argon2idWorker());
+$altcha.algorithms.set('SCRYPT', () => new ScryptWorker());
+```
+
+### Without Bundler Worker Import Support
+
+If your environment does not support `?worker` imports, load the prebuilt worker files directly:
+
+```ts
+import 'altcha';
+
+$altcha.algorithms.set(
+	'ARGON2ID',
+	() => new Worker('/path/to/node_modules/altcha/dist/workers/argon2id.js')
+);
+$altcha.algorithms.set(
+	'SCRYPT',
+	() => new Worker('/path/to/node_modules/altcha/dist/workers/scrypt.js')
+);
+```
+
+### Using `altcha/external`
+
+`altcha/external` excludes all bundled workers, requiring you to register every algorithm explicitly. Use this for full control over which workers are loaded:
+
+```ts
+import 'altcha/external';
+import Argon2idWorker from 'altcha/workers/argon2id?worker';
+import Pbkdf2Worker from 'altcha/workers/pbkdf2?worker';
+import ScryptWorker from 'altcha/workers/scrypt?worker';
+import ShaWorker from 'altcha/workers/sha?worker';
+
+$altcha.algorithms.set('PBKDF2/SHA-256', () => new Pbkdf2Worker());
+$altcha.algorithms.set('PBKDF2/SHA-384', () => new Pbkdf2Worker());
+$altcha.algorithms.set('PBKDF2/SHA-512', () => new Pbkdf2Worker());
+$altcha.algorithms.set('SHA-256', () => new ShaWorker());
+$altcha.algorithms.set('SHA-384', () => new ShaWorker());
+$altcha.algorithms.set('SHA-512', () => new ShaWorker());
+$altcha.algorithms.set('ARGON2ID', () => new Argon2idWorker());
+$altcha.algorithms.set('SCRYPT', () => new ScryptWorker());
+```
+
 ## Cookies
 
 By default, the widget sends the ALTCHA payload as a form field by creating a hidden input. It can also be configured to send the payload via a cookie.

package/dist/external/altcha.js

@@ -5363,7 +5363,7 @@ function Code($$anchor, $$props) {
         button.disabled = get(audioState) === AudioState.LOADING || get(audioState) === AudioState.ERROR;
         set_attribute(button, "aria-label", get(audioState) === AudioState.LOADING ? strings().loading : strings().getAudioChallenge);
       });
-      delegated("click", button, () => onPlayAudio());
+      event("click", button, () => onPlayAudio(), true);
       append($$anchor2, button);
     };
     if_block(node_1, ($$render) => {
@@ -5418,12 +5418,12 @@ function Code($$anchor, $$props) {
   event("submit", form, onSubmitCapture, true);
   delegated("keydown", input, onInputKeyDown);
   bind_value(input, () => get(code), ($$value) => set(code, $$value));
-  delegated("click", button_1, () => onReload()?.());
-  delegated("click", button_3, () => onCancel()?.());
+  event("click", button_1, () => onReload()?.(), true);
+  event("click", button_3, () => onCancel()?.(), true);
   append($$anchor, div);
   return pop($$exports);
 }
-delegate(["keydown", "click"]);
+delegate(["keydown"]);
 create_custom_element(
   Code,
   {
@@ -5446,7 +5446,7 @@ var root_3$1 = /* @__PURE__ */ from_html(`<div role="button" class="altcha-popov
 var root$1 = /* @__PURE__ */ from_html(`<!> <div><!> <!> <div class="altcha-popover-content"><!></div></div>`, 1);
 function Popover($$anchor, $$props) {
   push($$props, true);
-  let anchor = prop($$props, "anchor"), children = prop($$props, "children"), display = prop($$props, "display", 7, "standard"), backdrop = prop($$props, "backdrop", 7, false), onClickOutside = prop($$props, "onClickOutside"), onClickOutsideDelay = prop($$props, "onClickOutsideDelay", 7, 600), onClose = prop($$props, "onClose"), placement = prop($$props, "placement", 7, "auto"), variant = prop($$props, "variant", 7, "neutral"), rest = /* @__PURE__ */ rest_props($$props, [
+  let anchor = prop($$props, "anchor"), children = prop($$props, "children"), display = prop($$props, "display", 7, "standard"), backdrop = prop($$props, "backdrop", 7, false), onClickOutside = prop($$props, "onClickOutside"), onClickOutsideDelay = prop($$props, "onClickOutsideDelay", 7, 600), onClose = prop($$props, "onClose"), placement = prop($$props, "placement", 7, "auto"), updateUISignal = prop($$props, "updateUISignal"), variant = prop($$props, "variant", 7, "neutral"), rest = /* @__PURE__ */ rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -5459,6 +5459,7 @@ function Popover($$anchor, $$props) {
     "onClickOutsideDelay",
     "onClose",
     "placement",
+    "updateUISignal",
     "variant"
   ]);
   let el = /* @__PURE__ */ state(void 0);
@@ -5470,6 +5471,11 @@ function Popover($$anchor, $$props) {
       set(top, placement() === "top");
     }
   });
+  user_effect(() => {
+    if (updateUISignal()) {
+      reposition();
+    }
+  });
   onMount(() => {
     const moveToBody = display() === "bottomsheet" || display() === "overlay";
     if (moveToBody) {
@@ -5492,7 +5498,7 @@ function Popover($$anchor, $$props) {
   }
   function onWindowClick(ev) {
     const target = ev.target;
-    if (!get(el)?.contains(target) && get(mountedAt) && get(mountedAt) + onClickOutsideDelay() < Date.now()) {
+    if (!get(el)?.contains(target) && (!onClickOutsideDelay() || get(mountedAt) + onClickOutsideDelay() < Date.now())) {
       onClickOutside()?.();
     }
   }
@@ -5569,6 +5575,13 @@ function Popover($$anchor, $$props) {
       placement($$value);
       flushSync();
     },
+    get updateUISignal() {
+      return updateUISignal();
+    },
+    set updateUISignal($$value) {
+      updateUISignal($$value);
+      flushSync();
+    },
     get variant() {
       return variant();
     },
@@ -5578,7 +5591,7 @@ function Popover($$anchor, $$props) {
     }
   };
   var fragment = root$1();
-  event("click", $window, onWindowClick);
+  event("click", $window, onWindowClick, true);
   event("resize", $window, onWindowResize);
   event("scroll", $window, onWindowScroll);
   var node = first_child(fragment);
@@ -5615,7 +5628,7 @@ function Popover($$anchor, $$props) {
   {
     var consequent_2 = ($$anchor2) => {
       var div_3 = root_3$1();
-      delegated("click", div_3, onCloseClick);
+      event("click", div_3, onCloseClick, true);
       append($$anchor2, div_3);
     };
     if_block(node_2, ($$render) => {
@@ -5631,7 +5644,6 @@ function Popover($$anchor, $$props) {
   append($$anchor, fragment);
   return pop($$exports);
 }
-delegate(["click"]);
 create_custom_element(
   Popover,
   {
@@ -5643,6 +5655,7 @@ create_custom_element(
     onClickOutsideDelay: {},
     onClose: {},
     placement: {},
+    updateUISignal: {},
     variant: {}
   },
   [],
@@ -5909,6 +5922,7 @@ function Widget($$anchor, $$props) {
   let checked = /* @__PURE__ */ state(false);
   let codeChallenge = /* @__PURE__ */ state(null);
   let currentController = /* @__PURE__ */ state(null);
+  let currentDisplay = /* @__PURE__ */ state(null);
   let currentState = /* @__PURE__ */ state(proxy(State.UNVERIFIED));
   let elAnchorArrow = /* @__PURE__ */ state(void 0);
   let elFloatingAnchor = /* @__PURE__ */ state(void 0);
@@ -5919,6 +5933,7 @@ function Widget($$anchor, $$props) {
   let expirationTimeout = /* @__PURE__ */ state(null);
   let payload = /* @__PURE__ */ state(null);
   let plugins = /* @__PURE__ */ state(proxy([]));
+  let updateUISignal = /* @__PURE__ */ state(0);
   let userConfig = /* @__PURE__ */ state(proxy({}));
   let visible = /* @__PURE__ */ state(true);
   const config = /* @__PURE__ */ user_derived(() => ({
@@ -5998,7 +6013,9 @@ function Widget($$anchor, $$props) {
     }
   });
   user_effect(() => {
-    setDisplay(get(config).display);
+    if (get(currentDisplay) !== get(config).display) {
+      setDisplay(get(config).display);
+    }
   });
   user_effect(() => {
     if (get(checked) && get(currentState) === State.VERIFYING) {
@@ -6049,7 +6066,7 @@ function Widget($$anchor, $$props) {
     }
   });
   onMount(() => {
-    log("mounted", "3.0.3");
+    log("mounted", "3.0.5");
     if (instance) {
       globalThis.$altcha.instances.add(instance);
     }
@@ -6343,6 +6360,7 @@ function Widget($$anchor, $$props) {
     }
   }
   function onWindowPageshow() {
+    setDisplay(get(config).display);
     reset$1();
   }
   function onWindowResize() {
@@ -6463,6 +6481,9 @@ function Widget($$anchor, $$props) {
       case "standard":
         show();
     }
+    if (get(currentDisplay) !== value) {
+      set(currentDisplay, value, true);
+    }
   }
   function setChallengeExpiration(expiresAt) {
     if (get(expirationTimeout)) {
@@ -6583,6 +6604,7 @@ function Widget($$anchor, $$props) {
       case "floating":
         return repositionFloating();
     }
+    set(updateUISignal, get(updateUISignal) + 1);
   }
   async function verify(options = {}) {
     const {
@@ -6613,7 +6635,7 @@ function Widget($$anchor, $$props) {
         set(payload, btoa(JSON.stringify({ challenge: null, solution: null, test: true })), true);
         log("verified");
         setState(State.VERIFIED);
-        dispatch("vefified", { payload: get(payload) });
+        dispatch("verified", { payload: get(payload) });
         return { payload: get(payload) };
       }
       challenge = await fetchChallenge();
@@ -6684,7 +6706,7 @@ function Widget($$anchor, $$props) {
       } else {
         log("verified");
         setState(State.VERIFIED);
-        dispatch("vefified", { payload: get(payload) });
+        dispatch("verified", { payload: get(payload) });
       }
     } catch (err) {
       log("verification failed", err);
@@ -6740,7 +6762,7 @@ function Widget($$anchor, $$props) {
           if (get(config).overlayContent) $$render(consequent_1);
         });
       }
-      delegated("click", div_2, onCloseClick);
+      event("click", div_2, onCloseClick, true);
       append($$anchor2, fragment_1);
     };
     if_block(node_1, ($$render) => {
@@ -6885,6 +6907,9 @@ function Widget($$anchor, $$props) {
         get dir() {
           return get(dir);
         },
+        get updateUISignal() {
+          return get(updateUISignal);
+        },
         children: ($$anchor3, $$slotProps) => {
           var fragment_9 = comment();
           var node_10 = first_child(fragment_9);
@@ -6950,6 +6975,9 @@ function Widget($$anchor, $$props) {
             get dir() {
               return get(dir);
             },
+            get updateUISignal() {
+              return get(updateUISignal);
+            },
             children: ($$anchor4, $$slotProps) => {
               var fragment_12 = root_19();
               var node_12 = first_child(fragment_12);
@@ -7021,7 +7049,6 @@ function Widget($$anchor, $$props) {
   $$cleanup();
   return $$pop;
 }
-delegate(["click"]);
 if (typeof window !== "undefined" && window.customElements) customElements.define("altcha-widget", create_custom_element(
   Widget,
   {