@sigx/lynx-gestures 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-2026 Andreas Ekdahl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,358 @@
+# @sigx/lynx-gestures
+
+Declarative, **frame-locked** gesture and animation primitives for [SignalX](https://github.com/signalxjs) on Lynx. Touch handlers, drag/swipe components, and animation linkage all run on the platform's main UI thread — your gestures track the finger at the display refresh rate even when the JS thread is busy fetching, parsing, or re-rendering.
+
+## Features
+
+- **Built-in gesture components** — `<Pressable>`, `<Draggable>`, `<Swipeable>` — drop in for instant 60/120 fps interactions, no worklet plumbing in user code.
+- **Main-Thread Scripting under the hood** — touch handlers, transform updates, and visual feedback run on Lynx's main thread (Lepus) so gestures don't block on your background JS.
+- **Background-thread composables** — `useTap`, `useLongPress`, `usePan`, `usePinch`, `useSwipe`, `useRotation`, `useFling`, `usePanResponder`, and a `useGesture` composer with simultaneous / exclusive / sequential relations.
+- **Composition utilities** — `mergeHandlers`, gesture composers, render-prop slots for swipe-to-reveal actions.
+
+> **Cross-thread primitive moved + renamed.** `useSharedValue`, `SharedValue` (formerly `useAnimatedValue` / `AnimatedValue`), and `useAnimatedStyle` were promoted to [`@sigx/lynx`](../lynx) in 0.3.0 — they have no gesture coupling and now live next to `MainThreadRef` (their base class). The primitive was renamed in Phase 2.8 to reflect that it's a general MT/BG bridge — animation is one customer; gestures and scroll are equally first-class. The old `useAnimatedValue` / `AnimatedValue` import paths still work via deprecated re-exports for one minor cycle; please import `useSharedValue` / `SharedValue` from `@sigx/lynx` directly in new code.
+
+## Installation
+
+```bash
+npm install @sigx/lynx-gestures
+```
+
+> Requires `@sigx/lynx` as a peer dependency. The build pipeline (`@sigx/lynx-plugin`) handles the `'main thread'` worklet transform automatically.
+
+## Quick start
+
+```tsx
+import { signal, component, useSharedValue } from '@sigx/lynx';
+import { Pressable, Draggable, Swipeable } from '@sigx/lynx-gestures';
+
+const App = component(() => {
+  const taps = signal(0);
+  const dragX = useSharedValue(0);
+
+  return () => (
+    <view>
+      {/* Tap with instant visual feedback */}
+      <Pressable
+        pressedOpacity={0.5}
+        pressedScale={0.95}
+        onPress={() => { taps.value++; }}
+        style={{ width: '100px', height: '100px', backgroundColor: '#3b82f6' }}
+      />
+
+      {/* Drag at native frame rate; observe position on BG */}
+      <Draggable
+        translateX={dragX}
+        snapBack
+        onDragEnd={(e) => console.log('released at', e.x, e.y)}
+        style={{ width: '90px', height: '90px', backgroundColor: '#a855f7' }}
+      />
+      <text>BG sees x = {dragX.value}</text>
+
+      {/* Swipe-to-reveal */}
+      <Swipeable
+        rightActions={() => <view><text>Delete</text></view>}
+        onSwipeOpen={(e) => console.log('opened', e.side)}
+      >
+        <view><text>Swipe me</text></view>
+      </Swipeable>
+    </view>
+  );
+});
+```
+
+---
+
+## Why this exists — the architecture
+
+### The two-thread model
+
+Lynx runs your app on two JS contexts:
+
+- **Background (BG) thread** — your component code, signals, effects, fetch/parse, JSX renders.
+- **Main (MT) thread** — the renderer's commit thread, where native draw calls happen.
+
+A naive touch handler runs on BG, mutates a signal, triggers a re-render, the renderer diffs styles, queues an op, the op crosses to MT, MT commits. **Two thread crossings per touchmove**, plus a JSX render and a JSON marshal. At 120 Hz touch input, that pipeline can't keep up — the cursor visibly lags the finger and chatters under GC pressure.
+
+### How `@sigx/lynx-gestures` solves it
+
+Gesture components mark their touch handlers as `'main thread'` worklets. The build pipeline extracts those handlers, ships them to MT once at startup, and Lynx native dispatches touch events directly to them. The handler then mutates a `SharedValue` (a thread-aware ref) and calls `setStyleProperties` on the bound element — all on the MT thread, **zero crossings**, no JSX render, no JSON.
+
+### Cross-thread observability
+
+When you pass a `SharedValue` to a gesture component, the MT thread continuously writes to it. A bridge publishes those writes to the BG thread once per native flush (typically per frame), where they land in a `signal`-style mirror. Your `effect(() => sv.value)` re-runs reactively without injecting BG into the gesture hot path.
+
+```
+MT thread: tx.current.value = 50   ─┐
+MT thread: setStyleProperties(...)  │  one event per flush
+   ↓ __FlushElementTree              │  with [wvid, value] tuples
+   ↓ flushAvBridgePublishes ────────┘
+BG thread: signal value = 50  → effect re-runs, debounce, fetch, etc.
+```
+
+---
+
+## Built-in components
+
+### `<Pressable>`
+
+Tap and long-press with optional visual feedback. The opacity and scale flash apply on MT inside the touchstart worklet, so feedback is visually instantaneous.
+
+```tsx
+<Pressable
+  pressedOpacity={0.5}
+  pressedScale={0.95}
+  longPressDuration={500}
+  onPress={() => doThing()}
+  onLongPress={() => doOtherThing()}
+  style={{ ... }}
+>
+  <text>Press me</text>
+</Pressable>
+```
+
+| Prop                 | Type      | Default | Description                                              |
+| -------------------- | --------- | ------- | -------------------------------------------------------- |
+| `pressedOpacity`     | `number`  | —       | Opacity to apply on press, restored on release.          |
+| `pressedScale`       | `number`  | —       | `scale()` factor on press, restored on release.          |
+| `longPressDuration`  | `number`  | `500`   | ms to hold before `onLongPress` fires.                   |
+| `maxDistance`        | `number`  | `10`    | Move threshold (px) above which press is cancelled.      |
+| `disabled`           | `boolean` | `false` | Suppresses both events and visual feedback.              |
+| `onPress`            | event     | —       | Fires on tap (touchend within `maxDistance`).            |
+| `onLongPress`        | event     | —       | Fires after `longPressDuration` if still pressed.        |
+
+### `<Draggable>`
+
+Pan-to-translate on the MT thread, with optional axis lock, bounds clamping, snap-back, and `SharedValue` exposure of the position.
+
+```tsx
+const tx = useSharedValue(0);
+const ty = useSharedValue(0);
+
+<Draggable
+  axis="both"
+  threshold={4}
+  snapBack
+  minX={-100} maxX={100}
+  translateX={tx} translateY={ty}
+  onDragStart={(e) => console.log('start', e.x, e.y)}
+  onDragEnd={(e) => console.log('end', e.x, e.y, 'velocity', e.vx, e.vy)}
+>
+  <view style={{ width: '90px', height: '90px', backgroundColor: '#a855f7' }} />
+</Draggable>
+```
+
+| Prop                | Type                            | Default | Description                                              |
+| ------------------- | ------------------------------- | ------- | -------------------------------------------------------- |
+| `axis`              | `'x' \| 'y' \| 'both'`          | `'both'`| Restrict motion to one axis.                             |
+| `threshold`         | `number`                        | `0`     | Min distance (px) before recognition fires.              |
+| `snapBack`          | `boolean`                       | `false` | Animate back to origin on release.                       |
+| `minX`/`maxX`/`minY`/`maxY` | `number`                | —       | Clamp the translation range.                             |
+| `translateX`        | `SharedValue<number>`           | —       | External SharedValue the worklet writes on every touchmove. |
+| `translateY`        | `SharedValue<number>`           | —       | Same, for the Y axis.                                    |
+| `onDragStart`       | event `{ x, y }`                | —       | Fires once per gesture after threshold is met.           |
+| `onDragEnd`         | event `{ x, y, vx, vy }`        | —       | Fires on release; includes terminal velocity.            |
+
+### `<Swipeable>`
+
+Horizontal swipe-to-reveal with up to two action panels. Uses `MTElementWrapper.animate()` for the snap, so the easing curve runs on the native compositor.
+
+```tsx
+<Swipeable
+  leftActions={() => <view style={{ backgroundColor: '#22c55e' }}><text>Archive</text></view>}
+  rightActions={() => <view style={{ backgroundColor: '#ef4444' }}><text>Delete</text></view>}
+  onSwipeOpen={(e) => console.log('opened', e.side)}
+  onSwipeClose={() => console.log('closed')}
+>
+  <view><text>Row content</text></view>
+</Swipeable>
+```
+
+| Prop                  | Type                             | Default | Description                                              |
+| --------------------- | -------------------------------- | ------- | -------------------------------------------------------- |
+| `leftActionsWidth`    | `number`                         | `100`   | Width (px) of the left reveal panel.                     |
+| `rightActionsWidth`   | `number`                         | `100`   | Width (px) of the right reveal panel.                    |
+| `snapThreshold`       | `number`                         | `40`    | Min translation before snapping to the open position.    |
+| `snapDuration`        | `number`                         | `200`   | Snap animation duration (ms).                            |
+| `leftActions`         | `() => JSX`                      | —       | Render-prop for the left panel.                          |
+| `rightActions`        | `() => JSX`                      | —       | Render-prop for the right panel.                         |
+| `onSwipeOpen`         | event `{ side: 'left' \| 'right' }` | —    | Fires when the row snaps open.                           |
+| `onSwipeClose`        | event                             | —      | Fires when the row snaps closed from an open position.   |
+
+### `<ScrollView>`
+
+MT-thread `<scroll-view>` wrapper that mirrors scroll position into a `SharedValue`. Pair with `useAnimatedStyle` for parallax / fade / scale effects driven by scroll — all running on MT with zero per-frame thread crossings.
+
+```tsx
+import { useSharedValue, useAnimatedStyle, useMainThreadRef } from '@sigx/lynx';
+import { ScrollView } from '@sigx/lynx-gestures';
+
+const scrollY = useSharedValue(0);
+const headerRef = useMainThreadRef<MainThread.Element | null>(null);
+
+useAnimatedStyle(headerRef, scrollY, 'translateY', {
+  inputRange: [0, 300], outputRange: [0, -150], extrapolate: 'clamp',
+});
+
+<ScrollView offsetY={scrollY}>
+  <view main-thread:ref={headerRef}><image src={hero} /></view>
+  <text>Body…</text>
+  <text>Scroll: {scrollY.value.toFixed(0)}px</text>
+</ScrollView>
+```
+
+| Prop                  | Type                             | Default      | Description                                              |
+| --------------------- | -------------------------------- | ------------ | -------------------------------------------------------- |
+| `offsetY`             | `SharedValue<number>`            | —            | External SharedValue the worklet writes on every scroll. |
+| `offsetX`             | `SharedValue<number>`            | —            | Same, for the horizontal axis.                           |
+| `scroll-orientation`  | `'vertical' \| 'horizontal'`     | `'vertical'` | Pass-through to `<scroll-view>`.                       |
+| `class` / `style`     | string / object                  | —            | Pass-through styling.                                    |
+
+The component handles the inline `'main thread'` worklet, the SharedValue writes, and the `__FlushElementTree()` trigger internally. Users only see `SharedValue`s.
+
+---
+
+## Animation primitives
+
+> The cross-thread primitive — `useSharedValue`, `SharedValue`, `useAnimatedStyle` — lives in [`@sigx/lynx`](../lynx#sharedvalue--the-cross-thread-primitive) since 0.3.0. Import from `@sigx/lynx` directly:
+
+### `useSharedValue<T>(initial)` *(from `@sigx/lynx`)*
+
+Allocates a thread-aware value: writeable on MT, reactively observable on BG.
+
+```tsx
+import { useSharedValue } from '@sigx/lynx';
+
+const tx = useSharedValue(0);
+
+// MT (inside a 'main thread' worklet)
+tx.current.value = 50;
+
+// BG (in component body, effect, computed, JSX)
+console.log(tx.value);
+effect(() => console.log('tx is now', tx.value));
+```
+
+`sv.current.value` is the MT-side read/write path (the underlying `MainThreadRef` envelope). `sv.value` is the BG-side reactive read. Writes on BG are read-only (a dev warning fires); the canonical mutation path is the MT worklet.
+
+The bridge coalesces writes per native flush — N MT mutations within one frame land as one BG event with N tuples.
+
+### `useAnimatedStyle(elRef, sv, mapperName, params?)` *(from `@sigx/lynx`)*
+
+Bind an element's style to a `SharedValue` via a named mapper. The mapper runs on MT every flush where the SharedValue's value changed.
+
+```tsx
+import { useMainThreadRef, useSharedValue, useAnimatedStyle } from '@sigx/lynx';
+
+const tx = useSharedValue(0);
+const ghostRef = useMainThreadRef<MainThread.Element | null>(null);
+
+useAnimatedStyle(ghostRef, tx, 'translateX', { factor: 0.5 });
+useAnimatedStyle(ghostRef, tx, 'opacity', { factor: -0.01, offset: 1 });
+
+<Draggable translateX={tx} />
+<view main-thread:ref={ghostRef} style={{ ... }} />
+```
+
+The ghost view tracks the draggable at half speed and fades as it moves — without a single thread crossing per frame.
+
+### Built-in mappers
+
+`translateX`, `translateY`, `scale`, and `opacity` accept **either** a linear `{ factor, offset }` shape **or** a range-mapping `{ inputRange, outputRange, extrapolate? }` shape (see "Range mapping" below).
+
+| Name         | Linear param shape                         | Output                                              |
+| ------------ | ------------------------------------------ | --------------------------------------------------- |
+| `translateX` | `{ factor?: number }`                      | `transform: translateX(value * factor)px`           |
+| `translateY` | `{ factor?: number }`                      | `transform: translateY(value * factor)px`           |
+| `translate`  | `{ factorX?: number; factorY?: number }`   | `transform: translate(v.x*fx, v.y*fy)px` (2D SharedValue) |
+| `scale`      | `{ offset?: number }`                      | `transform: scale(value + offset)`                  |
+| `opacity`    | `{ factor?: number; offset?: number }`     | `opacity` clamped to `[0, 1]` of `value*f + o`      |
+| `rotate`     | (none)                                     | `transform: rotate(value)deg`                       |
+
+When multiple bindings on the same element produce a `transform`, the parts concatenate in registration order. Other style keys merge; later registrations win on duplicate keys. Whenever **any** binding on an element ticks, **all** of its bindings re-run so partial outputs don't drop the unchanged-axis contribution.
+
+### Range mapping
+
+`translateX` / `translateY` / `scale` / `opacity` also accept `{ inputRange, outputRange, extrapolate? }` — handy for scroll-driven UIs:
+
+```tsx
+const { y, onScroll } = useScrollViewOffset();
+const headerRef = useMainThreadRef<MainThread.Element | null>(null);
+
+// Parallax: scroll 0..300 → translateY 0..-150, clamped beyond.
+useAnimatedStyle(headerRef, y, 'translateY', {
+  inputRange: [0, 300], outputRange: [0, -150], extrapolate: 'clamp',
+});
+```
+
+Multi-stop ranges (length ≥ 2) work — each segment is interpolated independently. `extrapolate: 'clamp'` (default) caps at the endpoints; `'identity'` extends linearly using the slope of the nearest segment.
+
+### Custom mappers
+
+You can register additional mappers from MT-side code:
+
+```tsx
+// in a 'main thread'-marked module
+import { registerMapper } from '@sigx/lynx-runtime-main';
+
+registerMapper('skewX', (v) => ({ transform: `skewX(${v}deg)` }));
+```
+
+Then use the name from BG: `useAnimatedStyle(elRef, sv, 'skewX')`. The string name is what crosses the build pipeline; the function lives on MT.
+
+---
+
+## Background-thread composables
+
+For cases where you don't need MT-thread tracking (state machines that drive non-visual logic, gestures over scroll lists, or coordinating multiple recognizers at once), the package also ships background-thread recognizers exposing `signal`-based state.
+
+| Composable        | Returns                                          |
+| ----------------- | ------------------------------------------------ |
+| `useTap`          | tap state + handlers; `onTap`, `onDoubleTap`     |
+| `useLongPress`    | long-press detection                             |
+| `usePan`          | drag distance / velocity                         |
+| `usePinch`        | scale, focal point                               |
+| `useSwipe`        | direction + distance                             |
+| `useRotation`     | two-finger rotation in radians                   |
+| `useFling`        | velocity-gated flick                             |
+| `usePanResponder` | RN-shape `onStartShouldSet` / `onMove` / etc.    |
+| `useGesture`      | composer (simultaneous / exclusive / sequential) |
+
+```tsx
+const pan = usePan({
+  onMove: (state) => console.log(state.dx, state.dy),
+});
+
+<view {...pan.handlers} />
+```
+
+These are simpler to compose and fully introspectable on BG, at the cost of a thread crossing per gesture event. For visual feedback (translate, scale, opacity), prefer the MT components above.
+
+---
+
+## Performance notes
+
+- **Avoid changing the gesture component's `style` prop on every render.** A BG-side `SET_STYLE` op for the same element being dragged can clobber MT-side `setStyleProperties` writes. The framework guards this with shallow-equal in the style patcher, so structurally-stable inline styles (`style={{ width: '90px', ... }}`) are fine. Computed-per-render styles touching the dragged element are the case to watch.
+- **Pass MT-locals through `runOnBackground` arguments**, not through closure capture. The BG-bound function only sees what crossed the bridge — its parameter list. Capturing a `let side = …` declared inside the worklet body will fail at runtime with `ReferenceError` because BG never had `side`.
+- **Per-SharedValue `===` diff coalescing** means object-typed SharedValues (`useSharedValue<{x,y}>`) only publish on identity change, not on property mutation. Use scalar SharedValues and compose them, or use the `translate` mapper which takes a 2D value.
+
+---
+
+## Testing
+
+The package ships with two test layers:
+
+- **Source-shape regex tests** verify that `'main thread'` directives, handler attribute spellings, and worklet captures are all in place. Fast; run as part of `pnpm test`.
+- **MT end-to-end tests** (`pnpm --filter @sigx/lynx-gestures test:mt`) actually run the SWC LEPUS transform on the live source, eval the resulting `registerWorkletInternal` calls into the upstream worklet runtime under vitest, and drive synthetic touches through the registered worklets — catching the class of bug where a refactor breaks the worklet pipeline silently.
+
+---
+
+## Related
+
+- [`@sigx/lynx`](../lynx) — the framework barrel; import everything from here.
+- [`@sigx/runtime-lynx`](../runtime-lynx) — background-thread renderer and signal/effect wiring.
+- [`@sigx/lynx-runtime-main`](../runtime-lynx-main) — main-thread runtime and PAPI integration.
+- [`@sigx/lynx-plugin`](../lynx-plugin) — the rspack/rspeedy plugin that runs the worklet transform at build time.
+
+## License
+
+MIT

package/dist/components/Draggable.d.ts

@@ -0,0 +1,66 @@
+import { type SharedValue, type Define } from '@sigx/lynx';
+export interface DragEndDetail {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+}
+/**
+ * Edge-scroll configuration for `<Draggable edgeScroll>`. Either `true` for
+ * default tuning, or an object overriding the defaults.
+ */
+export type EdgeScrollConfig = boolean | {
+    /** Distance from viewport edge in pt where auto-scroll engages. Default 50. */
+    threshold?: number;
+    /** Maximum scroll velocity in pt/sec at the edge. Default 800. */
+    maxSpeed?: number;
+};
+export type DraggableProps = Define.Prop<'axis', 'x' | 'y' | 'both', false> & Define.Prop<'threshold', number, false> & Define.Prop<'snapBack', boolean, false> & Define.Prop<'minX', number, false> & Define.Prop<'maxX', number, false> & Define.Prop<'minY', number, false> & Define.Prop<'maxY', number, false> & Define.Prop<'translateX', SharedValue<number>, false> & Define.Prop<'translateY', SharedValue<number>, false> & Define.Prop<'edgeScroll', EdgeScrollConfig, false> & Define.Prop<'class', string, false> & Define.Prop<'style', Record<string, string | number>, false> & Define.Slot<'default'> & Define.Event<'dragStart', {
+    x: number;
+    y: number;
+}> & Define.Event<'dragEnd', DragEndDetail>;
+/**
+ * MT-thread draggable container, built on the native gesture arena via
+ * `Gesture.Pan()`. The bound element's transform is driven by two
+ * `useAnimatedStyle` bindings (one per axis) — the same primitive any user
+ * could compose. The Pan onUpdate worklet writes to the SharedValues; the
+ * bridge applies the transform on the next flush boundary, composing the
+ * two bindings into a single `setStyleProperties({ transform })` call.
+ *
+ * Because the visible position is bridge-driven rather than written directly
+ * by the worklet, external animation of `translateX`/`translateY` (e.g.
+ * `withSpring(tx, 0)` to spring back to origin after release) moves the
+ * element visually for free — the binding picks up whichever SV write
+ * happened most recently, regardless of who wrote it.
+ *
+ * `dragStart` and `dragEnd` are dispatched to BG via `runOnBackground` (low
+ * frequency, cross-thread is fine).
+ *
+ * Unlike the prior `bindtouch*`-based implementation, the native pan gesture
+ * arena handles multi-touch correctly (secondary fingers don't cancel the
+ * primary drag).
+ *
+ * **Scroll composition** (Phase 2.12.3): Lynx's `<scroll-view>` doesn't
+ * participate in the new gesture arena, so without coordination both pan
+ * and scroll would fire concurrently. `<Draggable>` reads `useScrollContext`
+ * at setup; if a parent `<ScrollView>` is in scope, the BG-side dragStart/
+ * dragEnd flips `scrollCtx.dragging` automatically — the parent's
+ * `enable-scroll` is gated on that signal, so the UIKit pan recognizer
+ * yields for the duration of the drag. No consumer wiring required.
+ *
+ * **Edge-scroll** (Phase 2.13): pass `edgeScroll` to auto-scroll the parent
+ * `<ScrollView>` when the finger nears its viewport edge during a drag —
+ * the standard drag-to-reorder pattern (Apple Mail, iOS Reminders). The
+ * scroll axis follows `scrollOrientation` as published through the context.
+ * Inside the threshold zone the scroll velocity ramps from 0 at the
+ * threshold boundary to `maxSpeed` at the edge. Quietly no-ops if
+ * `edgeScroll` is unset OR the Draggable isn't nested in a ScrollView.
+ *
+ * Note on the native event payload: Lynx's pan handler emits `pageX`/`pageY`
+ * but no `translationX`/`velocityX` — we compute deltas and velocity from
+ * pageX/pageY ourselves (same as the prior touch-based implementation).
+ */
+export declare const Draggable: import("@sigx/runtime-core").ComponentFactory<DraggableProps, void, {
+    default: () => import("@sigx/runtime-core").JSXElement | import("@sigx/runtime-core").JSXElement[] | null;
+}>;
+//# sourceMappingURL=Draggable.d.ts.map

package/dist/components/Draggable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../../src/components/Draggable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,WAAW,EAChB,KAAK,MAAM,EAEZ,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,aAAa;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG;IACvC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,cAAc,GACtB,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,GAAG,GAAG,MAAM,EAAE,KAAK,CAAC,GAC9C,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,CAAC,GACvC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC,GACvC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,GAClC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,GAClC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,GAClC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,GAClC,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,GACrD,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,GACrD,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,gBAAgB,EAAE,KAAK,CAAC,GAClD,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,GACnC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,CAAC,GAC5D,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,GACtB,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,GACnD,MAAM,CAAC,KAAK,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAkC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,SAAS;;EAuUpB,CAAC"}

package/dist/components/Pressable.d.ts

@@ -0,0 +1,40 @@
+import { type Define } from '@sigx/lynx';
+export type PressableProps = Define.Prop<'pressedOpacity', number, false> & Define.Prop<'pressedScale', number, false> & Define.Prop<'longPressDuration', number, false> & Define.Prop<'maxDistance', number, false> & Define.Prop<'disabled', boolean, false> & Define.Prop<'class', string, false> & Define.Prop<'style', Record<string, string | number>, false> & Define.Slot<'default'> & Define.Event<'press', void> & Define.Event<'longPress', void>;
+/**
+ * MT-thread tap + long-press recognizer with built-in pressed-state visual
+ * feedback (opacity + scale). Press and long-press callbacks are dispatched
+ * to BG via `runOnBackground` (low-frequency cross-thread is fine).
+ *
+ * Cross-platform gesture-arena quirks (Phase 2.12.1, observed on iOS Lynx
+ * 3.5 sim and Android Lynx 3.6 / Pixel 9 Pro XL) make this component a
+ * hybrid: it composes `Gesture.Tap()` + `Gesture.LongPress()` via
+ * `Simultaneous` AND adds an onEnd-fallback path inside LongPress, so press
+ * emission works on both platforms via different routes:
+ *
+ * - **Android**: `Tap.onStart` fires on touch-up (as documented). Press
+ *   emits there; the LongPress fallback sees `pressEmitted=true` and
+ *   skips. `Tap.onEnd` fires on the same touch-up — but iOS's premature
+ *   onEnd (next bullet) means we can't safely reset styles here, so style
+ *   reset lives in LongPress.onEnd.
+ * - **iOS**: `Tap.onEnd` fires ~6ms after touchstart (an arena
+ *   fail/reset path that doesn't trigger on Android). `Tap.onStart`
+ *   never fires for our composition. We rely on `LongPress.onEnd` to
+ *   detect "lift before duration with no movement" and emit press from
+ *   the fallback. `Gesture.Race` would be simpler in theory, but its
+ *   `waitFor` deadlocks Tap on iOS — the arena dispatches Tap before
+ *   LongPress reaches Fail state.
+ *
+ * State tracks `longPressFired` and `pressEmitted` so neither event
+ * double-fires regardless of which platform path resolves first.
+ * Movement past `maxDistance` is tracked from `e.params.pageX/pageY`;
+ * `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.
+ */
+export declare const Pressable: import("@sigx/runtime-core").ComponentFactory<PressableProps, void, {
+    default: () => import("@sigx/runtime-core").JSXElement | import("@sigx/runtime-core").JSXElement[] | null;
+}>;
+//# sourceMappingURL=Pressable.d.ts.map

package/dist/components/Pressable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../src/components/Pressable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,MAAM,EAEZ,MAAM,YAAY,CAAC;AAEpB,MAAM,MAAM,cAAc,GACtB,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,KAAK,CAAC,GAC5C,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,CAAC,GAC1C,MAAM,CAAC,IAAI,CAAC,mBAAmB,EAAE,MAAM,EAAE,KAAK,CAAC,GAC/C,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,CAAC,GACzC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC,GACvC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,GACnC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,CAAC,GAC5D,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,GACtB,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,GAC3B,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AASpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,SAAS;;EA+GpB,CAAC"}

package/dist/components/ScrollView.d.ts

@@ -0,0 +1,46 @@
+import { type SharedValue, type Define } from '@sigx/lynx';
+export type ScrollViewProps = Define.Prop<'offsetX', SharedValue<number>, false> & Define.Prop<'offsetY', SharedValue<number>, false> & Define.Prop<'scroll-orientation', 'vertical' | 'horizontal', false>
+/**
+ * Toggle native scroll responsiveness at runtime — set false to lock the
+ * scroll-view (e.g. while a child `<Draggable>` is mid-drag, so Lynx's
+ * native pan gesture doesn't steal the touch). Maps to Lynx's
+ * `enable-scroll` attribute.
+ */
+ & Define.Prop<'enable-scroll', boolean, false> & Define.Prop<'class', string, false> & Define.Prop<'style', Record<string, string | number>, false> & Define.Slot<'default'>;
+/**
+ * MT-thread `<scroll-view>` wrapper that mirrors scroll position into a
+ * `SharedValue`. Pair with `useAnimatedStyle` for parallax / fade / scale
+ * effects driven by scroll, all running on MT with zero per-frame thread
+ * crossings.
+ *
+ * The component is the API; the inline `'main thread'` worklet, the
+ * `__FlushElementTree()` trigger, and the runtime registration are all
+ * internal. Users just pass a `SharedValue<number>` for the axis they care
+ * about — same shape as `<Draggable translateX={tx}>`.
+ *
+ * @example Parallax header
+ * ```tsx
+ * const scrollY = useSharedValue(0);
+ * const headerRef = useMainThreadRef<MainThread.Element | null>(null);
+ *
+ * useAnimatedStyle(headerRef, scrollY, 'translateY', {
+ *   inputRange: [0, 300], outputRange: [0, -150], extrapolate: 'clamp',
+ * });
+ *
+ * <ScrollView offsetY={scrollY}>
+ *   <view main-thread:ref={headerRef}><image src={hero} /></view>
+ *   <text>Body…</text>
+ * </ScrollView>
+ * ```
+ *
+ * @example BG-reactive scroll readout
+ * ```tsx
+ * const scrollY = useSharedValue(0);
+ * <ScrollView offsetY={scrollY}>...</ScrollView>
+ * <text>Scrolled: {scrollY.value.toFixed(0)}px</text>
+ * ```
+ */
+export declare const ScrollView: import("@sigx/runtime-core").ComponentFactory<ScrollViewProps, void, {
+    default: () => import("@sigx/runtime-core").JSXElement | import("@sigx/runtime-core").JSXElement[] | null;
+}>;
+//# sourceMappingURL=ScrollView.d.ts.map

package/dist/components/ScrollView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../src/components/ScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,MAAM,EAEZ,MAAM,YAAY,CAAC;AAGpB,MAAM,MAAM,eAAe,GACvB,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,GAClD,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,GAClD,MAAM,CAAC,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,YAAY,EAAE,KAAK,CAAC;AACrE;;;;;GAKG;GACD,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE,OAAO,EAAE,KAAK,CAAC,GAC5C,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,GACnC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,CAAC,GAC5D,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAE3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,UAAU;;EA8DrB,CAAC"}

package/dist/components/Swipeable.d.ts

@@ -0,0 +1,40 @@
+import { type Define } from '@sigx/lynx';
+export type SwipeSide = 'left' | 'right';
+export type SwipeableProps = Define.Prop<'leftActionsWidth', number, false> & Define.Prop<'rightActionsWidth', number, false> & Define.Prop<'snapThreshold', number, false> & Define.Prop<'snapDuration', number, false> & Define.Prop<'leftActions', () => unknown, false> & Define.Prop<'rightActions', () => unknown, false> & Define.Prop<'class', string, false> & Define.Prop<'style', Record<string, string | number>, false> & Define.Prop<'foregroundStyle', Record<string, string | number>, false> & Define.Slot<'default'> & Define.Event<'swipeOpen', {
+    side: SwipeSide;
+}> & Define.Event<'swipeClose', void>;
+/**
+ * Horizontal swipe-to-reveal container, built on the native gesture arena
+ * via `Gesture.Pan().axis('x')`. The foreground is dragged horizontally on
+ * the MT thread; on release it snaps to one of three resting positions
+ * (closed / open-left / open-right) using `MTElementWrapper.animate()`.
+ * Open and close events are dispatched to BG via `runOnBackground`.
+ *
+ * Migrated from a 4-`bindtouch*`-worklet implementation to a single
+ * `Gesture.Pan()` (Phase 2.12). Carries the same Phase 2.11 quirks:
+ *   - `.onBegin(() => {})` no-op is load-bearing on iOS Pan to gate
+ *     `_isInvokedBegin` open so onStart/onEnd fire.
+ *   - `e.params.pageX` (not `e.pageX`) — Lynx pan event nests the touch
+ *     payload under `params`.
+ *
+ * Supply `leftActions` and/or `rightActions` as render-prop functions:
+ *
+ * ```tsx
+ * <Swipeable
+ *   rightActions={() => <view><text>Delete</text></view>}
+ *   onSwipeOpen={(e) => console.log('opened', e.side)}
+ * >
+ *   <view><text>Row content</text></view>
+ * </Swipeable>
+ * ```
+ *
+ * **Scroll composition** (Phase 2.12.3): nesting `<Swipeable>` inside
+ * `<ScrollView>` is automatic — `useScrollContext` is read at setup and
+ * the BG-side onStart/onEnd handlers flip `scrollCtx.dragging` so the
+ * parent yields its UIKit pan for the duration of the swipe. No consumer
+ * wiring required.
+ */
+export declare const Swipeable: import("@sigx/runtime-core").ComponentFactory<SwipeableProps, void, {
+    default: () => import("@sigx/runtime-core").JSXElement | import("@sigx/runtime-core").JSXElement[] | null;
+}>;
+//# sourceMappingURL=Swipeable.d.ts.map

package/dist/components/Swipeable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swipeable.d.ts","sourceRoot":"","sources":["../../src/components/Swipeable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,MAAM,EAEZ,MAAM,YAAY,CAAC;AAGpB,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,MAAM,MAAM,cAAc,GACtB,MAAM,CAAC,IAAI,CAAC,kBAAkB,EAAE,MAAM,EAAE,KAAK,CAAC,GAC9C,MAAM,CAAC,IAAI,CAAC,mBAAmB,EAAE,MAAM,EAAE,KAAK,CAAC,GAC/C,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,EAAE,KAAK,CAAC,GAC3C,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,CAAC,GAC1C,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,MAAM,OAAO,EAAE,KAAK,CAAC,GAChD,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,OAAO,EAAE,KAAK,CAAC,GACjD,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,GACnC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,CAAC,GAC5D,MAAM,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,CAAC,GACtE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,GACtB,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC,GAC9C,MAAM,CAAC,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;AASrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,SAAS;;EAwJpB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export { usePinch } from './use-pinch.js';
+export { useRotation } from './use-rotation.js';
+export { useSharedValue, SharedValue, useAnimatedValue, AnimatedValue, useAnimatedStyle, resetAnimatedStyleBindingIds, } from '@sigx/lynx';
+export type { SharedValueState, AnimatedValueState, BuiltinMapperName, MapperParams, } from '@sigx/lynx';
+export { Pressable } from './components/Pressable.js';
+export type { PressableProps } from './components/Pressable.js';
+export { Draggable } from './components/Draggable.js';
+export type { DraggableProps, DragEndDetail } from './components/Draggable.js';
+export { Swipeable } from './components/Swipeable.js';
+export type { SwipeableProps, SwipeSide } from './components/Swipeable.js';
+export { ScrollView } from './components/ScrollView.js';
+export type { ScrollViewProps } from './components/ScrollView.js';
+export { useScrollContext } from './scroll-context.js';
+export type { ScrollContext } from './scroll-context.js';
+export type { TouchPoint, TouchEvent, GesturePhase, GestureHandlers, PinchState, UsePinchOptions, UsePinchReturn, RotationState, UseRotationOptions, UseRotationReturn, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,OAAO,EACL,cAAc,EACd,WAAW,EAEX,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,4BAA4B,GAC7B,MAAM,YAAY,CAAC;AACpB,YAAY,EACV,gBAAgB,EAEhB,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,GACb,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,YAAY,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAKlE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD,YAAY,EACV,UAAU,EACV,UAAU,EACV,YAAY,EACZ,eAAe,EACf,UAAU,EACV,eAAe,EACf,cAAc,EACd,aAAa,EACb,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,YAAY,CAAC"}