secret-sequence-react 1.0.0 → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Diego Alonso
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,249 +1,250 @@
-<div align="center">
-
-# Secret Sequence React
-
-[![en](https://img.shields.io/badge/lang-en-red.svg)](./README.md)
-[![es](https://img.shields.io/badge/lang-es-yellow.svg)](./README_ES.md)
-
-![GitHub stars](https://img.shields.io/github/stars/Diego0Alonso/secret-sequence)
-![GitHub forks](https://img.shields.io/github/forks/Diego0Alonso/secret-sequence)
-![GitHub issues](https://img.shields.io/github/issues/Diego0Alonso/secret-sequence)
-[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-GitHub-pink?logo=github)](https://github.com/sponsors/Diego0Alonso)
-
-![React](https://img.shields.io/badge/React-≥17-61DAFB?style=for-the-badge&logo=react)
-![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue?style=for-the-badge&logo=typescript)
-
-> React hook & component for detecting directional sequences, key combos, and touch gestures — powered by [secret-sequence-core](../core/README.md).
-
-This package provides **React bindings** for the [Secret Sequence](../../README.md) monorepo.  
-It wraps the core engine in a hook and a declarative component with full lifecycle management.
-
-</div>
-
----
-
-## Installation
-
-```bash
-npm install secret-sequence-react secret-sequence-core
-````
-
-> `secret-sequence-core` is a peer dependency.
-
----
-
-## Quick Start
-
-### Hook — `useSecretSequence`
-
-```tsx
-import { useSecretSequence } from "secret-sequence-react"
-
-function App() {
-  const { progress } = useSecretSequence({
-    sequences: [
-      {
-        id: "konami",
-        sequence: ["up", "up", "down", "down", "left", "right", "left", "right"],
-        onSuccess: () => alert("🎉 Konami Code activated!"),
-      },
-    ],
-    enableTouch: true,
-    touchOptions: { minDistance: 50, maxTime: 400 },
-  })
-
-  return <pre>{JSON.stringify(progress, null, 2)}</pre>
-}
-```
-
----
-
-### Component — `<SecretSequence />`
-
-#### Invisible Mode (effect only)
-
-```tsx
-import { SecretSequence } from "secret-sequence-react"
-
-function App() {
-  return (
-    <SecretSequence
-      sequences={[
-        {
-          id: "konami",
-          sequence: ["up", "up", "down", "down", "left", "right", "left", "right"],
-          onSuccess: () => console.log("🎉"),
-        },
-      ]}
-      enableTouch={true}
-      touchOptions={{ minDistance: 40 }}
-    />
-  )
-}
-```
-
-#### With render prop
-
-```tsx
-<SecretSequence
-  sequences={[{ id: "code", sequence: ["up", "down"], onSuccess: fn }]}
->
-  {({ progress, reset }) => (
-    <div>
-      <p>Progress: {JSON.stringify(progress)}</p>
-      <button onClick={reset}>Reset</button>
-    </div>
-  )}
-</SecretSequence>
-```
-
----
-
-### Stratagem-Style Input
-
-```tsx
-const { progress } = useSecretSequence({
-  sequences: [
-    {
-      id: "orbitalStrike",
-      sequence: ["right", "right", "up"],
-      onSuccess: () => deployStrike(),
-    },
-  ],
-  timeout: 2000,
-})
-```
-
----
-
-### Key Combo Shortcut
-
-```tsx
-const { progress } = useSecretSequence({
-  sequences: [
-    {
-      id: "shortcut",
-      sequence: [{ key: "k", ctrl: true }],
-      onSuccess: () => console.log("Shortcut triggered"),
-    },
-  ],
-})
-```
-
----
-
-### Touch Gesture Support
-
-Swipe gestures on touch devices are automatically mapped to directional steps.
-
-```tsx
-const { progress } = useSecretSequence({
-  sequences: [
-    {
-      id: "swipe-pattern",
-      sequence: ["up", "down", "left", "right"],
-      onSuccess: () => alert("Swipe pattern detected!"),
-    },
-  ],
-  enableTouch: true,
-  touchOptions: {
-    minDistance: 30,
-    maxTime: 300,
-    threshold: 1.5,
-  },
-})
-```
-
----
-
-## API
-
-### `useSecretSequence(options)`
-
-React hook that manages the engine lifecycle automatically.
-
-**Returns:** `{ progress, reset }`
-
-| Return     | Type                       | Description                   |
-| ---------- | -------------------------- | ----------------------------- |
-| `progress` | `Record<string, number>`   | Current progress per sequence |
-| `reset`    | `() => void`               | Reset all sequence progress   |
-
----
-
-### `<SecretSequence />` Component
-
-Declarative JSX wrapper over the `useSecretSequence` hook.
-
-| Prop               | Type                                                                    | Description                              |
-| ------------------ | ----------------------------------------------------------------------- | ---------------------------------------- |
-| `onProgressChange` | `(progress: Record<string, number>) => void`                            | Callback fired on progress changes       |
-| `children`         | `(state: { progress: Record<string, number>; reset: () => void }) => …` | Optional render prop for progress/reset  |
-| *...hookOptions*   | `UseSecretSequenceOptions`                                              | All hook options (see below)             |
-
----
-
-### Options (shared by hook & component)
-
-| Option         | Type                     | Default | Description                                            |
-| -------------- | ------------------------ | ------- | ------------------------------------------------------ |
-| `sequences`    | `SecretSequenceConfig[]` | —       | Array of sequences to detect simultaneously            |
-| `timeout`      | `number`                 | `2000`  | Milliseconds of inactivity before resetting progress   |
-| `enabled`      | `boolean`                | `true`  | Globally enable or disable detection                   |
-| `enableTouch`  | `boolean`                | `true`  | Enable swipe gesture detection                         |
-| `ignoreInputs` | `boolean`                | `true`  | Ignore key events when focus is on input-like elements |
-| `touchOptions` | `TouchConfig`            | —       | Advanced touch configuration                           |
-
----
-
-## Configuration Types
-
-### `SecretSequenceConfig`
-
-| Property    | Type                  | Description                                 |
-| ----------- | --------------------- | ------------------------------------------- |
-| `id`        | `string` *(optional)* | Unique identifier (defaults to array index) |
-| `sequence`  | `SequenceStep[]`      | Ordered steps to detect                     |
-| `onSuccess` | `() => void`          | Fired when the sequence completes           |
-
----
-
-### Core Types
-
-```ts
-type Direction = "up" | "down" | "left" | "right"
-
-type KeyCombo = {
-  key: string
-  ctrl?: boolean
-  shift?: boolean
-  alt?: boolean
-  meta?: boolean
-}
-
-type SequenceStep = Direction | KeyCombo
-```
-
----
-
-### `TouchConfig`
-
-| Property      | Type     | Default | Description                                    |
-| ------------- | -------- | ------- | ---------------------------------------------- |
-| `minDistance`  | `number` | `30`    | Minimum swipe distance (px)                    |
-| `maxTime`     | `number` | `300`   | Maximum swipe duration (ms)                    |
-| `threshold`   | `number` | `1.5`   | Axis dominance ratio to reject diagonal swipes |
-
----
-
-## SSR Compatibility
-
-This package is safe to use in SSR environments such as Next.js or Remix.
-
-The underlying engine guards against accessing `window` during server rendering and only attaches event listeners in the browser.
-
----
-
-## License
-
-MIT © Diego Alonso
+<div align="center">
+
+# Secret Sequence React
+
+[![en](https://img.shields.io/badge/lang-en-red.svg)](./README.md)
+[![es](https://img.shields.io/badge/lang-es-yellow.svg)](./README_ES.md)
+
+![GitHub stars](https://img.shields.io/github/stars/Diego0Alonso/secret-sequence)
+![GitHub forks](https://img.shields.io/github/forks/Diego0Alonso/secret-sequence)
+![GitHub issues](https://img.shields.io/github/issues/Diego0Alonso/secret-sequence)
+[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-GitHub-pink?logo=github)](https://github.com/sponsors/Diego0Alonso)
+
+![React](https://img.shields.io/badge/React-≥18-61DAFB?style=for-the-badge&logo=react)
+![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue?style=for-the-badge&logo=typescript)
+
+> React hook & component for detecting directional sequences, key combos, and touch gestures — powered by [secret-sequence-core](../core/README.md).
+
+This package provides **React bindings** for the [Secret Sequence](../../README.md) monorepo.  
+It wraps the core engine in a hook and a declarative component with full lifecycle management.
+
+</div>
+
+---
+
+## Installation
+
+```bash
+npm install secret-sequence-react secret-sequence-core
+````
+
+> `secret-sequence-core` is a peer dependency.
+
+---
+
+## Quick Start
+
+### Hook — `useSecretSequence`
+
+```tsx
+import { useSecretSequence } from "secret-sequence-react"
+
+function App() {
+  const { progress } = useSecretSequence({
+    sequences: [
+      {
+        id: "konami",
+        sequence: ["up", "up", "down", "down", "left", "right", "left", "right"],
+        onSuccess: () => alert("🎉 Konami Code activated!"),
+      },
+    ],
+    enableTouch: true,
+    touchOptions: { minDistance: 50, maxTime: 400 },
+  })
+
+  return <pre>{JSON.stringify(progress, null, 2)}</pre>
+}
+```
+
+---
+
+### Component — `<SecretSequence />`
+
+#### Invisible Mode (effect only)
+
+```tsx
+import { SecretSequence } from "secret-sequence-react"
+
+function App() {
+  return (
+    <SecretSequence
+      sequences={[
+        {
+          id: "konami",
+          sequence: ["up", "up", "down", "down", "left", "right", "left", "right"],
+          onSuccess: () => console.log("🎉"),
+        },
+      ]}
+      enableTouch={true}
+      touchOptions={{ minDistance: 40 }}
+    />
+  )
+}
+```
+
+#### With render prop
+
+```tsx
+<SecretSequence
+  sequences={[{ id: "code", sequence: ["up", "down"], onSuccess: fn }]}
+>
+  {({ progress, reset }) => (
+    <div>
+      <p>Progress: {JSON.stringify(progress)}</p>
+      <button onClick={reset}>Reset</button>
+    </div>
+  )}
+</SecretSequence>
+```
+
+---
+
+### Stratagem-Style Input
+
+```tsx
+const { progress } = useSecretSequence({
+  sequences: [
+    {
+      id: "orbitalStrike",
+      sequence: ["right", "right", "up"],
+      onSuccess: () => deployStrike(),
+    },
+  ],
+  timeout: 2000,
+})
+```
+
+---
+
+### Key Combo Shortcut
+
+```tsx
+const { progress } = useSecretSequence({
+  sequences: [
+    {
+      id: "shortcut",
+      sequence: [{ key: "k", ctrl: true }],
+      onSuccess: () => console.log("Shortcut triggered"),
+    },
+  ],
+})
+```
+
+---
+
+### Touch Gesture Support
+
+Swipe gestures on touch devices are automatically mapped to directional steps.
+
+```tsx
+const { progress } = useSecretSequence({
+  sequences: [
+    {
+      id: "swipe-pattern",
+      sequence: ["up", "down", "left", "right"],
+      onSuccess: () => alert("Swipe pattern detected!"),
+    },
+  ],
+  enableTouch: true,
+  touchOptions: {
+    minDistance: 30,
+    maxTime: 300,
+    threshold: 1.5,
+  },
+})
+```
+
+---
+
+## API
+
+### `useSecretSequence(options)`
+
+React hook that manages the engine lifecycle automatically.
+
+**Returns:** `{ progress, reset }`
+
+| Return     | Type                       | Description                   |
+| ---------- | -------------------------- | ----------------------------- |
+| `progress` | `Record<string, number>`   | Current progress per sequence |
+| `reset`    | `() => void`               | Reset all sequence progress   |
+
+---
+
+### `<SecretSequence />` Component
+
+Declarative JSX wrapper over the `useSecretSequence` hook.
+
+| Prop               | Type                                                                    | Description                              |
+| ------------------ | ----------------------------------------------------------------------- | ---------------------------------------- |
+| `onProgressChange` | `(progress: Record<string, number>) => void`                            | Callback fired on progress changes       |
+| `children`         | `(state: { progress: Record<string, number>; reset: () => void }) => …` | Optional render prop for progress/reset  |
+| *...hookOptions*   | `UseSecretSequenceOptions`                                              | All hook options (see below)             |
+
+---
+
+### Options (shared by hook & component)
+
+| Option         | Type                     | Default | Description                                            |
+| -------------- | ------------------------ | ------- | ------------------------------------------------------ |
+| `sequences`    | `SecretSequenceConfig[]` | —       | Array of sequences to detect simultaneously            |
+| `timeout`      | `number`                 | `2000`  | Milliseconds of inactivity before resetting progress   |
+| `enabled`      | `boolean`                | `true`  | Globally enable or disable detection                   |
+| `enableTouch`  | `boolean`                | `true`  | Enable swipe gesture detection                         |
+| `ignoreInputs` | `boolean`                | `true`  | Ignore key events when focus is on input-like elements |
+| `touchOptions` | `TouchConfig`            | —       | Advanced touch configuration                           |
+| `target`       | `EventTarget`            | `window` | Element to attach listeners to (e.g. a scoped container) |
+
+---
+
+## Configuration Types
+
+### `SecretSequenceConfig`
+
+| Property    | Type                  | Description                                 |
+| ----------- | --------------------- | ------------------------------------------- |
+| `id`        | `string` *(optional)* | Unique identifier (defaults to array index) |
+| `sequence`  | `SequenceStep[]`      | Ordered steps to detect                     |
+| `onSuccess` | `() => void`          | Fired when the sequence completes           |
+
+---
+
+### Core Types
+
+```ts
+type Direction = "up" | "down" | "left" | "right"
+
+type KeyCombo = {
+  key: string
+  ctrl?: boolean
+  shift?: boolean
+  alt?: boolean
+  meta?: boolean
+}
+
+type SequenceStep = Direction | KeyCombo
+```
+
+---
+
+### `TouchConfig`
+
+| Property      | Type     | Default | Description                                    |
+| ------------- | -------- | ------- | ---------------------------------------------- |
+| `minDistance`  | `number` | `30`    | Minimum swipe distance (px)                    |
+| `maxTime`     | `number` | `300`   | Maximum swipe duration (ms)                    |
+| `threshold`   | `number` | `1.5`   | Axis dominance ratio to reject diagonal swipes |
+
+---
+
+## SSR Compatibility
+
+This package is safe to use in SSR environments such as Next.js or Remix.
+
+The underlying engine guards against accessing `window` during server rendering and only attaches event listeners in the browser.
+
+---
+
+## License
+
+MIT © Diego Alonso

package/dist/index.d.mts

@@ -18,6 +18,8 @@ interface UseSecretSequenceOptions {
     ignoreInputs?: boolean;
     /** Configuración de sensibilidad para gestos táctiles */
     touchOptions?: TouchConfig;
+    /** Elemento al que adjuntar los listeners. Default: `window` */
+    target?: EventTarget;
 }
 /**
  * Valor retornado por el hook useSecretSequence.

package/dist/index.d.ts

@@ -18,6 +18,8 @@ interface UseSecretSequenceOptions {
     ignoreInputs?: boolean;
     /** Configuración de sensibilidad para gestos táctiles */
     touchOptions?: TouchConfig;
+    /** Elemento al que adjuntar los listeners. Default: `window` */
+    target?: EventTarget;
 }
 /**
  * Valor retornado por el hook useSecretSequence.

package/dist/index.js

@@ -28,6 +28,14 @@ module.exports = __toCommonJS(index_exports);
 // src/useSecretSequence.ts
 var import_react = require("react");
 var import_secret_sequence_core = require("secret-sequence-core");
+function isSameProgress(a, b) {
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  for (const key of aKeys) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
 function useSecretSequence(options) {
   const {
     sequences,
@@ -35,7 +43,8 @@ function useSecretSequence(options) {
     enabled = true,
     enableTouch = true,
     ignoreInputs = true,
-    touchOptions
+    touchOptions,
+    target
   } = options;
   const [progress, setProgress] = (0, import_react.useState)({});
   const engineRef = (0, import_react.useRef)(null);
@@ -47,19 +56,33 @@ function useSecretSequence(options) {
     sequences.map(({ onSuccess, ...rest }) => rest)
   );
   const touchOptionsKey = JSON.stringify(touchOptions);
+  const stableSequences = (0, import_react.useMemo)(
+    () => sequencesRef.current.map((seq, i) => ({
+      ...seq,
+      onSuccess: () => sequencesRef.current[i]?.onSuccess()
+    })),
+    // Se recrea solo cuando cambian teclas/id/orden/cantidad, no el callback.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [sequencesKey]
+  );
+  const stableSequencesRef = (0, import_react.useRef)(stableSequences);
+  stableSequencesRef.current = stableSequences;
+  const syncProgress = (0, import_react.useCallback)(() => {
+    const engine = engineRef.current;
+    if (!engine) return;
+    const next = engine.getProgressMap();
+    setProgress((prev) => isSameProgress(prev, next) ? prev : next);
+  }, []);
   (0, import_react.useEffect)(() => {
     const engineOptions = {
-      sequences: sequencesRef.current,
+      sequences: stableSequencesRef.current,
       timeout,
       enabled,
       enableTouch,
       ignoreInputs,
       touchOptions: touchOptionsRef.current,
-      onProgress: (_id, _step) => {
-        if (engineRef.current) {
-          setProgress(engineRef.current.getProgressMap());
-        }
-      }
+      target,
+      onProgress: syncProgress
     };
     const engine = new import_secret_sequence_core.SecretSequenceEngine(engineOptions);
     engineRef.current = engine;
@@ -69,20 +92,16 @@ function useSecretSequence(options) {
       engine.destroy();
       engineRef.current = null;
     };
-  }, [timeout, enabled, enableTouch, ignoreInputs]);
+  }, [timeout, enabled, enableTouch, ignoreInputs, target, syncProgress]);
   (0, import_react.useEffect)(() => {
     if (!engineRef.current) return;
     engineRef.current.setOptions({
-      sequences: sequencesRef.current,
+      sequences: stableSequencesRef.current,
       touchOptions: touchOptionsRef.current,
-      onProgress: () => {
-        if (engineRef.current) {
-          setProgress(engineRef.current.getProgressMap());
-        }
-      }
+      onProgress: syncProgress
     });
     setProgress(engineRef.current.getProgressMap());
-  }, [sequencesKey, touchOptionsKey]);
+  }, [sequencesKey, touchOptionsKey, syncProgress]);
   const reset = (0, import_react.useCallback)(() => {
     if (engineRef.current) {
       engineRef.current.reset();

package/dist/index.mjs

@@ -1,8 +1,16 @@
 // src/useSecretSequence.ts
-import { useEffect, useRef, useState, useCallback } from "react";
+import { useEffect, useMemo, useRef, useState, useCallback } from "react";
 import {
   SecretSequenceEngine
 } from "secret-sequence-core";
+function isSameProgress(a, b) {
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  for (const key of aKeys) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
 function useSecretSequence(options) {
   const {
     sequences,
@@ -10,7 +18,8 @@ function useSecretSequence(options) {
     enabled = true,
     enableTouch = true,
     ignoreInputs = true,
-    touchOptions
+    touchOptions,
+    target
   } = options;
   const [progress, setProgress] = useState({});
   const engineRef = useRef(null);
@@ -22,19 +31,33 @@ function useSecretSequence(options) {
     sequences.map(({ onSuccess, ...rest }) => rest)
   );
   const touchOptionsKey = JSON.stringify(touchOptions);
+  const stableSequences = useMemo(
+    () => sequencesRef.current.map((seq, i) => ({
+      ...seq,
+      onSuccess: () => sequencesRef.current[i]?.onSuccess()
+    })),
+    // Se recrea solo cuando cambian teclas/id/orden/cantidad, no el callback.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [sequencesKey]
+  );
+  const stableSequencesRef = useRef(stableSequences);
+  stableSequencesRef.current = stableSequences;
+  const syncProgress = useCallback(() => {
+    const engine = engineRef.current;
+    if (!engine) return;
+    const next = engine.getProgressMap();
+    setProgress((prev) => isSameProgress(prev, next) ? prev : next);
+  }, []);
   useEffect(() => {
     const engineOptions = {
-      sequences: sequencesRef.current,
+      sequences: stableSequencesRef.current,
       timeout,
       enabled,
       enableTouch,
       ignoreInputs,
       touchOptions: touchOptionsRef.current,
-      onProgress: (_id, _step) => {
-        if (engineRef.current) {
-          setProgress(engineRef.current.getProgressMap());
-        }
-      }
+      target,
+      onProgress: syncProgress
     };
     const engine = new SecretSequenceEngine(engineOptions);
     engineRef.current = engine;
@@ -44,20 +67,16 @@ function useSecretSequence(options) {
       engine.destroy();
       engineRef.current = null;
     };
-  }, [timeout, enabled, enableTouch, ignoreInputs]);
+  }, [timeout, enabled, enableTouch, ignoreInputs, target, syncProgress]);
   useEffect(() => {
     if (!engineRef.current) return;
     engineRef.current.setOptions({
-      sequences: sequencesRef.current,
+      sequences: stableSequencesRef.current,
       touchOptions: touchOptionsRef.current,
-      onProgress: () => {
-        if (engineRef.current) {
-          setProgress(engineRef.current.getProgressMap());
-        }
-      }
+      onProgress: syncProgress
     });
     setProgress(engineRef.current.getProgressMap());
-  }, [sequencesKey, touchOptionsKey]);
+  }, [sequencesKey, touchOptionsKey, syncProgress]);
   const reset = useCallback(() => {
     if (engineRef.current) {
       engineRef.current.reset();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "secret-sequence-react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React hook & component wrapper for secret-sequence-core — detect directional sequences, key combos, and touch gestures",
   "keywords": [
     "react",
@@ -22,9 +22,14 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/diego0alonso/secret-sequence.git",
+    "url": "git+https://github.com/Diego0Alonso/secret-sequence.git",
     "directory": "packages/react"
   },
+  "homepage": "https://github.com/Diego0Alonso/secret-sequence/tree/main/packages/react#readme",
+  "bugs": "https://github.com/Diego0Alonso/secret-sequence/issues",
+  "engines": {
+    "node": ">=18"
+  },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -39,19 +44,24 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsup",
-    "prepublishOnly": "npm run build"
-  },
   "peerDependencies": {
-    "react": ">=17.0.0",
+    "react": ">=18.0.0",
     "secret-sequence-core": "^2.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19.0.0",
+    "jsdom": "^28.1.0",
     "react": "^19.0.0",
-    "secret-sequence-core": "^2.0.0",
     "tsup": "^8.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.18",
+    "secret-sequence-core": "^2.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
   }
 }