@area2-ai/a2-demo-cipher-react 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Area2 AI
+
+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

@@ -0,0 +1,103 @@
+# TSDX React Component Library
+
+Zero-config React component library development powered by modern tools.
+
+## Quick Start
+
+```bash
+# Install dependencies
+bun install
+
+# Start development mode
+bun run dev
+
+# Build for production
+bun run build
+
+# Run tests
+bun run test
+
+# Lint code
+bun run lint
+
+# Format code
+bun run format
+```
+
+## Project Structure
+
+```
+/src
+  index.tsx       # Your component entry point
+/test
+  index.test.tsx  # Tests using Vitest + Testing Library
+/example
+  index.tsx       # Demo app using Vite
+.gitignore
+package.json
+README.md
+tsconfig.json
+vitest.config.ts
+```
+
+## Scripts
+
+| Script | Description |
+|--------|-------------|
+| `bun run dev` | Start development mode with watch |
+| `bun run build` | Build for production |
+| `bun run test` | Run tests |
+| `bun run test:watch` | Run tests in watch mode |
+| `bun run lint` | Lint code |
+| `bun run format` | Format code |
+| `bun run format:check` | Check if code is formatted |
+| `bun run typecheck` | Run TypeScript type checking |
+
+## Tools
+
+TSDX wraps these modern, high-performance tools:
+
+- **[Bunchee](https://github.com/huozhi/bunchee)** - Zero-config bundler for npm packages
+- **[Vitest](https://vitest.dev/)** - Next-generation testing framework
+- **[Testing Library](https://testing-library.com/)** - React testing utilities
+- **[Oxlint](https://oxc.rs/docs/guide/usage/linter.html)** - Rust-powered linter (50-100x faster than ESLint)
+- **[Oxfmt](https://oxc.rs/docs/guide/usage/formatter)** - Rust-powered formatter (35x faster than Prettier)
+- **[TypeScript](https://www.typescriptlang.org/)** - Type safety
+
+## Development with Example
+
+To test your component in a real React app:
+
+```bash
+# In one terminal, start the library in watch mode
+bun run dev
+
+# In another terminal, run the example app
+cd example
+bun install
+bun run dev
+```
+
+## Module Formats
+
+This library exports both ESM and CommonJS formats, with full TypeScript support:
+
+- `dist/index.js` - ESM
+- `dist/index.cjs` - CommonJS
+- `dist/index.d.ts` - TypeScript declarations
+
+## Publishing
+
+```bash
+# Build the package
+bun run build
+
+# Publish to npm
+npm publish
+```
+
+We recommend using [np](https://github.com/sindresorhus/np) for publishing.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,424 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var a2CipherCore = require('@area2-ai/a2-cipher-core');
+var reactDeviceDetect = require('react-device-detect');
+
+const Area2Context = /*#__PURE__*/ react.createContext({});
+
+const AREA2_INITIAL_STATE = {};
+const Area2Provider = ({ children })=>{
+    const [state] = react.useReducer(area2Reducer, AREA2_INITIAL_STATE); //[state, dispatch]
+    const keystrokeManagerRef = react.useRef();
+    const androidKeystrokeManagerRef = react.useRef();
+    const iosKeystrokeManagerRef = react.useRef();
+    const getKeystrokeManager = ()=>keystrokeManagerRef.current;
+    const getAndroidKeystrokeManager = ()=>androidKeystrokeManagerRef.current;
+    const getIosKeystrokeManager = ()=>iosKeystrokeManagerRef.current;
+    react.useEffect(()=>{
+        keystrokeManagerRef.current = new a2CipherCore.KeystrokeManager();
+        androidKeystrokeManagerRef.current = new a2CipherCore.AndroidKeystrokeManager();
+        iosKeystrokeManagerRef.current = new a2CipherCore.IosKeystrokeManager();
+    }, []);
+    return /*#__PURE__*/ jsxRuntime.jsx(Area2Context.Provider, {
+        value: {
+            ...state,
+            getKeystrokeManager,
+            getAndroidKeystrokeManager,
+            getIosKeystrokeManager
+        },
+        children: children
+    });
+};
+
+const area2Reducer = (state, action)=>{
+    switch(action.type){
+        case '[A2 Desktop] - Update text':
+            return {
+                ...state,
+                desktopTextValue: action.payload.newValue
+            };
+        default:
+            return state;
+    }
+};
+
+const getBrowserInfo = ()=>reactDeviceDetect.browserName;
+
+const getOsInfo = ()=>reactDeviceDetect.osName;
+
+const getPlatform = ()=>{
+    if (reactDeviceDetect.isAndroid) return 'android';
+    if (reactDeviceDetect.isDesktop) return 'desktop';
+    return 'ios';
+};
+
+const formatDemoKeystrokeData = (payload, isMobile)=>{
+    const base = {
+        session_id: payload.sessionID.substring(0, 5) + '-[* * *]',
+        temporal_kinematics: [
+            '* * *'
+        ],
+        spatial_kinematics: [
+            '* * *'
+        ],
+        type_kinematics: [
+            '* * *'
+        ]
+    };
+    if (isMobile) {
+        base.device_context = '[* * *]';
+        base.assist_signals = '[* * *]';
+    } else {
+        base.context = {
+            time: '[* * *]',
+            weekday: '[* * *]',
+            season: '[* * *]',
+            timezone: '[* * *]'
+        };
+        base.extra_metadata = {
+            OS: '[* * *]',
+            browser: '[* * *]'
+        };
+    }
+    return base;
+};
+
+/**
+ * Keystroke hook for android mobile browser
+ */ const useMobileKeystrokeAndroid = ()=>{
+    const { getAndroidKeystrokeManager } = react.useContext(Area2Context);
+    /**
+     * Handles the before input event.
+     * @param {string} newValue - The new value of the input before the input event.
+     * @param {string} inputValue - The current value of the input.
+     */ const handleProcessOnBeforeInput = react.useCallback((newValue, inputValue)=>{
+        getAndroidKeystrokeManager().processBeforeInput(newValue, inputValue);
+    }, []);
+    /**
+     * Handles the paste event.
+     * @param {ClipboardEvent<HTMLInputElement>} event - The paste event.
+     */ const handleProcessPaste = react.useCallback((event)=>{
+        const pastedText = event.clipboardData.getData("text");
+        getAndroidKeystrokeManager().processPaste(pastedText);
+    }, []);
+    /**
+     * Handles the key input event.
+     * @param {string} inputContent - The content of the key input.
+     */ const handleProcessKeyInput = react.useCallback((inputContent)=>{
+        getAndroidKeystrokeManager().processKeyInput(inputContent);
+    }, []);
+    /**
+     * Handles the keydown event.
+     * @param {HTMLInputElement} target - The target input element.
+     */ const handleProcessKeydown = react.useCallback((target)=>{
+        getAndroidKeystrokeManager().processKeydown(target);
+    }, []);
+    /**
+     * Handles the keyup event.
+     */ const handleProcessKeyup = react.useCallback(()=>{
+        getAndroidKeystrokeManager().processKeyup();
+    }, []);
+    /**
+     * Ends the typing session and returns the typing data.
+     * @returns {A2CapturePayload | undefined} - The typing data or undefined if no data.
+     */ // const handleEndTypingSession = useCallback((): A2CapturePayload | undefined => {
+    //     const typingData = getAndroidKeystrokeManager().endTypingSession();
+    //     getAndroidKeystrokeManager().resetTypingData();
+    //     if (!typingData.startUnixTime) {
+    //         console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
+    //         return;
+    //     }
+    //     typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
+    //     return typingData;
+    // }, []);
+    /**
+     * Ends the demo typing session and returns the typing data.
+     * @returns {A2DemoCapturePayload | undefined} - The typing data or undefined if no data.
+     */ const handleEndDemoTypingSession = react.useCallback(()=>{
+        const typingData = getAndroidKeystrokeManager().endTypingSession();
+        getAndroidKeystrokeManager().resetTypingData();
+        if (!typingData.startUnixTime) {
+            console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
+            return;
+        }
+        typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
+        return formatDemoKeystrokeData(typingData, true);
+    }, []);
+    return {
+        handleProcessOnBeforeInput,
+        handleProcessPaste,
+        handleProcessKeyInput,
+        handleProcessKeydown,
+        handleProcessKeyup,
+        handleEndTypingSession: handleEndDemoTypingSession
+    };
+};
+
+/**
+ * Keystroke hook for desktop platforms.
+ */ const useDesktopKeystroke = ()=>{
+    const { getKeystrokeManager } = react.useContext(Area2Context);
+    const getIsTypingSessionActive = ()=>getKeystrokeManager().getIsTypingSessionActive;
+    /**
+     * Handles the keydown event.
+     * @param {string} key - The key pressed.
+     */ const handleProcessKeydown = react.useCallback((key)=>{
+        getKeystrokeManager().processKeydown(key);
+    }, []);
+    /**
+     * Handles the keyup event.
+     * @param {string} key - The key released.
+     */ const handleProcessKeyup = react.useCallback((key)=>{
+        getKeystrokeManager().processKeyup(key);
+    }, []);
+    /**
+     * Ends the typing session and returns the typing data.
+     * @returns {A2CapturePayload | undefined} - The typing session data or undefined if no data.
+     */ // const handleEndTypingSession = useCallback((): A2CapturePayload | undefined => {
+    //     const typingData = getKeystrokeManager().endTypingSession();
+    //     getKeystrokeManager().resetTypingData();
+    //     if (!typingData.startUnixTime) {
+    //         console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
+    //         return;
+    //     }
+    //     typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
+    //     return typingData;
+    // }, []);
+    /**
+     * Ends the demo typing session and returns the typing data.
+     * @returns {A2DemoCapturePayload | undefined} - The typing session data or undefined if no data.
+     */ const handleEndDemoTypingSession = react.useCallback(()=>{
+        const typingData = getKeystrokeManager().endTypingSession();
+        getKeystrokeManager().resetTypingData();
+        if (!typingData.startUnixTime) {
+            console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
+            return;
+        }
+        typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
+        return formatDemoKeystrokeData(typingData, false);
+    }, []);
+    return {
+        handleProcessKeydown,
+        handleProcessKeyup,
+        getIsTypingSessionActive,
+        handleEndTypingSession: handleEndDemoTypingSession
+    };
+};
+
+/**
+ * Keystroke for ios mobile browser
+ * @param {string} inputValue - The current value of the text input - Needed to detect auto-correct changes.
+ */ const useMobileKeystrokeIOS = ()=>{
+    const { getIosKeystrokeManager } = react.useContext(Area2Context);
+    //! Undefined behavior - Try to load via context - provider
+    /**
+     * Processes auto-correction based on the current input value.
+     * @param {string} inputValue - The current value of the text input.
+     */ // const processAutoCorrection = getIosKeystrokeManager().processAutocorrection;
+    /**
+     * Handles the before input event.
+     * @param {number} value - The length of the content before the input event.
+     */ const handleProcessOnBeforeInput = react.useCallback((value)=>{
+        getIosKeystrokeManager().setPrevContentLength = value;
+    }, []);
+    /**
+     * Handles the paste event.
+     * @param {ClipboardEvent<HTMLInputElement>} event - The paste event.
+     */ const handleProcessPaste = react.useCallback((event)=>{
+        const pastedText = event.clipboardData.getData("text");
+        getIosKeystrokeManager().processPaste(pastedText);
+    }, []);
+    /**
+     * Checks for text prediction and processes it.
+     * @param {string} newValue - The new value of the text input.
+     * @param {string} inputValue - The current value of the text input.
+     */ const checkForPrediction = react.useCallback((newValue, inputValue)=>{
+        const textSnapshot = inputValue; // Before it changes
+        getIosKeystrokeManager().processPrediction(newValue, textSnapshot);
+    }, []);
+    /**
+     * Handles the input change event
+     * @param {ChangeEvent<HTMLInputElement>} event - The input change event
+     * @param {string} inputValue - The current value of the text input
+     */ const handleProcessInputChange = (event, inputValue)=>{
+        const newValue = event.target.value;
+        checkForPrediction(newValue, inputValue);
+    };
+    /**
+     * Handles the keydown event.
+     * @param {string} keyPressed - The key that was pressed.
+     * @param {HTMLInputElement} target - The target input element.
+     */ const handleProcessKeydown = react.useCallback((keyPressed, target)=>{
+        getIosKeystrokeManager().processKeydown(keyPressed, target);
+    }, []);
+    /**
+     * Handles the keyup event.
+     * @param {string} key - The key that was released.
+     */ const handleProcessKeyup = react.useCallback((keyPressed)=>{
+        getIosKeystrokeManager().processKeyup(keyPressed);
+    }, []);
+    /**
+     * Ends the typing session and returns the typing data.
+     * @returns {A2CapturePayload | undefined} - The typing data or undefined if no data.
+     */ // const handleEndTypingSession = useCallback((): A2CapturePayload | undefined => {
+    //     const typingData = getIosKeystrokeManager().endTypingSession();
+    //     getIosKeystrokeManager().resetTypingData();
+    //     if (!typingData.startUnixTime) {
+    //         console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
+    //         return;
+    //     }
+    //     typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
+    //     return typingData;
+    // }, []);
+    /**
+     * Ends the demo typing session and returns the typing data.
+     * @returns {A2DemoCapturePayload | undefined} - The typing data or undefined if no data.
+     */ const handleEndDemoTypingSession = react.useCallback(()=>{
+        const typingData = getIosKeystrokeManager().endTypingSession();
+        getIosKeystrokeManager().resetTypingData();
+        if (!typingData.startUnixTime) {
+            console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
+            return;
+        }
+        typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
+        return formatDemoKeystrokeData(typingData, true);
+    }, []);
+    return {
+        // processAutoCorrection,
+        handleProcessInputChange,
+        handleProcessKeydown,
+        handleProcessPaste,
+        handleProcessOnBeforeInput,
+        handleProcessKeyup,
+        handleEndTypingSession: handleEndDemoTypingSession
+    };
+};
+
+function useKeystrokeBuilder(target) {
+    const targetPlatform = target ?? getPlatform();
+    switch(targetPlatform){
+        case 'android':
+            return useMobileKeystrokeAndroid();
+        case 'ios':
+            return useMobileKeystrokeIOS();
+        case 'desktop':
+        default:
+            return useDesktopKeystroke();
+    }
+}
+
+/**
+ * Component that renders a text input field and generates an A2CapturePayload data.
+ * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
+ */ const A2AndroidTextInput = ({ ref, autoCapitalize, value, onChange, ...rest })=>{
+    const { handleProcessKeydown, handleProcessKeyup, handleProcessPaste, handleProcessKeyInput, handleProcessOnBeforeInput } = useMobileKeystrokeAndroid();
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("input", {
+            ref: ref,
+            type: "text",
+            placeholder: "Using android implementation",
+            autoCapitalize: autoCapitalize || 'sentences',
+            value: value,
+            onChange: onChange,
+            onKeyDown: ({ currentTarget })=>handleProcessKeydown(currentTarget),
+            onKeyUp: handleProcessKeyup,
+            onPaste: handleProcessPaste,
+            onInput: ({ currentTarget })=>{
+                handleProcessKeyInput(currentTarget.value);
+            },
+            onBeforeInput: ({ currentTarget })=>handleProcessOnBeforeInput(currentTarget.value, value?.toString() || ''),
+            ...rest
+        })
+    });
+};
+
+/**
+ * Component that renders a text input field and generates an A2CapturePayload data.
+ * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
+ */ const A2IosTextInput = ({ ref, value, onChange, ...rest })=>{
+    const { handleProcessInputChange, handleProcessKeydown, handleProcessKeyup, handleProcessPaste, handleProcessOnBeforeInput } = useMobileKeystrokeIOS();
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("input", {
+            ref: ref,
+            type: "text",
+            placeholder: "Using iOS implementation",
+            onKeyDownCapture: ({ key, currentTarget })=>handleProcessKeydown(key, currentTarget),
+            onKeyUpCapture: ({ key })=>handleProcessKeyup(key),
+            value: value,
+            onChange: (event)=>{
+                handleProcessInputChange(event, value?.toString() || ''); //? Execute internal change handler
+                onChange?.(event); //? Execute parent's onChange if it exists
+            },
+            onPaste: handleProcessPaste,
+            onBeforeInput: ({ currentTarget })=>{
+                handleProcessOnBeforeInput(currentTarget.value.length);
+            },
+            ...rest
+        })
+    });
+};
+
+/**
+ * Component that renders a text input field and generates an A2CapturePayload data.
+ * 
+ * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
+ * @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press.
+ */ const A2DesktopTextInput = ({ ref, onChange, handleEndSessionOnEnter, ...rest })=>{
+    const { handleProcessKeydown, handleProcessKeyup, getIsTypingSessionActive } = useDesktopKeystroke();
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("input", {
+            ref: ref,
+            type: "text",
+            placeholder: "Using desktop implementation",
+            onKeyDownCapture: ({ key })=>handleProcessKeydown(key),
+            onKeyUpCapture: ({ key })=>{
+                handleProcessKeyup(key);
+                //? Handle ENTER key
+                if (key !== 'Enter') {
+                    return;
+                }
+                if (!getIsTypingSessionActive()) {
+                    return;
+                }
+                handleEndSessionOnEnter?.(); //? Call parent's function if it exists
+            },
+            onChange: (event)=>{
+                onChange?.(event); //? Execute parent's onChange if it exists
+            },
+            ...rest
+        })
+    });
+};
+
+/**
+ * Component that renders a text input field and generates an A2CapturePayload data.
+ * 
+ * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
+ * @param {TargetPlatform} [target] - Optional target platform ('ios', 'android', 'desktop'). If not provided, it will be auto-detected.
+ * @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press (only for desktop).
+ */ const A2Textbox = ({ ref, target, handleEndSessionOnEnter, ...rest })=>{
+    const targetPlatform = target ?? getPlatform();
+    if (targetPlatform === 'android') {
+        return /*#__PURE__*/ jsxRuntime.jsx(A2AndroidTextInput, {
+            ...rest,
+            ref: ref
+        });
+    }
+    if (targetPlatform === 'ios') {
+        return /*#__PURE__*/ jsxRuntime.jsx(A2IosTextInput, {
+            ...rest,
+            ref: ref
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(A2DesktopTextInput, {
+        ...rest,
+        ref: ref,
+        handleEndSessionOnEnter: handleEndSessionOnEnter
+    });
+};
+
+exports.A2Textbox = A2Textbox;
+exports.Area2Provider = Area2Provider;
+exports.useCipherCapture = useKeystrokeBuilder;

package/dist/index.d.cts

@@ -0,0 +1,74 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ClipboardEvent, ChangeEvent } from 'react';
+
+type TargetPlatform = 'desktop' | 'ios' | 'android';
+interface IKeystrokeHookTemplate<T> {
+    handleEndTypingSession: () => T | undefined;
+}
+interface IMobileKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {
+    handleProcessPaste: (event: ClipboardEvent<HTMLInputElement>) => void;
+}
+interface IDesktopKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {
+    getIsTypingSessionActive: () => boolean;
+    handleProcessKeydown: (key: string) => void;
+    handleProcessKeyup: (key: string) => void;
+}
+interface IAndroidKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {
+    handleProcessKeydown: (target: HTMLInputElement) => void;
+    handleProcessKeyInput: (inputContent: string) => void;
+    handleProcessKeyup: () => void;
+    handleProcessOnBeforeInput: (newValue: string, inputValue: string) => void;
+}
+interface IiOSKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {
+    handleProcessInputChange: (event: ChangeEvent<HTMLInputElement>, inputValue: string) => void;
+    handleProcessKeydown: (keyPressed: string, target: HTMLInputElement) => void;
+    handleProcessKeyup: (keyPressed: string) => void;
+    handleProcessOnBeforeInput: (value: number) => void;
+}
+
+interface A2DemoCapturePayload {
+    "session_id": string;
+    "temporal_kinematics": string[];
+    "spatial_kinematics": string[];
+    "type_kinematics": string[];
+    context?: {
+        "time": string;
+        "weekday": string;
+        "season": string;
+        "timezone": string;
+    };
+    extra_metadata?: {
+        "OS": string;
+        "browser": string;
+    };
+    device_context?: string;
+    assist_signals?: string;
+}
+
+interface Props$1 extends React.InputHTMLAttributes<HTMLInputElement> {
+    ref?: React.Ref<HTMLInputElement>;
+    target?: TargetPlatform;
+    handleEndSessionOnEnter?: Function;
+}
+/**
+ * Component that renders a text input field and generates an A2CapturePayload data.
+ *
+ * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
+ * @param {TargetPlatform} [target] - Optional target platform ('ios', 'android', 'desktop'). If not provided, it will be auto-detected.
+ * @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press (only for desktop).
+ */
+declare const A2Textbox: ({ ref, target, handleEndSessionOnEnter, ...rest }: Props$1) => react_jsx_runtime.JSX.Element;
+
+interface Props {
+    children: React.ReactNode;
+}
+declare const Area2Provider: ({ children }: Props) => react_jsx_runtime.JSX.Element;
+
+declare function useKeystrokeBuilder(target: 'ios'): IiOSKeystrokeHookTemplate<A2DemoCapturePayload>;
+declare function useKeystrokeBuilder(target: 'android'): IAndroidKeystrokeHookTemplate<A2DemoCapturePayload>;
+declare function useKeystrokeBuilder(target: 'desktop'): IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;
+declare function useKeystrokeBuilder(target?: TargetPlatform): IiOSKeystrokeHookTemplate<A2DemoCapturePayload> | IAndroidKeystrokeHookTemplate<A2DemoCapturePayload> | IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;
+
+export { A2Textbox, Area2Provider, useKeystrokeBuilder as useCipherCapture };
+export type { A2DemoCapturePayload, TargetPlatform };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sources":["../src/interfaces/IKeystrokeHookTemplate.ts","../src/interfaces/IA2CapturePayload.ts","../src/components/A2Textbox.tsx","../src/context/area2/Area2Provider.tsx","../src/hooks/useKeystrokeBuilder.ts"],"sourcesContent":["import { ChangeEvent, ClipboardEvent } from \"react\";\n\nexport type TargetPlatform = 'desktop' | 'ios' | 'android';\n\n//* Common interface for keystroke hook templates\nexport interface IKeystrokeHookTemplate<T> {\n    handleEndTypingSession: () => T | undefined;\n}\n\n//* Common interface for mobile keystroke hook template\nexport interface IMobileKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {\n    handleProcessPaste: (event: ClipboardEvent<HTMLInputElement>) => void;\n}\n\n//? Interface for desktop keystroke hook\nexport interface IDesktopKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {\n    getIsTypingSessionActive: () => boolean;\n    handleProcessKeydown: (key: string) => void;\n    handleProcessKeyup: (key: string) => void;\n}\n\n//? Interface for android keystroke hook\nexport interface IAndroidKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {\n    handleProcessKeydown: (target: HTMLInputElement) => void;\n    handleProcessKeyInput: (inputContent: string) => void;\n    handleProcessKeyup: () => void;\n    handleProcessOnBeforeInput: (newValue: string, inputValue: string) => void;\n}\n\n//? Interface for iOS keystroke hook\nexport interface IiOSKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {\n    handleProcessInputChange: (event: ChangeEvent<HTMLInputElement>, inputValue: string) => void;\n    handleProcessKeydown: (keyPressed: string, target: HTMLInputElement) => void;\n    handleProcessKeyup: (keyPressed: string) => void;\n    handleProcessOnBeforeInput: (value: number) => void;\n    //! processAutoCorrection: (textInputValue: string) => void;\n}","import {\n    IMobileKeystrokeCollection,\n    IKeystrokeCollection,\n    IBaseKeystrokeCollection\n} from \"@area2-ai/a2-cipher-core\";\n\nexport interface A2CapturePayload\n    extends IBaseKeystrokeCollection,\n    Partial<Omit<IKeystrokeCollection, keyof IBaseKeystrokeCollection>>,\n    Partial<Omit<IMobileKeystrokeCollection, keyof IBaseKeystrokeCollection>> { }\n\nexport interface A2DemoCapturePayload {\n    \"session_id\": string,\n    \"temporal_kinematics\": string[],\n    \"spatial_kinematics\": string[],\n    \"type_kinematics\": string[],\n    context?: {\n        \"time\": string,\n        \"weekday\": string,\n        \"season\": string,\n        \"timezone\": string\n    },\n    extra_metadata?: {\n        \"OS\": string,\n        \"browser\": string\n    },\n    device_context?: string,\n    assist_signals?: string\n}","import React from 'react';\nimport { getPlatform } from '../utils';\n\nimport { A2AndroidTextInput } from './A2AndroidTextInput';\nimport { A2IosTextInput } from './A2IosTextInput';\nimport { A2DesktopTextInput } from './A2DesktopTextInput';\n\nimport type { TargetPlatform } from '../interfaces';\n\ninterface Props extends React.InputHTMLAttributes<HTMLInputElement> {\n    ref?: React.Ref<HTMLInputElement>;\n    target?: TargetPlatform;\n    handleEndSessionOnEnter?: Function;\n}\n\n/**\n * Component that renders a text input field and generates an A2CapturePayload data.\n * \n * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.\n * @param {TargetPlatform} [target] - Optional target platform ('ios', 'android', 'desktop'). If not provided, it will be auto-detected.\n * @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press (only for desktop).\n */\nexport const A2Textbox = ({ ref, target, handleEndSessionOnEnter, ...rest }: Props) => {\n    const targetPlatform = target ?? getPlatform();\n\n    if (targetPlatform === 'android') {\n        return (\n            <A2AndroidTextInput {...rest} ref={ref} />\n        )\n    }\n\n    if (targetPlatform === 'ios') {\n        return (\n            <A2IosTextInput {...rest} ref={ref} />\n        )\n    }\n\n    return (\n        <A2DesktopTextInput {...rest} ref={ref} handleEndSessionOnEnter={handleEndSessionOnEnter} />\n    )\n}\n","import React, { useEffect, useReducer, useRef } from 'react';\nimport {\n    KeystrokeManager,\n    AndroidKeystrokeManager,\n    IosKeystrokeManager\n} from '@area2-ai/a2-cipher-core';\n\nimport { Area2Context, area2Reducer } from '.';\n\nexport interface Area2State { }\n\ninterface Props {\n    children: React.ReactNode;\n}\n\nconst AREA2_INITIAL_STATE: Area2State = {}\n\nexport const Area2Provider = ({ children }: Props) => {\n\n    const [state] = useReducer(area2Reducer, AREA2_INITIAL_STATE); //[state, dispatch]\n\n    const keystrokeManagerRef = useRef<KeystrokeManager>();\n    const androidKeystrokeManagerRef = useRef<AndroidKeystrokeManager>();\n    const iosKeystrokeManagerRef = useRef<IosKeystrokeManager>();\n\n    const getKeystrokeManager = () => keystrokeManagerRef.current!;\n    const getAndroidKeystrokeManager = () => androidKeystrokeManagerRef.current!;\n    const getIosKeystrokeManager = () => iosKeystrokeManagerRef.current!;\n\n    useEffect(() => {\n        keystrokeManagerRef.current = new KeystrokeManager();\n        androidKeystrokeManagerRef.current = new AndroidKeystrokeManager();\n        iosKeystrokeManagerRef.current = new IosKeystrokeManager();\n    }, []);\n\n    return (\n        <Area2Context.Provider value={{\n            ...state,\n            getKeystrokeManager,\n            getAndroidKeystrokeManager,\n            getIosKeystrokeManager\n        }}>\n            {children}\n        </Area2Context.Provider>\n    )\n}","import { getPlatform } from \"../utils\";\nimport type {\n    TargetPlatform,\n    IiOSKeystrokeHookTemplate,\n    IAndroidKeystrokeHookTemplate,\n    IDesktopKeystrokeHookTemplate,\n    A2DemoCapturePayload\n} from \"../interfaces\";\n\nimport { useMobileKeystrokeAndroid } from \"./useKeystroke.android\";\nimport { useDesktopKeystroke } from \"./useKeystroke.desktop\";\nimport { useMobileKeystrokeIOS } from \"./useKeystroke.ios\";\n\nexport function useKeystrokeBuilder(target: 'ios'): IiOSKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target: 'android'): IAndroidKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target: 'desktop'): IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target?: TargetPlatform): IiOSKeystrokeHookTemplate<A2DemoCapturePayload> | IAndroidKeystrokeHookTemplate<A2DemoCapturePayload> | IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target?: TargetPlatform) {\n\n    const targetPlatform = target ?? getPlatform();\n\n    switch (targetPlatform) {\n        case 'android':\n            return useMobileKeystrokeAndroid();\n        case 'ios':\n            return useMobileKeystrokeIOS();\n        case 'desktop':\n        default:\n            return useDesktopKeystroke();\n    }\n\n}"],"names":["Props"],"mappings":";;;AACO,KAAA,cAAA;AACA,UAAA,sBAAA;AACP;AACA;AACO,UAAA,4BAAA,YAAA,sBAAA;AACP,gCAAA,cAAA,CAAA,gBAAA;AACA;AACO,UAAA,6BAAA,YAAA,sBAAA;AACP;AACA;AACA;AACA;AACO,UAAA,6BAAA,YAAA,4BAAA;AACP,mCAAA,gBAAA;AACA;AACA;AACA;AACA;AACO,UAAA,yBAAA,YAAA,4BAAA;AACP,sCAAA,WAAA,CAAA,gBAAA;AACA,uDAAA,gBAAA;AACA;AACA;AACA;;ACrBO,UAAA,oBAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AClBA,UAAAA,OAAA,SAAA,KAAA,CAAA,mBAAA,CAAA,gBAAA;AACA,UAAA,KAAA,CAAA,GAAA,CAAA,gBAAA;AACA,aAAA,cAAA;AACA,8BAAA,QAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,cAAA,SAAA,sDAAAA,OAAA,KAAuF,iBAA2B,CAAA,GAAA,CAAA,OAAA;;ACXzH,UAAA,KAAA;AACA,cAAA,KAAA,CAAA,SAAA;AACA;AACO,cAAA,aAAA,iBAAA,KAAA,KAAsD,iBAA2B,CAAA,GAAA,CAAA,OAAA;;ACLjF,iBAAA,mBAAA,iBAAA,yBAAA,CAAA,oBAAA;AACA,iBAAA,mBAAA,qBAAA,6BAAA,CAAA,oBAAA;AACA,iBAAA,mBAAA,qBAAA,6BAAA,CAAA,oBAAA;AACA,iBAAA,mBAAA,UAAA,cAAA,GAAA,yBAAA,CAAA,oBAAA,IAAA,6BAAA,CAAA,oBAAA,IAAA,6BAAA,CAAA,oBAAA;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,74 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ClipboardEvent, ChangeEvent } from 'react';
+
+type TargetPlatform = 'desktop' | 'ios' | 'android';
+interface IKeystrokeHookTemplate<T> {
+    handleEndTypingSession: () => T | undefined;
+}
+interface IMobileKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {
+    handleProcessPaste: (event: ClipboardEvent<HTMLInputElement>) => void;
+}
+interface IDesktopKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {
+    getIsTypingSessionActive: () => boolean;
+    handleProcessKeydown: (key: string) => void;
+    handleProcessKeyup: (key: string) => void;
+}
+interface IAndroidKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {
+    handleProcessKeydown: (target: HTMLInputElement) => void;
+    handleProcessKeyInput: (inputContent: string) => void;
+    handleProcessKeyup: () => void;
+    handleProcessOnBeforeInput: (newValue: string, inputValue: string) => void;
+}
+interface IiOSKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {
+    handleProcessInputChange: (event: ChangeEvent<HTMLInputElement>, inputValue: string) => void;
+    handleProcessKeydown: (keyPressed: string, target: HTMLInputElement) => void;
+    handleProcessKeyup: (keyPressed: string) => void;
+    handleProcessOnBeforeInput: (value: number) => void;
+}
+
+interface A2DemoCapturePayload {
+    "session_id": string;
+    "temporal_kinematics": string[];
+    "spatial_kinematics": string[];
+    "type_kinematics": string[];
+    context?: {
+        "time": string;
+        "weekday": string;
+        "season": string;
+        "timezone": string;
+    };
+    extra_metadata?: {
+        "OS": string;
+        "browser": string;
+    };
+    device_context?: string;
+    assist_signals?: string;
+}
+
+interface Props$1 extends React.InputHTMLAttributes<HTMLInputElement> {
+    ref?: React.Ref<HTMLInputElement>;
+    target?: TargetPlatform;
+    handleEndSessionOnEnter?: Function;
+}
+/**
+ * Component that renders a text input field and generates an A2CapturePayload data.
+ *
+ * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
+ * @param {TargetPlatform} [target] - Optional target platform ('ios', 'android', 'desktop'). If not provided, it will be auto-detected.
+ * @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press (only for desktop).
+ */
+declare const A2Textbox: ({ ref, target, handleEndSessionOnEnter, ...rest }: Props$1) => react_jsx_runtime.JSX.Element;
+
+interface Props {
+    children: React.ReactNode;
+}
+declare const Area2Provider: ({ children }: Props) => react_jsx_runtime.JSX.Element;
+
+declare function useKeystrokeBuilder(target: 'ios'): IiOSKeystrokeHookTemplate<A2DemoCapturePayload>;
+declare function useKeystrokeBuilder(target: 'android'): IAndroidKeystrokeHookTemplate<A2DemoCapturePayload>;
+declare function useKeystrokeBuilder(target: 'desktop'): IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;
+declare function useKeystrokeBuilder(target?: TargetPlatform): IiOSKeystrokeHookTemplate<A2DemoCapturePayload> | IAndroidKeystrokeHookTemplate<A2DemoCapturePayload> | IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;
+
+export { A2Textbox, Area2Provider, useKeystrokeBuilder as useCipherCapture };
+export type { A2DemoCapturePayload, TargetPlatform };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sources":["../src/interfaces/IKeystrokeHookTemplate.ts","../src/interfaces/IA2CapturePayload.ts","../src/components/A2Textbox.tsx","../src/context/area2/Area2Provider.tsx","../src/hooks/useKeystrokeBuilder.ts"],"sourcesContent":["import { ChangeEvent, ClipboardEvent } from \"react\";\n\nexport type TargetPlatform = 'desktop' | 'ios' | 'android';\n\n//* Common interface for keystroke hook templates\nexport interface IKeystrokeHookTemplate<T> {\n    handleEndTypingSession: () => T | undefined;\n}\n\n//* Common interface for mobile keystroke hook template\nexport interface IMobileKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {\n    handleProcessPaste: (event: ClipboardEvent<HTMLInputElement>) => void;\n}\n\n//? Interface for desktop keystroke hook\nexport interface IDesktopKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {\n    getIsTypingSessionActive: () => boolean;\n    handleProcessKeydown: (key: string) => void;\n    handleProcessKeyup: (key: string) => void;\n}\n\n//? Interface for android keystroke hook\nexport interface IAndroidKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {\n    handleProcessKeydown: (target: HTMLInputElement) => void;\n    handleProcessKeyInput: (inputContent: string) => void;\n    handleProcessKeyup: () => void;\n    handleProcessOnBeforeInput: (newValue: string, inputValue: string) => void;\n}\n\n//? Interface for iOS keystroke hook\nexport interface IiOSKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {\n    handleProcessInputChange: (event: ChangeEvent<HTMLInputElement>, inputValue: string) => void;\n    handleProcessKeydown: (keyPressed: string, target: HTMLInputElement) => void;\n    handleProcessKeyup: (keyPressed: string) => void;\n    handleProcessOnBeforeInput: (value: number) => void;\n    //! processAutoCorrection: (textInputValue: string) => void;\n}","import {\n    IMobileKeystrokeCollection,\n    IKeystrokeCollection,\n    IBaseKeystrokeCollection\n} from \"@area2-ai/a2-cipher-core\";\n\nexport interface A2CapturePayload\n    extends IBaseKeystrokeCollection,\n    Partial<Omit<IKeystrokeCollection, keyof IBaseKeystrokeCollection>>,\n    Partial<Omit<IMobileKeystrokeCollection, keyof IBaseKeystrokeCollection>> { }\n\nexport interface A2DemoCapturePayload {\n    \"session_id\": string,\n    \"temporal_kinematics\": string[],\n    \"spatial_kinematics\": string[],\n    \"type_kinematics\": string[],\n    context?: {\n        \"time\": string,\n        \"weekday\": string,\n        \"season\": string,\n        \"timezone\": string\n    },\n    extra_metadata?: {\n        \"OS\": string,\n        \"browser\": string\n    },\n    device_context?: string,\n    assist_signals?: string\n}","import React from 'react';\nimport { getPlatform } from '../utils';\n\nimport { A2AndroidTextInput } from './A2AndroidTextInput';\nimport { A2IosTextInput } from './A2IosTextInput';\nimport { A2DesktopTextInput } from './A2DesktopTextInput';\n\nimport type { TargetPlatform } from '../interfaces';\n\ninterface Props extends React.InputHTMLAttributes<HTMLInputElement> {\n    ref?: React.Ref<HTMLInputElement>;\n    target?: TargetPlatform;\n    handleEndSessionOnEnter?: Function;\n}\n\n/**\n * Component that renders a text input field and generates an A2CapturePayload data.\n * \n * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.\n * @param {TargetPlatform} [target] - Optional target platform ('ios', 'android', 'desktop'). If not provided, it will be auto-detected.\n * @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press (only for desktop).\n */\nexport const A2Textbox = ({ ref, target, handleEndSessionOnEnter, ...rest }: Props) => {\n    const targetPlatform = target ?? getPlatform();\n\n    if (targetPlatform === 'android') {\n        return (\n            <A2AndroidTextInput {...rest} ref={ref} />\n        )\n    }\n\n    if (targetPlatform === 'ios') {\n        return (\n            <A2IosTextInput {...rest} ref={ref} />\n        )\n    }\n\n    return (\n        <A2DesktopTextInput {...rest} ref={ref} handleEndSessionOnEnter={handleEndSessionOnEnter} />\n    )\n}\n","import React, { useEffect, useReducer, useRef } from 'react';\nimport {\n    KeystrokeManager,\n    AndroidKeystrokeManager,\n    IosKeystrokeManager\n} from '@area2-ai/a2-cipher-core';\n\nimport { Area2Context, area2Reducer } from '.';\n\nexport interface Area2State { }\n\ninterface Props {\n    children: React.ReactNode;\n}\n\nconst AREA2_INITIAL_STATE: Area2State = {}\n\nexport const Area2Provider = ({ children }: Props) => {\n\n    const [state] = useReducer(area2Reducer, AREA2_INITIAL_STATE); //[state, dispatch]\n\n    const keystrokeManagerRef = useRef<KeystrokeManager>();\n    const androidKeystrokeManagerRef = useRef<AndroidKeystrokeManager>();\n    const iosKeystrokeManagerRef = useRef<IosKeystrokeManager>();\n\n    const getKeystrokeManager = () => keystrokeManagerRef.current!;\n    const getAndroidKeystrokeManager = () => androidKeystrokeManagerRef.current!;\n    const getIosKeystrokeManager = () => iosKeystrokeManagerRef.current!;\n\n    useEffect(() => {\n        keystrokeManagerRef.current = new KeystrokeManager();\n        androidKeystrokeManagerRef.current = new AndroidKeystrokeManager();\n        iosKeystrokeManagerRef.current = new IosKeystrokeManager();\n    }, []);\n\n    return (\n        <Area2Context.Provider value={{\n            ...state,\n            getKeystrokeManager,\n            getAndroidKeystrokeManager,\n            getIosKeystrokeManager\n        }}>\n            {children}\n        </Area2Context.Provider>\n    )\n}","import { getPlatform } from \"../utils\";\nimport type {\n    TargetPlatform,\n    IiOSKeystrokeHookTemplate,\n    IAndroidKeystrokeHookTemplate,\n    IDesktopKeystrokeHookTemplate,\n    A2DemoCapturePayload\n} from \"../interfaces\";\n\nimport { useMobileKeystrokeAndroid } from \"./useKeystroke.android\";\nimport { useDesktopKeystroke } from \"./useKeystroke.desktop\";\nimport { useMobileKeystrokeIOS } from \"./useKeystroke.ios\";\n\nexport function useKeystrokeBuilder(target: 'ios'): IiOSKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target: 'android'): IAndroidKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target: 'desktop'): IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target?: TargetPlatform): IiOSKeystrokeHookTemplate<A2DemoCapturePayload> | IAndroidKeystrokeHookTemplate<A2DemoCapturePayload> | IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target?: TargetPlatform) {\n\n    const targetPlatform = target ?? getPlatform();\n\n    switch (targetPlatform) {\n        case 'android':\n            return useMobileKeystrokeAndroid();\n        case 'ios':\n            return useMobileKeystrokeIOS();\n        case 'desktop':\n        default:\n            return useDesktopKeystroke();\n    }\n\n}"],"names":["Props"],"mappings":";;;AACO,KAAA,cAAA;AACA,UAAA,sBAAA;AACP;AACA;AACO,UAAA,4BAAA,YAAA,sBAAA;AACP,gCAAA,cAAA,CAAA,gBAAA;AACA;AACO,UAAA,6BAAA,YAAA,sBAAA;AACP;AACA;AACA;AACA;AACO,UAAA,6BAAA,YAAA,4BAAA;AACP,mCAAA,gBAAA;AACA;AACA;AACA;AACA;AACO,UAAA,yBAAA,YAAA,4BAAA;AACP,sCAAA,WAAA,CAAA,gBAAA;AACA,uDAAA,gBAAA;AACA;AACA;AACA;;ACrBO,UAAA,oBAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AClBA,UAAAA,OAAA,SAAA,KAAA,CAAA,mBAAA,CAAA,gBAAA;AACA,UAAA,KAAA,CAAA,GAAA,CAAA,gBAAA;AACA,aAAA,cAAA;AACA,8BAAA,QAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,cAAA,SAAA,sDAAAA,OAAA,KAAuF,iBAA2B,CAAA,GAAA,CAAA,OAAA;;ACXzH,UAAA,KAAA;AACA,cAAA,KAAA,CAAA,SAAA;AACA;AACO,cAAA,aAAA,iBAAA,KAAA,KAAsD,iBAA2B,CAAA,GAAA,CAAA,OAAA;;ACLjF,iBAAA,mBAAA,iBAAA,yBAAA,CAAA,oBAAA;AACA,iBAAA,mBAAA,qBAAA,6BAAA,CAAA,oBAAA;AACA,iBAAA,mBAAA,qBAAA,6BAAA,CAAA,oBAAA;AACA,iBAAA,mBAAA,UAAA,cAAA,GAAA,yBAAA,CAAA,oBAAA,IAAA,6BAAA,CAAA,oBAAA,IAAA,6BAAA,CAAA,oBAAA;;;;"}

