@pose-tracker/pose-estimation-web-react 0.1.0

package/LICENSE

@@ -0,0 +1,10 @@
+PoseTracker React Web SDK
+Copyright (c) 2024–2026 Movelytics SAS. All rights reserved.
+
+PROPRIETARY SOFTWARE LICENSE
+
+This package published under the @pose-tracker scope (the "Software") is
+proprietary to Movelytics SAS ("Licensor").
+
+See the LICENSE file in `@pose-tracker/pose-estimation` for the full terms.
+This React wrapper is governed by the same proprietary license.

package/README.md

@@ -0,0 +1,29 @@
+# `@pose-tracker/pose-estimation-web-react`
+
+Thin React wrapper over [`@pose-tracker/pose-estimation-web`](../pose-estimation-web/).
+Mirrors RN light naming: `PoseTrackerProvider`, `PoseCamera`, `usePoseTracker`.
+
+```bash
+npm install @pose-tracker/pose-estimation-web-react @pose-tracker/pose-estimation-web @tensorflow/tfjs
+```
+
+```tsx
+import {
+  PoseTrackerProvider,
+  PoseCamera,
+  usePoseTracker,
+} from '@pose-tracker/pose-estimation-web-react';
+
+function Screen() {
+  usePoseTracker({ onKeypoints: (e) => console.log(e.keypoints.length) });
+  return <PoseCamera style={{ height: 480 }} />;
+}
+
+export function App() {
+  return (
+    <PoseTrackerProvider options={{ model: 'movenet' }}>
+      <Screen />
+    </PoseTrackerProvider>
+  );
+}
+```

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,6 @@
+# Third-party notices
+
+This package wraps `@pose-tracker/pose-estimation`. See that package’s
+`THIRD_PARTY_NOTICES.md` for TensorFlow.js / MoveNet notices.
+
+React is a peer dependency (MIT) — not redistributed by this package.

package/dist/index.cjs

