@pose-tracker/react-native-pose-estimation-light 0.3.3 → 0.3.5

package/README.md

@@ -36,10 +36,10 @@ package stays tiny.
 download at session start.  
 **Choose light** when app install / OTA size matters and devices are online.
 
-Full comparison: [LIGHT_SDK.md](../../docs/LIGHT_SDK.md).
+Full comparison: [LIGHT_SDK.md](docs/LIGHT_SDK.md).
 
 **Agents:** shared UX/API/bugfixes → mirror to offline (or ask first). See
-[`DUAL_SDK_CHANGES.md`](../../docs/DUAL_SDK_CHANGES.md).
+[`DUAL_SDK_CHANGES.md`](docs/DUAL_SDK_CHANGES.md).
 
 ## Install
 
@@ -54,10 +54,10 @@ npx expo install react-native-webview expo-camera
 > **Offline sibling:** [`@pose-tracker/react-native-pose-estimation`](https://www.npmjs.com/package/@pose-tracker/react-native-pose-estimation)
 
 **Required:** host app must declare camera permissions — see
-[PERMISSIONS.md](../../docs/PERMISSIONS.md).
+[PERMISSIONS.md](docs/PERMISSIONS.md).
 
 **Media inputs (v0.2):** camera (default), uploaded video, still image — host
-picks the file. See [MEDIA_SOURCES.md](../../docs/MEDIA_SOURCES.md) and
+picks the file. See [MEDIA_SOURCES.md](docs/MEDIA_SOURCES.md) and
 https://docs.posetracker.com/media-sources.
 
 ## Quick start (keypoints — needs network, no API key)
@@ -144,11 +144,11 @@ Same contract as the offline SDK / web tracking URL:
 
 | Doc | Topic |
 |-----|--------|
-| [LIGHT_SDK.md](../../docs/LIGHT_SDK.md) | Offline vs light, sizes, model URL |
-| [PERMISSIONS.md](../../docs/PERMISSIONS.md) | Camera permission setup (required) |
-| [PRELOAD.md](../../docs/PRELOAD.md) | Preload / warm-up / lifecycle |
-| [FEATURES.md](../../docs/FEATURES.md) | Plan gating, watermark, loading text |
-| [EVENTS.md](../../docs/EVENTS.md) | Typed events + classic `onMessage` |
+| [LIGHT_SDK.md](docs/LIGHT_SDK.md) | Offline vs light, sizes, model URL |
+| [PERMISSIONS.md](docs/PERMISSIONS.md) | Camera permission setup (required) |
+| [PRELOAD.md](docs/PRELOAD.md) | Preload / warm-up / lifecycle |
+| [FEATURES.md](docs/FEATURES.md) | Plan gating, watermark, loading text |
+| [EVENTS.md](docs/EVENTS.md) | Typed events + classic `onMessage` |
 
 ## FAQ
 

package/lib/camera/WebViewPoseView.d.ts

@@ -28,8 +28,9 @@ export interface WebViewPoseViewProps {
      */
     drawSkeleton?: boolean;
     /**
-     * Show a placement guide box (WebView `postureBox` parity) while the
+     * Show the placement zone (iframe `placementOverlay` parity) while the
      * active exercise reports `posture.ready === false`. Default `true`.
+     * Gray masks sit outside the box; the frame is the PoseTracker stroke.
      * Drawn as an RN sibling overlay (reliable on iOS; Android WebView may
      * composite above it — hosts can also render from `onPosture`).
      */

package/lib/camera/WebViewPoseView.js

@@ -316,26 +316,30 @@ function WebViewPoseView(props) {
                         type: 'error',
                         message: e.nativeEvent.description ?? 'WebView error',
                     }));
-                } }), showPlacementBox ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: [
+                } }), showPlacementBox ? ((0, jsx_runtime_1.jsx)(PlacementZone, { paddingPercent: placementPaddingPercent })) : null, props.children] }));
+}
+/** Iframe V4 placement: outside dim `#000` at 0.55, demo frame `#4DD21D`. */
+const PLACEMENT_DIM = 'rgba(0,0,0,0.55)';
+const PLACEMENT_STROKE = '#4DD21D';
+function PlacementZone({ paddingPercent }) {
+    const pad = `${paddingPercent}%`;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFill, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.placementDim, { top: 0, left: 0, right: 0, height: pad }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.placementDim, { bottom: 0, left: 0, right: 0, height: pad }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.placementDim, { top: pad, bottom: pad, left: 0, width: pad }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.placementDim, { top: pad, bottom: pad, right: 0, width: pad }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                     styles.placementBox,
-                    {
-                        top: `${placementPaddingPercent}%`,
-                        bottom: `${placementPaddingPercent}%`,
-                        left: `${placementPaddingPercent}%`,
-                        right: `${placementPaddingPercent}%`,
-                    },
-                ] })) : null, props.children] }));
+                    { top: pad, bottom: pad, left: pad, right: pad },
+                ] })] }));
 }
 const styles = react_native_1.StyleSheet.create({
     fill: { flex: 1, backgroundColor: '#000' },
     center: { alignItems: 'center', justifyContent: 'center', padding: 16 },
     error: { color: '#FE8370', textAlign: 'center', fontSize: 13 },
-    /** Front drawPostureBox stroke `#FE8370`. */
+    placementDim: {
+        position: 'absolute',
+        backgroundColor: PLACEMENT_DIM,
+    },
     placementBox: {
         position: 'absolute',
-        borderWidth: 3,
-        borderColor: '#FE8370',
-        borderRadius: 8,
+        borderWidth: 2,
+        borderColor: PLACEMENT_STROKE,
         backgroundColor: 'transparent',
     },
 });

