@sigx/lynx-gestures 0.1.2 → 0.4.1

package/dist/use-pinch.js

@@ -0,0 +1,106 @@
+import { signal } from '@sigx/lynx';
+import { distance, midpoint } from './utils.js';
+/**
+ * Two-finger pinch/zoom gesture.
+ *
+ * Tracks fingers manually since Lynx fires separate touchstart events per
+ * finger (each with touches.length=1). Uses proximity-based matching on
+ * touchmove since Lynx identifiers are unreliable across events.
+ *
+ * NOTE: Requires a device/environment that delivers multi-touch events to
+ * the same element. Some Lynx hosts (e.g. Lynx Explorer on emulator) may
+ * not support this — test on a physical device.
+ */
+export function usePinch(options = {}) {
+    const { onPinch } = options;
+    const state = signal({
+        phase: 'idle',
+        scale: 1,
+        focalX: 0,
+        focalY: 0,
+    });
+    let baseDistance = 0;
+    let active = false;
+    let finger1 = null;
+    let finger2 = null;
+    function onTouchStart(e) {
+        const t = e.touches[0];
+        if (!t)
+            return;
+        if (!finger1) {
+            finger1 = { ...t };
+        }
+        else if (!finger2) {
+            finger2 = { ...t };
+            active = true;
+            baseDistance = distance(finger1.pageX, finger1.pageY, finger2.pageX, finger2.pageY);
+            const [fx, fy] = midpoint(finger1.pageX, finger1.pageY, finger2.pageX, finger2.pageY);
+            state.phase = 'began';
+            state.scale = 1;
+            state.focalX = fx;
+            state.focalY = fy;
+        }
+    }
+    function onTouchMove(e) {
+        if (!active || !finger1 || !finger2)
+            return;
+        const t = e.changedTouches[0];
+        if (!t)
+            return;
+        // Determine which finger moved by proximity
+        const dist1 = distance(t.pageX, t.pageY, finger1.pageX, finger1.pageY);
+        const dist2 = distance(t.pageX, t.pageY, finger2.pageX, finger2.pageY);
+        if (dist1 < dist2) {
+            finger1 = { ...t };
+        }
+        else {
+            finger2 = { ...t };
+        }
+        const currentDist = distance(finger1.pageX, finger1.pageY, finger2.pageX, finger2.pageY);
+        const scale = baseDistance > 0 ? currentDist / baseDistance : 1;
+        const [fx, fy] = midpoint(finger1.pageX, finger1.pageY, finger2.pageX, finger2.pageY);
+        state.phase = 'active';
+        state.scale = scale;
+        state.focalX = fx;
+        state.focalY = fy;
+        onPinch?.(state);
+    }
+    function onTouchEnd() {
+        if (active) {
+            state.phase = 'ended';
+            onPinch?.(state);
+        }
+        active = false;
+        finger1 = null;
+        finger2 = null;
+    }
+    function onTouchCancel() {
+        if (active) {
+            state.phase = 'cancelled';
+            onPinch?.(state);
+        }
+        active = false;
+        finger1 = null;
+        finger2 = null;
+    }
+    function reset() {
+        active = false;
+        finger1 = null;
+        finger2 = null;
+        state.phase = 'idle';
+        state.scale = 1;
+        state.focalX = 0;
+        state.focalY = 0;
+    }
+    return {
+        state,
+        handlers: {
+            bindtouchstart: onTouchStart,
+            bindtouchmove: onTouchMove,
+            bindtouchend: onTouchEnd,
+            bindtouchcancel: onTouchCancel,
+        },
+        reset,
+    };
+}
+//# sourceMappingURL=use-pinch.js.map

package/dist/use-pinch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pinch.js","sourceRoot":"","sources":["../src/use-pinch.ts"],"names":[],"mappings":"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"}

package/dist/use-rotation.js