@@ -0,0 +1,336 @@
+'use strict';
+
+var poseEstimationWeb = require('@pose-tracker/pose-estimation-web');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/PoseTrackerProvider.tsx
+var PoseTrackerContext = react.createContext(null);
+function PoseTrackerProvider({
+  apiToken,
+  options,
+  autoStart = true,
+  autoPreload = false,
+  children
+}) {
+  const merged = react.useMemo(
+    () => ({ ...options, apiToken: apiToken ?? options?.apiToken }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      apiToken,
+      options?.model,
+      options?.modelUrl,
+      options?.facingMode,
+      options?.position,
+      options?.drawSkeleton,
+      options?.drawPlacementBox,
+      options?.loadingText,
+      options?.showWatermark,
+      options?.debugHud,
+      options?.baseUrl,
+      options?.features,
+      options?.skeletonUuid
+    ]
+  );
+  const clientRef = react.useRef(null);
+  if (!clientRef.current) {
+    clientRef.current = poseEstimationWeb.createPoseTracker(merged);
+  }
+  const client = clientRef.current;
+  const [status, setStatus] = react.useState(client.getStatus());
+  const [mode, setMode] = react.useState(client.getMode());
+  const [error, setError] = react.useState(null);
+  const [manifest, setManifest] = react.useState(client.getManifest());
+  const [exercises, setExercises] = react.useState(client.getAvailableExercises());
+  const hostRef = react.useRef(null);
+  react.useEffect(() => {
+    const offState = client.onStateChange(() => {
+      setStatus(client.getStatus());
+      setMode(client.getMode());
+      setError(client.getError());
+      setManifest(client.getManifest());
+      setExercises(client.getAvailableExercises());
+    });
+    if (autoPreload) {
+      client.preload({ coldStart: "basic" }).catch(() => {
+      });
+    }
+    return () => {
+      offState();
+    };
+  }, [client, autoPreload]);
+  react.useEffect(() => {
+    return () => {
+      void client.dispose();
+      clientRef.current = null;
+    };
+  }, [client]);
+  const preload = react.useCallback((opts) => client.preload(opts), [client]);
+  const configure = react.useCallback((token) => client.configure(token), [client]);
+  const startExercise = react.useCallback(
+    (id, exerciseOptions) => client.startExercise(id, exerciseOptions),
+    [client]
+  );
+  const stopExercise = react.useCallback(() => client.stopExercise(), [client]);
+  const setModel = react.useCallback(
+    (model, modelUrl) => client.setModel(model, modelUrl),
+    [client]
+  );
+  const getAvailableExercises = react.useCallback(() => client.getAvailableExercises(), [client]);
+  const getAvailableCustomExercises = react.useCallback(
+    () => client.getAvailableCustomExercises(),
+    [client]
+  );
+  const addEventListener = react.useCallback(
+    (listener) => client.addEventListener(listener),
+    [client]
+  );
+  const addMessageListener = react.useCallback(
+    (listener) => client.addMessageListener(listener),
+    [client]
+  );
+  const _registerMountHost = react.useCallback((el) => {
+    hostRef.current = el;
+  }, []);
+  const value = react.useMemo(
+    () => ({
+      client,
+      status,
+      mode,
+      error,
+      manifest,
+      exercises,
+      preload,
+      warmup: preload,
+      configure,
+      startExercise,
+      stopExercise,
+      setModel,
+      getAvailableExercises,
+      getAvailableCustomExercises,
+      addEventListener,
+      addMessageListener,
+      _registerMountHost,
+      options: merged,
+      autoStart,
+      autoPreload
+    }),
+    [
+      client,
+      status,
+      mode,
+      error,
+      manifest,
+      exercises,
+      preload,
+      configure,
+      startExercise,
+      stopExercise,
+      setModel,
+      getAvailableExercises,
+      getAvailableCustomExercises,
+      addEventListener,
+      addMessageListener,
+      _registerMountHost,
+      merged,
+      autoStart,
+      autoPreload
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(PoseTrackerContext.Provider, { value, children });
+}
+function usePoseTrackerContext() {
+  const ctx = react.useContext(PoseTrackerContext);
+  if (!ctx) {
+    throw new Error("usePoseTracker must be used within PoseTrackerProvider");
+  }
+  return ctx;
+}
+function PoseCamera({
+  style,
+  className,
+  position,
+  drawSkeleton,
+  drawPlacementBox,
+  placementPaddingPercent,
+  coldStart,
+  loadingText,
+  showWatermark,
+  skeletonDef,
+  skeletonUuid,
+  debugHud,
+  autoStart: autoStartProp
+}) {
+  const { client, autoStart: providerAutoStart, _registerMountHost } = usePoseTrackerContext();
+  const hostRef = react.useRef(null);
+  const startedRef = react.useRef(false);
+  react.useEffect(() => {
+    const el = hostRef.current;
+    _registerMountHost(el);
+    if (!el) return;
+    client.updateOptions({
+      ...position ? { position } : {},
+      ...typeof drawSkeleton === "boolean" ? { drawSkeleton } : {},
+      ...typeof drawPlacementBox === "boolean" ? { drawPlacementBox } : {},
+      ...typeof placementPaddingPercent === "number" ? { placementPaddingPercent } : {},
+      ...coldStart ? { coldStart } : {},
+      ...loadingText ? { loadingText } : {},
+      ...typeof showWatermark === "boolean" ? { showWatermark } : {},
+      ...skeletonDef !== void 0 ? { skeletonDef } : {},
+      ...skeletonUuid !== void 0 ? { skeletonUuid } : {},
+      ...typeof debugHud === "boolean" ? { debugHud } : {}
+    });
+    client.mount(el);
+    const shouldStart = autoStartProp ?? providerAutoStart;
+    if (shouldStart && !startedRef.current) {
+      startedRef.current = true;
+      client.start().catch(() => {
+      });
+    }
+    return () => {
+      client.stop();
+      startedRef.current = false;
+      _registerMountHost(null);
+    };
+  }, [client]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: hostRef,
+      className,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: 480,
+        background: "#000",
+        ...style
+      }
+    }
+  );
+}
+function usePoseTracker(callbacks = {}) {
+  const context = usePoseTrackerContext();
+  const callbacksRef = react.useRef(callbacks);
+  callbacksRef.current = callbacks;
+  react.useEffect(() => {
+    const offEvents = context.addEventListener((event) => {
+      const cb = callbacksRef.current;
+      switch (event.type) {
+        case "initialization":
+          cb.onInitialization?.(event);
+          break;
+        case "error":
+          cb.onError?.(event);
+          break;
+        case "warning":
+          cb.onWarning?.(event);
+          break;
+        case "keypoints":
+          cb.onKeypoints?.(event);
+          break;
+        case "stats":
+          cb.onStats?.(event);
+          break;
+        case "angles":
+          cb.onAngles?.(event);
+          break;
+        case "counter":
+          cb.onCounter?.(event);
+          break;
+        case "posture":
+          cb.onPosture?.(event);
+          break;
+        case "progression":
+          cb.onProgression?.(event);
+          break;
+        case "recommendations":
+          cb.onRecommendations?.(event);
+          break;
+        case "form_score":
+          cb.onFormScore?.(event);
+          break;
+        case "exercise_summary":
+          cb.onExerciseSummary?.(event);
+          break;
+        case "jump_calibration":
+          cb.onJumpCalibration?.(event);
+          break;
+        case "jump_started":
+          cb.onJumpStarted?.(event);
+          break;
+        case "jump_height":
+          cb.onJumpHeight?.(event);
+          break;
+        case "jump_discarded":
+          cb.onJumpDiscarded?.(event);
+          break;
+        case "jump_result":
+          cb.onJumpResult?.(event);
+          break;
+        case "jump_summary":
+          cb.onJumpSummary?.(event);
+          break;
+        case "quality_changed":
+          cb.onQualityChanged?.(event);
+          break;
+        case "performance_warning":
+          cb.onPerformanceWarning?.(event);
+          break;
+        case "runtime_download_progress":
+          cb.onRuntimeDownloadProgress?.(event);
+          break;
+      }
+    });
+    const offMessages = context.addMessageListener((message) => {
+      callbacksRef.current.onMessage?.(message);
+    });
+    return () => {
+      offEvents();
+      offMessages();
+    };
+  }, [context]);
+  return context;
+}
+
+Object.defineProperty(exports, "COCO_KEYPOINT_NAMES", {
+  enumerable: true,
+  get: function () { return poseEstimationWeb.COCO_KEYPOINT_NAMES; }
+});
+Object.defineProperty(exports, "DEFAULT_LOADING_TEXT", {
+  enumerable: true,
+  get: function () { return poseEstimationWeb.DEFAULT_LOADING_TEXT; }
+});
+Object.defineProperty(exports, "DEFAULT_MOVENET_LIGHTNING_URL", {
+  enumerable: true,
+  get: function () { return poseEstimationWeb.DEFAULT_MOVENET_LIGHTNING_URL; }
+});
+Object.defineProperty(exports, "PoseTrackerClient", {
+  enumerable: true,
+  get: function () { return poseEstimationWeb.PoseTrackerClient; }
+});
+Object.defineProperty(exports, "SDK_NAME", {
+  enumerable: true,
+  get: function () { return poseEstimationWeb.SDK_NAME; }
+});
+Object.defineProperty(exports, "SDK_VERSION", {
+  enumerable: true,
+  get: function () { return poseEstimationWeb.SDK_VERSION; }
+});
+Object.defineProperty(exports, "createPoseTracker", {
+  enumerable: true,
+  get: function () { return poseEstimationWeb.createPoseTracker; }
+});
+Object.defineProperty(exports, "resolvePoseModel", {
+  enumerable: true,
+  get: function () { return poseEstimationWeb.resolvePoseModel; }
+});
+Object.defineProperty(exports, "shouldShowWatermark", {
+  enumerable: true,
+  get: function () { return poseEstimationWeb.shouldShowWatermark; }
+});
+exports.PoseCamera = PoseCamera;
+exports.PoseTrackerProvider = PoseTrackerProvider;
+exports.usePoseTracker = usePoseTracker;
+exports.usePoseTrackerContext = usePoseTrackerContext;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.d.cts

