@sigx/lynx-gestures 0.4.1 → 0.4.3

package/README.md

@@ -209,9 +209,51 @@ The component handles the inline `'main thread'` worklet, the SharedValue writes
 
 ---
 
+### `<Swiper>` and headless dot hooks
+
+`<Swiper>` is a paged horizontal carousel that re-uses the platform's native `<scroll-view paging-enabled>` for snap-to-page (deceleration, overscroll, fling — all free), and writes the live pixel offset into a `SharedValue<number>` on every MT frame. Pair it with the headless `useSwiperDot*` hooks to build any indicator visual.
+
+```tsx
+import { useSharedValue } from '@sigx/lynx';
+import { signal } from '@sigx/lynx';
+import { Swiper, useSwiperDotProgress } from '@sigx/lynx-gestures';
+
+const offset = useSharedValue(0);
+const pageIdx = signal({ value: 0 });
+
+<Swiper offset={offset} index={pageIdx} width={pageWidth}>
+  <view style={{ width: pageWidth + 'px' }}>…page 1…</view>
+  <view style={{ width: pageWidth + 'px' }}>…page 2…</view>
+  <view style={{ width: pageWidth + 'px' }}>…page 3…</view>
+</Swiper>
+```
+
+#### Headless indicator hooks
+
+Every indicator hook returns a `MainThreadRef<MainThread.Element | null>` that you spread onto whatever view you want animated. The hook owns the `useAnimatedStyle` call-site so you don't redo the triangular-window math. Pick one based on which CSS channel you want to drive:
+
+| Hook                       | Channel(s)             | Use case                                    |
+| -------------------------- | ---------------------- | ------------------------------------------- |
+| `useSwiperDotProgress`     | `opacity`              | Crossfade between two colour layers.        |
+| `useSwiperDotScale`        | `scale` (uniform)      | Pulse / grow the active dot symmetrically.  |
+| `useSwiperDotGrowX`        | `scaleX` (transform)   | Pill / bar that stretches horizontally.     |
+| `useSwiperDotWidth`        | `width` (layout px)    | Same look as `GrowX` but reflows neighbours.|
+| `useSwiperDotTranslate`    | `translateX` (track)   | Single thumb that slides across the whole strip. |
+
+Example — a minimal opacity-crossfade dot:
+
+```tsx
+const ref = useSwiperDotProgress({ offset, pageWidth, index: i });
+<view main-thread:ref={ref} style={{ opacity: '0' }} />
+```
+
+For a fully themed indicator (5 ready-made variants — dots, bar, pill, numbered, scale-pulse), use `<SwiperIndicator>` from [`@sigx/lynx-daisyui`](https://github.com/signalxjs/lynx/tree/main/packages/lynx-daisyui).
+
+---
+
 ## 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:
+> The cross-thread primitive — `useSharedValue`, `SharedValue`, `useAnimatedStyle` — lives in [`@sigx/lynx`](https://github.com/signalxjs/lynx/tree/main/packages/lynx#sharedvalue--the-cross-thread-primitive) since 0.3.0. Import from `@sigx/lynx` directly:
 
 ### `useSharedValue<T>(initial)` *(from `@sigx/lynx`)*
 

package/dist/components/Swiper.d.ts

@@ -0,0 +1,65 @@
+import { type SharedValue, type Define } from '@sigx/lynx';
+import type { PrimitiveSignal } from '@sigx/reactivity';
+export type SwiperProps<T = unknown> = 
+/**
+ * The items to render — one page per item. Switched from slot-based
+ * children because horizontal `<scroll-view>` children need explicit
+ * pixel widths (Lynx doesn't resolve `width: 100%` against the viewport
+ * in a horizontal scroller), so the Swiper has to own the page wrapper.
+ */
+Define.Prop<'items', readonly T[], true>
+/** Per-item renderer. Output is wrapped in a page-width sized `<view>`. */
+ & Define.Prop<'renderItem', (item: T, index: number) => unknown, true>
+/** Optional key extractor — defaults to the item's array index. */
+ & Define.Prop<'keyExtractor', (item: T, index: number) => string | number, false>
+/**
+ * Page width in CSS pixels. Defaults to the Swiper's own measured
+ * container width via `useElementLayout`, falling back to
+ * `lynx.SystemInfo.pixelWidth / pixelRatio` before the first layout
+ * pass.
+ */
+ & Define.Prop<'width', number, false>
+/** Page height in CSS pixels — applied to each page wrapper. */
+ & Define.Prop<'height', number | string, false>
+/**
+ * Externally-observable current page (whole units). Updated from
+ * `bindscroll` as the user pans. Writes from outside (e.g.
+ * `idx.value = 2`) glide the swiper to that page via the native
+ * `<scroll-view>.scrollTo` UI method.
+ */
+ & Define.Prop<'index', PrimitiveSignal<number>, false>
+/** Page to render first (uncontrolled-initial). */
+ & Define.Prop<'initialIndex', number, false>
+/**
+ * MT-thread live pixel offset, updated every scroll frame from the
+ * native scroll-view's `scrollLeft`.
+ */
+ & Define.Prop<'offset', SharedValue<number>, false> & Define.Prop<'class', string, false> & Define.Prop<'style', Record<string, string | number>, false>
+/** Emitted (BG) when the page-rounded `scrollLeft / width` changes. */
+ & Define.Event<'pageChange', {
+    index: number;
+}>;
+/**
+ * Paged horizontal carousel built on Lynx's native `<scroll-view
+ * paging-enabled>` — native snap, no MTS pan handling required for the
+ * happy path. Items are rendered into page-sized `<view>` wrappers (the
+ * Swiper owns the sizing so Lynx's horizontal scroller has explicit
+ * widths to lay out against; `width: 100%` does NOT resolve to the
+ * viewport for `<scroll-view scroll-orientation="horizontal">` children).
+ *
+ * @example
+ * ```tsx
+ * const idx = signal(0);
+ * const offset = useSharedValue(0);
+ * <Swiper
+ *   items={photos}
+ *   index={idx}
+ *   offset={offset}
+ *   renderItem={(src) => (
+ *     <image src={src} mode="aspectFit" style={{ width: '100%', height: '100%' }} />
+ *   )}
+ * />
+ * ```
+ */
+export declare const Swiper: <T>(props: SwiperProps<T>) => unknown;
+//# sourceMappingURL=Swiper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Swiper.d.ts","sourceRoot":"","sources":["../../src/components/Swiper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,WAAW,EAChB,KAAK,MAAM,EAEZ,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAkCxD,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,OAAO;AACjC;;;;;GAKG;AACD,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC;AAC1C,2EAA2E;GACzE,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,EAAE,IAAI,CAAC;AACtE,mEAAmE;GACjE,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC;AACjF;;;;;GAKG;GACD,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC;AACrC,gEAAgE;GAC9D,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC;AAC/C;;;;;GAKG;GACD,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC;AACtD,mDAAmD;GACjD,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,CAAC;AAC5C;;;GAGG;GACD,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,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;AAC9D,uEAAuE;GACrE,MAAM,CAAC,KAAK,CAAC,YAAY,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,MAAM,EA+Fb,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC"}

package/dist/components/Swiper.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component, effect, runOnMainThread, signal, useElementLayout, useMainThreadRef, useSharedValue, } from '@sigx/lynx';
+const SCREEN_WIDTH_FALLBACK = (() => {
+    try {
+        const info = typeof lynx !== 'undefined' ? lynx?.SystemInfo : undefined;
+        const px = info?.pixelWidth;
+        const pr = info?.pixelRatio || 1;
+        if (typeof px === 'number' && px > 0)
+            return Math.round(px / pr);
+    }
+    catch {
+        /* ignore */
+    }
+    return 400;
+})();
+const SCREEN_HEIGHT_FALLBACK = (() => {
+    try {
+        const info = typeof lynx !== 'undefined' ? lynx?.SystemInfo : undefined;
+        const px = info?.pixelHeight;
+        const pr = info?.pixelRatio || 1;
+        if (typeof px === 'number' && px > 0)
+            return Math.round(px / pr);
+    }
+    catch {
+        /* ignore */
+    }
+    return 800;
+})();
+/**
+ * Paged horizontal carousel built on Lynx's native `<scroll-view
+ * paging-enabled>` — native snap, no MTS pan handling required for the
+ * happy path. Items are rendered into page-sized `<view>` wrappers (the
+ * Swiper owns the sizing so Lynx's horizontal scroller has explicit
+ * widths to lay out against; `width: 100%` does NOT resolve to the
+ * viewport for `<scroll-view scroll-orientation="horizontal">` children).
+ *
+ * @example
+ * ```tsx
+ * const idx = signal(0);
+ * const offset = useSharedValue(0);
+ * <Swiper
+ *   items={photos}
+ *   index={idx}
+ *   offset={offset}
+ *   renderItem={(src) => (
+ *     <image src={src} mode="aspectFit" style={{ width: '100%', height: '100%' }} />
+ *   )}
+ * />
+ * ```
+ */
+export const Swiper = component(({ props, emit }) => {
+    const ownOffset = useSharedValue(0);
+    const ownIndex = signal(props.initialIndex ?? 0);
+    const { layout, onLayoutChange } = useElementLayout();
+    const scrollRef = useMainThreadRef(null);
+    // Resolve the controlled-vs-uncontrolled signal/offset once at setup so the
+    // BG→MT reactive bridge below and the render closure share the same instance.
+    const offset = props.offset ?? ownOffset;
+    const idx = props.index ?? ownIndex;
+    // BG→MT bridge: when external code (or a dot tap) writes `idx.value = N`,
+    // we invoke the native `<scroll-view>.scrollTo` UI method on MT so the
+    // animation runs with platform physics (the same easing the user gets when
+    // they fling-snap). The dedup runs MT-side against the live scroll offset
+    // so we don't re-invoke for writes that just mirror a finished snap.
+    const scrollOnMT = runOnMainThread((index, pageW) => {
+        'main thread';
+        const el = scrollRef.current;
+        if (!el || pageW <= 0)
+            return;
+        const target = index * pageW;
+        const current = offset.current.value;
+        if (Math.abs(current - target) < 0.5)
+            return;
+        el.invoke('scrollTo', { index, smooth: true });
+    });
+    effect(() => {
+        const v = idx.value;
+        if (typeof v !== 'number')
+            return;
+        const pw = props.width
+            ?? (layout.value && layout.value.width > 0 ? layout.value.width : undefined)
+            ?? SCREEN_WIDTH_FALLBACK;
+        scrollOnMT(v, pw);
+    });
+    return () => {
+        const pageWidth = props.width
+            ?? (layout.value && layout.value.width > 0 ? layout.value.width : undefined)
+            ?? SCREEN_WIDTH_FALLBACK;
+        // Lynx horizontal `<scroll-view>` doesn't resolve `height: 100%` on
+        // children (same constraint as width), so the page wrapper needs a
+        // pixel value. Use the measured layout height when available; the
+        // screen-height fallback covers the first paint. Guard against the
+        // `0 ?? fallback` gotcha — a zero-sized layout report (e.g. before
+        // first paint) must fall through to the fallback.
+        const measuredHeight = layout.value && layout.value.height > 0 ? layout.value.height : undefined;
+        const pageHeight = props.height
+            ?? measuredHeight
+            ?? SCREEN_HEIGHT_FALLBACK;
+        const initialScrollLeft = (props.initialIndex ?? 0) * pageWidth;
+        const items = props.items;
+        const keyOf = props.keyExtractor;
+        return (_jsx("scroll-view", { "main-thread:ref": scrollRef, "scroll-orientation": "horizontal", "paging-enabled": true, "show-scrollbar": false, bounces: true, "scroll-left": initialScrollLeft, class: props.class, style: { width: '100%', ...(props.style || {}) }, bindlayoutchange: onLayoutChange, "main-thread-bindscroll": (e) => {
+                'main thread';
+                offset.current.value = e.detail.scrollLeft;
+                const __flush = globalThis['__FlushElementTree'];
+                if (__flush)
+                    __flush();
+            }, bindscroll: (e) => {
+                if (pageWidth <= 0)
+                    return;
+                const next = Math.round(e.detail.scrollLeft / pageWidth);
+                if (next !== idx.value) {
+                    idx.value = next;
+                    emit('pageChange', { index: next });
+                }
+            }, children: items.map((item, i) => (_jsx("view", { style: {
+                    width: pageWidth + 'px',
+                    height: typeof pageHeight === 'number' ? pageHeight + 'px' : pageHeight,
+                    flexShrink: 0,
+                    flexGrow: 0,
+                }, children: props.renderItem(item, i) }, keyOf ? String(keyOf(item, i)) : String(i)))) }));
+    };
+});
+//# sourceMappingURL=Swiper.js.map

package/dist/components/Swiper.js.map

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

package/dist/index.d.ts

@@ -10,6 +10,10 @@ 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 { Swiper } from './components/Swiper.js';
+export type { SwiperProps } from './components/Swiper.js';
+export { useSwiperDotProgress, useSwiperDotScale, useSwiperDotGrowX, useSwiperDotWidth, useSwiperDotTranslate, } from './use-swiper-dot-progress.js';
+export type { SwiperDotHookInputs, UseSwiperDotProgressOptions, UseSwiperDotTranslateOptions, } from './use-swiper-dot-progress.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';

package/dist/index.d.ts.map

@@ -1 +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"}
+{"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;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,YAAY,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,mBAAmB,EACnB,2BAA2B,EAC3B,4BAA4B,GAC7B,MAAM,8BAA8B,CAAC;AAKtC,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"}

package/dist/index.js

@@ -20,6 +20,8 @@ export { Pressable } from './components/Pressable.js';
 export { Draggable } from './components/Draggable.js';
 export { Swipeable } from './components/Swipeable.js';
 export { ScrollView } from './components/ScrollView.js';
+export { Swiper } from './components/Swiper.js';
+export { useSwiperDotProgress, useSwiperDotScale, useSwiperDotGrowX, useSwiperDotWidth, useSwiperDotTranslate, } from './use-swiper-dot-progress.js';
 // ScrollView ↔ child-gesture coordination (Phase 2.12.3). Public mostly so
 // custom gesture components can opt in to the same auto-yield behavior that
 // `<Draggable>` and `<Swipeable>` get for free.

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,8EAA8E;AAC9E,yEAAyE;AACzE,0EAA0E;AAC1E,uEAAuE;AACvE,2EAA2E;AAC3E,iEAAiE;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,8EAA8E;AAC9E,uEAAuE;AACvE,4EAA4E;AAC5E,sEAAsE;AACtE,0DAA0D;AAC1D,OAAO,EACL,cAAc,EACd,WAAW;AACX,4EAA4E;AAC5E,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,4BAA4B,GAC7B,MAAM,YAAY,CAAC;AASpB,gFAAgF;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD,2EAA2E;AAC3E,4EAA4E;AAC5E,gDAAgD;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,8EAA8E;AAC9E,yEAAyE;AACzE,0EAA0E;AAC1E,uEAAuE;AACvE,2EAA2E;AAC3E,iEAAiE;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,8EAA8E;AAC9E,uEAAuE;AACvE,4EAA4E;AAC5E,sEAAsE;AACtE,0DAA0D;AAC1D,OAAO,EACL,cAAc,EACd,WAAW;AACX,4EAA4E;AAC5E,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,4BAA4B,GAC7B,MAAM,YAAY,CAAC;AASpB,gFAAgF;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,8BAA8B,CAAC;AAOtC,2EAA2E;AAC3E,4EAA4E;AAC5E,gDAAgD;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/use-swiper-dot-progress.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Headless `<Swiper>` indicator hooks.
+ *
+ * `<Swiper>` writes the live scroll offset to a `SharedValue<number>` on
+ * the MT thread every frame. To render an indicator the consumer needs
+ * one binding per element so `useAnimatedStyle` has a stable call-site —
+ * doing that inside `.map()` is fine (per-iteration call-sites are
+ * stable across renders), but the bookkeeping (range math, ref alloc)
+ * is fiddly and easy to get wrong.
+ *
+ * These hooks own the bookkeeping and return a `MainThreadRef` the
+ * caller spreads onto any element they want animated. That keeps the
+ * presentation in user-land (and in `@sigx/lynx-daisyui`'s themed
+ * `SwiperIndicator`) while logic lives here.
+ *
+ * Layering pattern mirrors the daisyui split:
+ *   - `@sigx/lynx-gestures` owns headless logic (this file + the
+ *     `<Swiper>` component itself).
+ *   - `@sigx/lynx-daisyui` ships themed `<SwiperIndicator>` variants
+ *     that consume these hooks and pick colours from `ThemeProvider`.
+ *
+ * @example Custom dot using the opacity hook
+ * ```tsx
+ * function MyDot({ offset, pageWidth, index }) {
+ *   const ref = useSwiperDotProgress({ offset, pageWidth, index });
+ *   return (
+ *     <view
+ *       main-thread:ref={ref}
+ *       style={{ width: '8px', height: '8px', borderRadius: '4px',
+ *                backgroundColor: 'tomato', opacity: '0' }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+import { type MainThread, type MainThreadRef, type SharedValue } from '@sigx/lynx';
+/** Common per-dot inputs — offset is page-pixel space, index is the dot's page. */
+export interface SwiperDotHookInputs {
+    /** Live MT-thread pixel offset from the Swiper's `offset` prop. */
+    offset: SharedValue<number>;
+    /** Page width in CSS pixels. Must match the Swiper's effective page width. */
+    pageWidth: number;
+    /** Zero-based page index this dot represents. */
+    index: number;
+}
+export interface UseSwiperDotProgressOptions extends SwiperDotHookInputs {
+    /**
+     * Half-width of the input window in `pageWidth` units. The dot's
+     * animation runs from `(index − window) * pageWidth` to
+     * `(index + window) * pageWidth`. Default `1` — adjacent dots
+     * crossfade because their windows overlap.
+     */
+    window?: number;
+    /**
+     * Output values at `[centre − window·pageWidth, centre, centre +
+     * window·pageWidth]`. Default `[0, 1, 0]` (triangular). For "always
+     * active" decoration use `[0, 1, 0]` with opacity; for "scale
+     * pulse" pass e.g. `[1, 1.4, 1]` with channel `'scale'`.
+     */
+    outputRange?: readonly [number, number, number];
+}
+/**
+ * Build a triangular range-map for the given dot index, defaulting to
+ * the opacity crossfade `<SwiperDots>` shipped with previously. Returns
+ * a `MainThreadRef` — spread it onto whatever element you want
+ * animated.
+ */
+export declare function useSwiperDotProgress(opts: UseSwiperDotProgressOptions): MainThreadRef<MainThread.Element | null>;
+/**
+ * Scale-pulse variant — active dot scales up, neighbours scale down to
+ * the inactive baseline. Defaults: inactive `1`, active `1.4`.
+ *
+ * Uniform scale (both axes). For width-axis only growth (pill effect
+ * that keeps the dot's height stable) use `useSwiperDotGrowX` instead.
+ */
+export declare function useSwiperDotScale(opts: SwiperDotHookInputs & {
+    inactive?: number;
+    active?: number;
+    window?: number;
+}): MainThreadRef<MainThread.Element | null>;
+/**
+ * Width-axis growth — the active dot stretches into a pill, neighbours
+ * shrink to a circle. Uses the `scaleX` channel, so the element's
+ * intrinsic size in the layout stays put; only the visual width
+ * changes. If you want surrounding siblings to physically shove apart
+ * use `useSwiperDotWidth` instead (it animates the `width` style
+ * property, which costs a layout pass each frame).
+ */
+export declare function useSwiperDotGrowX(opts: SwiperDotHookInputs & {
+    /** Width multiplier when inactive. Default `1` (the dot's base size). */
+    inactive?: number;
+    /** Width multiplier when active. Default `3` (a pill ~3× as wide as tall). */
+    active?: number;
+    window?: number;
+}): MainThreadRef<MainThread.Element | null>;
+/**
+ * Layout-aware width growth — animates the element's `width` style in
+ * px. Use this when sibling layout must respond (siblings flex away as
+ * the pill grows). Slower than `useSwiperDotGrowX` because every frame
+ * re-runs layout.
+ *
+ * Defaults shape an 8px → 24px pill.
+ */
+export declare function useSwiperDotWidth(opts: SwiperDotHookInputs & {
+    /** Width in CSS pixels when inactive. Default `8`. */
+    inactive?: number;
+    /** Width in CSS pixels when active. Default `24`. */
+    active?: number;
+    window?: number;
+}): MainThreadRef<MainThread.Element | null>;
+/** Inputs for the track-wide translate hook used by the "bar" indicator variant. */
+export interface UseSwiperDotTranslateOptions {
+    offset: SharedValue<number>;
+    /** Page width in CSS pixels. */
+    pageWidth: number;
+    /**
+     * Distance in CSS pixels that one full page of scroll should move
+     * the thumb by — typically `dotWidth + spacing` (the thumb steps to
+     * the next dot's centre when the swiper advances by one page).
+     */
+    step: number;
+}
+/**
+ * Translate a single "thumb" element across the indicator track,
+ * proportional to the swiper's scroll progress. Use for the `bar`
+ * variant where a single pill slides between fixed dots.
+ */
+export declare function useSwiperDotTranslate(opts: UseSwiperDotTranslateOptions): MainThreadRef<MainThread.Element | null>;
+//# sourceMappingURL=use-swiper-dot-progress.d.ts.map

package/dist/use-swiper-dot-progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-swiper-dot-progress.d.ts","sourceRoot":"","sources":["../src/use-swiper-dot-progress.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,WAAW,EAEjB,MAAM,YAAY,CAAC;AAEpB,mFAAmF;AACnF,MAAM,WAAW,mBAAmB;IAClC,mEAAmE;IACnE,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,8EAA8E;IAC9E,SAAS,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,2BAA4B,SAAQ,mBAAmB;IACtE;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CACjD;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,2BAA2B,GAChC,aAAa,CAAC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC,CAM1C;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,mBAAmB,GAAG;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,aAAa,CAAC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC,CAW3C;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,mBAAmB,GAAG;IAC5D,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,aAAa,CAAC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC,CAW3C;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,mBAAmB,GAAG;IAC5D,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,aAAa,CAAC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC,CAW3C;AAED,oFAAoF;AACpF,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,gCAAgC;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,4BAA4B,GACjC,aAAa,CAAC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC,CAQ1C"}

package/dist/use-swiper-dot-progress.js

@@ -0,0 +1,141 @@
+/**
+ * Headless `<Swiper>` indicator hooks.
+ *
+ * `<Swiper>` writes the live scroll offset to a `SharedValue<number>` on
+ * the MT thread every frame. To render an indicator the consumer needs
+ * one binding per element so `useAnimatedStyle` has a stable call-site —
+ * doing that inside `.map()` is fine (per-iteration call-sites are
+ * stable across renders), but the bookkeeping (range math, ref alloc)
+ * is fiddly and easy to get wrong.
+ *
+ * These hooks own the bookkeeping and return a `MainThreadRef` the
+ * caller spreads onto any element they want animated. That keeps the
+ * presentation in user-land (and in `@sigx/lynx-daisyui`'s themed
+ * `SwiperIndicator`) while logic lives here.
+ *
+ * Layering pattern mirrors the daisyui split:
+ *   - `@sigx/lynx-gestures` owns headless logic (this file + the
+ *     `<Swiper>` component itself).
+ *   - `@sigx/lynx-daisyui` ships themed `<SwiperIndicator>` variants
+ *     that consume these hooks and pick colours from `ThemeProvider`.
+ *
+ * @example Custom dot using the opacity hook
+ * ```tsx
+ * function MyDot({ offset, pageWidth, index }) {
+ *   const ref = useSwiperDotProgress({ offset, pageWidth, index });
+ *   return (
+ *     <view
+ *       main-thread:ref={ref}
+ *       style={{ width: '8px', height: '8px', borderRadius: '4px',
+ *                backgroundColor: 'tomato', opacity: '0' }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+import { useAnimatedStyle, useMainThreadRef, } from '@sigx/lynx';
+/**
+ * Build a triangular range-map for the given dot index, defaulting to
+ * the opacity crossfade `<SwiperDots>` shipped with previously. Returns
+ * a `MainThreadRef` — spread it onto whatever element you want
+ * animated.
+ */
+export function useSwiperDotProgress(opts) {
+    return useSwiperDotChannel({
+        ...opts,
+        channel: 'opacity',
+        outputRange: opts.outputRange ?? [0, 1, 0],
+    });
+}
+/**
+ * Scale-pulse variant — active dot scales up, neighbours scale down to
+ * the inactive baseline. Defaults: inactive `1`, active `1.4`.
+ *
+ * Uniform scale (both axes). For width-axis only growth (pill effect
+ * that keeps the dot's height stable) use `useSwiperDotGrowX` instead.
+ */
+export function useSwiperDotScale(opts) {
+    const inactive = opts.inactive ?? 1;
+    const active = opts.active ?? 1.4;
+    return useSwiperDotChannel({
+        offset: opts.offset,
+        pageWidth: opts.pageWidth,
+        index: opts.index,
+        window: opts.window,
+        channel: 'scale',
+        outputRange: [inactive, active, inactive],
+    });
+}
+/**
+ * Width-axis growth — the active dot stretches into a pill, neighbours
+ * shrink to a circle. Uses the `scaleX` channel, so the element's
+ * intrinsic size in the layout stays put; only the visual width
+ * changes. If you want surrounding siblings to physically shove apart
+ * use `useSwiperDotWidth` instead (it animates the `width` style
+ * property, which costs a layout pass each frame).
+ */
+export function useSwiperDotGrowX(opts) {
+    const inactive = opts.inactive ?? 1;
+    const active = opts.active ?? 3;
+    return useSwiperDotChannel({
+        offset: opts.offset,
+        pageWidth: opts.pageWidth,
+        index: opts.index,
+        window: opts.window,
+        channel: 'scaleX',
+        outputRange: [inactive, active, inactive],
+    });
+}
+/**
+ * Layout-aware width growth — animates the element's `width` style in
+ * px. Use this when sibling layout must respond (siblings flex away as
+ * the pill grows). Slower than `useSwiperDotGrowX` because every frame
+ * re-runs layout.
+ *
+ * Defaults shape an 8px → 24px pill.
+ */
+export function useSwiperDotWidth(opts) {
+    const inactive = opts.inactive ?? 8;
+    const active = opts.active ?? 24;
+    return useSwiperDotChannel({
+        offset: opts.offset,
+        pageWidth: opts.pageWidth,
+        index: opts.index,
+        window: opts.window,
+        channel: 'width',
+        outputRange: [inactive, active, inactive],
+    });
+}
+/**
+ * Translate a single "thumb" element across the indicator track,
+ * proportional to the swiper's scroll progress. Use for the `bar`
+ * variant where a single pill slides between fixed dots.
+ */
+export function useSwiperDotTranslate(opts) {
+    const ref = useMainThreadRef(null);
+    // factor = step px per pageWidth px of offset. Guard against the
+    // divide-by-zero before first layout — a factor of 0 just parks the
+    // thumb at translateX(0), which is the correct initial position.
+    const factor = opts.pageWidth > 0 ? opts.step / opts.pageWidth : 0;
+    useAnimatedStyle(ref, opts.offset, 'translateX', { factor });
+    return ref;
+}
+function useSwiperDotChannel(opts) {
+    const ref = useMainThreadRef(null);
+    // Guard against pre-layout pageWidth=0: collapsing the inputRange to
+    // [0, 0, 0] would produce divide-by-zero / NaN in interpolateLinear.
+    // Fall back to a non-degenerate window so the binding stays valid; once
+    // layout settles and the parent re-renders with a real pageWidth, the
+    // values flow through normally.
+    const safePageWidth = opts.pageWidth > 0 ? opts.pageWidth : 1;
+    const center = opts.index * safePageWidth;
+    const w = (opts.window ?? 1) * safePageWidth;
+    const params = {
+        inputRange: [center - w, center, center + w],
+        outputRange: [opts.outputRange[0], opts.outputRange[1], opts.outputRange[2]],
+        extrapolate: 'clamp',
+    };
+    useAnimatedStyle(ref, opts.offset, opts.channel, params);
+    return ref;
+}
+//# sourceMappingURL=use-swiper-dot-progress.js.map

package/dist/use-swiper-dot-progress.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/lynx-gestures",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "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.4.1"
+    "@sigx/lynx": "^0.4.3"
   },
   "devDependencies": {
     "@lynx-js/react": "^0.121.0",
-    "@typescript/native-preview": "7.0.0-dev.20260511.1",
+    "@typescript/native-preview": "7.0.0-dev.20260521.1",
     "typescript": "^6.0.3",
-    "@sigx/lynx-runtime-main": "^0.4.1",
-    "@sigx/lynx-plugin": "^0.4.1",
-    "@sigx/lynx-testing": "^0.4.1"
+    "@sigx/lynx-runtime-main": "^0.4.3",
+    "@sigx/lynx-testing": "^0.4.3",
+    "@sigx/lynx-plugin": "^0.4.3"
   },
   "repository": {
     "type": "git",

package/src/components/Swiper.tsx

@@ -0,0 +1,204 @@
+import {
+  component,
+  effect,
+  runOnMainThread,
+  signal,
+  useElementLayout,
+  useMainThreadRef,
+  useSharedValue,
+  type SharedValue,
+  type Define,
+  type MainThread,
+} from '@sigx/lynx';
+import type { PrimitiveSignal } from '@sigx/reactivity';
+
+// Read the logical screen width once at module load — used as the page
+// width fallback before the Swiper's own layout box has been measured.
+// Matches the same `lynx.SystemInfo` reads used by lynx-navigation, so
+// fullscreen / edge-to-edge layouts line up.
+declare const lynx:
+  | { SystemInfo?: { pixelWidth?: number; pixelHeight?: number; pixelRatio?: number } }
+  | undefined;
+
+const SCREEN_WIDTH_FALLBACK = (() => {
+  try {
+    const info = typeof lynx !== 'undefined' ? lynx?.SystemInfo : undefined;
+    const px = info?.pixelWidth;
+    const pr = info?.pixelRatio || 1;
+    if (typeof px === 'number' && px > 0) return Math.round(px / pr);
+  } catch {
+    /* ignore */
+  }
+  return 400;
+})();
+
+const SCREEN_HEIGHT_FALLBACK = (() => {
+  try {
+    const info = typeof lynx !== 'undefined' ? lynx?.SystemInfo : undefined;
+    const px = info?.pixelHeight;
+    const pr = info?.pixelRatio || 1;
+    if (typeof px === 'number' && px > 0) return Math.round(px / pr);
+  } catch {
+    /* ignore */
+  }
+  return 800;
+})();
+
+export type SwiperProps<T = unknown> =
+  /**
+   * The items to render — one page per item. Switched from slot-based
+   * children because horizontal `<scroll-view>` children need explicit
+   * pixel widths (Lynx doesn't resolve `width: 100%` against the viewport
+   * in a horizontal scroller), so the Swiper has to own the page wrapper.
+   */
+  & Define.Prop<'items', readonly T[], true>
+  /** Per-item renderer. Output is wrapped in a page-width sized `<view>`. */
+  & Define.Prop<'renderItem', (item: T, index: number) => unknown, true>
+  /** Optional key extractor — defaults to the item's array index. */
+  & Define.Prop<'keyExtractor', (item: T, index: number) => string | number, false>
+  /**
+   * Page width in CSS pixels. Defaults to the Swiper's own measured
+   * container width via `useElementLayout`, falling back to
+   * `lynx.SystemInfo.pixelWidth / pixelRatio` before the first layout
+   * pass.
+   */
+  & Define.Prop<'width', number, false>
+  /** Page height in CSS pixels — applied to each page wrapper. */
+  & Define.Prop<'height', number | string, false>
+  /**
+   * Externally-observable current page (whole units). Updated from
+   * `bindscroll` as the user pans. Writes from outside (e.g.
+   * `idx.value = 2`) glide the swiper to that page via the native
+   * `<scroll-view>.scrollTo` UI method.
+   */
+  & Define.Prop<'index', PrimitiveSignal<number>, false>
+  /** Page to render first (uncontrolled-initial). */
+  & Define.Prop<'initialIndex', number, false>
+  /**
+   * MT-thread live pixel offset, updated every scroll frame from the
+   * native scroll-view's `scrollLeft`.
+   */
+  & Define.Prop<'offset', SharedValue<number>, false>
+  & Define.Prop<'class', string, false>
+  & Define.Prop<'style', Record<string, string | number>, false>
+  /** Emitted (BG) when the page-rounded `scrollLeft / width` changes. */
+  & Define.Event<'pageChange', { index: number }>;
+
+/**
+ * Paged horizontal carousel built on Lynx's native `<scroll-view
+ * paging-enabled>` — native snap, no MTS pan handling required for the
+ * happy path. Items are rendered into page-sized `<view>` wrappers (the
+ * Swiper owns the sizing so Lynx's horizontal scroller has explicit
+ * widths to lay out against; `width: 100%` does NOT resolve to the
+ * viewport for `<scroll-view scroll-orientation="horizontal">` children).
+ *
+ * @example
+ * ```tsx
+ * const idx = signal(0);
+ * const offset = useSharedValue(0);
+ * <Swiper
+ *   items={photos}
+ *   index={idx}
+ *   offset={offset}
+ *   renderItem={(src) => (
+ *     <image src={src} mode="aspectFit" style={{ width: '100%', height: '100%' }} />
+ *   )}
+ * />
+ * ```
+ */
+export const Swiper = component<SwiperProps>(({ props, emit }) => {
+  const ownOffset = useSharedValue(0);
+  const ownIndex = signal(props.initialIndex ?? 0);
+
+  const { layout, onLayoutChange } = useElementLayout();
+  const scrollRef = useMainThreadRef<MainThread.Element | null>(null);
+
+  // Resolve the controlled-vs-uncontrolled signal/offset once at setup so the
+  // BG→MT reactive bridge below and the render closure share the same instance.
+  const offset = props.offset ?? ownOffset;
+  const idx = props.index ?? ownIndex;
+
+  // BG→MT bridge: when external code (or a dot tap) writes `idx.value = N`,
+  // we invoke the native `<scroll-view>.scrollTo` UI method on MT so the
+  // animation runs with platform physics (the same easing the user gets when
+  // they fling-snap). The dedup runs MT-side against the live scroll offset
+  // so we don't re-invoke for writes that just mirror a finished snap.
+  const scrollOnMT = runOnMainThread((index: number, pageW: number) => {
+    'main thread';
+    const el = scrollRef.current;
+    if (!el || pageW <= 0) return;
+    const target = index * pageW;
+    const current = offset.current.value;
+    if (Math.abs(current - target) < 0.5) return;
+    el.invoke('scrollTo', { index, smooth: true });
+  });
+
+  effect(() => {
+    const v = idx.value;
+    if (typeof v !== 'number') return;
+    const pw = props.width
+      ?? (layout.value && layout.value.width > 0 ? layout.value.width : undefined)
+      ?? SCREEN_WIDTH_FALLBACK;
+    scrollOnMT(v, pw);
+  });
+
+  return () => {
+    const pageWidth = props.width
+      ?? (layout.value && layout.value.width > 0 ? layout.value.width : undefined)
+      ?? SCREEN_WIDTH_FALLBACK;
+    // Lynx horizontal `<scroll-view>` doesn't resolve `height: 100%` on
+    // children (same constraint as width), so the page wrapper needs a
+    // pixel value. Use the measured layout height when available; the
+    // screen-height fallback covers the first paint. Guard against the
+    // `0 ?? fallback` gotcha — a zero-sized layout report (e.g. before
+    // first paint) must fall through to the fallback.
+    const measuredHeight = layout.value && layout.value.height > 0 ? layout.value.height : undefined;
+    const pageHeight: number | string = props.height
+      ?? measuredHeight
+      ?? SCREEN_HEIGHT_FALLBACK;
+    const initialScrollLeft = (props.initialIndex ?? 0) * pageWidth;
+    const items = props.items;
+    const keyOf = props.keyExtractor;
+    return (
+      <scroll-view
+        main-thread:ref={scrollRef}
+        scroll-orientation="horizontal"
+        paging-enabled
+        show-scrollbar={false}
+        bounces={true}
+        scroll-left={initialScrollLeft}
+        class={props.class}
+        style={{ width: '100%', ...(props.style || {}) }}
+        bindlayoutchange={onLayoutChange}
+        main-thread-bindscroll={(e: { detail: { scrollLeft: number } }) => {
+          'main thread';
+          offset.current.value = e.detail.scrollLeft;
+          const __flush = (globalThis as Record<string, unknown>)['__FlushElementTree'] as (() => void) | undefined;
+          if (__flush) __flush();
+        }}
+        bindscroll={(e: { detail: { scrollLeft: number } }) => {
+          if (pageWidth <= 0) return;
+          const next = Math.round(e.detail.scrollLeft / pageWidth);
+          if (next !== idx.value) {
+            idx.value = next;
+            emit('pageChange', { index: next });
+          }
+        }}
+      >
+        {items.map((item, i) => (
+          <view
+            key={keyOf ? String(keyOf(item, i)) : String(i)}
+            style={{
+              width: pageWidth + 'px',
+              height: typeof pageHeight === 'number' ? pageHeight + 'px' : pageHeight,
+              flexShrink: 0,
+              flexGrow: 0,
+            }}
+          >
+            {props.renderItem(item, i)}
+          </view>
+        ))}
+      </scroll-view>
+    );
+  };
+}) as <T>(props: SwiperProps<T>) => unknown;

package/src/index.ts

@@ -39,6 +39,20 @@ 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 { Swiper } from './components/Swiper.js';
+export type { SwiperProps } from './components/Swiper.js';
+export {
+  useSwiperDotProgress,
+  useSwiperDotScale,
+  useSwiperDotGrowX,
+  useSwiperDotWidth,
+  useSwiperDotTranslate,
+} from './use-swiper-dot-progress.js';
+export type {
+  SwiperDotHookInputs,
+  UseSwiperDotProgressOptions,
+  UseSwiperDotTranslateOptions,
+} from './use-swiper-dot-progress.js';
 
 // ScrollView ↔ child-gesture coordination (Phase 2.12.3). Public mostly so
 // custom gesture components can opt in to the same auto-yield behavior that

package/src/use-swiper-dot-progress.ts

@@ -0,0 +1,231 @@
+/**
+ * Headless `<Swiper>` indicator hooks.
+ *
+ * `<Swiper>` writes the live scroll offset to a `SharedValue<number>` on
+ * the MT thread every frame. To render an indicator the consumer needs
+ * one binding per element so `useAnimatedStyle` has a stable call-site —
+ * doing that inside `.map()` is fine (per-iteration call-sites are
+ * stable across renders), but the bookkeeping (range math, ref alloc)
+ * is fiddly and easy to get wrong.
+ *
+ * These hooks own the bookkeeping and return a `MainThreadRef` the
+ * caller spreads onto any element they want animated. That keeps the
+ * presentation in user-land (and in `@sigx/lynx-daisyui`'s themed
+ * `SwiperIndicator`) while logic lives here.
+ *
+ * Layering pattern mirrors the daisyui split:
+ *   - `@sigx/lynx-gestures` owns headless logic (this file + the
+ *     `<Swiper>` component itself).
+ *   - `@sigx/lynx-daisyui` ships themed `<SwiperIndicator>` variants
+ *     that consume these hooks and pick colours from `ThemeProvider`.
+ *
+ * @example Custom dot using the opacity hook
+ * ```tsx
+ * function MyDot({ offset, pageWidth, index }) {
+ *   const ref = useSwiperDotProgress({ offset, pageWidth, index });
+ *   return (
+ *     <view
+ *       main-thread:ref={ref}
+ *       style={{ width: '8px', height: '8px', borderRadius: '4px',
+ *                backgroundColor: 'tomato', opacity: '0' }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+import {
+  useAnimatedStyle,
+  useMainThreadRef,
+  type MainThread,
+  type MainThreadRef,
+  type SharedValue,
+  type MapperParams,
+} from '@sigx/lynx';
+
+/** Common per-dot inputs — offset is page-pixel space, index is the dot's page. */
+export interface SwiperDotHookInputs {
+  /** Live MT-thread pixel offset from the Swiper's `offset` prop. */
+  offset: SharedValue<number>;
+  /** Page width in CSS pixels. Must match the Swiper's effective page width. */
+  pageWidth: number;
+  /** Zero-based page index this dot represents. */
+  index: number;
+}
+
+export interface UseSwiperDotProgressOptions extends SwiperDotHookInputs {
+  /**
+   * Half-width of the input window in `pageWidth` units. The dot's
+   * animation runs from `(index − window) * pageWidth` to
+   * `(index + window) * pageWidth`. Default `1` — adjacent dots
+   * crossfade because their windows overlap.
+   */
+  window?: number;
+  /**
+   * Output values at `[centre − window·pageWidth, centre, centre +
+   * window·pageWidth]`. Default `[0, 1, 0]` (triangular). For "always
+   * active" decoration use `[0, 1, 0]` with opacity; for "scale
+   * pulse" pass e.g. `[1, 1.4, 1]` with channel `'scale'`.
+   */
+  outputRange?: readonly [number, number, number];
+}
+
+/**
+ * Build a triangular range-map for the given dot index, defaulting to
+ * the opacity crossfade `<SwiperDots>` shipped with previously. Returns
+ * a `MainThreadRef` — spread it onto whatever element you want
+ * animated.
+ */
+export function useSwiperDotProgress(
+  opts: UseSwiperDotProgressOptions,
+): MainThreadRef<MainThread.Element | null> {
+  return useSwiperDotChannel({
+    ...opts,
+    channel: 'opacity',
+    outputRange: opts.outputRange ?? [0, 1, 0],
+  });
+}
+
+/**
+ * Scale-pulse variant — active dot scales up, neighbours scale down to
+ * the inactive baseline. Defaults: inactive `1`, active `1.4`.
+ *
+ * Uniform scale (both axes). For width-axis only growth (pill effect
+ * that keeps the dot's height stable) use `useSwiperDotGrowX` instead.
+ */
+export function useSwiperDotScale(opts: SwiperDotHookInputs & {
+  inactive?: number;
+  active?: number;
+  window?: number;
+}): MainThreadRef<MainThread.Element | null> {
+  const inactive = opts.inactive ?? 1;
+  const active = opts.active ?? 1.4;
+  return useSwiperDotChannel({
+    offset: opts.offset,
+    pageWidth: opts.pageWidth,
+    index: opts.index,
+    window: opts.window,
+    channel: 'scale',
+    outputRange: [inactive, active, inactive],
+  });
+}
+
+/**
+ * Width-axis growth — the active dot stretches into a pill, neighbours
+ * shrink to a circle. Uses the `scaleX` channel, so the element's
+ * intrinsic size in the layout stays put; only the visual width
+ * changes. If you want surrounding siblings to physically shove apart
+ * use `useSwiperDotWidth` instead (it animates the `width` style
+ * property, which costs a layout pass each frame).
+ */
+export function useSwiperDotGrowX(opts: SwiperDotHookInputs & {
+  /** Width multiplier when inactive. Default `1` (the dot's base size). */
+  inactive?: number;
+  /** Width multiplier when active. Default `3` (a pill ~3× as wide as tall). */
+  active?: number;
+  window?: number;
+}): MainThreadRef<MainThread.Element | null> {
+  const inactive = opts.inactive ?? 1;
+  const active = opts.active ?? 3;
+  return useSwiperDotChannel({
+    offset: opts.offset,
+    pageWidth: opts.pageWidth,
+    index: opts.index,
+    window: opts.window,
+    channel: 'scaleX',
+    outputRange: [inactive, active, inactive],
+  });
+}
+
+/**
+ * Layout-aware width growth — animates the element's `width` style in
+ * px. Use this when sibling layout must respond (siblings flex away as
+ * the pill grows). Slower than `useSwiperDotGrowX` because every frame
+ * re-runs layout.
+ *
+ * Defaults shape an 8px → 24px pill.
+ */
+export function useSwiperDotWidth(opts: SwiperDotHookInputs & {
+  /** Width in CSS pixels when inactive. Default `8`. */
+  inactive?: number;
+  /** Width in CSS pixels when active. Default `24`. */
+  active?: number;
+  window?: number;
+}): MainThreadRef<MainThread.Element | null> {
+  const inactive = opts.inactive ?? 8;
+  const active = opts.active ?? 24;
+  return useSwiperDotChannel({
+    offset: opts.offset,
+    pageWidth: opts.pageWidth,
+    index: opts.index,
+    window: opts.window,
+    channel: 'width',
+    outputRange: [inactive, active, inactive],
+  });
+}
+
+/** Inputs for the track-wide translate hook used by the "bar" indicator variant. */
+export interface UseSwiperDotTranslateOptions {
+  offset: SharedValue<number>;
+  /** Page width in CSS pixels. */
+  pageWidth: number;
+  /**
+   * Distance in CSS pixels that one full page of scroll should move
+   * the thumb by — typically `dotWidth + spacing` (the thumb steps to
+   * the next dot's centre when the swiper advances by one page).
+   */
+  step: number;
+}
+
+/**
+ * Translate a single "thumb" element across the indicator track,
+ * proportional to the swiper's scroll progress. Use for the `bar`
+ * variant where a single pill slides between fixed dots.
+ */
+export function useSwiperDotTranslate(
+  opts: UseSwiperDotTranslateOptions,
+): MainThreadRef<MainThread.Element | null> {
+  const ref = useMainThreadRef<MainThread.Element | null>(null);
+  // factor = step px per pageWidth px of offset. Guard against the
+  // divide-by-zero before first layout — a factor of 0 just parks the
+  // thumb at translateX(0), which is the correct initial position.
+  const factor = opts.pageWidth > 0 ? opts.step / opts.pageWidth : 0;
+  useAnimatedStyle(ref, opts.offset, 'translateX', { factor });
+  return ref;
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Internals
+
+/**
+ * Channels with `RangeParams` support that the indicator hooks use.
+ * `width` / `height` run via the new layout-axis mappers; `scaleX` /
+ * `scale` / `opacity` are transform/opacity-only.
+ */
+type RangeChannel = 'opacity' | 'scale' | 'scaleX' | 'scaleY' | 'translateX' | 'translateY' | 'width' | 'height';
+
+interface ChannelOptions<N extends RangeChannel> extends SwiperDotHookInputs {
+  channel: N;
+  outputRange: readonly [number, number, number];
+  window?: number;
+}
+
+function useSwiperDotChannel<N extends RangeChannel>(
+  opts: ChannelOptions<N>,
+): MainThreadRef<MainThread.Element | null> {
+  const ref = useMainThreadRef<MainThread.Element | null>(null);
+  // Guard against pre-layout pageWidth=0: collapsing the inputRange to
+  // [0, 0, 0] would produce divide-by-zero / NaN in interpolateLinear.
+  // Fall back to a non-degenerate window so the binding stays valid; once
+  // layout settles and the parent re-renders with a real pageWidth, the
+  // values flow through normally.
+  const safePageWidth = opts.pageWidth > 0 ? opts.pageWidth : 1;
+  const center = opts.index * safePageWidth;
+  const w = (opts.window ?? 1) * safePageWidth;
+  const params: MapperParams[N] = {
+    inputRange: [center - w, center, center + w],
+    outputRange: [opts.outputRange[0], opts.outputRange[1], opts.outputRange[2]],
+    extrapolate: 'clamp',
+  } as MapperParams[N];
+  useAnimatedStyle(ref, opts.offset, opts.channel, params);
+  return ref;
+}