@@ -0,0 +1,117 @@
+import { signal } from '@sigx/lynx';
+import { angle, angleDelta, distance, midpoint } from './utils.js';
+/**
+ * Two-finger rotation gesture.
+ *
+ * Tracks the angle of the line between two fingers; reports cumulative rotation
+ * in radians from gesture start. Like usePinch, uses proximity-based finger
+ * matching on touchmove (Lynx touch identifiers are not stable across events).
+ *
+ * NOTE: requires multi-touch delivery to the same element. Some Lynx hosts
+ * (Lynx Explorer on emulator) may not support this — test on a physical device.
+ */
+export function useRotation(options = {}) {
+    const { onRotation } = options;
+    const state = signal({
+        phase: 'idle',
+        rotation: 0,
+        velocity: 0,
+        focalX: 0,
+        focalY: 0,
+    });
+    let baseAngle = 0;
+    let prevAngle = 0;
+    let prevTime = 0;
+    let active = false;
+    let finger1 = null;
+    let finger2 = null;
+    function onTouchStart(e) {
+        const t = e.touches[0];
+        if (!t)
+            return;
+        if (!finger1) {
+            finger1 = { ...t };
+        }
+        else if (!finger2) {
+            finger2 = { ...t };
+            active = true;
+            baseAngle = angle(finger1.pageX, finger1.pageY, finger2.pageX, finger2.pageY);
+            prevAngle = baseAngle;
+            prevTime = Date.now();
+            const [fx, fy] = midpoint(finger1.pageX, finger1.pageY, finger2.pageX, finger2.pageY);
+            state.phase = 'began';
+            state.rotation = 0;
+            state.velocity = 0;
+            state.focalX = fx;
+            state.focalY = fy;
+        }
+    }
+    function onTouchMove(e) {
+        if (!active || !finger1 || !finger2)
+            return;
+        const t = e.changedTouches[0];
+        if (!t)
+            return;
+        const dist1 = distance(t.pageX, t.pageY, finger1.pageX, finger1.pageY);
+        const dist2 = distance(t.pageX, t.pageY, finger2.pageX, finger2.pageY);
+        if (dist1 < dist2) {
+            finger1 = { ...t };
+        }
+        else {
+            finger2 = { ...t };
+        }
+        const now = Date.now();
+        const dt = Math.max(now - prevTime, 1);
+        const currentAngle = angle(finger1.pageX, finger1.pageY, finger2.pageX, finger2.pageY);
+        const rotation = angleDelta(baseAngle, currentAngle);
+        const velocity = angleDelta(prevAngle, currentAngle) / dt;
+        const [fx, fy] = midpoint(finger1.pageX, finger1.pageY, finger2.pageX, finger2.pageY);
+        prevAngle = currentAngle;
+        prevTime = now;
+        state.phase = 'active';
+        state.rotation = rotation;
+        state.velocity = velocity;
+        state.focalX = fx;
+        state.focalY = fy;
+        onRotation?.(state);
+    }
+    function onTouchEnd() {
+        if (active) {
+            state.phase = 'ended';
+            onRotation?.(state);
+        }
+        active = false;
+        finger1 = null;
+        finger2 = null;
+    }
+    function onTouchCancel() {
+        if (active) {
+            state.phase = 'cancelled';
+            onRotation?.(state);
+        }
+        active = false;
+        finger1 = null;
+        finger2 = null;
+    }
+    function reset() {
+        active = false;
+        finger1 = null;
+        finger2 = null;
+        state.phase = 'idle';
+        state.rotation = 0;
+        state.velocity = 0;
+        state.focalX = 0;
+        state.focalY = 0;
+    }
+    return {
+        state,
+        handlers: {
+            bindtouchstart: onTouchStart,
+            bindtouchmove: onTouchMove,
+            bindtouchend: onTouchEnd,
+            bindtouchcancel: onTouchCancel,
+        },
+        reset,
+    };
+}
+//# sourceMappingURL=use-rotation.js.map

package/dist/use-rotation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-rotation.js","sourceRoot":"","sources":["../src/use-rotation.ts"],"names":[],"mappings":"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"}

package/dist/utils.js