@@ -0,0 +1,88 @@
+import { PoseTrackerClient, PoseTrackerStatus, PoseTrackerMode, ErrorEvent, SdkManifest, ExerciseConfig, PreloadOptions, StartExerciseOptions, PoseTrackerClientOptions, PoseTrackerEventListener, ClassicNativeMessage, SkeletonDefinition, PoseTrackerCallbacks } from '@pose-tracker/pose-estimation-web';
+export { COCO_KEYPOINT_NAMES, ColdStartMode, CounterEvent, DEFAULT_LOADING_TEXT, DEFAULT_MOVENET_LIGHTNING_URL, ErrorEvent, ExerciseConfig, InitializationEvent, Keypoint, KeypointsEvent, Pose, PoseModelAlias, PoseTracker, PoseTrackerCallbacks, PoseTrackerClient, PoseTrackerClientOptions, PoseTrackerOptions, PostureEvent, PreloadOptions, SDK_NAME, SDK_VERSION, SdkManifest, StartExerciseOptions, createPoseTracker, resolvePoseModel, shouldShowWatermark } from '@pose-tracker/pose-estimation-web';
+import React from 'react';
+
+/**
+ * React layer mirroring RN light: Provider owns PoseTrackerClient;
+ * PoseCamera mounts DOM; usePoseTracker wires typed callbacks.
+ */
+
+interface PoseTrackerContextValue {
+    client: PoseTrackerClient;
+    status: PoseTrackerStatus;
+    mode: PoseTrackerMode;
+    error: ErrorEvent | null;
+    manifest: SdkManifest | null;
+    exercises: ExerciseConfig[];
+    preload: (options?: PreloadOptions) => Promise<void>;
+    warmup: (options?: PreloadOptions) => Promise<void>;
+    configure: (apiToken?: string) => Promise<boolean>;
+    startExercise: (exerciseId: string, options?: StartExerciseOptions) => void;
+    stopExercise: () => void;
+    setModel: (model?: PoseTrackerClientOptions['model'], modelUrl?: string) => Promise<void>;
+    getAvailableExercises: () => ExerciseConfig[];
+    getAvailableCustomExercises: () => ReturnType<PoseTrackerClient['getAvailableCustomExercises']>;
+    addEventListener: (listener: PoseTrackerEventListener) => () => void;
+    addMessageListener: (listener: (message: ClassicNativeMessage) => void) => () => void;
+    /** Internal: used by PoseCamera to attach the DOM shell. */
+    _registerMountHost: (el: HTMLElement | null) => void;
+    options: PoseTrackerClientOptions;
+    autoStart: boolean;
+    autoPreload: boolean;
+}
+interface PoseTrackerProviderProps {
+    apiToken?: string;
+    options?: PoseTrackerClientOptions;
+    /**
+     * When true, PoseCamera calls `start()` after mount (full cold start).
+     * Default true for web camera screens.
+     */
+    autoStart?: boolean;
+    /** Warm model on provider mount without camera (coldStart basic). Default false. */
+    autoPreload?: boolean;
+    children: React.ReactNode;
+}
+declare function PoseTrackerProvider({ apiToken, options, autoStart, autoPreload, children, }: PoseTrackerProviderProps): React.JSX.Element;
+declare function usePoseTrackerContext(): PoseTrackerContextValue;
+
+interface PoseCameraProps {
+    /** CSS style for the host container (video/canvas fill 100%). */
+    style?: React.CSSProperties;
+    className?: string;
+    /** 'front' | 'back' — mapped to getUserMedia facingMode. Default front. */
+    position?: 'front' | 'back';
+    /** Draw navy/gold skeleton overlay. Default true. */
+    drawSkeleton?: boolean;
+    /** Placement guide while posture.ready === false. Default true. */
+    drawPlacementBox?: boolean;
+    placementPaddingPercent?: number;
+    /**
+     * Cold-start: `full` (default on camera screens) opens getUserMedia;
+     * `basic` warms the model only (use with autoStart=false + preload).
+     */
+    coldStart?: 'basic' | 'full';
+    /** Boot overlay copy. Default "AI Loading". */
+    loadingText?: string;
+    /** Force watermark; omit to derive from plan. */
+    showWatermark?: boolean;
+    skeletonDef?: SkeletonDefinition | null;
+    skeletonUuid?: string | null;
+    /** Show technical FPS HUD. Default false. */
+    debugHud?: boolean;
+    /**
+     * Start camera + inference when mounted. Default: provider `autoStart` (true).
+     */
+    autoStart?: boolean;
+}
+/**
+ * Browser camera + canvas overlay (web equivalent of RN `WebViewPoseView`).
+ * Must be rendered under {@link PoseTrackerProvider}.
+ */
+declare function PoseCamera({ style, className, position, drawSkeleton, drawPlacementBox, placementPaddingPercent, coldStart, loadingText, showWatermark, skeletonDef, skeletonUuid, debugHud, autoStart: autoStartProp, }: PoseCameraProps): React.JSX.Element;
+
+/**
+ * Access the PoseTracker pipeline and subscribe to typed events (RN light parity).
+ */
+declare function usePoseTracker(callbacks?: PoseTrackerCallbacks): PoseTrackerContextValue;
+
+export { PoseCamera, type PoseCameraProps, type PoseTrackerContextValue, PoseTrackerProvider, type PoseTrackerProviderProps, usePoseTracker, usePoseTrackerContext };