package/dist/index.js

@@ -0,0 +1,420 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useReducer, useRef, useEffect, useContext, useCallback } from 'react';
+import { KeystrokeManager, AndroidKeystrokeManager, IosKeystrokeManager } from '@area2-ai/a2-cipher-core';
+import { browserName, osName, isAndroid, isDesktop } from 'react-device-detect';
+
+const Area2Context = /*#__PURE__*/ createContext({});
+
+const AREA2_INITIAL_STATE = {};
+const Area2Provider = ({ children })=>{
+    const [state] = useReducer(area2Reducer, AREA2_INITIAL_STATE); //[state, dispatch]
+    const keystrokeManagerRef = useRef();
+    const androidKeystrokeManagerRef = useRef();
+    const iosKeystrokeManagerRef = useRef();
+    const getKeystrokeManager = ()=>keystrokeManagerRef.current;
+    const getAndroidKeystrokeManager = ()=>androidKeystrokeManagerRef.current;
+    const getIosKeystrokeManager = ()=>iosKeystrokeManagerRef.current;
+    useEffect(()=>{
+        keystrokeManagerRef.current = new KeystrokeManager();
+        androidKeystrokeManagerRef.current = new AndroidKeystrokeManager();
+        iosKeystrokeManagerRef.current = new IosKeystrokeManager();
+    }, []);
+    return /*#__PURE__*/ jsx(Area2Context.Provider, {
+        value: {
+            ...state,
+            getKeystrokeManager,
+            getAndroidKeystrokeManager,
+            getIosKeystrokeManager
+        },
+        children: children
+    });
+};
+
+const area2Reducer = (state, action)=>{
+    switch(action.type){
+        case '[A2 Desktop] - Update text':
+            return {
+                ...state,
+                desktopTextValue: action.payload.newValue
+            };
+        default:
+            return state;
+    }
+};
+
+const getBrowserInfo = ()=>browserName;
+
+const getOsInfo = ()=>osName;
+
+const getPlatform = ()=>{
+    if (isAndroid) return 'android';
+    if (isDesktop) return 'desktop';
+    return 'ios';
+};
+
+const formatDemoKeystrokeData = (payload, isMobile)=>{
+    const base = {
+        session_id: payload.sessionID.substring(0, 5) + '-[* * *]',
+        temporal_kinematics: [
+            '* * *'
+        ],
+        spatial_kinematics: [
+            '* * *'
+        ],
+        type_kinematics: [
+            '* * *'
+        ]
+    };
+    if (isMobile) {
+        base.device_context = '[* * *]';
+        base.assist_signals = '[* * *]';
+    } else {
+        base.context = {
+            time: '[* * *]',
+            weekday: '[* * *]',
+            season: '[* * *]',
+            timezone: '[* * *]'
+        };
+        base.extra_metadata = {
+            OS: '[* * *]',
+            browser: '[* * *]'
+        };
+    }
+    return base;
+};
+
+/**
+ * Keystroke hook for android mobile browser
+ */ const useMobileKeystrokeAndroid = ()=>{
+    const { getAndroidKeystrokeManager } = useContext(Area2Context);
+    /**
+     * Handles the before input event.
+     * @param {string} newValue - The new value of the input before the input event.
+     * @param {string} inputValue - The current value of the input.
+     */ const handleProcessOnBeforeInput = useCallback((newValue, inputValue)=>{
+        getAndroidKeystrokeManager().processBeforeInput(newValue, inputValue);
+    }, []);
+    /**
+     * Handles the paste event.
+     * @param {ClipboardEvent<HTMLInputElement>} event - The paste event.
+     */ const handleProcessPaste = useCallback((event)=>{
+        const pastedText = event.clipboardData.getData("text");
+        getAndroidKeystrokeManager().processPaste(pastedText);
+    }, []);
+    /**
+     * Handles the key input event.
+     * @param {string} inputContent - The content of the key input.
+     */ const handleProcessKeyInput = useCallback((inputContent)=>{
+        getAndroidKeystrokeManager().processKeyInput(inputContent);
+    }, []);
+    /**
+     * Handles the keydown event.
+     * @param {HTMLInputElement} target - The target input element.
+     */ const handleProcessKeydown = useCallback((target)=>{
+        getAndroidKeystrokeManager().processKeydown(target);
+    }, []);
+    /**
+     * Handles the keyup event.
+     */ const handleProcessKeyup = useCallback(()=>{
+        getAndroidKeystrokeManager().processKeyup();
+    }, []);
+    /**
+     * Ends the typing session and returns the typing data.
+     * @returns {A2CapturePayload | undefined} - The typing data or undefined if no data.
+     */ // const handleEndTypingSession = useCallback((): A2CapturePayload | undefined => {
+    //     const typingData = getAndroidKeystrokeManager().endTypingSession();
+    //     getAndroidKeystrokeManager().resetTypingData();
+    //     if (!typingData.startUnixTime) {
+    //         console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
+    //         return;
+    //     }
+    //     typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
+    //     return typingData;
+    // }, []);
+    /**
+     * Ends the demo typing session and returns the typing data.
+     * @returns {A2DemoCapturePayload | undefined} - The typing data or undefined if no data.
+     */ const handleEndDemoTypingSession = useCallback(()=>{
+        const typingData = getAndroidKeystrokeManager().endTypingSession();
+        getAndroidKeystrokeManager().resetTypingData();
+        if (!typingData.startUnixTime) {
+            console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
+            return;
+        }
+        typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
+        return formatDemoKeystrokeData(typingData, true);
+    }, []);
+    return {
+        handleProcessOnBeforeInput,
+        handleProcessPaste,
+        handleProcessKeyInput,
+        handleProcessKeydown,
+        handleProcessKeyup,
+        handleEndTypingSession: handleEndDemoTypingSession
+    };
+};
+
+/**
+ * Keystroke hook for desktop platforms.
+ */ const useDesktopKeystroke = ()=>{
+    const { getKeystrokeManager } = useContext(Area2Context);
+    const getIsTypingSessionActive = ()=>getKeystrokeManager().getIsTypingSessionActive;
+    /**
+     * Handles the keydown event.
+     * @param {string} key - The key pressed.
+     */ const handleProcessKeydown = useCallback((key)=>{
+        getKeystrokeManager().processKeydown(key);
+    }, []);
+    /**
+     * Handles the keyup event.
+     * @param {string} key - The key released.
+     */ const handleProcessKeyup = useCallback((key)=>{
+        getKeystrokeManager().processKeyup(key);
+    }, []);
+    /**
+     * Ends the typing session and returns the typing data.
+     * @returns {A2CapturePayload | undefined} - The typing session data or undefined if no data.
+     */ // const handleEndTypingSession = useCallback((): A2CapturePayload | undefined => {
+    //     const typingData = getKeystrokeManager().endTypingSession();
+    //     getKeystrokeManager().resetTypingData();
+    //     if (!typingData.startUnixTime) {
+    //         console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
+    //         return;
+    //     }
+    //     typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
+    //     return typingData;
+    // }, []);
+    /**
+     * Ends the demo typing session and returns the typing data.
+     * @returns {A2DemoCapturePayload | undefined} - The typing session data or undefined if no data.
+     */ const handleEndDemoTypingSession = useCallback(()=>{
+        const typingData = getKeystrokeManager().endTypingSession();
+        getKeystrokeManager().resetTypingData();
+        if (!typingData.startUnixTime) {
+            console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
+            return;
+        }
+        typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
+        return formatDemoKeystrokeData(typingData, false);
+    }, []);
+    return {
+        handleProcessKeydown,
+        handleProcessKeyup,
+        getIsTypingSessionActive,
+        handleEndTypingSession: handleEndDemoTypingSession
+    };
+};
+
+/**
+ * Keystroke for ios mobile browser
+ * @param {string} inputValue - The current value of the text input - Needed to detect auto-correct changes.
+ */ const useMobileKeystrokeIOS = ()=>{
+    const { getIosKeystrokeManager } = useContext(Area2Context);
+    //! Undefined behavior - Try to load via context - provider
+    /**
+     * Processes auto-correction based on the current input value.
+     * @param {string} inputValue - The current value of the text input.
+     */ // const processAutoCorrection = getIosKeystrokeManager().processAutocorrection;
+    /**
+     * Handles the before input event.
+     * @param {number} value - The length of the content before the input event.
+     */ const handleProcessOnBeforeInput = useCallback((value)=>{
+        getIosKeystrokeManager().setPrevContentLength = value;
+    }, []);
+    /**
+     * Handles the paste event.
+     * @param {ClipboardEvent<HTMLInputElement>} event - The paste event.
+     */ const handleProcessPaste = useCallback((event)=>{
+        const pastedText = event.clipboardData.getData("text");
+        getIosKeystrokeManager().processPaste(pastedText);
+    }, []);
+    /**
+     * Checks for text prediction and processes it.
+     * @param {string} newValue - The new value of the text input.
+     * @param {string} inputValue - The current value of the text input.
+     */ const checkForPrediction = useCallback((newValue, inputValue)=>{
+        const textSnapshot = inputValue; // Before it changes
+        getIosKeystrokeManager().processPrediction(newValue, textSnapshot);
+    }, []);
+    /**
+     * Handles the input change event
+     * @param {ChangeEvent<HTMLInputElement>} event - The input change event
+     * @param {string} inputValue - The current value of the text input
+     */ const handleProcessInputChange = (event, inputValue)=>{
+        const newValue = event.target.value;
+        checkForPrediction(newValue, inputValue);
+    };
+    /**
+     * Handles the keydown event.
+     * @param {string} keyPressed - The key that was pressed.
+     * @param {HTMLInputElement} target - The target input element.
+     */ const handleProcessKeydown = useCallback((keyPressed, target)=>{
+        getIosKeystrokeManager().processKeydown(keyPressed, target);
+    }, []);
+    /**
+     * Handles the keyup event.
+     * @param {string} key - The key that was released.
+     */ const handleProcessKeyup = useCallback((keyPressed)=>{
+        getIosKeystrokeManager().processKeyup(keyPressed);
+    }, []);
+    /**
+     * Ends the typing session and returns the typing data.
+     * @returns {A2CapturePayload | undefined} - The typing data or undefined if no data.
+     */ // const handleEndTypingSession = useCallback((): A2CapturePayload | undefined => {
+    //     const typingData = getIosKeystrokeManager().endTypingSession();
+    //     getIosKeystrokeManager().resetTypingData();
+    //     if (!typingData.startUnixTime) {
+    //         console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
+    //         return;
+    //     }
+    //     typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
+    //     return typingData;
+    // }, []);
+    /**
+     * Ends the demo typing session and returns the typing data.
+     * @returns {A2DemoCapturePayload | undefined} - The typing data or undefined if no data.
+     */ const handleEndDemoTypingSession = useCallback(()=>{
+        const typingData = getIosKeystrokeManager().endTypingSession();
+        getIosKeystrokeManager().resetTypingData();
+        if (!typingData.startUnixTime) {
+            console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
+            return;
+        }
+        typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
+        return formatDemoKeystrokeData(typingData, true);
+    }, []);
+    return {
+        // processAutoCorrection,
+        handleProcessInputChange,
+        handleProcessKeydown,
+        handleProcessPaste,
+        handleProcessOnBeforeInput,
+        handleProcessKeyup,
+        handleEndTypingSession: handleEndDemoTypingSession
+    };
+};
+
+function useKeystrokeBuilder(target) {
+    const targetPlatform = target ?? getPlatform();
+    switch(targetPlatform){
+        case 'android':
+            return useMobileKeystrokeAndroid();
+        case 'ios':
+            return useMobileKeystrokeIOS();
+        case 'desktop':
+        default:
+            return useDesktopKeystroke();
+    }
+}
+
+/**
+ * Component that renders a text input field and generates an A2CapturePayload data.
+ * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
+ */ const A2AndroidTextInput = ({ ref, autoCapitalize, value, onChange, ...rest })=>{
+    const { handleProcessKeydown, handleProcessKeyup, handleProcessPaste, handleProcessKeyInput, handleProcessOnBeforeInput } = useMobileKeystrokeAndroid();
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("input", {
+            ref: ref,
+            type: "text",
+            placeholder: "Using android implementation",
+            autoCapitalize: autoCapitalize || 'sentences',
+            value: value,
+            onChange: onChange,
+            onKeyDown: ({ currentTarget })=>handleProcessKeydown(currentTarget),
+            onKeyUp: handleProcessKeyup,
+            onPaste: handleProcessPaste,
+            onInput: ({ currentTarget })=>{
+                handleProcessKeyInput(currentTarget.value);
+            },
+            onBeforeInput: ({ currentTarget })=>handleProcessOnBeforeInput(currentTarget.value, value?.toString() || ''),
+            ...rest
+        })
+    });
+};
+
+/**
+ * Component that renders a text input field and generates an A2CapturePayload data.
+ * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
+ */ const A2IosTextInput = ({ ref, value, onChange, ...rest })=>{
+    const { handleProcessInputChange, handleProcessKeydown, handleProcessKeyup, handleProcessPaste, handleProcessOnBeforeInput } = useMobileKeystrokeIOS();
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("input", {
+            ref: ref,
+            type: "text",
+            placeholder: "Using iOS implementation",
+            onKeyDownCapture: ({ key, currentTarget })=>handleProcessKeydown(key, currentTarget),
+            onKeyUpCapture: ({ key })=>handleProcessKeyup(key),
+            value: value,
+            onChange: (event)=>{
+                handleProcessInputChange(event, value?.toString() || ''); //? Execute internal change handler
+                onChange?.(event); //? Execute parent's onChange if it exists
+            },
+            onPaste: handleProcessPaste,
+            onBeforeInput: ({ currentTarget })=>{
+                handleProcessOnBeforeInput(currentTarget.value.length);
+            },
+            ...rest
+        })
+    });
+};
+
+/**
+ * Component that renders a text input field and generates an A2CapturePayload data.
+ * 
+ * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
+ * @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press.
+ */ const A2DesktopTextInput = ({ ref, onChange, handleEndSessionOnEnter, ...rest })=>{
+    const { handleProcessKeydown, handleProcessKeyup, getIsTypingSessionActive } = useDesktopKeystroke();
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("input", {
+            ref: ref,
+            type: "text",
+            placeholder: "Using desktop implementation",
+            onKeyDownCapture: ({ key })=>handleProcessKeydown(key),
+            onKeyUpCapture: ({ key })=>{
+                handleProcessKeyup(key);
+                //? Handle ENTER key
+                if (key !== 'Enter') {
+                    return;
+                }
+                if (!getIsTypingSessionActive()) {
+                    return;
+                }
+                handleEndSessionOnEnter?.(); //? Call parent's function if it exists
+            },
+            onChange: (event)=>{
+                onChange?.(event); //? Execute parent's onChange if it exists
+            },
+            ...rest
+        })
+    });
+};
+
+/**
+ * Component that renders a text input field and generates an A2CapturePayload data.
+ * 
+ * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
+ * @param {TargetPlatform} [target] - Optional target platform ('ios', 'android', 'desktop'). If not provided, it will be auto-detected.
+ * @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press (only for desktop).
+ */ const A2Textbox = ({ ref, target, handleEndSessionOnEnter, ...rest })=>{
+    const targetPlatform = target ?? getPlatform();
+    if (targetPlatform === 'android') {
+        return /*#__PURE__*/ jsx(A2AndroidTextInput, {
+            ...rest,
+            ref: ref
+        });
+    }
+    if (targetPlatform === 'ios') {
+        return /*#__PURE__*/ jsx(A2IosTextInput, {
+            ...rest,
+            ref: ref
+        });
+    }
+    return /*#__PURE__*/ jsx(A2DesktopTextInput, {
+        ...rest,
+        ref: ref,
+        handleEndSessionOnEnter: handleEndSessionOnEnter
+    });
+};
+
+export { A2Textbox, Area2Provider, useKeystrokeBuilder as useCipherCapture };

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@area2-ai/a2-demo-cipher-react",
+  "version": "0.1.1",
+  "license": "MIT",
+  "author": "Area2 AI",
+  "description": "# a2-demo-cipher-react for demo purposes",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "release": {
+    "branches": [
+      "main"
+    ]
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "dev": "tsdx dev",
+    "build": "tsdx build",
+    "test": "tsdx test",
+    "test:watch": "tsdx test --watch",
+    "lint": "tsdx lint",
+    "format": "tsdx format",
+    "format:check": "tsdx format --check",
+    "typecheck": "tsdx typecheck",
+    "prepublishOnly": "bun run build",
+    "push:npm": "np",
+    "login:npm": "npm login",
+    "test-who": "npm whoami"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.17",
+    "@types/react-dom": "^18.3.5",
+    "bunchee": "^6.9.3",
+    "jsdom": "^25.0.1",
+    "np": "^10.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsdx": "^2.0.0",
+    "typescript": "^5.7.2",
+    "vitest": "^4.0.17"
+  },
+  "dependencies": {
+    "@area2-ai/a2-cipher-core": "^2.1.0",
+    "react-device-detect": "^2.2.3"
+  }
+}