@@ -0,0 +1,25 @@
+// Geometry helpers used by the multi-touch JS-only fallback hooks
+// (`usePinch`, `useRotation`). The arena-driven gesture surface
+// (`Gesture.*` + `useGestureDetector`) computes its own deltas natively;
+// this file is only relevant while the platform's pinch/rotation handlers
+// are unfinished.
+export function distance(x1, y1, x2, y2) {
+    return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+}
+export function midpoint(x1, y1, x2, y2) {
+    return [(x1 + x2) / 2, (y1 + y2) / 2];
+}
+/** Signed angle in radians from p1 to p2, range (-π, π]. */
+export function angle(x1, y1, x2, y2) {
+    return Math.atan2(y2 - y1, x2 - x1);
+}
+/** Shortest signed angular delta between two radians, range (-π, π]. */
+export function angleDelta(from, to) {
+    let d = to - from;
+    while (d > Math.PI)
+        d -= 2 * Math.PI;
+    while (d <= -Math.PI)
+        d += 2 * Math.PI;
+    return d;
+}
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,gEAAgE;AAChE,yEAAyE;AACzE,0EAA0E;AAC1E,kBAAkB;AAElB,MAAM,UAAU,QAAQ,CAAC,EAAU,EAAE,EAAU,EAAE,EAAU,EAAE,EAAU;IACrE,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AACpD,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,EAAU,EAAE,EAAU,EAAE,EAAU,EAAE,EAAU;IACrE,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AACxC,CAAC;AAED,4DAA4D;AAC5D,MAAM,UAAU,KAAK,CAAC,EAAU,EAAE,EAAU,EAAE,EAAU,EAAE,EAAU;IAClE,OAAO,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;AACtC,CAAC;AAED,wEAAwE;AACxE,MAAM,UAAU,UAAU,CAAC,IAAY,EAAE,EAAU;IACjD,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC;IAClB,OAAO,CAAC,GAAG,IAAI,CAAC,EAAE;QAAE,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;IACrC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;QAAE,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;IACvC,OAAO,CAAC,CAAC;AACX,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/lynx-gestures",
-  "version": "0.1.2",
+  "version": "0.4.1",
   "description": "Gesture system for sigx-lynx - declarative composables for tap, pan, pinch, swipe, long press",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,15 +28,15 @@
   "author": "Andreas Ekdahl",
   "license": "MIT",
   "dependencies": {
-    "@sigx/lynx": "^0.1.4"
+    "@sigx/lynx": "^0.4.1"
   },
   "devDependencies": {
-    "@lynx-js/react": "^0.119.0",
+    "@lynx-js/react": "^0.121.0",
+    "@typescript/native-preview": "7.0.0-dev.20260511.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.12",
-    "@sigx/lynx-plugin": "^0.2.7",
-    "@sigx/lynx-runtime-main": "^0.2.7",
-    "@sigx/lynx-testing": "^0.2.6"
+    "@sigx/lynx-runtime-main": "^0.4.1",
+    "@sigx/lynx-plugin": "^0.4.1",
+    "@sigx/lynx-testing": "^0.4.1"
   },
   "repository": {
     "type": "git",
@@ -51,7 +51,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "vite build && tsgo --emitDeclarationOnly",
-    "dev": "vite build --watch"
+    "build": "node ../../scripts/clean.mjs dist && tsgo",
+    "dev": "tsgo --watch",
+    "clean": "node ../../scripts/clean.mjs dist .turbo"
   }
 }

package/src/components/Pressable.tsx

@@ -16,6 +16,17 @@ export type PressableProps =
   & Define.Prop<'disabled', boolean, false>
   & Define.Prop<'class', string, false>
   & Define.Prop<'style', Record<string, string | number>, false>
+  // Accessibility passthrough — forwarded onto the inner <view> so the
+  // interactive node (the one that owns the tap handler) is also the one
+  // screen readers activate. Without these, callers who want a11y on a
+  // Pressable have to wrap it in an outer accessibility-element <view>,
+  // which puts the metadata and the gesture handler on different nodes
+  // and breaks screen-reader activation.
+  & Define.Prop<'accessibility-element', boolean, false>
+  & Define.Prop<'accessibility-label', string, false>
+  & Define.Prop<'accessibility-role', string, false>
+  & Define.Prop<'accessibility-trait', string, false>
+  & Define.Prop<'accessibility-status', string, false>
   & Define.Slot<'default'>
   & Define.Event<'press', void>
   & Define.Event<'longPress', void>;