package/dist/index.d.ts

@@ -0,0 +1,88 @@
+import { PoseTrackerClient, PoseTrackerStatus, PoseTrackerMode, ErrorEvent, SdkManifest, ExerciseConfig, PreloadOptions, StartExerciseOptions, PoseTrackerClientOptions, PoseTrackerEventListener, ClassicNativeMessage, SkeletonDefinition, PoseTrackerCallbacks } from '@pose-tracker/pose-estimation-web';
+export { COCO_KEYPOINT_NAMES, ColdStartMode, CounterEvent, DEFAULT_LOADING_TEXT, DEFAULT_MOVENET_LIGHTNING_URL, ErrorEvent, ExerciseConfig, InitializationEvent, Keypoint, KeypointsEvent, Pose, PoseModelAlias, PoseTracker, PoseTrackerCallbacks, PoseTrackerClient, PoseTrackerClientOptions, PoseTrackerOptions, PostureEvent, PreloadOptions, SDK_NAME, SDK_VERSION, SdkManifest, StartExerciseOptions, createPoseTracker, resolvePoseModel, shouldShowWatermark } from '@pose-tracker/pose-estimation-web';
+import React from 'react';
+
+/**
+ * React layer mirroring RN light: Provider owns PoseTrackerClient;
+ * PoseCamera mounts DOM; usePoseTracker wires typed callbacks.
+ */
+
+interface PoseTrackerContextValue {
+    client: PoseTrackerClient;
+    status: PoseTrackerStatus;
+    mode: PoseTrackerMode;
+    error: ErrorEvent | null;
+    manifest: SdkManifest | null;
+    exercises: ExerciseConfig[];
+    preload: (options?: PreloadOptions) => Promise<void>;
+    warmup: (options?: PreloadOptions) => Promise<void>;
+    configure: (apiToken?: string) => Promise<boolean>;
+    startExercise: (exerciseId: string, options?: StartExerciseOptions) => void;
+    stopExercise: () => void;
+    setModel: (model?: PoseTrackerClientOptions['model'], modelUrl?: string) => Promise<void>;
+    getAvailableExercises: () => ExerciseConfig[];
+    getAvailableCustomExercises: () => ReturnType<PoseTrackerClient['getAvailableCustomExercises']>;
+    addEventListener: (listener: PoseTrackerEventListener) => () => void;
+    addMessageListener: (listener: (message: ClassicNativeMessage) => void) => () => void;
+    /** Internal: used by PoseCamera to attach the DOM shell. */
+    _registerMountHost: (el: HTMLElement | null) => void;
+    options: PoseTrackerClientOptions;
+    autoStart: boolean;
+    autoPreload: boolean;
+}
+interface PoseTrackerProviderProps {
+    apiToken?: string;
+    options?: PoseTrackerClientOptions;
+    /**
+     * When true, PoseCamera calls `start()` after mount (full cold start).
+     * Default true for web camera screens.
+     */
+    autoStart?: boolean;
+    /** Warm model on provider mount without camera (coldStart basic). Default false. */
+    autoPreload?: boolean;
+    children: React.ReactNode;
+}
+declare function PoseTrackerProvider({ apiToken, options, autoStart, autoPreload, children, }: PoseTrackerProviderProps): React.JSX.Element;
+declare function usePoseTrackerContext(): PoseTrackerContextValue;
+
+interface PoseCameraProps {
+    /** CSS style for the host container (video/canvas fill 100%). */
+    style?: React.CSSProperties;
+    className?: string;
+    /** 'front' | 'back' — mapped to getUserMedia facingMode. Default front. */
+    position?: 'front' | 'back';
+    /** Draw navy/gold skeleton overlay. Default true. */
+    drawSkeleton?: boolean;
+    /** Placement guide while posture.ready === false. Default true. */
+    drawPlacementBox?: boolean;
+    placementPaddingPercent?: number;
+    /**
+     * Cold-start: `full` (default on camera screens) opens getUserMedia;
+     * `basic` warms the model only (use with autoStart=false + preload).
+     */
+    coldStart?: 'basic' | 'full';
+    /** Boot overlay copy. Default "AI Loading". */
+    loadingText?: string;
+    /** Force watermark; omit to derive from plan. */
+    showWatermark?: boolean;
+    skeletonDef?: SkeletonDefinition | null;
+    skeletonUuid?: string | null;
+    /** Show technical FPS HUD. Default false. */
+    debugHud?: boolean;
+    /**
+     * Start camera + inference when mounted. Default: provider `autoStart` (true).
+     */
+    autoStart?: boolean;
+}
+/**
+ * Browser camera + canvas overlay (web equivalent of RN `WebViewPoseView`).
+ * Must be rendered under {@link PoseTrackerProvider}.
+ */
+declare function PoseCamera({ style, className, position, drawSkeleton, drawPlacementBox, placementPaddingPercent, coldStart, loadingText, showWatermark, skeletonDef, skeletonUuid, debugHud, autoStart: autoStartProp, }: PoseCameraProps): React.JSX.Element;
+
+/**
+ * Access the PoseTracker pipeline and subscribe to typed events (RN light parity).
+ */
+declare function usePoseTracker(callbacks?: PoseTrackerCallbacks): PoseTrackerContextValue;
+
+export { PoseCamera, type PoseCameraProps, type PoseTrackerContextValue, PoseTrackerProvider, type PoseTrackerProviderProps, usePoseTracker, usePoseTrackerContext };