package/lib/sdkVersion.d.ts

@@ -1,2 +1,2 @@
 /** AUTO-GENERATED by scripts/sync-sdk-version.mjs — do not edit. */
-export declare const SDK_VERSION = "0.3.3";
+export declare const SDK_VERSION = "0.3.5";

package/lib/sdkVersion.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SDK_VERSION = void 0;
 /** AUTO-GENERATED by scripts/sync-sdk-version.mjs — do not edit. */
-exports.SDK_VERSION = '0.3.3';
+exports.SDK_VERSION = '0.3.5';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pose-tracker/react-native-pose-estimation-light",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Human pose estimation SDK for React Native (light / online) — MoveNet Lightning via CDN + model URL each session, no bundled weights. iOS & Android (Expo Go). Optional API-key exercise engine.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/react-native.config.js

@@ -1,12 +1,33 @@
 /**
- * Autolinking: Apple Vision frame-processor plugin is iOS-only.
- * Android hosts skip the native project (JS falls back to TFLite / TF.js).
+ * Autolinking for the Apple Vision frame-processor plugin.
+ *
+ * Android has no native project. On iOS the plugin compiles against the
+ * VisionCamera pod, so it is linked only when the host app installed
+ * react-native-vision-camera. Apps that only use the WebView camera must
+ * not fail `pod install` looking for a pod they never added.
  */
+const fs = require('fs');
+const path = require('path');
+
+function directoryHasVisionCamera(dir) {
+  return fs.existsSync(path.join(dir, 'node_modules', 'react-native-vision-camera', 'package.json'));
+}
+
+function hostHasVisionCamera() {
+  const cwd = process.cwd();
+  const candidates = [cwd];
+  const base = path.basename(cwd);
+  if (base === 'ios' || base === 'android') {
+    candidates.push(path.dirname(cwd));
+  }
+  return candidates.some(directoryHasVisionCamera);
+}
+
 module.exports = {
   dependency: {
     platforms: {
       android: null,
-      ios: {},
+      ios: hostHasVisionCamera() ? {} : null,
     },
   },
 };

package/src/camera/WebViewPoseView.tsx

@@ -76,8 +76,9 @@ export interface WebViewPoseViewProps {
    */
   drawSkeleton?: boolean;
   /**
-   * Show a placement guide box (WebView `postureBox` parity) while the
+   * Show the placement zone (iframe `placementOverlay` parity) while the
    * active exercise reports `posture.ready === false`. Default `true`.
+   * Gray masks sit outside the box; the frame is the PoseTracker stroke.
    * Drawn as an RN sibling overlay (reliable on iOS; Android WebView may
    * composite above it — hosts can also render from `onPosture`).
    */
@@ -475,18 +476,7 @@ export function WebViewPoseView(props: WebViewPoseViewProps): React.ReactElement
         }}
       />
       {showPlacementBox ? (
-        <View
-          pointerEvents="none"
-          style={[
-            styles.placementBox,
-            {
-              top: `${placementPaddingPercent}%`,
-              bottom: `${placementPaddingPercent}%`,
-              left: `${placementPaddingPercent}%`,
-              right: `${placementPaddingPercent}%`,
-            },
-          ]}
-        />
+        <PlacementZone paddingPercent={placementPaddingPercent} />
       ) : null}
       {/* Optional RN overlay (works on iOS; usually hidden under Android WebView surface). */}
       {props.children}
@@ -494,16 +484,40 @@ export function WebViewPoseView(props: WebViewPoseViewProps): React.ReactElement
   );
 }
 
+/** Iframe V4 placement: outside dim `#000` at 0.55, demo frame `#4DD21D`. */
+const PLACEMENT_DIM = 'rgba(0,0,0,0.55)';
+const PLACEMENT_STROKE = '#4DD21D';
+
+function PlacementZone({ paddingPercent }: { paddingPercent: number }) {
+  const pad = `${paddingPercent}%` as `${number}%`;
+  return (
+    <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+      <View style={[styles.placementDim, { top: 0, left: 0, right: 0, height: pad }]} />
+      <View style={[styles.placementDim, { bottom: 0, left: 0, right: 0, height: pad }]} />
+      <View style={[styles.placementDim, { top: pad, bottom: pad, left: 0, width: pad }]} />
+      <View style={[styles.placementDim, { top: pad, bottom: pad, right: 0, width: pad }]} />
+      <View
+        style={[
+          styles.placementBox,
+          { top: pad, bottom: pad, left: pad, right: pad },
+        ]}
+      />
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   fill: { flex: 1, backgroundColor: '#000' },
   center: { alignItems: 'center', justifyContent: 'center', padding: 16 },
   error: { color: '#FE8370', textAlign: 'center', fontSize: 13 },
-  /** Front drawPostureBox stroke `#FE8370`. */
+  placementDim: {
+    position: 'absolute',
+    backgroundColor: PLACEMENT_DIM,
+  },
   placementBox: {
     position: 'absolute',
-    borderWidth: 3,
-    borderColor: '#FE8370',
-    borderRadius: 8,
+    borderWidth: 2,
+    borderColor: PLACEMENT_STROKE,
     backgroundColor: 'transparent',
   },
 });

package/src/sdkVersion.ts

@@ -1,2 +1,2 @@
 /** AUTO-GENERATED by scripts/sync-sdk-version.mjs — do not edit. */
-export const SDK_VERSION = '0.3.3';
+export const SDK_VERSION = '0.3.5';