@zaptcha/widget 1.0.0 → 1.0.2

package/package.json

@@ -1,13 +1,18 @@
 {
-  "name": "@zaptcha/widget", 
-  "version": "1.0.0",
+  "name": "@zaptcha/widget",
+  "version": "1.0.2",
   "type": "module",
-  "main": "./src/zaptcha-widget.js",
+  "main":  "./dist/zaptcha-widget.js",
   "types": "./src/zaptcha.d.ts",
   "files": [
-    "src"
+    "dist",
+    "src/zaptcha.d.ts"
   ],
   "exports": {
-    ".": "./src/zaptcha-widget.js"
+    ".": "./dist/zaptcha-widget.js"
+  },
+  "scripts": {
+    "build":   "node scripts/build.js",
+    "prepare": "node scripts/build.js"
   }
 }

package/src/zaptcha-widget.js

@@ -1,485 +0,0 @@
-/**
- * <zero-captcha> — CAPTCHA Web Component with WASM Proof-of-Work
- *
- * The worker is bundled inline — only this one file needs to be distributed.
- * WASM paths are resolved automatically relative to this module's URL.
- *
- * Attributes:
- * base-url="https://api.example.com"   required — backend base URL
- * config-id="AAAA"                     required — base64url-encoded u32
- * wasm-glue="./pkg/zaptcha.js"         optional — override WASM glue path
- * wasm-bin="./pkg/zaptcha_bg.wasm"     optional — override WASM binary path
- *
- * CSS custom properties (set on a parent element to theme the widget):
- * --zaptcha-bg           background color
- * --zaptcha-border       border color
- * --zaptcha-border-focus focus ring color
- * --zaptcha-text         primary text color
- * --zaptcha-text-muted   muted / branding text color
- * --zaptcha-accent       spinner / interactive accent color
- * --zaptcha-success      checkmark fill color
- * --zaptcha-shadow       box shadow
- * --zaptcha-radius       border radius
- *
- * Events dispatched on host element:
- * zaptcha-success  -> detail: { token: string }
- * zaptcha-fail     -> detail: { reason: string }
- * zaptcha-reset    -> detail: {}
- *
- * Public methods:
- * el.reset()
- *
- * Usage:
- * <zero-captcha base-url="https://api.example.com" config-id="AAAA"></zero-captcha>
- */
-
-// ── Default WASM paths (relative to this module) ──────────────────────────
-
-const _wasmGlue = new URL('./zaptcha.js',      import.meta.url).href;
-const _wasmBin  = new URL('./zaptcha_bg.wasm', import.meta.url).href;
-
-const WORKER_SRC = `
-let wasmModule  = null;
-let wasmReady   = false;
-let wasmGlueUrl = null;
-let wasmBinUrl  = null;
-
-async function initWasm() {
-  if (wasmReady) return;
-  if (!wasmGlueUrl) throw new Error("WASM paths not provided");
-  const mod = await import(wasmGlueUrl);
-  if (typeof mod.default === "function") await mod.default(wasmBinUrl);
-  wasmModule = mod;
-  wasmReady  = true;
-}
-
-async function runSolve(baseUrl, configId) {
-  await initWasm();
-
-  const challengeRes = await fetch(baseUrl + "/" + configId + "/challenge");
-  if (!challengeRes.ok) throw new Error("Challenge request failed: HTTP " + challengeRes.status);
-
-  const { token, challenge_count, salt_length, difficulty } = await challengeRes.json();
-
-  self.__zaptchaProgressCb = (index, nonce) => {
-    self.postMessage({ type: "progress", index, nonce, total: challenge_count });
-  };
-
-  let solutions;
-  try {
-    solutions = wasmModule.solve_challenge(
-      token, difficulty, challenge_count, salt_length, self.__zaptchaProgressCb,
-    );
-  } finally {
-    delete self.__zaptchaProgressCb;
-  }
-
-  const redeemRes = await fetch(baseUrl + "/" + configId + "/redeem", {
-    method:  "POST",
-    headers: { "Content-Type": "application/json" },
-    body:    JSON.stringify({ token, solutions: Array.from(solutions) }),
-  });
-  if (!redeemRes.ok) throw new Error("Redeem request failed: HTTP " + redeemRes.status);
-
-  const { message } = await redeemRes.json();
-  if (!message) throw new Error("Server did not return a token");
-  return message;
-}
-
-self.onmessage = async function ({ data }) {
-  if (data.type === "init") {
-    wasmGlueUrl = data.wasmGlue;
-    wasmBinUrl  = data.wasmBin;
-    try {
-      await initWasm();
-      self.postMessage({ type: "ready" });
-    } catch (err) {
-      self.postMessage({ type: "fail", reason: err.message });
-    }
-    return;
-  }
-
-  if (data.type === "solve") {
-    try {
-      const token = await runSolve(data.baseUrl, data.configId);
-      self.postMessage({ type: "success", token });
-    } catch (err) {
-      self.postMessage({ type: "fail", reason: err.message });
-    }
-    return;
-  }
-};
-`;
-
-const STYLE = `
-  :host {
-    display: inline-block;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    /*
-     * Map public --zaptcha-* custom properties to internal vars with
-     * sensible light-mode fallbacks.
-     */
-    --zap-bg:           var(--zaptcha-bg,           #ffffff);
-    --zap-border:       var(--zaptcha-border,       #e5e7eb);
-    --zap-border-hover: var(--zaptcha-border-hover, #d1d5db);
-    --zap-border-focus: var(--zaptcha-border-focus, #4f46e5);
-    --zap-text:         var(--zaptcha-text,         #374151);
-    --zap-text-muted:   var(--zaptcha-text-muted,   #9ca3af);
-    --zap-accent:       var(--zaptcha-accent,       #4f46e5);
-    --zap-success:      var(--zaptcha-success,      #10b981);
-    --zap-shadow:       var(--zaptcha-shadow,       0 2px 6px rgba(0,0,0,0.04));
-    --zap-radius:       var(--zaptcha-radius,       8px);
-  }
-
-  .widget {
-    background:    var(--zap-bg);
-    border:        1px solid var(--zap-border);
-    border-radius: var(--zap-radius);
-    box-shadow:    var(--zap-shadow);
-    width:         210px; /* Слегка шире для баланса, но все еще очень компактно */
-    box-sizing:    border-box;
-    transition:    box-shadow 0.2s ease, border-color 0.2s ease;
-  }
-  
-  .widget:hover {
-    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
-  }
-
-  .row {
-    display:       flex;
-    align-items:   center;
-    gap:           10px;
-    padding:       0 12px;
-    height:        48px;
-    cursor:        pointer;
-    user-select:   none;
-    box-sizing:    border-box;
-    border-radius: var(--zap-radius);
-    outline:       none;
-  }
-  
-  .row:focus-visible {
-    box-shadow: 0 0 0 2px var(--zap-bg), 0 0 0 4px var(--zap-border-focus);
-  }
-  
-  .row[aria-checked="true"] { 
-    cursor: default; 
-  }
-
-  /* Checkbox */
-  .box {
-    width:           22px;
-    height:          22px;
-    flex-shrink:     0;
-    position:        relative;
-    display:         flex;
-    align-items:     center;
-    justify-content: center;
-  }
-
-  .box-border {
-    position:      absolute;
-    inset:         0;
-    border:        1.5px solid var(--zap-border);
-    border-radius: 4px;
-    background:    var(--zap-bg);
-    transition:    border-color 0.2s ease, background-color 0.2s ease;
-  }
-  
-  .row:hover:not([aria-checked="true"]) .box-border {
-    border-color: var(--zap-border-hover);
-  }
-
-  .box.done .box-border {
-    background:   var(--zap-success);
-    border-color: var(--zap-success);
-  }
-
-  .box-tick            { display: none; position: relative; z-index: 1; }
-  .box.done .box-tick  { display: block; animation: zap-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
-
-  @keyframes zap-pop {
-    0%   { transform: scale(0.5); opacity: 0; }
-    100% { transform: scale(1); opacity: 1; }
-  }
-
-  /* Spinner */
-  .box-spinner { display: none; position: absolute; inset: 0; }
-  .box.spinning .box-border  { border-color: transparent; background: transparent; }
-  .box.spinning .box-spinner {
-    display:         flex;
-    align-items:     center;
-    justify-content: center;
-  }
-  .box-spinner::after {
-    content:          '';
-    display:          block;
-    width:            18px;
-    height:           18px;
-    border:           2px solid var(--zap-border);
-    border-top-color: var(--zap-accent);
-    border-radius:    50%;
-    animation:        zap-spin 0.6s linear infinite;
-  }
-  @keyframes zap-spin { to { transform: rotate(360deg); } }
-
-  /* Label */
-  .label {
-    color:         var(--zap-text);
-    font-size:     13.5px;
-    font-weight:   500;
-    flex:          1;
-    white-space:   nowrap;
-    overflow:      hidden;
-    text-overflow: ellipsis;
-  }
-
-  /* Branding */
-  .branding {
-    display:         flex;
-    flex-direction:  column;
-    align-items:     flex-end;
-    justify-content: center;
-    flex-shrink:     0;
-    gap:             1px;
-  }
-  .branding strong {
-    font-size:      9px;
-    font-weight:    700;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    color:          var(--zap-text-muted);
-  }
-  .branding a {
-    font-size:       9px;
-    color:           var(--zap-text-muted);
-    text-decoration: none;
-    transition:      color 0.2s;
-  }
-  .branding a:hover { 
-    color: var(--zap-text); 
-  }
-`;
-
-class ZeroCaptcha extends HTMLElement {
-
-  static get observedAttributes() { return []; }
-
-  constructor() {
-    super();
-    this._shadow   = this.attachShadow({ mode: "open" });
-    this._worker   = null;
-    this._blobUrl  = null;
-    /** @type {"idle"|"solving"|"done"|"error"} */
-    this._state    = "idle";
-    this._progress = { done: 0, total: 1 };
-    this._render();
-  }
-
-  connectedCallback() {
-    this._bindEvents();
-    this._startWorker();
-  }
-
-  disconnectedCallback() {
-    this._destroyWorker();
-  }
-
-  reset() {
-    this._destroyWorker();
-    this._state    = "idle";
-    this._progress = { done: 0, total: 1 };
-    this._render();
-    this._bindEvents();
-    this._startWorker();
-    this.dispatchEvent(new CustomEvent("zaptcha-reset", { bubbles: true, detail: {} }));
-  }
-
-  _startWorker() {
-    try {
-      const externalUrl = this.getAttribute("worker-url");
-      if (externalUrl) {
-        this._worker = new Worker(externalUrl, { type: "module" });
-      } else {
-        const blob    = new Blob([WORKER_SRC], { type: "text/javascript" });
-        this._blobUrl = URL.createObjectURL(blob);
-        this._worker  = new Worker(this._blobUrl, { type: "module" });
-      }
-
-      this._worker.onmessage = (e) => this._onWorkerMsg(e.data);
-      this._worker.onerror   = (e) => this._onFail(`Worker error: ${e.message}`);
-
-      const wasmGlue = this.getAttribute("wasm-glue") ?? _wasmGlue;
-      const wasmBin  = this.getAttribute("wasm-bin")  ?? _wasmBin;
-
-      this._worker.postMessage({ type: "init", wasmGlue, wasmBin });
-    } catch (err) {
-      this._worker = null;
-    }
-  }
-
-  _destroyWorker() {
-    this._worker?.terminate();
-    this._worker = null;
-    if (this._blobUrl) {
-      URL.revokeObjectURL(this._blobUrl);
-      this._blobUrl = null;
-    }
-  }
-
-  _onWorkerMsg(msg) {
-    switch (msg.type) {
-      case "ready":
-        break;
-
-      case "progress":
-        this._progress.done  = (msg.index ?? 0) + 1;
-        this._progress.total = msg.total ?? 1;
-        this.dispatchEvent(new CustomEvent("zaptcha-progress", {
-          bubbles:  true,
-          composed: true,
-          detail: {
-            index: msg.index,
-            nonce: msg.nonce,
-            total: msg.total,
-            pct:   Math.round(((msg.index ?? 0) + 1) / (msg.total ?? 1) * 100),
-          },
-        }));
-        break;
-
-      case "success":
-        this._state = "done";
-        this._render();
-        this.dispatchEvent(new CustomEvent("zaptcha-success", {
-          bubbles:  true,
-          composed: true,
-          detail:   { token: msg.token },
-        }));
-        break;
-
-      case "fail":
-        this._onFail(msg.reason || "Unknown error");
-        break;
-    }
-  }
-
-
-  _render() {
-    const solving = this._state === "solving";
-    const done    = this._state === "done";
-
-    const label = done    ? "Verified"        :
-                  solving ? "Verifying\u2026"  :
-                            "I'm not a robot";
-
-    this._shadow.innerHTML = `
-      <style>${STYLE}</style>
-      <div class="widget" part="widget">
-        <div class="row"
-             id="row"
-             tabindex="${done ? -1 : 0}"
-             role="checkbox"
-             aria-checked="${done}"
-             aria-label="${label}">
-
-          <div class="box ${solving ? "spinning" : done ? "done" : ""}" id="box" part="checkbox">
-            <div class="box-border"></div>
-            <div class="box-spinner"></div>
-            <svg class="box-tick" width="12" height="9" viewBox="0 0 12 9" fill="none" aria-hidden="true">
-              <polyline points="1.5,4.5 4.5,7.5 10.5,1.5"
-                        stroke="white" stroke-width="2"
-                        stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </div>
-
-          <span class="label" part="label">${label}</span>
-
-          <div class="branding" part="branding">
-            <strong>Zaptcha</strong>
-            <a href="#" tabindex="-1">Privacy</a>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  // ── Event binding ───────────────────────────────────────────────────────
-
-  _bindEvents() {
-    const row = this._shadow.getElementById("row");
-    if (!row) return;
-    row.addEventListener("click",   () => this._onRowClick());
-    row.addEventListener("keydown", (e) => {
-      if (e.key === " " || e.key === "Enter") {
-        e.preventDefault();
-        this._onRowClick();
-      }
-    });
-  }
-
-  _onRowClick() {
-    if (this._state !== "idle") return;
-    this._startSolve();
-  }
-
-  // ── Solving flow ────────────────────────────────────────────────────────
-
-  _startSolve() {
-    this._state    = "solving";
-    this._progress = { done: 0, total: 1 };
-    this._render();
-
-    if (!this._worker) {
-      this._onFail("Worker unavailable");
-      return;
-    }
-
-    const baseUrl  = this.getAttribute("base-url")  ?? "";
-    const configId = this.getAttribute("config-id") ?? "";
-
-    if (!baseUrl || !configId) {
-      this._onFail("Attributes base-url and config-id are required");
-      return;
-    }
-
-    this._worker.postMessage({ type: "solve", baseUrl, configId });
-  }
-
-  _onFail(reason) {
-    this._state = "error";
-    this._render();
-
-    this.dispatchEvent(new CustomEvent("zaptcha-fail", {
-      bubbles:  true,
-      composed: true,
-      detail:   { reason },
-    }));
-
-    setTimeout(() => this.reset(), 3000);
-  }
-}
-
-customElements.define("zero-captcha", ZeroCaptcha);
-export default ZeroCaptcha;
-export { ZeroCaptcha };
-
-// ── Standalone worker factory ─────────────────────────────────────────────
-
-export function createWorker({ wasmGlue = _wasmGlue, wasmBin = _wasmBin } = {}) {
-  const blob    = new Blob([WORKER_SRC], { type: "text/javascript" });
-  const blobUrl = URL.createObjectURL(blob);
-  const worker  = new Worker(blobUrl, { type: "module" });
-
-  worker.addEventListener("message", function onReady(e) {
-    if (e.data?.type === "ready" || e.data?.type === "fail") {
-      URL.revokeObjectURL(blobUrl);
-      worker.removeEventListener("message", onReady);
-    }
-  });
-
-  worker.postMessage({ type: "init", wasmGlue, wasmBin });
-  return worker;
-}