@@ -57,9 +68,10 @@ interface PressableMTState {
  * `LongPress.onEnd` skips press emission when the touch drifted past
  * the threshold (matching Tap's success criteria).
  *
- * Disabled is captured at setup; runtime toggling won't update an active
- * gesture's behavior. Wrap the parent in conditional rendering for now if
- * dynamic disable is needed.
+ * `disabled` reads live from a `MainThreadRef` so flipping it after mount
+ * (e.g. a `<Button loading>` toggling on) immediately suppresses both
+ * visual feedback and emit, without remounting the component or the
+ * underlying gesture registration.
  */
 export const Pressable = component<PressableProps>(({ props, slots, emit }) => {
   const elRef = useMainThreadRef<MainThread.Element | null>(null);
@@ -74,7 +86,11 @@ export const Pressable = component<PressableProps>(({ props, slots, emit }) => {
   const minDuration = longPressDuration > 0 ? longPressDuration : 1_000_000;
   const maxDistance = props.maxDistance ?? 10;
   const maxDistanceSq = maxDistance * maxDistance;
-  const disabled = props.disabled ?? false;
+
+  // Reactive `disabled` — worklets read `disabledRef.current` so prop
+  // changes after mount take effect without re-registering the gesture.
+  // The render fn below keeps this ref in sync each pass.
+  const disabledRef = useMainThreadRef<boolean>(!!props.disabled);
 
   const state = useMainThreadRef<PressableMTState>({
     longPressFired: false,
@@ -87,7 +103,7 @@ export const Pressable = component<PressableProps>(({ props, slots, emit }) => {
     .maxDistance(maxDistance)
     .onBegin((e: any) => {
       'main thread';
-      if (disabled) return;
+      if (disabledRef.current) return;
       // Reset the cross-platform state on every fresh touch-down. Both
       // Tap.onBegin and LongPress.onBegin fire — first one wins, second
       // is a no-op because pressEmitted/longPressFired are already false.
@@ -103,7 +119,7 @@ export const Pressable = component<PressableProps>(({ props, slots, emit }) => {
     })
     .onStart(() => {
       'main thread';
-      if (disabled) return;
+      if (disabledRef.current) return;
       // Android path: Tap.onStart fires on touchend within maxDuration;
       // emit press here. The LongPress.onEnd fallback below is gated on
       // !pressEmitted so it won't double-fire on Android.
@@ -129,7 +145,7 @@ export const Pressable = component<PressableProps>(({ props, slots, emit }) => {
     .maxDistance(maxDistance)
     .onBegin(() => {
       'main thread';
-      if (disabled) return;
+      if (disabledRef.current) return;
       // Idempotent with Tap.onBegin — both fire on touch-down. State has
       // already been initialised by Tap.onBegin (whichever fires first).
       elRef.current?.setStyleProperties({
@@ -139,7 +155,7 @@ export const Pressable = component<PressableProps>(({ props, slots, emit }) => {
     })
     .onStart(() => {
       'main thread';
-      if (disabled) return;
+      if (disabledRef.current) return;
       state.current.longPressFired = true;
       runOnBackground(() => { emit('longPress'); })();
     })
@@ -151,7 +167,7 @@ export const Pressable = component<PressableProps>(({ props, slots, emit }) => {
         opacity: 1,
         transform: 'scale(1)',
       });
-      if (disabled) return;
+      if (disabledRef.current) return;
       // iOS fallback path. On iOS Tap.onStart never fires, so press would
       // never emit without this. On Android this is a no-op because
       // pressEmitted is already true (or longPressFired is true).
@@ -169,13 +185,23 @@ export const Pressable = component<PressableProps>(({ props, slots, emit }) => {
 
   useGestureDetector(elRef, gesture);
 
-  return () => (
-    <view
-      class={props.class}
-      style={props.style}
-      main-thread:ref={elRef}
-    >
-      {slots.default?.()}
-    </view>
-  );
+  return () => {
+    // Keep the reactive-disabled ref in sync with the prop on every render.
+    // Worklets read `.current` at call time, so this is the only writer.
+    disabledRef.current = !!props.disabled;
+    return (
+      <view
+        class={props.class}
+        style={props.style}
+        main-thread:ref={elRef}
+        accessibility-element={props['accessibility-element']}
+        accessibility-label={props['accessibility-label']}
+        accessibility-role={props['accessibility-role']}
+        accessibility-trait={props['accessibility-trait']}
+        accessibility-status={props['accessibility-status']}
+      >
+        {slots.default?.()}
+      </view>
+    );
+  };
 });