@computekit/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,170 @@
+'use strict';
+
+var react = require('react');
+var core = require('@computekit/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/index.tsx
+var ComputeKitContext = react.createContext(null);
+function ComputeKitProvider({
+  options,
+  instance,
+  children
+}) {
+  const kit = react.useMemo(() => {
+    return instance ?? new core.ComputeKit(options);
+  }, [instance, options]);
+  react.useEffect(() => {
+    return () => {
+      if (!instance) {
+        kit.terminate();
+      }
+    };
+  }, [kit, instance]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ComputeKitContext.Provider, { value: kit, children });
+}
+function useComputeKit() {
+  const kit = react.useContext(ComputeKitContext);
+  if (!kit) {
+    throw new Error("useComputeKit must be used within a ComputeKitProvider");
+  }
+  return kit;
+}
+function useCompute(functionName, options = {}) {
+  const kit = useComputeKit();
+  const abortControllerRef = react.useRef(null);
+  const [state, setState] = react.useState({
+    data: null,
+    loading: false,
+    error: null,
+    progress: null
+  });
+  const reset = react.useCallback(() => {
+    setState({
+      data: null,
+      loading: false,
+      error: null,
+      progress: null
+    });
+  }, []);
+  const cancel = react.useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+  }, []);
+  const run = react.useCallback(
+    async (input, runOptions) => {
+      cancel();
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+      if (options.resetOnRun !== false) {
+        setState((prev) => ({
+          ...prev,
+          loading: true,
+          error: null,
+          progress: null
+        }));
+      } else {
+        setState((prev) => ({ ...prev, loading: true }));
+      }
+      try {
+        const result = await kit.run(functionName, input, {
+          ...options,
+          ...runOptions,
+          signal: runOptions?.signal ?? abortController.signal,
+          onProgress: (progress) => {
+            setState((prev) => ({ ...prev, progress }));
+            options.onProgress?.(progress);
+            runOptions?.onProgress?.(progress);
+          }
+        });
+        if (!abortController.signal.aborted) {
+          setState({
+            data: result,
+            loading: false,
+            error: null,
+            progress: null
+          });
+        }
+      } catch (err) {
+        if (!abortController.signal.aborted) {
+          setState({
+            data: null,
+            loading: false,
+            error: err instanceof Error ? err : new Error(String(err)),
+            progress: null
+          });
+        }
+      }
+    },
+    [kit, functionName, options, cancel]
+  );
+  react.useEffect(() => {
+    if (options.autoRun && options.initialInput !== void 0) {
+      run(options.initialInput);
+    }
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      cancel();
+    };
+  }, [cancel]);
+  return {
+    ...state,
+    run,
+    reset,
+    cancel
+  };
+}
+function useComputeCallback(functionName, options) {
+  const kit = useComputeKit();
+  return react.useCallback(
+    (input, runOptions) => {
+      return kit.run(functionName, input, {
+        ...options,
+        ...runOptions
+      });
+    },
+    [kit, functionName, options]
+  );
+}
+function useComputeFunction(name, fn, options) {
+  const kit = useComputeKit();
+  react.useEffect(() => {
+    kit.register(name, fn);
+  }, [kit, name, fn]);
+  return useCompute(name, options);
+}
+function usePoolStats(refreshInterval = 0) {
+  const kit = useComputeKit();
+  const [stats, setStats] = react.useState(() => kit.getStats());
+  react.useEffect(() => {
+    if (refreshInterval <= 0) {
+      return;
+    }
+    const interval = setInterval(() => {
+      setStats(kit.getStats());
+    }, refreshInterval);
+    return () => clearInterval(interval);
+  }, [kit, refreshInterval]);
+  return stats;
+}
+function useWasmSupport() {
+  const kit = useComputeKit();
+  return kit.isWasmSupported();
+}
+
+Object.defineProperty(exports, "ComputeKit", {
+  enumerable: true,
+  get: function () { return core.ComputeKit; }
+});
+exports.ComputeKitProvider = ComputeKitProvider;
+exports.useCompute = useCompute;
+exports.useComputeCallback = useComputeCallback;
+exports.useComputeFunction = useComputeFunction;
+exports.useComputeKit = useComputeKit;
+exports.usePoolStats = usePoolStats;
+exports.useWasmSupport = useWasmSupport;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["createContext","useMemo","ComputeKit","useEffect","useContext","useRef","useState","useCallback"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * ComputeKit React Bindings\n * React hooks and utilities for ComputeKit\n */\n\nimport {\n  useState,\n  useEffect,\n  useCallback,\n  useRef,\n  useMemo,\n  createContext,\n  useContext,\n  type ReactNode,\n} from 'react';\n\nimport {\n  ComputeKit,\n  type ComputeKitOptions,\n  type ComputeOptions,\n  type ComputeProgress,\n  type PoolStats,\n} from '@computekit/core';\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst ComputeKitContext = createContext<ComputeKit | null>(null);\n\n/**\n * Props for ComputeKitProvider\n */\nexport interface ComputeKitProviderProps {\n  /** ComputeKit options */\n  options?: ComputeKitOptions;\n  /** Custom ComputeKit instance */\n  instance?: ComputeKit;\n  /** Children */\n  children: ReactNode;\n}\n\n/**\n * Provider component for ComputeKit\n *\n * @example\n * ```tsx\n * import { ComputeKitProvider } from '@computekit/react';\n *\n * function App() {\n *   return (\n *     <ComputeKitProvider options={{ maxWorkers: 4 }}>\n *       <MyApp />\n *     </ComputeKitProvider>\n *   );\n * }\n * ```\n */\nexport function ComputeKitProvider({\n  options,\n  instance,\n  children,\n}: ComputeKitProviderProps): JSX.Element {\n  const kit = useMemo(() => {\n    return instance ?? new ComputeKit(options);\n  }, [instance, options]);\n\n  useEffect(() => {\n    return () => {\n      // Only terminate if we created the instance\n      if (!instance) {\n        kit.terminate();\n      }\n    };\n  }, [kit, instance]);\n\n  return <ComputeKitContext.Provider value={kit}>{children}</ComputeKitContext.Provider>;\n}\n\n/**\n * Get the ComputeKit instance from context\n */\nexport function useComputeKit(): ComputeKit {\n  const kit = useContext(ComputeKitContext);\n  if (!kit) {\n    throw new Error('useComputeKit must be used within a ComputeKitProvider');\n  }\n  return kit;\n}\n\n// ============================================================================\n// useCompute Hook\n// ============================================================================\n\n/**\n * State returned by useCompute\n */\nexport interface UseComputeState<T> {\n  /** The computed result */\n  data: T | null;\n  /** Loading state */\n  loading: boolean;\n  /** Error if computation failed */\n  error: Error | null;\n  /** Progress information */\n  progress: ComputeProgress | null;\n}\n\n/**\n * Actions returned by useCompute\n */\nexport interface UseComputeActions<TInput> {\n  /** Execute the compute function */\n  run: (input: TInput, options?: ComputeOptions) => Promise<void>;\n  /** Reset the state */\n  reset: () => void;\n  /** Cancel ongoing computation */\n  cancel: () => void;\n}\n\n/**\n * Return type for useCompute\n */\nexport type UseComputeReturn<TInput, TOutput> = UseComputeState<TOutput> &\n  UseComputeActions<TInput>;\n\n/**\n * Options for useCompute hook\n */\nexport interface UseComputeOptions extends ComputeOptions {\n  /** Automatically run on mount with initial input */\n  autoRun?: boolean;\n  /** Initial input for autoRun */\n  initialInput?: unknown;\n  /** Reset state on new run */\n  resetOnRun?: boolean;\n}\n\n/**\n * Hook for running compute functions\n *\n * @example\n * ```tsx\n * function FibonacciCalculator() {\n *   const { data, loading, error, run } = useCompute<number, number>('fibonacci');\n *\n *   return (\n *     <div>\n *       <button onClick={() => run(50)} disabled={loading}>\n *         Calculate Fibonacci(50)\n *       </button>\n *       {loading && <p>Computing...</p>}\n *       {error && <p>Error: {error.message}</p>}\n *       {data !== null && <p>Result: {data}</p>}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useCompute<TInput = unknown, TOutput = unknown>(\n  functionName: string,\n  options: UseComputeOptions = {}\n): UseComputeReturn<TInput, TOutput> {\n  const kit = useComputeKit();\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const [state, setState] = useState<UseComputeState<TOutput>>({\n    data: null,\n    loading: false,\n    error: null,\n    progress: null,\n  });\n\n  const reset = useCallback(() => {\n    setState({\n      data: null,\n      loading: false,\n      error: null,\n      progress: null,\n    });\n  }, []);\n\n  const cancel = useCallback(() => {\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n      abortControllerRef.current = null;\n    }\n  }, []);\n\n  const run = useCallback(\n    async (input: TInput, runOptions?: ComputeOptions) => {\n      // Cancel any ongoing computation\n      cancel();\n\n      // Create new abort controller\n      const abortController = new AbortController();\n      abortControllerRef.current = abortController;\n\n      // Reset state if configured\n      if (options.resetOnRun !== false) {\n        setState((prev) => ({\n          ...prev,\n          loading: true,\n          error: null,\n          progress: null,\n        }));\n      } else {\n        setState((prev) => ({ ...prev, loading: true }));\n      }\n\n      try {\n        const result = await kit.run<TInput, TOutput>(functionName, input, {\n          ...options,\n          ...runOptions,\n          signal: runOptions?.signal ?? abortController.signal,\n          onProgress: (progress) => {\n            setState((prev) => ({ ...prev, progress }));\n            options.onProgress?.(progress);\n            runOptions?.onProgress?.(progress);\n          },\n        });\n\n        if (!abortController.signal.aborted) {\n          setState({\n            data: result,\n            loading: false,\n            error: null,\n            progress: null,\n          });\n        }\n      } catch (err) {\n        if (!abortController.signal.aborted) {\n          setState({\n            data: null,\n            loading: false,\n            error: err instanceof Error ? err : new Error(String(err)),\n            progress: null,\n          });\n        }\n      }\n    },\n    [kit, functionName, options, cancel]\n  );\n\n  // Auto-run on mount if configured\n  useEffect(() => {\n    if (options.autoRun && options.initialInput !== undefined) {\n      run(options.initialInput as TInput);\n    }\n    // Only run on mount\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      cancel();\n    };\n  }, [cancel]);\n\n  return {\n    ...state,\n    run,\n    reset,\n    cancel,\n  };\n}\n\n// ============================================================================\n// useComputeCallback Hook\n// ============================================================================\n\n/**\n * Hook that returns a memoized async function for compute operations\n *\n * @example\n * ```tsx\n * function Calculator() {\n *   const calculate = useComputeCallback<number[], number>('sum');\n *\n *   const handleClick = async () => {\n *     const result = await calculate([1, 2, 3, 4, 5]);\n *     console.log(result);\n *   };\n *\n *   return <button onClick={handleClick}>Calculate Sum</button>;\n * }\n * ```\n */\nexport function useComputeCallback<TInput = unknown, TOutput = unknown>(\n  functionName: string,\n  options?: ComputeOptions\n): (input: TInput, runOptions?: ComputeOptions) => Promise<TOutput> {\n  const kit = useComputeKit();\n\n  return useCallback(\n    (input: TInput, runOptions?: ComputeOptions) => {\n      return kit.run<TInput, TOutput>(functionName, input, {\n        ...options,\n        ...runOptions,\n      });\n    },\n    [kit, functionName, options]\n  );\n}\n\n// ============================================================================\n// useComputeFunction Hook\n// ============================================================================\n\n/**\n * Hook to register and use a compute function\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { run, loading, data } = useComputeFunction(\n *     'myFunction',\n *     (input: number) => input * 2\n *   );\n *\n *   return (\n *     <button onClick={() => run(5)} disabled={loading}>\n *       {loading ? 'Computing...' : `Result: ${data}`}\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useComputeFunction<TInput = unknown, TOutput = unknown>(\n  name: string,\n  fn: (input: TInput) => TOutput | Promise<TOutput>,\n  options?: UseComputeOptions\n): UseComputeReturn<TInput, TOutput> {\n  const kit = useComputeKit();\n\n  // Register function on mount\n  useEffect(() => {\n    kit.register(name, fn);\n  }, [kit, name, fn]);\n\n  return useCompute<TInput, TOutput>(name, options);\n}\n\n// ============================================================================\n// usePoolStats Hook\n// ============================================================================\n\n/**\n * Hook to get worker pool statistics\n *\n * @example\n * ```tsx\n * function PoolMonitor() {\n *   const stats = usePoolStats(1000); // Update every second\n *\n *   return (\n *     <div>\n *       <p>Active Workers: {stats.activeWorkers}</p>\n *       <p>Queue Length: {stats.queueLength}</p>\n *       <p>Tasks Completed: {stats.tasksCompleted}</p>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function usePoolStats(refreshInterval: number = 0): PoolStats {\n  const kit = useComputeKit();\n  const [stats, setStats] = useState<PoolStats>(() => kit.getStats());\n\n  useEffect(() => {\n    // For one-time fetch (refreshInterval <= 0), we rely on the initial state\n    if (refreshInterval <= 0) {\n      return;\n    }\n\n    const interval = setInterval(() => {\n      setStats(kit.getStats());\n    }, refreshInterval);\n\n    return () => clearInterval(interval);\n  }, [kit, refreshInterval]);\n\n  return stats;\n}\n\n// ============================================================================\n// useWasmSupport Hook\n// ============================================================================\n\n/**\n * Hook to check WASM support\n */\nexport function useWasmSupport(): boolean {\n  const kit = useComputeKit();\n  return kit.isWasmSupported();\n}\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport type {\n  ComputeKitOptions,\n  ComputeOptions,\n  ComputeProgress,\n  PoolStats,\n} from '@computekit/core';\n\nexport { ComputeKit } from '@computekit/core';\n"]}

package/dist/index.d.cts

@@ -0,0 +1,165 @@
+import { ReactNode } from 'react';
+import { ComputeKitOptions, ComputeKit, ComputeProgress, ComputeOptions, PoolStats } from '@computekit/core';
+export { ComputeKit, ComputeKitOptions, ComputeOptions, ComputeProgress, PoolStats } from '@computekit/core';
+
+/**
+ * ComputeKit React Bindings
+ * React hooks and utilities for ComputeKit
+ */
+
+/**
+ * Props for ComputeKitProvider
+ */
+interface ComputeKitProviderProps {
+    /** ComputeKit options */
+    options?: ComputeKitOptions;
+    /** Custom ComputeKit instance */
+    instance?: ComputeKit;
+    /** Children */
+    children: ReactNode;
+}
+/**
+ * Provider component for ComputeKit
+ *
+ * @example
+ * ```tsx
+ * import { ComputeKitProvider } from '@computekit/react';
+ *
+ * function App() {
+ *   return (
+ *     <ComputeKitProvider options={{ maxWorkers: 4 }}>
+ *       <MyApp />
+ *     </ComputeKitProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function ComputeKitProvider({ options, instance, children, }: ComputeKitProviderProps): JSX.Element;
+/**
+ * Get the ComputeKit instance from context
+ */
+declare function useComputeKit(): ComputeKit;
+/**
+ * State returned by useCompute
+ */
+interface UseComputeState<T> {
+    /** The computed result */
+    data: T | null;
+    /** Loading state */
+    loading: boolean;
+    /** Error if computation failed */
+    error: Error | null;
+    /** Progress information */
+    progress: ComputeProgress | null;
+}
+/**
+ * Actions returned by useCompute
+ */
+interface UseComputeActions<TInput> {
+    /** Execute the compute function */
+    run: (input: TInput, options?: ComputeOptions) => Promise<void>;
+    /** Reset the state */
+    reset: () => void;
+    /** Cancel ongoing computation */
+    cancel: () => void;
+}
+/**
+ * Return type for useCompute
+ */
+type UseComputeReturn<TInput, TOutput> = UseComputeState<TOutput> & UseComputeActions<TInput>;
+/**
+ * Options for useCompute hook
+ */
+interface UseComputeOptions extends ComputeOptions {
+    /** Automatically run on mount with initial input */
+    autoRun?: boolean;
+    /** Initial input for autoRun */
+    initialInput?: unknown;
+    /** Reset state on new run */
+    resetOnRun?: boolean;
+}
+/**
+ * Hook for running compute functions
+ *
+ * @example
+ * ```tsx
+ * function FibonacciCalculator() {
+ *   const { data, loading, error, run } = useCompute<number, number>('fibonacci');
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => run(50)} disabled={loading}>
+ *         Calculate Fibonacci(50)
+ *       </button>
+ *       {loading && <p>Computing...</p>}
+ *       {error && <p>Error: {error.message}</p>}
+ *       {data !== null && <p>Result: {data}</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useCompute<TInput = unknown, TOutput = unknown>(functionName: string, options?: UseComputeOptions): UseComputeReturn<TInput, TOutput>;
+/**
+ * Hook that returns a memoized async function for compute operations
+ *
+ * @example
+ * ```tsx
+ * function Calculator() {
+ *   const calculate = useComputeCallback<number[], number>('sum');
+ *
+ *   const handleClick = async () => {
+ *     const result = await calculate([1, 2, 3, 4, 5]);
+ *     console.log(result);
+ *   };
+ *
+ *   return <button onClick={handleClick}>Calculate Sum</button>;
+ * }
+ * ```
+ */
+declare function useComputeCallback<TInput = unknown, TOutput = unknown>(functionName: string, options?: ComputeOptions): (input: TInput, runOptions?: ComputeOptions) => Promise<TOutput>;
+/**
+ * Hook to register and use a compute function
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { run, loading, data } = useComputeFunction(
+ *     'myFunction',
+ *     (input: number) => input * 2
+ *   );
+ *
+ *   return (
+ *     <button onClick={() => run(5)} disabled={loading}>
+ *       {loading ? 'Computing...' : `Result: ${data}`}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare function useComputeFunction<TInput = unknown, TOutput = unknown>(name: string, fn: (input: TInput) => TOutput | Promise<TOutput>, options?: UseComputeOptions): UseComputeReturn<TInput, TOutput>;
+/**
+ * Hook to get worker pool statistics
+ *
+ * @example
+ * ```tsx
+ * function PoolMonitor() {
+ *   const stats = usePoolStats(1000); // Update every second
+ *
+ *   return (
+ *     <div>
+ *       <p>Active Workers: {stats.activeWorkers}</p>
+ *       <p>Queue Length: {stats.queueLength}</p>
+ *       <p>Tasks Completed: {stats.tasksCompleted}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function usePoolStats(refreshInterval?: number): PoolStats;
+/**
+ * Hook to check WASM support
+ */
+declare function useWasmSupport(): boolean;
+
+export { ComputeKitProvider, type ComputeKitProviderProps, type UseComputeActions, type UseComputeOptions, type UseComputeReturn, type UseComputeState, useCompute, useComputeCallback, useComputeFunction, useComputeKit, usePoolStats, useWasmSupport };

package/dist/index.d.ts

@@ -0,0 +1,165 @@
+import { ReactNode } from 'react';
+import { ComputeKitOptions, ComputeKit, ComputeProgress, ComputeOptions, PoolStats } from '@computekit/core';
+export { ComputeKit, ComputeKitOptions, ComputeOptions, ComputeProgress, PoolStats } from '@computekit/core';
+
+/**
+ * ComputeKit React Bindings
+ * React hooks and utilities for ComputeKit
+ */
+
+/**
+ * Props for ComputeKitProvider
+ */
+interface ComputeKitProviderProps {
+    /** ComputeKit options */
+    options?: ComputeKitOptions;
+    /** Custom ComputeKit instance */
+    instance?: ComputeKit;
+    /** Children */
+    children: ReactNode;
+}
+/**
+ * Provider component for ComputeKit
+ *
+ * @example
+ * ```tsx
+ * import { ComputeKitProvider } from '@computekit/react';
+ *
+ * function App() {
+ *   return (
+ *     <ComputeKitProvider options={{ maxWorkers: 4 }}>
+ *       <MyApp />
+ *     </ComputeKitProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function ComputeKitProvider({ options, instance, children, }: ComputeKitProviderProps): JSX.Element;
+/**
+ * Get the ComputeKit instance from context
+ */
+declare function useComputeKit(): ComputeKit;
+/**
+ * State returned by useCompute
+ */
+interface UseComputeState<T> {
+    /** The computed result */
+    data: T | null;
+    /** Loading state */
+    loading: boolean;
+    /** Error if computation failed */
+    error: Error | null;
+    /** Progress information */
+    progress: ComputeProgress | null;
+}
+/**
+ * Actions returned by useCompute
+ */
+interface UseComputeActions<TInput> {
+    /** Execute the compute function */
+    run: (input: TInput, options?: ComputeOptions) => Promise<void>;
+    /** Reset the state */
+    reset: () => void;
+    /** Cancel ongoing computation */
+    cancel: () => void;
+}
+/**
+ * Return type for useCompute
+ */
+type UseComputeReturn<TInput, TOutput> = UseComputeState<TOutput> & UseComputeActions<TInput>;
+/**
+ * Options for useCompute hook
+ */
+interface UseComputeOptions extends ComputeOptions {
+    /** Automatically run on mount with initial input */
+    autoRun?: boolean;
+    /** Initial input for autoRun */
+    initialInput?: unknown;
+    /** Reset state on new run */
+    resetOnRun?: boolean;
+}
+/**
+ * Hook for running compute functions
+ *
+ * @example
+ * ```tsx
+ * function FibonacciCalculator() {
+ *   const { data, loading, error, run } = useCompute<number, number>('fibonacci');
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => run(50)} disabled={loading}>
+ *         Calculate Fibonacci(50)
+ *       </button>
+ *       {loading && <p>Computing...</p>}
+ *       {error && <p>Error: {error.message}</p>}
+ *       {data !== null && <p>Result: {data}</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useCompute<TInput = unknown, TOutput = unknown>(functionName: string, options?: UseComputeOptions): UseComputeReturn<TInput, TOutput>;
+/**
+ * Hook that returns a memoized async function for compute operations
+ *
+ * @example
+ * ```tsx
+ * function Calculator() {
+ *   const calculate = useComputeCallback<number[], number>('sum');
+ *
+ *   const handleClick = async () => {
+ *     const result = await calculate([1, 2, 3, 4, 5]);
+ *     console.log(result);
+ *   };
+ *
+ *   return <button onClick={handleClick}>Calculate Sum</button>;
+ * }
+ * ```
+ */
+declare function useComputeCallback<TInput = unknown, TOutput = unknown>(functionName: string, options?: ComputeOptions): (input: TInput, runOptions?: ComputeOptions) => Promise<TOutput>;
+/**
+ * Hook to register and use a compute function
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { run, loading, data } = useComputeFunction(
+ *     'myFunction',
+ *     (input: number) => input * 2
+ *   );
+ *
+ *   return (
+ *     <button onClick={() => run(5)} disabled={loading}>
+ *       {loading ? 'Computing...' : `Result: ${data}`}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare function useComputeFunction<TInput = unknown, TOutput = unknown>(name: string, fn: (input: TInput) => TOutput | Promise<TOutput>, options?: UseComputeOptions): UseComputeReturn<TInput, TOutput>;
+/**
+ * Hook to get worker pool statistics
+ *
+ * @example
+ * ```tsx
+ * function PoolMonitor() {
+ *   const stats = usePoolStats(1000); // Update every second
+ *
+ *   return (
+ *     <div>
+ *       <p>Active Workers: {stats.activeWorkers}</p>
+ *       <p>Queue Length: {stats.queueLength}</p>
+ *       <p>Tasks Completed: {stats.tasksCompleted}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function usePoolStats(refreshInterval?: number): PoolStats;
+/**
+ * Hook to check WASM support
+ */
+declare function useWasmSupport(): boolean;
+
+export { ComputeKitProvider, type ComputeKitProviderProps, type UseComputeActions, type UseComputeOptions, type UseComputeReturn, type UseComputeState, useCompute, useComputeCallback, useComputeFunction, useComputeKit, usePoolStats, useWasmSupport };

package/dist/index.js

@@ -0,0 +1,159 @@
+import { createContext, useMemo, useEffect, useContext, useRef, useState, useCallback } from 'react';
+import { ComputeKit } from '@computekit/core';
+export { ComputeKit } from '@computekit/core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+var ComputeKitContext = createContext(null);
+function ComputeKitProvider({
+  options,
+  instance,
+  children
+}) {
+  const kit = useMemo(() => {
+    return instance ?? new ComputeKit(options);
+  }, [instance, options]);
+  useEffect(() => {
+    return () => {
+      if (!instance) {
+        kit.terminate();
+      }
+    };
+  }, [kit, instance]);
+  return /* @__PURE__ */ jsx(ComputeKitContext.Provider, { value: kit, children });
+}
+function useComputeKit() {
+  const kit = useContext(ComputeKitContext);
+  if (!kit) {
+    throw new Error("useComputeKit must be used within a ComputeKitProvider");
+  }
+  return kit;
+}
+function useCompute(functionName, options = {}) {
+  const kit = useComputeKit();
+  const abortControllerRef = useRef(null);
+  const [state, setState] = useState({
+    data: null,
+    loading: false,
+    error: null,
+    progress: null
+  });
+  const reset = useCallback(() => {
+    setState({
+      data: null,
+      loading: false,
+      error: null,
+      progress: null
+    });
+  }, []);
+  const cancel = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+  }, []);
+  const run = useCallback(
+    async (input, runOptions) => {
+      cancel();
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+      if (options.resetOnRun !== false) {
+        setState((prev) => ({
+          ...prev,
+          loading: true,
+          error: null,
+          progress: null
+        }));
+      } else {
+        setState((prev) => ({ ...prev, loading: true }));
+      }
+      try {
+        const result = await kit.run(functionName, input, {
+          ...options,
+          ...runOptions,
+          signal: runOptions?.signal ?? abortController.signal,
+          onProgress: (progress) => {
+            setState((prev) => ({ ...prev, progress }));
+            options.onProgress?.(progress);
+            runOptions?.onProgress?.(progress);
+          }
+        });
+        if (!abortController.signal.aborted) {
+          setState({
+            data: result,
+            loading: false,
+            error: null,
+            progress: null
+          });
+        }
+      } catch (err) {
+        if (!abortController.signal.aborted) {
+          setState({
+            data: null,
+            loading: false,
+            error: err instanceof Error ? err : new Error(String(err)),
+            progress: null
+          });
+        }
+      }
+    },
+    [kit, functionName, options, cancel]
+  );
+  useEffect(() => {
+    if (options.autoRun && options.initialInput !== void 0) {
+      run(options.initialInput);
+    }
+  }, []);
+  useEffect(() => {
+    return () => {
+      cancel();
+    };
+  }, [cancel]);
+  return {
+    ...state,
+    run,
+    reset,
+    cancel
+  };
+}
+function useComputeCallback(functionName, options) {
+  const kit = useComputeKit();
+  return useCallback(
+    (input, runOptions) => {
+      return kit.run(functionName, input, {
+        ...options,
+        ...runOptions
+      });
+    },
+    [kit, functionName, options]
+  );
+}
+function useComputeFunction(name, fn, options) {
+  const kit = useComputeKit();
+  useEffect(() => {
+    kit.register(name, fn);
+  }, [kit, name, fn]);
+  return useCompute(name, options);
+}
+function usePoolStats(refreshInterval = 0) {
+  const kit = useComputeKit();
+  const [stats, setStats] = useState(() => kit.getStats());
+  useEffect(() => {
+    if (refreshInterval <= 0) {
+      return;
+    }
+    const interval = setInterval(() => {
+      setStats(kit.getStats());
+    }, refreshInterval);
+    return () => clearInterval(interval);
+  }, [kit, refreshInterval]);
+  return stats;
+}
+function useWasmSupport() {
+  const kit = useComputeKit();
+  return kit.isWasmSupported();
+}
+
+export { ComputeKitProvider, useCompute, useComputeCallback, useComputeFunction, useComputeKit, usePoolStats, useWasmSupport };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * ComputeKit React Bindings\n * React hooks and utilities for ComputeKit\n */\n\nimport {\n  useState,\n  useEffect,\n  useCallback,\n  useRef,\n  useMemo,\n  createContext,\n  useContext,\n  type ReactNode,\n} from 'react';\n\nimport {\n  ComputeKit,\n  type ComputeKitOptions,\n  type ComputeOptions,\n  type ComputeProgress,\n  type PoolStats,\n} from '@computekit/core';\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst ComputeKitContext = createContext<ComputeKit | null>(null);\n\n/**\n * Props for ComputeKitProvider\n */\nexport interface ComputeKitProviderProps {\n  /** ComputeKit options */\n  options?: ComputeKitOptions;\n  /** Custom ComputeKit instance */\n  instance?: ComputeKit;\n  /** Children */\n  children: ReactNode;\n}\n\n/**\n * Provider component for ComputeKit\n *\n * @example\n * ```tsx\n * import { ComputeKitProvider } from '@computekit/react';\n *\n * function App() {\n *   return (\n *     <ComputeKitProvider options={{ maxWorkers: 4 }}>\n *       <MyApp />\n *     </ComputeKitProvider>\n *   );\n * }\n * ```\n */\nexport function ComputeKitProvider({\n  options,\n  instance,\n  children,\n}: ComputeKitProviderProps): JSX.Element {\n  const kit = useMemo(() => {\n    return instance ?? new ComputeKit(options);\n  }, [instance, options]);\n\n  useEffect(() => {\n    return () => {\n      // Only terminate if we created the instance\n      if (!instance) {\n        kit.terminate();\n      }\n    };\n  }, [kit, instance]);\n\n  return <ComputeKitContext.Provider value={kit}>{children}</ComputeKitContext.Provider>;\n}\n\n/**\n * Get the ComputeKit instance from context\n */\nexport function useComputeKit(): ComputeKit {\n  const kit = useContext(ComputeKitContext);\n  if (!kit) {\n    throw new Error('useComputeKit must be used within a ComputeKitProvider');\n  }\n  return kit;\n}\n\n// ============================================================================\n// useCompute Hook\n// ============================================================================\n\n/**\n * State returned by useCompute\n */\nexport interface UseComputeState<T> {\n  /** The computed result */\n  data: T | null;\n  /** Loading state */\n  loading: boolean;\n  /** Error if computation failed */\n  error: Error | null;\n  /** Progress information */\n  progress: ComputeProgress | null;\n}\n\n/**\n * Actions returned by useCompute\n */\nexport interface UseComputeActions<TInput> {\n  /** Execute the compute function */\n  run: (input: TInput, options?: ComputeOptions) => Promise<void>;\n  /** Reset the state */\n  reset: () => void;\n  /** Cancel ongoing computation */\n  cancel: () => void;\n}\n\n/**\n * Return type for useCompute\n */\nexport type UseComputeReturn<TInput, TOutput> = UseComputeState<TOutput> &\n  UseComputeActions<TInput>;\n\n/**\n * Options for useCompute hook\n */\nexport interface UseComputeOptions extends ComputeOptions {\n  /** Automatically run on mount with initial input */\n  autoRun?: boolean;\n  /** Initial input for autoRun */\n  initialInput?: unknown;\n  /** Reset state on new run */\n  resetOnRun?: boolean;\n}\n\n/**\n * Hook for running compute functions\n *\n * @example\n * ```tsx\n * function FibonacciCalculator() {\n *   const { data, loading, error, run } = useCompute<number, number>('fibonacci');\n *\n *   return (\n *     <div>\n *       <button onClick={() => run(50)} disabled={loading}>\n *         Calculate Fibonacci(50)\n *       </button>\n *       {loading && <p>Computing...</p>}\n *       {error && <p>Error: {error.message}</p>}\n *       {data !== null && <p>Result: {data}</p>}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useCompute<TInput = unknown, TOutput = unknown>(\n  functionName: string,\n  options: UseComputeOptions = {}\n): UseComputeReturn<TInput, TOutput> {\n  const kit = useComputeKit();\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const [state, setState] = useState<UseComputeState<TOutput>>({\n    data: null,\n    loading: false,\n    error: null,\n    progress: null,\n  });\n\n  const reset = useCallback(() => {\n    setState({\n      data: null,\n      loading: false,\n      error: null,\n      progress: null,\n    });\n  }, []);\n\n  const cancel = useCallback(() => {\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n      abortControllerRef.current = null;\n    }\n  }, []);\n\n  const run = useCallback(\n    async (input: TInput, runOptions?: ComputeOptions) => {\n      // Cancel any ongoing computation\n      cancel();\n\n      // Create new abort controller\n      const abortController = new AbortController();\n      abortControllerRef.current = abortController;\n\n      // Reset state if configured\n      if (options.resetOnRun !== false) {\n        setState((prev) => ({\n          ...prev,\n          loading: true,\n          error: null,\n          progress: null,\n        }));\n      } else {\n        setState((prev) => ({ ...prev, loading: true }));\n      }\n\n      try {\n        const result = await kit.run<TInput, TOutput>(functionName, input, {\n          ...options,\n          ...runOptions,\n          signal: runOptions?.signal ?? abortController.signal,\n          onProgress: (progress) => {\n            setState((prev) => ({ ...prev, progress }));\n            options.onProgress?.(progress);\n            runOptions?.onProgress?.(progress);\n          },\n        });\n\n        if (!abortController.signal.aborted) {\n          setState({\n            data: result,\n            loading: false,\n            error: null,\n            progress: null,\n          });\n        }\n      } catch (err) {\n        if (!abortController.signal.aborted) {\n          setState({\n            data: null,\n            loading: false,\n            error: err instanceof Error ? err : new Error(String(err)),\n            progress: null,\n          });\n        }\n      }\n    },\n    [kit, functionName, options, cancel]\n  );\n\n  // Auto-run on mount if configured\n  useEffect(() => {\n    if (options.autoRun && options.initialInput !== undefined) {\n      run(options.initialInput as TInput);\n    }\n    // Only run on mount\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      cancel();\n    };\n  }, [cancel]);\n\n  return {\n    ...state,\n    run,\n    reset,\n    cancel,\n  };\n}\n\n// ============================================================================\n// useComputeCallback Hook\n// ============================================================================\n\n/**\n * Hook that returns a memoized async function for compute operations\n *\n * @example\n * ```tsx\n * function Calculator() {\n *   const calculate = useComputeCallback<number[], number>('sum');\n *\n *   const handleClick = async () => {\n *     const result = await calculate([1, 2, 3, 4, 5]);\n *     console.log(result);\n *   };\n *\n *   return <button onClick={handleClick}>Calculate Sum</button>;\n * }\n * ```\n */\nexport function useComputeCallback<TInput = unknown, TOutput = unknown>(\n  functionName: string,\n  options?: ComputeOptions\n): (input: TInput, runOptions?: ComputeOptions) => Promise<TOutput> {\n  const kit = useComputeKit();\n\n  return useCallback(\n    (input: TInput, runOptions?: ComputeOptions) => {\n      return kit.run<TInput, TOutput>(functionName, input, {\n        ...options,\n        ...runOptions,\n      });\n    },\n    [kit, functionName, options]\n  );\n}\n\n// ============================================================================\n// useComputeFunction Hook\n// ============================================================================\n\n/**\n * Hook to register and use a compute function\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { run, loading, data } = useComputeFunction(\n *     'myFunction',\n *     (input: number) => input * 2\n *   );\n *\n *   return (\n *     <button onClick={() => run(5)} disabled={loading}>\n *       {loading ? 'Computing...' : `Result: ${data}`}\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useComputeFunction<TInput = unknown, TOutput = unknown>(\n  name: string,\n  fn: (input: TInput) => TOutput | Promise<TOutput>,\n  options?: UseComputeOptions\n): UseComputeReturn<TInput, TOutput> {\n  const kit = useComputeKit();\n\n  // Register function on mount\n  useEffect(() => {\n    kit.register(name, fn);\n  }, [kit, name, fn]);\n\n  return useCompute<TInput, TOutput>(name, options);\n}\n\n// ============================================================================\n// usePoolStats Hook\n// ============================================================================\n\n/**\n * Hook to get worker pool statistics\n *\n * @example\n * ```tsx\n * function PoolMonitor() {\n *   const stats = usePoolStats(1000); // Update every second\n *\n *   return (\n *     <div>\n *       <p>Active Workers: {stats.activeWorkers}</p>\n *       <p>Queue Length: {stats.queueLength}</p>\n *       <p>Tasks Completed: {stats.tasksCompleted}</p>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function usePoolStats(refreshInterval: number = 0): PoolStats {\n  const kit = useComputeKit();\n  const [stats, setStats] = useState<PoolStats>(() => kit.getStats());\n\n  useEffect(() => {\n    // For one-time fetch (refreshInterval <= 0), we rely on the initial state\n    if (refreshInterval <= 0) {\n      return;\n    }\n\n    const interval = setInterval(() => {\n      setStats(kit.getStats());\n    }, refreshInterval);\n\n    return () => clearInterval(interval);\n  }, [kit, refreshInterval]);\n\n  return stats;\n}\n\n// ============================================================================\n// useWasmSupport Hook\n// ============================================================================\n\n/**\n * Hook to check WASM support\n */\nexport function useWasmSupport(): boolean {\n  const kit = useComputeKit();\n  return kit.isWasmSupported();\n}\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport type {\n  ComputeKitOptions,\n  ComputeOptions,\n  ComputeProgress,\n  PoolStats,\n} from '@computekit/core';\n\nexport { ComputeKit } from '@computekit/core';\n"]}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@computekit/react",
+  "version": "0.1.0",
+  "description": "React bindings for ComputeKit - WASM + Worker toolkit",
+  "type": "module",
+  "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"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@computekit/core": "*"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "react": "^18.2.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^1.1.0"
+  },
+  "keywords": [
+    "react",
+    "wasm",
+    "webassembly",
+    "workers",
+    "hooks",
+    "compute",
+    "performance"
+  ],
+  "author": "Ghassen Lassoued <https://github.com/tapava>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tapava/compute-kit",
+    "directory": "packages/react"
+  },
+  "sideEffects": false
+}

package/src/index.tsx

@@ -0,0 +1,410 @@
+/**
+ * ComputeKit React Bindings
+ * React hooks and utilities for ComputeKit
+ */
+
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useMemo,
+  createContext,
+  useContext,
+  type ReactNode,
+} from 'react';
+
+import {
+  ComputeKit,
+  type ComputeKitOptions,
+  type ComputeOptions,
+  type ComputeProgress,
+  type PoolStats,
+} from '@computekit/core';
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const ComputeKitContext = createContext<ComputeKit | null>(null);
+
+/**
+ * Props for ComputeKitProvider
+ */
+export interface ComputeKitProviderProps {
+  /** ComputeKit options */
+  options?: ComputeKitOptions;
+  /** Custom ComputeKit instance */
+  instance?: ComputeKit;
+  /** Children */
+  children: ReactNode;
+}
+
+/**
+ * Provider component for ComputeKit
+ *
+ * @example
+ * ```tsx
+ * import { ComputeKitProvider } from '@computekit/react';
+ *
+ * function App() {
+ *   return (
+ *     <ComputeKitProvider options={{ maxWorkers: 4 }}>
+ *       <MyApp />
+ *     </ComputeKitProvider>
+ *   );
+ * }
+ * ```
+ */
+export function ComputeKitProvider({
+  options,
+  instance,
+  children,
+}: ComputeKitProviderProps): JSX.Element {
+  const kit = useMemo(() => {
+    return instance ?? new ComputeKit(options);
+  }, [instance, options]);
+
+  useEffect(() => {
+    return () => {
+      // Only terminate if we created the instance
+      if (!instance) {
+        kit.terminate();
+      }
+    };
+  }, [kit, instance]);
+
+  return <ComputeKitContext.Provider value={kit}>{children}</ComputeKitContext.Provider>;
+}
+
+/**
+ * Get the ComputeKit instance from context
+ */
+export function useComputeKit(): ComputeKit {
+  const kit = useContext(ComputeKitContext);
+  if (!kit) {
+    throw new Error('useComputeKit must be used within a ComputeKitProvider');
+  }
+  return kit;
+}
+
+// ============================================================================
+// useCompute Hook
+// ============================================================================
+
+/**
+ * State returned by useCompute
+ */
+export interface UseComputeState<T> {
+  /** The computed result */
+  data: T | null;
+  /** Loading state */
+  loading: boolean;
+  /** Error if computation failed */
+  error: Error | null;
+  /** Progress information */
+  progress: ComputeProgress | null;
+}
+
+/**
+ * Actions returned by useCompute
+ */
+export interface UseComputeActions<TInput> {
+  /** Execute the compute function */
+  run: (input: TInput, options?: ComputeOptions) => Promise<void>;
+  /** Reset the state */
+  reset: () => void;
+  /** Cancel ongoing computation */
+  cancel: () => void;
+}
+
+/**
+ * Return type for useCompute
+ */
+export type UseComputeReturn<TInput, TOutput> = UseComputeState<TOutput> &
+  UseComputeActions<TInput>;
+
+/**
+ * Options for useCompute hook
+ */
+export interface UseComputeOptions extends ComputeOptions {
+  /** Automatically run on mount with initial input */
+  autoRun?: boolean;
+  /** Initial input for autoRun */
+  initialInput?: unknown;
+  /** Reset state on new run */
+  resetOnRun?: boolean;
+}
+
+/**
+ * Hook for running compute functions
+ *
+ * @example
+ * ```tsx
+ * function FibonacciCalculator() {
+ *   const { data, loading, error, run } = useCompute<number, number>('fibonacci');
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => run(50)} disabled={loading}>
+ *         Calculate Fibonacci(50)
+ *       </button>
+ *       {loading && <p>Computing...</p>}
+ *       {error && <p>Error: {error.message}</p>}
+ *       {data !== null && <p>Result: {data}</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useCompute<TInput = unknown, TOutput = unknown>(
+  functionName: string,
+  options: UseComputeOptions = {}
+): UseComputeReturn<TInput, TOutput> {
+  const kit = useComputeKit();
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const [state, setState] = useState<UseComputeState<TOutput>>({
+    data: null,
+    loading: false,
+    error: null,
+    progress: null,
+  });
+
+  const reset = useCallback(() => {
+    setState({
+      data: null,
+      loading: false,
+      error: null,
+      progress: null,
+    });
+  }, []);
+
+  const cancel = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+  }, []);
+
+  const run = useCallback(
+    async (input: TInput, runOptions?: ComputeOptions) => {
+      // Cancel any ongoing computation
+      cancel();
+
+      // Create new abort controller
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
+      // Reset state if configured
+      if (options.resetOnRun !== false) {
+        setState((prev) => ({
+          ...prev,
+          loading: true,
+          error: null,
+          progress: null,
+        }));
+      } else {
+        setState((prev) => ({ ...prev, loading: true }));
+      }
+
+      try {
+        const result = await kit.run<TInput, TOutput>(functionName, input, {
+          ...options,
+          ...runOptions,
+          signal: runOptions?.signal ?? abortController.signal,
+          onProgress: (progress) => {
+            setState((prev) => ({ ...prev, progress }));
+            options.onProgress?.(progress);
+            runOptions?.onProgress?.(progress);
+          },
+        });
+
+        if (!abortController.signal.aborted) {
+          setState({
+            data: result,
+            loading: false,
+            error: null,
+            progress: null,
+          });
+        }
+      } catch (err) {
+        if (!abortController.signal.aborted) {
+          setState({
+            data: null,
+            loading: false,
+            error: err instanceof Error ? err : new Error(String(err)),
+            progress: null,
+          });
+        }
+      }
+    },
+    [kit, functionName, options, cancel]
+  );
+
+  // Auto-run on mount if configured
+  useEffect(() => {
+    if (options.autoRun && options.initialInput !== undefined) {
+      run(options.initialInput as TInput);
+    }
+    // Only run on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      cancel();
+    };
+  }, [cancel]);
+
+  return {
+    ...state,
+    run,
+    reset,
+    cancel,
+  };
+}
+
+// ============================================================================
+// useComputeCallback Hook
+// ============================================================================
+
+/**
+ * Hook that returns a memoized async function for compute operations
+ *
+ * @example
+ * ```tsx
+ * function Calculator() {
+ *   const calculate = useComputeCallback<number[], number>('sum');
+ *
+ *   const handleClick = async () => {
+ *     const result = await calculate([1, 2, 3, 4, 5]);
+ *     console.log(result);
+ *   };
+ *
+ *   return <button onClick={handleClick}>Calculate Sum</button>;
+ * }
+ * ```
+ */
+export function useComputeCallback<TInput = unknown, TOutput = unknown>(
+  functionName: string,
+  options?: ComputeOptions
+): (input: TInput, runOptions?: ComputeOptions) => Promise<TOutput> {
+  const kit = useComputeKit();
+
+  return useCallback(
+    (input: TInput, runOptions?: ComputeOptions) => {
+      return kit.run<TInput, TOutput>(functionName, input, {
+        ...options,
+        ...runOptions,
+      });
+    },
+    [kit, functionName, options]
+  );
+}
+
+// ============================================================================
+// useComputeFunction Hook
+// ============================================================================
+
+/**
+ * Hook to register and use a compute function
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { run, loading, data } = useComputeFunction(
+ *     'myFunction',
+ *     (input: number) => input * 2
+ *   );
+ *
+ *   return (
+ *     <button onClick={() => run(5)} disabled={loading}>
+ *       {loading ? 'Computing...' : `Result: ${data}`}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function useComputeFunction<TInput = unknown, TOutput = unknown>(
+  name: string,
+  fn: (input: TInput) => TOutput | Promise<TOutput>,
+  options?: UseComputeOptions
+): UseComputeReturn<TInput, TOutput> {
+  const kit = useComputeKit();
+
+  // Register function on mount
+  useEffect(() => {
+    kit.register(name, fn);
+  }, [kit, name, fn]);
+
+  return useCompute<TInput, TOutput>(name, options);
+}
+
+// ============================================================================
+// usePoolStats Hook
+// ============================================================================
+
+/**
+ * Hook to get worker pool statistics
+ *
+ * @example
+ * ```tsx
+ * function PoolMonitor() {
+ *   const stats = usePoolStats(1000); // Update every second
+ *
+ *   return (
+ *     <div>
+ *       <p>Active Workers: {stats.activeWorkers}</p>
+ *       <p>Queue Length: {stats.queueLength}</p>
+ *       <p>Tasks Completed: {stats.tasksCompleted}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function usePoolStats(refreshInterval: number = 0): PoolStats {
+  const kit = useComputeKit();
+  const [stats, setStats] = useState<PoolStats>(() => kit.getStats());
+
+  useEffect(() => {
+    // For one-time fetch (refreshInterval <= 0), we rely on the initial state
+    if (refreshInterval <= 0) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setStats(kit.getStats());
+    }, refreshInterval);
+
+    return () => clearInterval(interval);
+  }, [kit, refreshInterval]);
+
+  return stats;
+}
+
+// ============================================================================
+// useWasmSupport Hook
+// ============================================================================
+
+/**
+ * Hook to check WASM support
+ */
+export function useWasmSupport(): boolean {
+  const kit = useComputeKit();
+  return kit.isWasmSupported();
+}
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export type {
+  ComputeKitOptions,
+  ComputeOptions,
+  ComputeProgress,
+  PoolStats,
+} from '@computekit/core';
+
+export { ComputeKit } from '@computekit/core';