package/dist/index.js

@@ -0,0 +1,296 @@
+import { createPoseTracker } from '@pose-tracker/pose-estimation-web';
+export { COCO_KEYPOINT_NAMES, DEFAULT_LOADING_TEXT, DEFAULT_MOVENET_LIGHTNING_URL, PoseTrackerClient, SDK_NAME, SDK_VERSION, createPoseTracker, resolvePoseModel, shouldShowWatermark } from '@pose-tracker/pose-estimation-web';
+import { createContext, useMemo, useRef, useState, useEffect, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/PoseTrackerProvider.tsx
+var PoseTrackerContext = createContext(null);
+function PoseTrackerProvider({
+  apiToken,
+  options,
+  autoStart = true,
+  autoPreload = false,
+  children
+}) {
+  const merged = useMemo(
+    () => ({ ...options, apiToken: apiToken ?? options?.apiToken }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      apiToken,
+      options?.model,
+      options?.modelUrl,
+      options?.facingMode,
+      options?.position,
+      options?.drawSkeleton,
+      options?.drawPlacementBox,
+      options?.loadingText,
+      options?.showWatermark,
+      options?.debugHud,
+      options?.baseUrl,
+      options?.features,
+      options?.skeletonUuid
+    ]
+  );
+  const clientRef = useRef(null);
+  if (!clientRef.current) {
+    clientRef.current = createPoseTracker(merged);
+  }
+  const client = clientRef.current;
+  const [status, setStatus] = useState(client.getStatus());
+  const [mode, setMode] = useState(client.getMode());
+  const [error, setError] = useState(null);
+  const [manifest, setManifest] = useState(client.getManifest());
+  const [exercises, setExercises] = useState(client.getAvailableExercises());
+  const hostRef = useRef(null);
+  useEffect(() => {
+    const offState = client.onStateChange(() => {
+      setStatus(client.getStatus());
+      setMode(client.getMode());
+      setError(client.getError());
+      setManifest(client.getManifest());
+      setExercises(client.getAvailableExercises());
+    });
+    if (autoPreload) {
+      client.preload({ coldStart: "basic" }).catch(() => {
+      });
+    }
+    return () => {
+      offState();
+    };
+  }, [client, autoPreload]);
+  useEffect(() => {
+    return () => {
+      void client.dispose();
+      clientRef.current = null;
+    };
+  }, [client]);
+  const preload = useCallback((opts) => client.preload(opts), [client]);
+  const configure = useCallback((token) => client.configure(token), [client]);
+  const startExercise = useCallback(
+    (id, exerciseOptions) => client.startExercise(id, exerciseOptions),
+    [client]
+  );
+  const stopExercise = useCallback(() => client.stopExercise(), [client]);
+  const setModel = useCallback(
+    (model, modelUrl) => client.setModel(model, modelUrl),
+    [client]
+  );
+  const getAvailableExercises = useCallback(() => client.getAvailableExercises(), [client]);
+  const getAvailableCustomExercises = useCallback(
+    () => client.getAvailableCustomExercises(),
+    [client]
+  );
+  const addEventListener = useCallback(
+    (listener) => client.addEventListener(listener),
+    [client]
+  );
+  const addMessageListener = useCallback(
+    (listener) => client.addMessageListener(listener),
+    [client]
+  );
+  const _registerMountHost = useCallback((el) => {
+    hostRef.current = el;
+  }, []);
+  const value = useMemo(
+    () => ({
+      client,
+      status,
+      mode,
+      error,
+      manifest,
+      exercises,
+      preload,
+      warmup: preload,
+      configure,
+      startExercise,
+      stopExercise,
+      setModel,
+      getAvailableExercises,
+      getAvailableCustomExercises,
+      addEventListener,
+      addMessageListener,
+      _registerMountHost,
+      options: merged,
+      autoStart,
+      autoPreload
+    }),
+    [
+      client,
+      status,
+      mode,
+      error,
+      manifest,
+      exercises,
+      preload,
+      configure,
+      startExercise,
+      stopExercise,
+      setModel,
+      getAvailableExercises,
+      getAvailableCustomExercises,
+      addEventListener,
+      addMessageListener,
+      _registerMountHost,
+      merged,
+      autoStart,
+      autoPreload
+    ]
+  );
+  return /* @__PURE__ */ jsx(PoseTrackerContext.Provider, { value, children });
+}
+function usePoseTrackerContext() {
+  const ctx = useContext(PoseTrackerContext);
+  if (!ctx) {
+    throw new Error("usePoseTracker must be used within PoseTrackerProvider");
+  }
+  return ctx;
+}
+function PoseCamera({
+  style,
+  className,
+  position,
+  drawSkeleton,
+  drawPlacementBox,
+  placementPaddingPercent,
+  coldStart,
+  loadingText,
+  showWatermark,
+  skeletonDef,
+  skeletonUuid,
+  debugHud,
+  autoStart: autoStartProp
+}) {
+  const { client, autoStart: providerAutoStart, _registerMountHost } = usePoseTrackerContext();
+  const hostRef = useRef(null);
+  const startedRef = useRef(false);
+  useEffect(() => {
+    const el = hostRef.current;
+    _registerMountHost(el);
+    if (!el) return;
+    client.updateOptions({
+      ...position ? { position } : {},
+      ...typeof drawSkeleton === "boolean" ? { drawSkeleton } : {},
+      ...typeof drawPlacementBox === "boolean" ? { drawPlacementBox } : {},
+      ...typeof placementPaddingPercent === "number" ? { placementPaddingPercent } : {},
+      ...coldStart ? { coldStart } : {},
+      ...loadingText ? { loadingText } : {},
+      ...typeof showWatermark === "boolean" ? { showWatermark } : {},
+      ...skeletonDef !== void 0 ? { skeletonDef } : {},
+      ...skeletonUuid !== void 0 ? { skeletonUuid } : {},
+      ...typeof debugHud === "boolean" ? { debugHud } : {}
+    });
+    client.mount(el);
+    const shouldStart = autoStartProp ?? providerAutoStart;
+    if (shouldStart && !startedRef.current) {
+      startedRef.current = true;
+      client.start().catch(() => {
+      });
+    }
+    return () => {
+      client.stop();
+      startedRef.current = false;
+      _registerMountHost(null);
+    };
+  }, [client]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: hostRef,
+      className,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: 480,
+        background: "#000",
+        ...style
+      }
+    }
+  );
+}
+function usePoseTracker(callbacks = {}) {
+  const context = usePoseTrackerContext();
+  const callbacksRef = useRef(callbacks);
+  callbacksRef.current = callbacks;
+  useEffect(() => {
+    const offEvents = context.addEventListener((event) => {
+      const cb = callbacksRef.current;
+      switch (event.type) {
+        case "initialization":
+          cb.onInitialization?.(event);
+          break;
+        case "error":
+          cb.onError?.(event);
+          break;
+        case "warning":
+          cb.onWarning?.(event);
+          break;
+        case "keypoints":
+          cb.onKeypoints?.(event);
+          break;
+        case "stats":
+          cb.onStats?.(event);
+          break;
+        case "angles":
+          cb.onAngles?.(event);
+          break;
+        case "counter":
+          cb.onCounter?.(event);
+          break;
+        case "posture":
+          cb.onPosture?.(event);
+          break;
+        case "progression":
+          cb.onProgression?.(event);
+          break;
+        case "recommendations":
+          cb.onRecommendations?.(event);
+          break;
+        case "form_score":
+          cb.onFormScore?.(event);
+          break;
+        case "exercise_summary":
+          cb.onExerciseSummary?.(event);
+          break;
+        case "jump_calibration":
+          cb.onJumpCalibration?.(event);
+          break;
+        case "jump_started":
+          cb.onJumpStarted?.(event);
+          break;
+        case "jump_height":
+          cb.onJumpHeight?.(event);
+          break;
+        case "jump_discarded":
+          cb.onJumpDiscarded?.(event);
+          break;
+        case "jump_result":
+          cb.onJumpResult?.(event);
+          break;
+        case "jump_summary":
+          cb.onJumpSummary?.(event);
+          break;
+        case "quality_changed":
+          cb.onQualityChanged?.(event);
+          break;
+        case "performance_warning":
+          cb.onPerformanceWarning?.(event);
+          break;
+        case "runtime_download_progress":
+          cb.onRuntimeDownloadProgress?.(event);
+          break;
+      }
+    });
+    const offMessages = context.addMessageListener((message) => {
+      callbacksRef.current.onMessage?.(message);
+    });
+    return () => {
+      offEvents();
+      offMessages();
+    };
+  }, [context]);
+  return context;
+}
+
+export { PoseCamera, PoseTrackerProvider, usePoseTracker, usePoseTrackerContext };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@pose-tracker/pose-estimation-web-react",
+  "version": "0.1.0",
+  "private": false,
+  "description": "PoseTracker React (web) pose estimation — thin wrapper over @pose-tracker/pose-estimation-web. Browser camera + canvas, not React Native.",
+  "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/index.js",
+    "dist/index.cjs",
+    "dist/index.d.ts",
+    "dist/index.d.cts",
+    "README.md",
+    "LICENSE",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "prepack": "npm run build",
+    "pack:dry": "npm pack --dry-run"
+  },
+  "keywords": [
+    "pose-estimation",
+    "react",
+    "movenet",
+    "tensorflow.js",
+    "posetracker",
+    "webcam",
+    "web",
+    "sdk"
+  ],
+  "author": {
+    "name": "Movelytics SAS",
+    "email": "hello@posetracker.com",
+    "url": "https://www.posetracker.com"
+  },
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://www.posetracker.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Movelytics/pose-estimation-web-react.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pose-tracker/pose-estimation-web": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "@tensorflow/tfjs": "^4.22.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.4.0"
+  }
+}