@map-gesture-controls/core 0.1.8 → 0.2.0

package/dist/index.js

@@ -1,15 +1,15 @@
-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 = {
+var O = Object.defineProperty;
+var x = (i, t, e) => t in i ? O(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var l = (i, t, e) => x(i, typeof t != "symbol" ? t + "" : t, e);
+import { FilesetResolver as H } from "@mediapipe/tasks-vision";
+const Y = {
   enabled: !0,
   mode: "corner",
   opacity: 0.85,
   position: "bottom-right",
   width: 320,
   height: 240
-}, H = {
+}, Z = {
   actionDwellMs: 80,
   releaseGraceMs: 150,
   panDeadzonePx: 10,
@@ -29,17 +29,17 @@ const L = {
   RING_MCP: 13,
   PINKY_TIP: 20,
   PINKY_MCP: 17
-}, P = [
+}, L = 0.25, z = 0.35, b = [
   r.INDEX_TIP,
   r.MIDDLE_TIP,
   r.RING_TIP,
   r.PINKY_TIP
-], b = [
+], N = [
   r.INDEX_MCP,
   r.MIDDLE_MCP,
   r.RING_MCP,
   r.PINKY_MCP
-], y = {
+], w = {
   idle: "#888888",
   panning: "#00ccff",
   zooming: "#00ffcc",
@@ -47,49 +47,67 @@ const L = {
   landmark: "rgba(255,255,255,0.6)",
   connection: "rgba(255,255,255,0.3)",
   fingertipGlow: "#4488ff"
-}, _ = "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);
+}, B = "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm";
+function T(i, t) {
+  const e = i.x - t.x, n = i.y - t.y;
+  return Math.sqrt(e * e + n * n);
 }
-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)
+function _(i) {
+  const t = i[r.WRIST];
+  for (let s = 0; s < b.length; s++) {
+    const u = i[b[s]], c = i[N[s]];
+    if (T(u, t) < T(c, t) * 0.9)
       return !1;
   }
-  const e = x(o);
+  const e = D(i);
   if (e === 0) return !1;
-  const i = P.map((n) => o[n]);
-  let s = 1 / 0;
-  for (let n = 0; n < i.length - 1; n++) {
-    const d = T(i[n], i[n + 1]);
-    d < s && (s = d);
+  const n = b.map((s) => i[s]);
+  let o = 1 / 0;
+  for (let s = 0; s < n.length - 1; s++) {
+    const u = T(n[s], n[s + 1]);
+    u < o && (o = u);
   }
-  return s >= e * 0.18;
+  return o >= e * 0.18;
 }
-function S(o) {
-  const t = o[r.WRIST];
+function R(i) {
+  const t = i[r.WRIST];
   let e = 0;
-  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++;
+  for (let n = 0; n < b.length; n++) {
+    const o = i[b[n]], a = i[N[n]];
+    T(o, t) < T(a, t) * 1.1 && e++;
   }
   return e >= 3;
 }
-function x(o) {
-  const t = o[r.WRIST], e = o[r.MIDDLE_MCP];
+function D(i) {
+  const t = i[r.WRIST], e = i[r.MIDDLE_MCP];
   return !t || !e ? 0 : T(t, e);
 }
-function k(o, t) {
-  const e = o[r.INDEX_TIP], i = t[r.INDEX_TIP];
-  return !e || !i ? 0 : T(e, i);
+function k(i, t) {
+  const e = i[r.INDEX_TIP], n = t[r.INDEX_TIP];
+  return !e || !n ? 0 : T(e, n);
 }
-function R(o) {
-  return o.length < 21 ? "none" : S(o) ? "fist" : N(o) ? "openPalm" : "none";
+function F(i) {
+  const t = D(i);
+  if (t === 0) return !1;
+  const e = i[r.THUMB_TIP], n = i[r.INDEX_TIP];
+  return T(e, n) < t * L;
 }
-class B {
+function G(i) {
+  const t = D(i);
+  if (t === 0) return !1;
+  const e = i[r.THUMB_TIP], n = i[r.INDEX_TIP];
+  return T(e, n) < t * z;
+}
+function j(i) {
+  return i.length < 21 ? "none" : R(i) ? "fist" : F(i) ? "pinch" : _(i) ? "openPalm" : "none";
+}
+function M() {
+  let i = !1;
+  return function(e) {
+    return e.length < 21 ? (i = !1, "none") : R(e) ? (i = !1, "fist") : (i ? i = G(e) : i = F(e), i ? "pinch" : _(e) ? "openPalm" : "none");
+  };
+}
+class $ {
   constructor(t, e) {
     l(this, "landmarker", null);
     l(this, "videoEl", null);
@@ -99,6 +117,9 @@ class B {
     l(this, "onFrame");
     l(this, "tuning");
     l(this, "lastVideoTime", -1);
+    // One stateful classifier per hand label; persists pinch hysteresis across frames.
+    l(this, "leftClassifier", M());
+    l(this, "rightClassifier", M());
     this.tuning = t, this.onFrame = e;
   }
   /**
@@ -106,7 +127,7 @@ class B {
    * Returns the video element so the overlay can render it.
    */
   async init() {
-    const t = await C.forVisionTasks(_), { HandLandmarker: e } = await import("@mediapipe/tasks-vision");
+    const t = await H.forVisionTasks(B), { 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",
@@ -119,8 +140,8 @@ class B {
       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((i) => {
-      this.videoEl.addEventListener("loadeddata", () => i(), { once: !0 });
+    }), this.videoEl.srcObject = this.stream, await new Promise((n) => {
+      this.videoEl.addEventListener("loadeddata", () => n(), { once: !0 });
     }), this.videoEl;
   }
   start() {
@@ -131,7 +152,7 @@ class B {
   }
   destroy() {
     var t, e;
-    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;
+    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;
   }
   loop() {
     this.running && (this.rafHandle = requestAnimationFrame(() => this.loop()), this.processFrame());
@@ -139,31 +160,31 @@ class B {
   processFrame() {
     const t = this.videoEl, e = this.landmarker;
     if (!t || !e || t.readyState < 2) return;
-    const i = performance.now();
+    const n = performance.now();
     if (t.currentTime === this.lastVideoTime) return;
     this.lastVideoTime = t.currentTime;
-    let s;
+    let o;
     try {
-      s = e.detectForVideo(t, i);
+      o = e.detectForVideo(t, n);
     } catch {
       return;
     }
-    const a = this.buildFrame(s, i);
+    const a = this.buildFrame(o, n);
     this.onFrame(a);
   }
   buildFrame(t, e) {
-    const i = t.landmarks.map((n, d) => {
+    const n = t.landmarks.map((s, u) => {
       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 };
+      const c = t.handedness[u], d = ((p = c == null ? void 0 : c[0]) == null ? void 0 : p.categoryName) === "Left" ? "Left" : "Right", P = ((g = c == null ? void 0 : c[0]) == null ? void 0 : g.score) ?? 0, f = (d === "Left" ? this.leftClassifier : this.rightClassifier)(s);
+      return { handedness: d, score: P, landmarks: s, gesture: f };
+    }), o = n.find((s) => s.handedness === "Left") ?? null, a = n.find((s) => s.handedness === "Right") ?? null;
+    return { timestamp: e, hands: n, leftHand: o, rightHand: a };
   }
   getVideoElement() {
     return this.videoEl;
   }
 }
-class A {
+class U {
   constructor(t) {
     l(this, "value", null);
     this.alpha = t;
@@ -178,7 +199,7 @@ class A {
     this.value = null;
   }
 }
-class D {
+class C {
   constructor(t) {
     l(this, "value", null);
     this.alpha = t;
@@ -190,7 +211,7 @@ class D {
     this.value = null;
   }
 }
-class U {
+const E = class E {
   constructor(t) {
     l(this, "mode", "idle");
     l(this, "actionDwell", null);
@@ -201,69 +222,83 @@ class U {
     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);
+    // Tracks how many consecutive frames each hand has been active.
+    // Used to require the secondary hand to be stable before escalating
+    // the mode (e.g. pan → rotate), preventing a single noisy frame from
+    // interrupting an ongoing single-hand gesture.
+    l(this, "leftActiveFrames", 0);
+    l(this, "rightActiveFrames", 0);
+    this.tuning = t, this.panSmoother = new U(t.smoothingAlpha), this.zoomSmoother = new C(t.smoothingAlpha), this.rotateSmoother = new C(t.smoothingAlpha);
   }
   getMode() {
     return this.mode;
   }
   update(t) {
-    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";
+    const e = t.timestamp, { actionDwellMs: n, releaseGraceMs: o } = this.tuning, { leftHand: a, rightHand: s } = t, u = (f) => f !== null && (f.gesture === "fist" || f.gesture === "pinch"), c = u(s), h = u(a);
+    this.leftActiveFrames = h ? this.leftActiveFrames + 1 : 0, this.rightActiveFrames = c ? this.rightActiveFrames + 1 : 0;
+    const d = this.leftActiveFrames >= E.ESCALATION_FRAMES && this.rightActiveFrames >= E.ESCALATION_FRAMES, m = d ? "rotating" : h && c && !d && (this.mode === "panning" || this.mode === "zooming") ? this.mode : c ? "zooming" : h ? "panning" : "idle";
     if (this.mode === "idle")
-      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);
+      return m !== "idle" ? this.actionDwell === null || this.actionDwell.gesture !== m ? this.actionDwell = { gesture: m, startMs: e } : e - this.actionDwell.startMs >= n && this.transitionTo(m) : this.actionDwell = null, this.buildOutput(null, null, null);
     if (this.mode === "panning") {
-      if (h !== "panning")
-        return this.releaseTimer === null ? this.releaseTimer = e : e - this.releaseTimer >= s && this.transitionTo("idle"), this.buildOutput(null, null, null);
+      if (d)
+        return this.transitionTo("rotating"), this.buildOutput(null, null, null);
+      if (m !== "panning")
+        return this.releaseTimer === null ? this.releaseTimer = e : e - this.releaseTimer >= o && this.transitionTo("idle"), this.buildOutput(null, null, null);
       this.releaseTimer = null;
-      const m = (a == null ? void 0 : a.gesture) === "fist" ? a : null;
-      if (!m)
+      const f = u(a) ? a : null;
+      if (!f)
         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;
+      const p = f.landmarks[0], g = this.panSmoother.update(p.x, p.y);
+      let I = null;
       if (this.prevPanPos !== null) {
-        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 });
+        const y = g.x - this.prevPanPos.x, v = g.y - this.prevPanPos.y, A = this.tuning.panDeadzonePx / 640;
+        (Math.abs(y) > A || Math.abs(v) > A) && (I = { x: y, y: v });
       }
-      return this.prevPanPos = p, this.buildOutput(g, null, null);
+      return this.prevPanPos = g, this.buildOutput(I, null, null);
     }
     if (this.mode === "zooming") {
-      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)
+      if (d)
+        return this.transitionTo("rotating"), this.buildOutput(null, null, null);
+      if (m !== "zooming")
+        return this.releaseTimer === null ? this.releaseTimer = e : e - this.releaseTimer >= o && this.transitionTo("idle"), this.buildOutput(null, null, null);
+      if (this.releaseTimer = null, !s)
         return this.transitionTo("idle"), this.buildOutput(null, null, null);
-      const m = n.landmarks[0], f = this.zoomSmoother.update(m.y);
-      let p = null;
+      const f = s.landmarks[0], p = this.zoomSmoother.update(f.y);
+      let g = null;
       if (this.prevZoomDist !== null) {
-        const g = f - this.prevZoomDist;
-        Math.abs(g) > this.tuning.zoomDeadzoneRatio && (p = -g);
+        const I = p - this.prevZoomDist;
+        Math.abs(I) > this.tuning.zoomDeadzoneRatio && (g = -I);
       }
-      return this.prevZoomDist = f, this.buildOutput(null, p, null);
+      return this.prevZoomDist = p, this.buildOutput(null, g, 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)
+      if (m !== "rotating")
+        return this.releaseTimer === null ? this.releaseTimer = e : e - this.releaseTimer >= o && this.transitionTo("idle"), this.buildOutput(null, null, null);
+      if (this.releaseTimer = null, !a || !s)
         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;
+      const f = a.landmarks[0], p = s.landmarks[0], g = Math.atan2(p.y - f.y, p.x - f.x), I = this.rotateSmoother.update(g);
+      let y = 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);
+        let v = I - this.prevRotateAngle;
+        v > Math.PI && (v -= 2 * Math.PI), v < -Math.PI && (v += 2 * Math.PI), Math.abs(v) > 5e-3 && (y = v);
       }
-      return this.prevRotateAngle = g, this.buildOutput(null, null, I);
+      return this.prevRotateAngle = I, this.buildOutput(null, null, y);
     }
     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), t !== "rotating" && (this.rotateSmoother.reset(), this.prevRotateAngle = null);
+    this.mode = t, this.releaseTimer = null, this.actionDwell = null, t !== "panning" && t !== "rotating" && (this.leftActiveFrames = 0), t !== "zooming" && t !== "rotating" && (this.rightActiveFrames = 0), 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, i) {
-    return { mode: this.mode, panDelta: t, zoomDelta: e, rotateDelta: i };
+  buildOutput(t, e, n) {
+    return { mode: this.mode, panDelta: t, zoomDelta: e, rotateDelta: n };
   }
   reset() {
     this.transitionTo("idle");
   }
-}
-const F = [
+};
+l(E, "ESCALATION_FRAMES", 3);
+let S = E;
+const X = [
   [0, 1],
   [1, 2],
   [2, 3],
@@ -293,21 +328,24 @@ const F = [
   [9, 13],
   [13, 17]
   // palm cross
-], O = [
+], V = [
   r.THUMB_TIP,
   r.INDEX_TIP,
   r.MIDDLE_TIP,
   r.RING_TIP,
   r.PINKY_TIP
 ];
-class V {
+class q {
   constructor(t) {
     l(this, "container");
     l(this, "canvas");
     l(this, "ctx");
     l(this, "badge");
+    l(this, "resetBar");
+    l(this, "resetFill");
     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);
+    l(this, "lastMode", null);
+    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.resetBar = document.createElement("div"), this.resetBar.className = "ol-gesture-reset", this.resetBar.innerHTML = '<span class="ol-gesture-reset-label">Reset</span><div class="ol-gesture-reset-track"><div class="ol-gesture-reset-fill"></div></div>', this.resetBar.style.opacity = "0", this.resetFill = this.resetBar.querySelector(".ol-gesture-reset-fill"), this.container.appendChild(this.canvas), this.container.appendChild(this.badge), this.container.appendChild(this.resetBar);
     const e = this.canvas.getContext("2d");
     if (!e) throw new Error("Cannot get 2D canvas context");
     this.ctx = e;
@@ -324,25 +362,30 @@ class V {
     var t;
     (t = this.container.parentElement) == null || t.removeChild(this.container);
   }
-  /** Called each frame with the latest gesture frame and mode. */
-  render(t, e) {
-    this.updateBadge(e);
-    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);
+  /** Called each frame with the latest gesture frame, mode, and optional reset progress (0 to 1). */
+  render(t, e, n = 0) {
+    this.updateBadge(e), this.updateResetBar(n);
+    const o = this.config.width, a = this.config.height;
+    if ((this.canvas.width !== o || this.canvas.height !== a) && (this.canvas.width = o, this.canvas.height = a), this.ctx.clearRect(0, 0, o, a), t !== null)
+      for (const s of t.hands)
+        this.drawSkeleton(s.landmarks, e, s.gesture === "fist");
+  }
+  updateResetBar(t) {
+    this.resetFill.style.width = `${t * 100}%`, this.resetBar.style.opacity = t > 0 ? "1" : "0";
+  }
+  drawSkeleton(t, e, n) {
+    const { ctx: o } = this, a = this.config.width, s = this.config.height, u = (h) => (1 - h.x) * a, c = (h) => h.y * s;
+    o.strokeStyle = w.connection, o.lineWidth = 1.5;
+    for (const [h, d] of X)
+      !t[h] || !t[d] || (o.beginPath(), o.moveTo(u(t[h]), c(t[h])), o.lineTo(u(t[d]), c(t[d])), o.stroke());
+    for (let h = 0; h < t.length; h++) {
+      const d = t[h], P = V.includes(h), m = e !== "idle" && P ? w.fingertipGlow : w.landmark;
+      o.beginPath(), o.arc(u(d), c(d), P ? 5 : 3, 0, Math.PI * 2), o.fillStyle = m, o.fill(), e !== "idle" && P && (o.shadowBlur = n ? 12 : 6, o.shadowColor = w.fingertipGlow, o.fill(), o.shadowBlur = 0);
     }
   }
   updateBadge(t) {
+    if (t === this.lastMode) return;
+    this.lastMode = t;
     const e = {
       idle: "Idle",
       panning: "Pan",
@@ -352,11 +395,11 @@ class V {
     this.badge.textContent = e[t], this.badge.className = `ol-gesture-badge ol-gesture-badge--${t}`;
   }
   applyContainerStyles() {
-    const { mode: t, position: e, width: i, height: s, opacity: a } = this.config;
+    const { mode: t, position: e, width: n, height: o, 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);
+      this.container.style.width = `${n}px`, this.container.style.height = `${o}px`;
+      const s = "16px";
+      e === "bottom-right" ? (this.container.style.bottom = s, this.container.style.right = s) : e === "bottom-left" ? (this.container.style.bottom = s, this.container.style.left = s) : e === "top-right" ? (this.container.style.top = s, this.container.style.right = s) : (this.container.style.top = s, this.container.style.left = s);
     } 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) {
@@ -364,14 +407,15 @@ class V {
   }
 }
 export {
-  y as COLORS,
-  H as DEFAULT_TUNING_CONFIG,
-  L as DEFAULT_WEBCAM_CONFIG,
-  B as GestureController,
-  U as GestureStateMachine,
+  w as COLORS,
+  Z as DEFAULT_TUNING_CONFIG,
+  Y as DEFAULT_WEBCAM_CONFIG,
+  $ as GestureController,
+  S as GestureStateMachine,
   r as LANDMARKS,
-  V as WebcamOverlay,
-  R as classifyGesture,
-  x as getHandSize,
+  q as WebcamOverlay,
+  j as classifyGesture,
+  M as createHandClassifier,
+  D as getHandSize,
   k as getTwoHandDistance
 };

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 export type GestureMode = 'idle' | 'panning' | 'zooming' | 'rotating';
 export type HandednessLabel = 'Left' | 'Right';
-export type GestureType = 'openPalm' | 'fist' | 'none';
+export type GestureType = 'openPalm' | 'fist' | 'pinch' | 'none';
 export interface Point2D {
     x: number;
     y: number;

package/package.json

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

package/dist/GestureStateMachine.test.d.ts

@@ -1 +0,0 @@
-export {};