{"_id":"@007captcha/client","name":"@007captcha/client","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@007captcha/client","version":"0.1.0","description":"007captcha client-side widget and shape analysis engine","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"license":"MIT","scripts":{"build":"tsup src/index.ts --format esm,cjs --dts --clean && tsup src/index.ts --format iife --global-name OOSevenCaptcha --outDir dist/umd --clean"},"_id":"@007captcha/client@0.1.0","_integrity":"sha512-xWG2SU2YUozBLGB7pRFSwntttHGK0WCbjG/h2qq6DlfWdo5OwfLxmnMhU4ptnHJMmwigpIqz91Z55MkTWWixnA==","_resolved":"/tmp/15de66c0959fb40efd37682342592586/007captcha-client-0.1.0.tgz","_from":"file:007captcha-client-0.1.0.tgz","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-xWG2SU2YUozBLGB7pRFSwntttHGK0WCbjG/h2qq6DlfWdo5OwfLxmnMhU4ptnHJMmwigpIqz91Z55MkTWWixnA==","shasum":"420b7ed9ebea9fd26be7f71174b0d966e5a6798f","tarball":"https://registry.npmjs.org/@007captcha/client/-/client-0.1.0.tgz","fileCount":8,"unpackedSize":181337,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD6uvs8iaW9/n9ecYOVWgTPr8ek+U3l2CJPcnhdg8+1QwIgNeogWu1Uad3cDxvesUDwnYeTK6XCCgkU1pl7qNead8Q="}]},"_npmUser":{"name":"mutkuoz","email":"thejupyter@gmail.com"},"directories":{},"maintainers":[{"name":"mutkuoz","email":"thejupyter@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/client_0.1.0_1774748054802_0.4317862026800543"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-29T01:34:14.698Z","0.1.0":"2026-03-29T01:34:14.978Z","modified":"2026-03-29T01:34:15.192Z"},"maintainers":[{"name":"mutkuoz","email":"thejupyter@gmail.com"}],"description":"007captcha client-side widget and shape analysis engine","license":"MIT","readme":"<p align=\"center\">\n  <img src=\"../../007-logo.png\" alt=\"007captcha\" width=\"120\">\n</p>\n\n<h1 align=\"center\">@007captcha/client</h1>\n\n<p align=\"center\">\n  Browser widget for 007captcha. Renders challenges, captures user input, and communicates with the server for verification.\n</p>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/@007captcha/client\"><img src=\"https://img.shields.io/npm/v/@007captcha/client?color=111827\" alt=\"npm\"></a>\n  <a href=\"https://github.com/mutkuoz/007captcha/blob/main/LICENSE\"><img src=\"https://img.shields.io/github/license/mutkuoz/007captcha?color=111827\" alt=\"license\"></a>\n</p>\n\n---\n\n## Installation\n\n```bash\npnpm add @007captcha/client\n```\n\nOr via script tag (UMD):\n\n```html\n<script src=\"https://unpkg.com/@007captcha/client/dist/umd/index.global.js\"></script>\n```\n\n## Usage\n\n### ES Module\n\n```ts\nimport { render } from '@007captcha/client';\n\nconst widget = render({\n  siteKey: 'your-secret-key',\n  container: '#captcha',\n  method: 'ball',\n  serverUrl: window.location.origin,\n  onSuccess: (token) => {\n    fetch('/verify', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ token }),\n    });\n  },\n});\n```\n\n### Script Tag\n\n```html\n<div id=\"captcha\"></div>\n<script src=\"https://unpkg.com/@007captcha/client/dist/umd/index.global.js\"></script>\n<script>\n  OOSevenCaptcha.render({\n    siteKey: 'your-secret-key',\n    container: '#captcha',\n    method: 'ball',\n    serverUrl: window.location.origin,\n    onSuccess(token) {\n      console.log('Verified:', token);\n    },\n  });\n</script>\n```\n\n### Form Integration\n\nThe widget creates a hidden `<input name=\"captcha-token\">` in the DOM. For standard form submissions, you can also retrieve the token programmatically:\n\n```js\nconst token = widget.getToken();\n```\n\n## Challenge Methods\n\n| Method | Description |\n|--------|-------------|\n| `'ball'` | Follow a moving ball with your cursor in real-time |\n| `'shape'` | Draw a randomly assigned shape (circle, triangle, or square) |\n| `'maze'` | Navigate a procedurally generated maze from entrance to exit |\n| `'random'` | The server picks a random method each time |\n\nAll methods require a `serverUrl`. The server handles session creation, analysis, and token signing &mdash; the client is a rendering and input-capture layer.\n\n## Configuration\n\n### `render(config): CaptchaWidget`\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `siteKey` | `string` | *required* | Secret key shared with server |\n| `container` | `string \\| HTMLElement` | *required* | Mount target (CSS selector or element) |\n| `method` | `'ball' \\| 'shape' \\| 'maze' \\| 'random'` | `'random'` | Challenge method |\n| `serverUrl` | `string` | *required* | Base URL for the captcha server endpoints |\n| `theme` | `'light' \\| 'dark' \\| 'auto'` | `'light'` | Widget color theme |\n| `timeLimit` | `number` | *varies* | Override time limit in ms |\n| `onSuccess` | `(token: string) => void` | &mdash; | Called with signed token on pass |\n| `onFailure` | `(error: Error) => void` | &mdash; | Called on challenge failure |\n| `onExpired` | `() => void` | &mdash; | Called when a token expires |\n\n### `CaptchaWidget`\n\n```ts\nwidget.getToken()   // Returns the current signed token (string)\nwidget.reset()      // Reset and show a new challenge\nwidget.destroy()    // Remove the widget from the DOM entirely\n```\n\n## Theming\n\nThe widget supports `'light'`, `'dark'`, and `'auto'` themes. In `'auto'` mode, it follows the user's system preference via `prefers-color-scheme`.\n\n```ts\nrender({ theme: 'dark', /* ... */ });\n```\n\n## Requirements\n\n- A running `@007captcha/server` instance with the appropriate endpoints. See the [server package](../server) or the [Express example](../../examples/express-server/) for setup.\n- The `siteKey` must match between client and server.\n\n## License\n\n[MIT](../../LICENSE)\n","readmeFilename":"README.md","_rev":"1-481dab28b68eb757828995abe3ad8da1"}