@map-gesture-controls/core 0.1.6 → 0.1.8

package/README.md

@@ -10,13 +10,13 @@
 > Building with OpenLayers? Use [`@map-gesture-controls/ol`](https://www.npmjs.com/package/@map-gesture-controls/ol) instead. It wraps this package and adds map integration out of the box.
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/sanderdesnaijer/map-gesture-controls/main/docs/public/openlayers-gesture-control-demo.gif" alt="Screen recording of the map gesture demo: an OpenLayers map with a small webcam preview; the user pans with a fist and zooms with two open hands, all in the browser via MediaPipe." width="720" />
+  <img src="https://raw.githubusercontent.com/sanderdesnaijer/map-gesture-controls/main/docs/public/openlayers-gesture-control-demo.gif" alt="Screen recording of the map gesture demo: an OpenLayers map with a small webcam preview; the user pans with the left fist, zooms with the right fist, and rotates with both fists, all in the browser via MediaPipe." width="720" />
 </p>
 
 ## What it does
 
 - Detects hands and classifies gestures at 30+ fps using MediaPipe Hand Landmarker
-- Recognizes **fist** (pan), **open palm** (zoom), and **idle** states
+- Recognizes **fist** (left = pan, right = zoom, both = rotate) and **idle** states
 - Manages gesture transitions with dwell timers and grace periods to avoid flickering
 - Provides a configurable webcam overlay with corner/full/hidden display modes
 - Ships fully typed TypeScript declarations
@@ -30,18 +30,26 @@ npm install @map-gesture-controls/core
 ## Quick start
 
 ```ts
-import { GestureController } from '@map-gesture-controls/core';
+import {
+  GestureController,
+  GestureStateMachine,
+  DEFAULT_TUNING_CONFIG,
+} from '@map-gesture-controls/core';
 import '@map-gesture-controls/core/style.css';
 
-const controller = new GestureController({
-  onGestureFrame(frame) {
-    // frame.hands contains detected hands with landmarks and gesture type
-    console.log(frame);
-  },
+const tuning = DEFAULT_TUNING_CONFIG;
+const stateMachine = new GestureStateMachine(tuning);
+
+const controller = new GestureController(tuning, (frame) => {
+  const output = stateMachine.update(frame);
+  // output.mode: 'idle' | 'panning' | 'zooming' | 'rotating'
+  // output.panDelta, output.zoomDelta, output.rotateDelta
+  console.log(output);
 });
 
 // Must be called from a user interaction (button click) for webcam permission
-await controller.start();
+await controller.init();
+controller.start();
 ```
 
 ## Exports
@@ -51,7 +59,7 @@ await controller.start();
 | `GestureController` | Class | Opens the webcam, runs MediaPipe detection, and emits gesture frames |
 | `GestureStateMachine` | Class | Manages gesture state transitions with dwell and grace timers |
 | `WebcamOverlay` | Class | Renders a configurable camera preview overlay |
-| `classifyGesture` | Function | Classifies a set of hand landmarks into `fist`, `openPalm`, or `none` |
+| `classifyGesture` | Function | Classifies a set of hand landmarks into `fist` or `none` |
 | `getHandSize` | Function | Computes the bounding size of a hand from its landmarks |
 | `getTwoHandDistance` | Function | Measures the distance between two detected hands |
 | `DEFAULT_WEBCAM_CONFIG` | Constant | Default webcam overlay settings |
@@ -63,8 +71,9 @@ Full TypeScript types are exported for `GestureMode`, `GestureFrame`, `DetectedH
 
 | Gesture | Detection rule | Use case |
 | --- | --- | --- |
-| **Fist** | One hand, 3+ fingers curled | Pan / drag |
-| **Open palm** | Two hands, all fingers extended and spread | Zoom in/out |
+| **Left fist** | Left hand, 3+ fingers curled | Pan / drag |
+| **Right fist** | Right hand, 3+ fingers curled | Zoom in/out (vertical movement) |
+| **Both fists** | Both hands, 3+ fingers curled each | Rotate map |
 | **Idle** | Anything else | No action |
 
 Gestures are confirmed after a configurable dwell period (default 80 ms) and held through a grace period (default 150 ms) to prevent flickering when tracking briefly drops.
@@ -88,6 +97,8 @@ Full docs, live demos, and configuration reference at **[sanderdesnaijer.github.
 
 MediaPipe WASM and the hand landmarker model are loaded from public CDNs. No video frames are sent to any server. All gesture processing happens locally in the browser.
 
+Built by [Sander de Snaijer](https://www.sanderdesnaijer.com).
+
 ## License
 
 MIT

package/dist/GestureStateMachine.d.ts

@@ -3,19 +3,24 @@ export interface StateMachineOutput {
     mode: GestureMode;
     panDelta: SmoothedPoint | null;
     zoomDelta: number | null;
+    rotateDelta: number | null;
 }
 /**
- * GestureStateMachine: 3-state FSM
+ * GestureStateMachine: 4-state FSM
  *
  * Priority rules (evaluated every frame):
- *   both hands visible AND both open palm → desired = 'zooming'
- *   one hand visible AND gesture = 'fist' → desired = 'panning'
- *   otherwise                             → desired = 'idle'
+ *   both hands fist                            → desired = 'rotating'
+ *     angle of the wrist-to-wrist line; delta rotates the map
+ *   right hand fist (left absent or not fist)  → desired = 'zooming'
+ *     vertical motion of right wrist controls zoom (up = in, down = out)
+ *   left hand fist (right absent or not fist)  → desired = 'panning'
+ *     horizontal and vertical motion of left wrist pans the map
+ *   otherwise                                  → desired = 'idle'
  *
  * Transitions:
- *   idle → panning/zooming : desired stable for actionDwellMs
- *   panning/zooming → idle : desired changes, grace period releaseGraceMs,
- *                            then idle (next frame starts new dwell if needed)
+ *   idle → any active : desired stable for actionDwellMs
+ *   active → idle     : desired changes, grace period releaseGraceMs,
+ *                       then idle (next frame starts new dwell if needed)
  */
 export declare class GestureStateMachine {
     private tuning;
@@ -26,6 +31,8 @@ export declare class GestureStateMachine {
     private prevPanPos;
     private zoomSmoother;
     private prevZoomDist;
+    private rotateSmoother;
+    private prevRotateAngle;
     constructor(tuning: TuningConfig);
     getMode(): GestureMode;
     update(frame: GestureFrame): StateMachineOutput;

package/dist/GestureStateMachine.js

@@ -1,4 +1,3 @@
-import { getTwoHandDistance } from './gestureClassifier.js';
 /**
  * Exponential Moving Average smoother for 2D points.
  */
@@ -65,17 +64,21 @@ class EMAScalar {
     }
 }
 /**
- * GestureStateMachine: 3-state FSM
+ * GestureStateMachine: 4-state FSM
  *
  * Priority rules (evaluated every frame):
- *   both hands visible AND both open palm → desired = 'zooming'
- *   one hand visible AND gesture = 'fist' → desired = 'panning'
- *   otherwise                             → desired = 'idle'
+ *   both hands fist                            → desired = 'rotating'
+ *     angle of the wrist-to-wrist line; delta rotates the map
+ *   right hand fist (left absent or not fist)  → desired = 'zooming'
+ *     vertical motion of right wrist controls zoom (up = in, down = out)
+ *   left hand fist (right absent or not fist)  → desired = 'panning'
+ *     horizontal and vertical motion of left wrist pans the map
+ *   otherwise                                  → desired = 'idle'
  *
  * Transitions:
- *   idle → panning/zooming : desired stable for actionDwellMs
- *   panning/zooming → idle : desired changes, grace period releaseGraceMs,
- *                            then idle (next frame starts new dwell if needed)
+ *   idle → any active : desired stable for actionDwellMs
+ *   active → idle     : desired changes, grace period releaseGraceMs,
+ *                       then idle (next frame starts new dwell if needed)
  */
 export class GestureStateMachine {
     constructor(tuning) {
@@ -127,8 +130,21 @@ export class GestureStateMachine {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "rotateSmoother", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "prevRotateAngle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         this.panSmoother = new EMAPoint(tuning.smoothingAlpha);
         this.zoomSmoother = new EMAScalar(tuning.smoothingAlpha);
+        this.rotateSmoother = new EMAScalar(tuning.smoothingAlpha);
     }
     getMode() {
         return this.mode;
@@ -138,13 +154,17 @@ export class GestureStateMachine {
         const { actionDwellMs, releaseGraceMs } = this.tuning;
         const { leftHand, rightHand } = frame;
         // ── Determine desired mode for this frame ─────────────────────────────────
-        const bothOpen = leftHand !== null &&
-            rightHand !== null &&
-            leftHand.gesture === 'openPalm' &&
-            rightHand.gesture === 'openPalm';
-        const oneFist = (leftHand !== null && leftHand.gesture === 'fist' && rightHand === null) ||
-            (rightHand !== null && rightHand.gesture === 'fist' && leftHand === null);
-        const desired = bothOpen ? 'zooming' : oneFist ? 'panning' : 'idle';
+        const rightFist = rightHand !== null && rightHand.gesture === 'fist';
+        const leftFist = leftHand !== null && leftHand.gesture === 'fist';
+        const bothFists = rightFist && leftFist;
+        // Both fists → rotate; right only → zoom; left only → pan
+        const desired = bothFists
+            ? 'rotating'
+            : rightFist
+                ? 'zooming'
+                : leftFist
+                    ? 'panning'
+                    : 'idle';
         // ── idle ──────────────────────────────────────────────────────────────────
         if (this.mode === 'idle') {
             if (desired !== 'idle') {
@@ -158,7 +178,7 @@ export class GestureStateMachine {
             else {
                 this.actionDwell = null;
             }
-            return this.buildOutput(null, null);
+            return this.buildOutput(null, null, null);
         }
         // ── panning ───────────────────────────────────────────────────────────────
         if (this.mode === 'panning') {
@@ -169,13 +189,13 @@ export class GestureStateMachine {
                 else if (now - this.releaseTimer >= releaseGraceMs) {
                     this.transitionTo('idle');
                 }
-                return this.buildOutput(null, null);
+                return this.buildOutput(null, null, null);
             }
             this.releaseTimer = null;
-            const fistHand = leftHand?.gesture === 'fist' ? leftHand : rightHand;
+            const fistHand = leftHand?.gesture === 'fist' ? leftHand : null;
             if (!fistHand) {
                 this.transitionTo('idle');
-                return this.buildOutput(null, null);
+                return this.buildOutput(null, null, null);
             }
             const wrist = fistHand.landmarks[0];
             const smooth = this.panSmoother.update(wrist.x, wrist.y);
@@ -189,7 +209,7 @@ export class GestureStateMachine {
                 }
             }
             this.prevPanPos = smooth;
-            return this.buildOutput(panDelta, null);
+            return this.buildOutput(panDelta, null, null);
         }
         // ── zooming ───────────────────────────────────────────────────────────────
         if (this.mode === 'zooming') {
@@ -200,26 +220,64 @@ export class GestureStateMachine {
                 else if (now - this.releaseTimer >= releaseGraceMs) {
                     this.transitionTo('idle');
                 }
-                return this.buildOutput(null, null);
+                return this.buildOutput(null, null, null);
             }
             this.releaseTimer = null;
-            if (!leftHand || !rightHand) {
+            if (!rightHand) {
                 this.transitionTo('idle');
-                return this.buildOutput(null, null);
+                return this.buildOutput(null, null, null);
             }
-            const rawDist = getTwoHandDistance(leftHand.landmarks, rightHand.landmarks);
-            const smoothDist = this.zoomSmoother.update(rawDist);
+            // Use right wrist vertical position: moving up (lower y) = zoom in, down = zoom out
+            const wrist = rightHand.landmarks[0];
+            const smoothY = this.zoomSmoother.update(wrist.y);
             let zoomDelta = null;
             if (this.prevZoomDist !== null) {
-                const delta = smoothDist - this.prevZoomDist;
+                const delta = smoothY - this.prevZoomDist;
                 if (Math.abs(delta) > this.tuning.zoomDeadzoneRatio) {
-                    zoomDelta = delta;
+                    // Negate: moving hand up (y decreases) → zoom in (positive delta)
+                    zoomDelta = -delta;
+                }
+            }
+            this.prevZoomDist = smoothY;
+            return this.buildOutput(null, zoomDelta, null);
+        }
+        // ── rotating ─────────────────────────────────────────────────────────────
+        if (this.mode === 'rotating') {
+            if (desired !== 'rotating') {
+                if (this.releaseTimer === null) {
+                    this.releaseTimer = now;
                 }
+                else if (now - this.releaseTimer >= releaseGraceMs) {
+                    this.transitionTo('idle');
+                }
+                return this.buildOutput(null, null, null);
             }
-            this.prevZoomDist = smoothDist;
-            return this.buildOutput(null, zoomDelta);
+            this.releaseTimer = null;
+            if (!leftHand || !rightHand) {
+                this.transitionTo('idle');
+                return this.buildOutput(null, null, null);
+            }
+            // Angle of the line from left wrist to right wrist (in radians)
+            const lw = leftHand.landmarks[0];
+            const rw = rightHand.landmarks[0];
+            const rawAngle = Math.atan2(rw.y - lw.y, rw.x - lw.x);
+            const smoothAngle = this.rotateSmoother.update(rawAngle);
+            let rotateDelta = null;
+            if (this.prevRotateAngle !== null) {
+                // Wrap the delta to [-π, π] to handle the atan2 discontinuity
+                let delta = smoothAngle - this.prevRotateAngle;
+                if (delta > Math.PI)
+                    delta -= 2 * Math.PI;
+                if (delta < -Math.PI)
+                    delta += 2 * Math.PI;
+                if (Math.abs(delta) > 0.005) {
+                    rotateDelta = delta;
+                }
+            }
+            this.prevRotateAngle = smoothAngle;
+            return this.buildOutput(null, null, rotateDelta);
         }
-        return this.buildOutput(null, null);
+        return this.buildOutput(null, null, null);
     }
     transitionTo(next) {
         this.mode = next;
@@ -233,9 +291,13 @@ export class GestureStateMachine {
             this.zoomSmoother.reset();
             this.prevZoomDist = null;
         }
+        if (next !== 'rotating') {
+            this.rotateSmoother.reset();
+            this.prevRotateAngle = null;
+        }
     }
-    buildOutput(panDelta, zoomDelta) {
-        return { mode: this.mode, panDelta, zoomDelta };
+    buildOutput(panDelta, zoomDelta, rotateDelta) {
+        return { mode: this.mode, panDelta, zoomDelta, rotateDelta };
     }
     reset() {
         this.transitionTo('idle');

package/dist/GestureStateMachine.test.js

@@ -28,6 +28,7 @@ function makeFrame(timestamp, leftHand, rightHand) {
 }
 /**
  * Drive the FSM into 'panning' with dwell=0 (requires two identical frames).
+ * Pan = left fist only.
  */
 function enterPanning(fsm, hand = makeHand('fist')) {
     fsm.update(makeFrame(0, hand, null)); // starts dwell timer
@@ -35,8 +36,17 @@ function enterPanning(fsm, hand = makeHand('fist')) {
 }
 /**
  * Drive the FSM into 'zooming' with dwell=0 (requires two identical frames).
+ * Zoom = right fist only.
  */
-function enterZooming(fsm, left = makeHand('openPalm'), right = makeHand('openPalm')) {
+function enterZooming(fsm, right = makeHand('fist')) {
+    fsm.update(makeFrame(0, null, right));
+    fsm.update(makeFrame(0, null, right));
+}
+/**
+ * Drive the FSM into 'rotating' with dwell=0 (requires two identical frames).
+ * Rotate = both fists.
+ */
+function enterRotating(fsm, left = makeHand('fist'), right = makeHand('fist')) {
     fsm.update(makeFrame(0, left, right));
     fsm.update(makeFrame(0, left, right));
 }
@@ -51,22 +61,37 @@ describe('GestureStateMachine', () => {
         expect(fsm.getMode()).toBe('idle');
     });
     // ── idle → panning ─────────────────────────────────────────────────────────
-    it('transitions to panning after the dwell elapses (two frames, dwell=0)', () => {
+    it('transitions to panning when left fist is held (two frames, dwell=0)', () => {
         const fistHand = makeHand('fist');
         fsm.update(makeFrame(0, fistHand, null)); // starts dwell
         const out = fsm.update(makeFrame(0, fistHand, null)); // 0 >= 0 → panning
         expect(out.mode).toBe('panning');
     });
     // ── idle → zooming ─────────────────────────────────────────────────────────
-    it('transitions to zooming when two open palms are held (two frames, dwell=0)', () => {
-        const left = makeHand('openPalm');
-        const right = makeHand('openPalm');
+    it('transitions to zooming when right fist is held (two frames, dwell=0)', () => {
+        const right = makeHand('fist');
+        fsm.update(makeFrame(0, null, right));
+        const out = fsm.update(makeFrame(0, null, right));
+        expect(out.mode).toBe('zooming');
+    });
+    // ── idle → rotating ────────────────────────────────────────────────────────
+    it('transitions to rotating when both fists are held (two frames, dwell=0)', () => {
+        const left = makeHand('fist');
+        const right = makeHand('fist');
         fsm.update(makeFrame(0, left, right));
         const out = fsm.update(makeFrame(0, left, right));
-        expect(out.mode).toBe('zooming');
+        expect(out.mode).toBe('rotating');
+    });
+    it('prefers rotating over zooming when both fists are held', () => {
+        const left = makeHand('fist');
+        const right = makeHand('fist');
+        fsm.update(makeFrame(0, left, right));
+        const out = fsm.update(makeFrame(0, left, right));
+        // both fists = rotating, not zooming
+        expect(out.mode).toBe('rotating');
     });
     // ── panning → idle ─────────────────────────────────────────────────────────
-    it('returns to idle when the fist is released (releaseGraceMs=0)', () => {
+    it('returns to idle when the left fist is released (releaseGraceMs=0)', () => {
         enterPanning(fsm);
         expect(fsm.getMode()).toBe('panning');
         fsm.update(makeFrame(1, null, null)); // starts release timer
@@ -74,13 +99,21 @@ describe('GestureStateMachine', () => {
         expect(out.mode).toBe('idle');
     });
     // ── zooming → idle ─────────────────────────────────────────────────────────
-    it('returns to idle when open palms are released (releaseGraceMs=0)', () => {
+    it('returns to idle when right fist is released (releaseGraceMs=0)', () => {
         enterZooming(fsm);
         expect(fsm.getMode()).toBe('zooming');
         fsm.update(makeFrame(1, null, null)); // starts release timer
         const out = fsm.update(makeFrame(1, null, null)); // 0 >= 0 → idle
         expect(out.mode).toBe('idle');
     });
+    // ── rotating → idle ────────────────────────────────────────────────────────
+    it('returns to idle when both fists are released (releaseGraceMs=0)', () => {
+        enterRotating(fsm);
+        expect(fsm.getMode()).toBe('rotating');
+        fsm.update(makeFrame(1, null, null)); // starts release timer
+        const out = fsm.update(makeFrame(1, null, null)); // 0 >= 0 → idle
+        expect(out.mode).toBe('idle');
+    });
     // ── panDelta output ────────────────────────────────────────────────────────
     it('emits no panDelta on the first panning frame (no previous position)', () => {
         const fistHand = makeHand('fist');
@@ -108,27 +141,57 @@ describe('GestureStateMachine', () => {
     });
     // ── zoomDelta output ───────────────────────────────────────────────────────
     it('emits no zoomDelta on the first zooming frame', () => {
-        const left = makeHand('openPalm');
-        const right = makeHand('openPalm');
-        fsm.update(makeFrame(0, left, right));
-        const out = fsm.update(makeFrame(0, left, right)); // enters zooming, sets prevZoomDist
+        const right = makeHand('fist');
+        fsm.update(makeFrame(0, null, right));
+        const out = fsm.update(makeFrame(0, null, right)); // enters zooming, sets prevZoomDist
         expect(out.zoomDelta).toBeNull();
     });
-    it('emits zoomDelta once a previous distance is established', () => {
-        const lmL1 = makeLandmarks({ [LANDMARKS.INDEX_TIP]: { x: 0.4, y: 0.5, z: 0 } });
-        const lmR1 = makeLandmarks({ [LANDMARKS.INDEX_TIP]: { x: 0.6, y: 0.5, z: 0 } });
-        const lmL2 = makeLandmarks({ [LANDMARKS.INDEX_TIP]: { x: 0.3, y: 0.5, z: 0 } });
-        const lmR2 = makeLandmarks({ [LANDMARKS.INDEX_TIP]: { x: 0.7, y: 0.5, z: 0 } });
+    it('emits zoomDelta once a previous position is established', () => {
+        // Right wrist starts lower (y=0.6), then moves up (y=0.4) → zoom in (positive delta)
+        const lmR1 = makeLandmarks({ [LANDMARKS.WRIST]: { x: 0.5, y: 0.6, z: 0 } });
+        const lmR2 = makeLandmarks({ [LANDMARKS.WRIST]: { x: 0.5, y: 0.4, z: 0 } });
         // Frame 1+2: dwell + transition (zooming entered on frame 2, but output comes from idle branch)
-        fsm.update(makeFrame(0, makeHand('openPalm', lmL1), makeHand('openPalm', lmR1)));
-        fsm.update(makeFrame(0, makeHand('openPalm', lmL1), makeHand('openPalm', lmR1)));
+        fsm.update(makeFrame(0, null, makeHand('fist', lmR1)));
+        fsm.update(makeFrame(0, null, makeHand('fist', lmR1)));
         // Frame 3: first real zooming frame, sets prevZoomDist, no delta yet
-        fsm.update(makeFrame(1, makeHand('openPalm', lmL1), makeHand('openPalm', lmR1)));
-        // Frame 4: wider spread → positive delta
-        const out = fsm.update(makeFrame(2, makeHand('openPalm', lmL2), makeHand('openPalm', lmR2)));
+        fsm.update(makeFrame(1, null, makeHand('fist', lmR1)));
+        // Frame 4: hand moved up → zoom in (positive delta)
+        const out = fsm.update(makeFrame(2, null, makeHand('fist', lmR2)));
         expect(out.mode).toBe('zooming');
         expect(out.zoomDelta).not.toBeNull();
-        expect(out.zoomDelta).toBeGreaterThan(0);
+        expect(out.zoomDelta).toBeGreaterThan(0); // hand moved up = zoom in
+    });
+    it('emits negative zoomDelta when hand moves down (zoom out)', () => {
+        const lmR1 = makeLandmarks({ [LANDMARKS.WRIST]: { x: 0.5, y: 0.4, z: 0 } });
+        const lmR2 = makeLandmarks({ [LANDMARKS.WRIST]: { x: 0.5, y: 0.6, z: 0 } });
+        fsm.update(makeFrame(0, null, makeHand('fist', lmR1)));
+        fsm.update(makeFrame(0, null, makeHand('fist', lmR1)));
+        fsm.update(makeFrame(1, null, makeHand('fist', lmR1)));
+        const out = fsm.update(makeFrame(2, null, makeHand('fist', lmR2)));
+        expect(out.zoomDelta).not.toBeNull();
+        expect(out.zoomDelta).toBeLessThan(0); // hand moved down = zoom out
+    });
+    // ── rotateDelta output ─────────────────────────────────────────────────────
+    it('emits no rotateDelta on the first rotating frame', () => {
+        const left = makeHand('fist');
+        const right = makeHand('fist');
+        fsm.update(makeFrame(0, left, right));
+        const out = fsm.update(makeFrame(0, left, right)); // enters rotating, sets prevRotateAngle
+        expect(out.rotateDelta).toBeNull();
+    });
+    it('emits rotateDelta once a previous angle is established', () => {
+        // Left wrist at (0.2, 0.5), right wrist at (0.8, 0.5) → angle = 0 (horizontal)
+        const lmL1 = makeLandmarks({ [LANDMARKS.WRIST]: { x: 0.2, y: 0.5, z: 0 } });
+        const lmR1 = makeLandmarks({ [LANDMARKS.WRIST]: { x: 0.8, y: 0.5, z: 0 } });
+        // Tilt clockwise: right wrist drops, left wrist rises → angle increases
+        const lmL2 = makeLandmarks({ [LANDMARKS.WRIST]: { x: 0.2, y: 0.4, z: 0 } });
+        const lmR2 = makeLandmarks({ [LANDMARKS.WRIST]: { x: 0.8, y: 0.6, z: 0 } });
+        fsm.update(makeFrame(0, makeHand('fist', lmL1), makeHand('fist', lmR1)));
+        fsm.update(makeFrame(0, makeHand('fist', lmL1), makeHand('fist', lmR1)));
+        fsm.update(makeFrame(1, makeHand('fist', lmL1), makeHand('fist', lmR1)));
+        const out = fsm.update(makeFrame(2, makeHand('fist', lmL2), makeHand('fist', lmR2)));
+        expect(out.mode).toBe('rotating');
+        expect(out.rotateDelta).not.toBeNull();
     });
     // ── reset ──────────────────────────────────────────────────────────────────
     it('reset() returns the FSM to idle', () => {
@@ -137,6 +200,12 @@ describe('GestureStateMachine', () => {
         fsm.reset();
         expect(fsm.getMode()).toBe('idle');
     });
+    it('reset() returns the FSM to idle from rotating', () => {
+        enterRotating(fsm);
+        expect(fsm.getMode()).toBe('rotating');
+        fsm.reset();
+        expect(fsm.getMode()).toBe('idle');
+    });
     // ── dwell timer ────────────────────────────────────────────────────────────
     it('does NOT transition before actionDwellMs elapses', () => {
         const slowFsm = new GestureStateMachine({ ...FAST_TUNING, actionDwellMs: 200 });

package/dist/WebcamOverlay.js

@@ -145,6 +145,7 @@ export class WebcamOverlay {
             idle: 'Idle',
             panning: 'Pan',
             zooming: 'Zoom',
+            rotating: 'Rotate',
         };
         this.badge.textContent = labels[mode];
         this.badge.className = `ol-gesture-badge ol-gesture-badge--${mode}`;

package/dist/constants.d.ts

@@ -19,6 +19,7 @@ export declare const COLORS: {
     readonly idle: "#888888";
     readonly panning: "#00ccff";
     readonly zooming: "#00ffcc";
+    readonly rotating: "#ff9900";
     readonly landmark: "rgba(255,255,255,0.6)";
     readonly connection: "rgba(255,255,255,0.3)";
     readonly fingertipGlow: "#4488ff";

package/dist/constants.js

@@ -47,6 +47,7 @@ export const COLORS = {
     idle: '#888888',
     panning: '#00ccff',
     zooming: '#00ffcc',
+    rotating: '#ff9900',
     landmark: 'rgba(255,255,255,0.6)',
     connection: 'rgba(255,255,255,0.3)',
     fingertipGlow: '#4488ff',

package/dist/index.js

@@ -1,7 +1,7 @@
-var w = Object.defineProperty;
-var b = (o, t, e) => t in o ? w(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var a = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
-import { FilesetResolver as E } from "@mediapipe/tasks-vision";
+var E = Object.defineProperty;
+var M = (o, t, e) => t in o ? E(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var l = (o, t, e) => M(o, typeof t != "symbol" ? t + "" : t, e);
+import { FilesetResolver as C } from "@mediapipe/tasks-vision";
 const L = {
   enabled: !0,
   mode: "corner",
@@ -18,7 +18,7 @@ const L = {
   minDetectionConfidence: 0.65,
   minTrackingConfidence: 0.65,
   minPresenceConfidence: 0.6
-}, h = {
+}, r = {
   WRIST: 0,
   THUMB_TIP: 4,
   INDEX_TIP: 8,
@@ -29,75 +29,76 @@ const L = {
   RING_MCP: 13,
   PINKY_TIP: 20,
   PINKY_MCP: 17
-}, I = [
-  h.INDEX_TIP,
-  h.MIDDLE_TIP,
-  h.RING_TIP,
-  h.PINKY_TIP
-], y = [
-  h.INDEX_MCP,
-  h.MIDDLE_MCP,
-  h.RING_MCP,
-  h.PINKY_MCP
-], T = {
+}, P = [
+  r.INDEX_TIP,
+  r.MIDDLE_TIP,
+  r.RING_TIP,
+  r.PINKY_TIP
+], b = [
+  r.INDEX_MCP,
+  r.MIDDLE_MCP,
+  r.RING_MCP,
+  r.PINKY_MCP
+], y = {
   idle: "#888888",
   panning: "#00ccff",
   zooming: "#00ffcc",
+  rotating: "#ff9900",
   landmark: "rgba(255,255,255,0.6)",
   connection: "rgba(255,255,255,0.3)",
   fingertipGlow: "#4488ff"
-}, C = "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm";
-function g(o, t) {
-  const e = o.x - t.x, n = o.y - t.y;
-  return Math.sqrt(e * e + n * n);
+}, _ = "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm";
+function T(o, t) {
+  const e = o.x - t.x, i = o.y - t.y;
+  return Math.sqrt(e * e + i * i);
 }
-function M(o) {
-  const t = o[h.WRIST];
-  for (let i = 0; i < I.length; i++) {
-    const d = o[I[i]], c = o[y[i]];
-    if (g(d, t) < g(c, t) * 0.9)
+function N(o) {
+  const t = o[r.WRIST];
+  for (let n = 0; n < P.length; n++) {
+    const d = o[P[n]], c = o[b[n]];
+    if (T(d, t) < T(c, t) * 0.9)
       return !1;
   }
-  const e = N(o);
+  const e = x(o);
   if (e === 0) return !1;
-  const n = I.map((i) => o[i]);
+  const i = P.map((n) => o[n]);
   let s = 1 / 0;
-  for (let i = 0; i < n.length - 1; i++) {
-    const d = g(n[i], n[i + 1]);
+  for (let n = 0; n < i.length - 1; n++) {
+    const d = T(i[n], i[n + 1]);
     d < s && (s = d);
   }
   return s >= e * 0.18;
 }
-function _(o) {
-  const t = o[h.WRIST];
+function S(o) {
+  const t = o[r.WRIST];
   let e = 0;
-  for (let n = 0; n < I.length; n++) {
-    const s = o[I[n]], l = o[y[n]];
-    g(s, t) < g(l, t) * 1.1 && e++;
+  for (let i = 0; i < P.length; i++) {
+    const s = o[P[i]], a = o[b[i]];
+    T(s, t) < T(a, t) * 1.1 && e++;
   }
   return e >= 3;
 }
-function N(o) {
-  const t = o[h.WRIST], e = o[h.MIDDLE_MCP];
-  return !t || !e ? 0 : g(t, e);
+function x(o) {
+  const t = o[r.WRIST], e = o[r.MIDDLE_MCP];
+  return !t || !e ? 0 : T(t, e);
 }
-function S(o, t) {
-  const e = o[h.INDEX_TIP], n = t[h.INDEX_TIP];
-  return !e || !n ? 0 : g(e, n);
+function k(o, t) {
+  const e = o[r.INDEX_TIP], i = t[r.INDEX_TIP];
+  return !e || !i ? 0 : T(e, i);
 }
-function x(o) {
-  return o.length < 21 ? "none" : _(o) ? "fist" : M(o) ? "openPalm" : "none";
+function R(o) {
+  return o.length < 21 ? "none" : S(o) ? "fist" : N(o) ? "openPalm" : "none";
 }
-class k {
+class B {
   constructor(t, e) {
-    a(this, "landmarker", null);
-    a(this, "videoEl", null);
-    a(this, "stream", null);
-    a(this, "rafHandle", null);
-    a(this, "running", !1);
-    a(this, "onFrame");
-    a(this, "tuning");
-    a(this, "lastVideoTime", -1);
+    l(this, "landmarker", null);
+    l(this, "videoEl", null);
+    l(this, "stream", null);
+    l(this, "rafHandle", null);
+    l(this, "running", !1);
+    l(this, "onFrame");
+    l(this, "tuning");
+    l(this, "lastVideoTime", -1);
     this.tuning = t, this.onFrame = e;
   }
   /**
@@ -105,7 +106,7 @@ class k {
    * Returns the video element so the overlay can render it.
    */
   async init() {
-    const t = await E.forVisionTasks(C), { HandLandmarker: e } = await import("@mediapipe/tasks-vision");
+    const t = await C.forVisionTasks(_), { HandLandmarker: e } = await import("@mediapipe/tasks-vision");
     return this.landmarker = await e.createFromOptions(t, {
       baseOptions: {
         modelAssetPath: "https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task",
@@ -118,8 +119,8 @@ class k {
       minTrackingConfidence: this.tuning.minTrackingConfidence
     }), this.videoEl = document.createElement("video"), this.videoEl.setAttribute("playsinline", ""), this.videoEl.setAttribute("autoplay", ""), this.videoEl.muted = !0, this.videoEl.width = 640, this.videoEl.height = 480, this.stream = await navigator.mediaDevices.getUserMedia({
       video: { width: 640, height: 480, facingMode: "user" }
-    }), this.videoEl.srcObject = this.stream, await new Promise((n) => {
-      this.videoEl.addEventListener("loadeddata", () => n(), { once: !0 });
+    }), this.videoEl.srcObject = this.stream, await new Promise((i) => {
+      this.videoEl.addEventListener("loadeddata", () => i(), { once: !0 });
     }), this.videoEl;
   }
   start() {
@@ -130,7 +131,7 @@ class k {
   }
   destroy() {
     var t, e;
-    this.stop(), (t = this.stream) == null || t.getTracks().forEach((n) => n.stop()), (e = this.landmarker) == null || e.close(), this.landmarker = null, this.videoEl = null, this.stream = null;
+    this.stop(), (t = this.stream) == null || t.getTracks().forEach((i) => i.stop()), (e = this.landmarker) == null || e.close(), this.landmarker = null, this.videoEl = null, this.stream = null;
   }
   loop() {
     this.running && (this.rafHandle = requestAnimationFrame(() => this.loop()), this.processFrame());
@@ -138,33 +139,33 @@ class k {
   processFrame() {
     const t = this.videoEl, e = this.landmarker;
     if (!t || !e || t.readyState < 2) return;
-    const n = performance.now();
+    const i = performance.now();
     if (t.currentTime === this.lastVideoTime) return;
     this.lastVideoTime = t.currentTime;
     let s;
     try {
-      s = e.detectForVideo(t, n);
+      s = e.detectForVideo(t, i);
     } catch {
       return;
     }
-    const l = this.buildFrame(s, n);
-    this.onFrame(l);
+    const a = this.buildFrame(s, i);
+    this.onFrame(a);
   }
   buildFrame(t, e) {
-    const n = t.landmarks.map((i, d) => {
-      var f, v;
-      const c = t.handedness[d], u = ((f = c == null ? void 0 : c[0]) == null ? void 0 : f.categoryName) === "Left" ? "Left" : "Right", m = ((v = c == null ? void 0 : c[0]) == null ? void 0 : v.score) ?? 0, p = x(i);
-      return { handedness: u, score: m, landmarks: i, gesture: p };
-    }), s = n.find((i) => i.handedness === "Left") ?? null, l = n.find((i) => i.handedness === "Right") ?? null;
-    return { timestamp: e, hands: n, leftHand: s, rightHand: l };
+    const i = t.landmarks.map((n, d) => {
+      var p, g;
+      const c = t.handedness[d], h = ((p = c == null ? void 0 : c[0]) == null ? void 0 : p.categoryName) === "Left" ? "Left" : "Right", m = ((g = c == null ? void 0 : c[0]) == null ? void 0 : g.score) ?? 0, f = R(n);
+      return { handedness: h, score: m, landmarks: n, gesture: f };
+    }), s = i.find((n) => n.handedness === "Left") ?? null, a = i.find((n) => n.handedness === "Right") ?? null;
+    return { timestamp: e, hands: i, leftHand: s, rightHand: a };
   }
   getVideoElement() {
     return this.videoEl;
   }
 }
-class R {
+class A {
   constructor(t) {
-    a(this, "value", null);
+    l(this, "value", null);
     this.alpha = t;
   }
   update(t, e) {
@@ -177,9 +178,9 @@ class R {
     this.value = null;
   }
 }
-class F {
+class D {
   constructor(t) {
-    a(this, "value", null);
+    l(this, "value", null);
     this.alpha = t;
   }
   update(t) {
@@ -189,65 +190,80 @@ class F {
     this.value = null;
   }
 }
-class B {
+class U {
   constructor(t) {
-    a(this, "mode", "idle");
-    a(this, "actionDwell", null);
-    a(this, "releaseTimer", null);
-    a(this, "panSmoother");
-    a(this, "prevPanPos", null);
-    a(this, "zoomSmoother");
-    a(this, "prevZoomDist", null);
-    this.tuning = t, this.panSmoother = new R(t.smoothingAlpha), this.zoomSmoother = new F(t.smoothingAlpha);
+    l(this, "mode", "idle");
+    l(this, "actionDwell", null);
+    l(this, "releaseTimer", null);
+    l(this, "panSmoother");
+    l(this, "prevPanPos", null);
+    l(this, "zoomSmoother");
+    l(this, "prevZoomDist", null);
+    l(this, "rotateSmoother");
+    l(this, "prevRotateAngle", null);
+    this.tuning = t, this.panSmoother = new A(t.smoothingAlpha), this.zoomSmoother = new D(t.smoothingAlpha), this.rotateSmoother = new D(t.smoothingAlpha);
   }
   getMode() {
     return this.mode;
   }
   update(t) {
-    const e = t.timestamp, { actionDwellMs: n, releaseGraceMs: s } = this.tuning, { leftHand: l, rightHand: i } = t, d = l !== null && i !== null && l.gesture === "openPalm" && i.gesture === "openPalm", c = l !== null && l.gesture === "fist" && i === null || i !== null && i.gesture === "fist" && l === null, r = d ? "zooming" : c ? "panning" : "idle";
+    const e = t.timestamp, { actionDwellMs: i, releaseGraceMs: s } = this.tuning, { leftHand: a, rightHand: n } = t, d = n !== null && n.gesture === "fist", c = a !== null && a.gesture === "fist", h = d && c ? "rotating" : d ? "zooming" : c ? "panning" : "idle";
     if (this.mode === "idle")
-      return r !== "idle" ? this.actionDwell === null || this.actionDwell.gesture !== r ? this.actionDwell = { gesture: r, startMs: e } : e - this.actionDwell.startMs >= n && this.transitionTo(r) : this.actionDwell = null, this.buildOutput(null, null);
+      return h !== "idle" ? this.actionDwell === null || this.actionDwell.gesture !== h ? this.actionDwell = { gesture: h, startMs: e } : e - this.actionDwell.startMs >= i && this.transitionTo(h) : this.actionDwell = null, this.buildOutput(null, null, null);
     if (this.mode === "panning") {
-      if (r !== "panning")
-        return this.releaseTimer === null ? this.releaseTimer = e : e - this.releaseTimer >= s && this.transitionTo("idle"), this.buildOutput(null, null);
+      if (h !== "panning")
+        return this.releaseTimer === null ? this.releaseTimer = e : e - this.releaseTimer >= s && this.transitionTo("idle"), this.buildOutput(null, null, null);
       this.releaseTimer = null;
-      const u = (l == null ? void 0 : l.gesture) === "fist" ? l : i;
-      if (!u)
-        return this.transitionTo("idle"), this.buildOutput(null, null);
-      const m = u.landmarks[0], p = this.panSmoother.update(m.x, m.y);
-      let f = null;
+      const m = (a == null ? void 0 : a.gesture) === "fist" ? a : null;
+      if (!m)
+        return this.transitionTo("idle"), this.buildOutput(null, null, null);
+      const f = m.landmarks[0], p = this.panSmoother.update(f.x, f.y);
+      let g = null;
       if (this.prevPanPos !== null) {
-        const v = p.x - this.prevPanPos.x, P = p.y - this.prevPanPos.y, D = this.tuning.panDeadzonePx / 640;
-        (Math.abs(v) > D || Math.abs(P) > D) && (f = { x: v, y: P });
+        const I = p.x - this.prevPanPos.x, v = p.y - this.prevPanPos.y, w = this.tuning.panDeadzonePx / 640;
+        (Math.abs(I) > w || Math.abs(v) > w) && (g = { x: I, y: v });
       }
-      return this.prevPanPos = p, this.buildOutput(f, null);
+      return this.prevPanPos = p, this.buildOutput(g, null, null);
     }
     if (this.mode === "zooming") {
-      if (r !== "zooming")
-        return this.releaseTimer === null ? this.releaseTimer = e : e - this.releaseTimer >= s && this.transitionTo("idle"), this.buildOutput(null, null);
-      if (this.releaseTimer = null, !l || !i)
-        return this.transitionTo("idle"), this.buildOutput(null, null);
-      const u = S(l.landmarks, i.landmarks), m = this.zoomSmoother.update(u);
+      if (h !== "zooming")
+        return this.releaseTimer === null ? this.releaseTimer = e : e - this.releaseTimer >= s && this.transitionTo("idle"), this.buildOutput(null, null, null);
+      if (this.releaseTimer = null, !n)
+        return this.transitionTo("idle"), this.buildOutput(null, null, null);
+      const m = n.landmarks[0], f = this.zoomSmoother.update(m.y);
       let p = null;
       if (this.prevZoomDist !== null) {
-        const f = m - this.prevZoomDist;
-        Math.abs(f) > this.tuning.zoomDeadzoneRatio && (p = f);
+        const g = f - this.prevZoomDist;
+        Math.abs(g) > this.tuning.zoomDeadzoneRatio && (p = -g);
       }
-      return this.prevZoomDist = m, this.buildOutput(null, p);
+      return this.prevZoomDist = f, this.buildOutput(null, p, null);
     }
-    return this.buildOutput(null, null);
+    if (this.mode === "rotating") {
+      if (h !== "rotating")
+        return this.releaseTimer === null ? this.releaseTimer = e : e - this.releaseTimer >= s && this.transitionTo("idle"), this.buildOutput(null, null, null);
+      if (this.releaseTimer = null, !a || !n)
+        return this.transitionTo("idle"), this.buildOutput(null, null, null);
+      const m = a.landmarks[0], f = n.landmarks[0], p = Math.atan2(f.y - m.y, f.x - m.x), g = this.rotateSmoother.update(p);
+      let I = null;
+      if (this.prevRotateAngle !== null) {
+        let v = g - this.prevRotateAngle;
+        v > Math.PI && (v -= 2 * Math.PI), v < -Math.PI && (v += 2 * Math.PI), Math.abs(v) > 5e-3 && (I = v);
+      }
+      return this.prevRotateAngle = g, this.buildOutput(null, null, I);
+    }
+    return this.buildOutput(null, null, null);
   }
   transitionTo(t) {
-    this.mode = t, this.releaseTimer = null, this.actionDwell = null, t !== "panning" && (this.panSmoother.reset(), this.prevPanPos = null), t !== "zooming" && (this.zoomSmoother.reset(), this.prevZoomDist = null);
+    this.mode = t, this.releaseTimer = null, this.actionDwell = null, t !== "panning" && (this.panSmoother.reset(), this.prevPanPos = null), t !== "zooming" && (this.zoomSmoother.reset(), this.prevZoomDist = null), t !== "rotating" && (this.rotateSmoother.reset(), this.prevRotateAngle = null);
   }
-  buildOutput(t, e) {
-    return { mode: this.mode, panDelta: t, zoomDelta: e };
+  buildOutput(t, e, i) {
+    return { mode: this.mode, panDelta: t, zoomDelta: e, rotateDelta: i };
   }
   reset() {
     this.transitionTo("idle");
   }
 }
-const O = [
+const F = [
   [0, 1],
   [1, 2],
   [2, 3],
@@ -277,20 +293,20 @@ const O = [
   [9, 13],
   [13, 17]
   // palm cross
-], z = [
-  h.THUMB_TIP,
-  h.INDEX_TIP,
-  h.MIDDLE_TIP,
-  h.RING_TIP,
-  h.PINKY_TIP
+], O = [
+  r.THUMB_TIP,
+  r.INDEX_TIP,
+  r.MIDDLE_TIP,
+  r.RING_TIP,
+  r.PINKY_TIP
 ];
-class U {
+class V {
   constructor(t) {
-    a(this, "container");
-    a(this, "canvas");
-    a(this, "ctx");
-    a(this, "badge");
-    a(this, "config");
+    l(this, "container");
+    l(this, "canvas");
+    l(this, "ctx");
+    l(this, "badge");
+    l(this, "config");
     this.config = t, this.container = document.createElement("div"), this.container.className = "ol-gesture-overlay", this.applyContainerStyles(), this.canvas = document.createElement("canvas"), this.canvas.className = "ol-gesture-canvas", this.canvas.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;", this.badge = document.createElement("div"), this.badge.className = "ol-gesture-badge ol-gesture-badge--idle", this.badge.textContent = "Idle", this.container.appendChild(this.canvas), this.container.appendChild(this.badge);
     const e = this.canvas.getContext("2d");
     if (!e) throw new Error("Cannot get 2D canvas context");
@@ -311,35 +327,36 @@ class U {
   /** Called each frame with the latest gesture frame and mode. */
   render(t, e) {
     this.updateBadge(e);
-    const n = this.config.width, s = this.config.height;
-    if (this.canvas.width = n, this.canvas.height = s, this.ctx.clearRect(0, 0, n, s), t !== null)
-      for (const l of t.hands)
-        this.drawSkeleton(l.landmarks, e, l.gesture === "fist");
-  }
-  drawSkeleton(t, e, n) {
-    const { ctx: s } = this, l = this.config.width, i = this.config.height, d = (r) => (1 - r.x) * l, c = (r) => r.y * i;
-    s.strokeStyle = T.connection, s.lineWidth = 1.5;
-    for (const [r, u] of O)
-      !t[r] || !t[u] || (s.beginPath(), s.moveTo(d(t[r]), c(t[r])), s.lineTo(d(t[u]), c(t[u])), s.stroke());
-    for (let r = 0; r < t.length; r++) {
-      const u = t[r], m = z.includes(r), p = e !== "idle" && m ? T.fingertipGlow : T.landmark;
-      s.beginPath(), s.arc(d(u), c(u), m ? 5 : 3, 0, Math.PI * 2), s.fillStyle = p, s.fill(), e !== "idle" && m && (s.shadowBlur = n ? 12 : 6, s.shadowColor = T.fingertipGlow, s.fill(), s.shadowBlur = 0);
+    const i = this.config.width, s = this.config.height;
+    if (this.canvas.width = i, this.canvas.height = s, this.ctx.clearRect(0, 0, i, s), t !== null)
+      for (const a of t.hands)
+        this.drawSkeleton(a.landmarks, e, a.gesture === "fist");
+  }
+  drawSkeleton(t, e, i) {
+    const { ctx: s } = this, a = this.config.width, n = this.config.height, d = (u) => (1 - u.x) * a, c = (u) => u.y * n;
+    s.strokeStyle = y.connection, s.lineWidth = 1.5;
+    for (const [u, h] of F)
+      !t[u] || !t[h] || (s.beginPath(), s.moveTo(d(t[u]), c(t[u])), s.lineTo(d(t[h]), c(t[h])), s.stroke());
+    for (let u = 0; u < t.length; u++) {
+      const h = t[u], m = O.includes(u), f = e !== "idle" && m ? y.fingertipGlow : y.landmark;
+      s.beginPath(), s.arc(d(h), c(h), m ? 5 : 3, 0, Math.PI * 2), s.fillStyle = f, s.fill(), e !== "idle" && m && (s.shadowBlur = i ? 12 : 6, s.shadowColor = y.fingertipGlow, s.fill(), s.shadowBlur = 0);
     }
   }
   updateBadge(t) {
     const e = {
       idle: "Idle",
       panning: "Pan",
-      zooming: "Zoom"
+      zooming: "Zoom",
+      rotating: "Rotate"
     };
     this.badge.textContent = e[t], this.badge.className = `ol-gesture-badge ol-gesture-badge--${t}`;
   }
   applyContainerStyles() {
-    const { mode: t, position: e, width: n, height: s, opacity: l } = this.config;
-    if (this.container.style.cssText = "", this.container.style.position = "fixed", this.container.style.zIndex = "9999", this.container.style.overflow = "hidden", this.container.style.borderRadius = "8px", this.container.style.opacity = String(l), this.container.style.display = t === "hidden" ? "none" : "block", t === "corner") {
-      this.container.style.width = `${n}px`, this.container.style.height = `${s}px`;
-      const i = "16px";
-      e === "bottom-right" ? (this.container.style.bottom = i, this.container.style.right = i) : e === "bottom-left" ? (this.container.style.bottom = i, this.container.style.left = i) : e === "top-right" ? (this.container.style.top = i, this.container.style.right = i) : (this.container.style.top = i, this.container.style.left = i);
+    const { mode: t, position: e, width: i, height: s, opacity: a } = this.config;
+    if (this.container.style.cssText = "", this.container.style.position = "fixed", this.container.style.zIndex = "9999", this.container.style.overflow = "hidden", this.container.style.borderRadius = "8px", this.container.style.opacity = String(a), this.container.style.display = t === "hidden" ? "none" : "block", t === "corner") {
+      this.container.style.width = `${i}px`, this.container.style.height = `${s}px`;
+      const n = "16px";
+      e === "bottom-right" ? (this.container.style.bottom = n, this.container.style.right = n) : e === "bottom-left" ? (this.container.style.bottom = n, this.container.style.left = n) : e === "top-right" ? (this.container.style.top = n, this.container.style.right = n) : (this.container.style.top = n, this.container.style.left = n);
     } else t === "full" && (this.container.style.top = "0", this.container.style.left = "0", this.container.style.width = "100vw", this.container.style.height = "100vh", this.container.style.borderRadius = "0");
   }
   updateConfig(t) {
@@ -347,14 +364,14 @@ class U {
   }
 }
 export {
-  T as COLORS,
+  y as COLORS,
   H as DEFAULT_TUNING_CONFIG,
   L as DEFAULT_WEBCAM_CONFIG,
-  k as GestureController,
-  B as GestureStateMachine,
-  h as LANDMARKS,
-  U as WebcamOverlay,
-  x as classifyGesture,
-  N as getHandSize,
-  S as getTwoHandDistance
+  B as GestureController,
+  U as GestureStateMachine,
+  r as LANDMARKS,
+  V as WebcamOverlay,
+  R as classifyGesture,
+  x as getHandSize,
+  k as getTwoHandDistance
 };

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-export type GestureMode = 'idle' | 'panning' | 'zooming';
+export type GestureMode = 'idle' | 'panning' | 'zooming' | 'rotating';
 export type HandednessLabel = 'Left' | 'Right';
 export type GestureType = 'openPalm' | 'fist' | 'none';
 export interface Point2D {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@map-gesture-controls/core",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Map-agnostic hand gesture detection and state machine (MediaPipe)",
   "type": "module",
   "main": "dist/index.js",