@streamscloud/embeddable 6.0.4 → 6.2.0

package/dist/core/enums.d.ts

@@ -29,3 +29,9 @@ export declare enum ImageScale {
     OriginalEncoded = "ORIGINAL_ENCODED",
     Small = "SMALL"
 }
+export declare enum PostType {
+    ShortVideo = "SHORT_VIDEO"
+}
+export declare enum Status {
+    Published = "PUBLISHED"
+}

package/dist/core/enums.js

@@ -35,3 +35,11 @@ export var ImageScale;
     ImageScale["OriginalEncoded"] = "ORIGINAL_ENCODED";
     ImageScale["Small"] = "SMALL";
 })(ImageScale || (ImageScale = {}));
+export var PostType;
+(function (PostType) {
+    PostType["ShortVideo"] = "SHORT_VIDEO";
+})(PostType || (PostType = {}));
+export var Status;
+(function (Status) {
+    Status["Published"] = "PUBLISHED";
+})(Status || (Status = {}));

package/dist/media-center/data-provider/internal-media-center-data-provider.svelte.js

@@ -1,3 +1,4 @@
+import { PostType, Status } from '../../core/enums';
 import { createLocalGQLClient } from '../../core/graphql';
 import { mapToShortVideoViewerModel } from '../../short-videos/short-video-viewer';
 import { GetMediaPageConfigDocument, GetShortVideosDocument } from './operations.generated';
@@ -26,7 +27,8 @@ export class InternalMediaCenterDataProvider {
             input: {
                 filter: {
                     mediaPageId: this.mediaPageId,
-                    types: ['SHORT_VIDEO'],
+                    types: [PostType.ShortVideo],
+                    statuses: [Status.Published],
                     categoryId: filter.categoryId,
                     excludeIds: filter.excludeIds
                 },

package/dist/media-center/data-provider/operations.generated.js

@@ -143,8 +143,16 @@ export const GetShortVideosDocument = {
                                     selectionSet: {
                                         kind: 'SelectionSet',
                                         selections: [
-                                            { kind: 'Field', name: { kind: 'Name', value: 'url' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'url' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
                                             { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                                         ]
                                     }
@@ -213,8 +221,16 @@ export const GetShortVideosDocument = {
                                     selectionSet: {
                                         kind: 'SelectionSet',
                                         selections: [
-                                            { kind: 'Field', name: { kind: 'Name', value: 'url' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'url' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
                                             { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                                         ]
                                     }

package/dist/media-center/media-center/cmp.media-center.svelte

@@ -89,6 +89,7 @@ const selectCategory = (categoryId) => {
             Utils.assertUnreachable(mediaCenterMode);
     }
     selectedCategoryId = categoryId;
+    overviewOpened = false;
 };
 const activateSelectedShortVideoFeed = (shortVideo) => {
     if (!dataProvider || !shortVideoProps) {
@@ -331,6 +332,7 @@ const onScrollMounted = (node) => {
 .media-center__category-button {
   pointer-events: auto;
   font-size: 0.875rem;
+  line-height: 1;
   padding: 0.5rem 1.5rem;
   white-space: nowrap;
   width: auto;

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte

@@ -6,7 +6,7 @@ let { shortVideo, localization: localizationInit = 'en', on } = $props();
 const localization = $derived(new ShortVideoAttachmentsLocalization(localizationInit));
 </script>
 
-{#if shortVideo.products.length || shortVideo.ad}
+{#if shortVideo.hasAttachments}
   <div class="short-video-attachments">
     {#if shortVideo.ad}
       <AdCard ad={shortVideo.ad} />

package/dist/short-videos/short-video-viewer/mapper.js

@@ -18,6 +18,7 @@ export const mapToShortVideoViewerModel = (payload) => {
         text: payload.postData.shortVideoData.text,
         enableSocialInteractions: payload.enableSocialInteractions,
         heading: null,
+        hasAttachments: !!(payload.allProducts.length || payload.ad),
         ad: payload.ad ? mapToShortVideoAdCardModel(payload.ad) : null,
         products: payload.allProducts.map((x) => mapToShortVideoProductCard(x))
         // uncomment if you want to test many products behavior

package/dist/short-videos/short-video-viewer/operations.generated.js

@@ -26,8 +26,16 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                                     selectionSet: {
                                         kind: 'SelectionSet',
                                         selections: [
-                                            { kind: 'Field', name: { kind: 'Name', value: 'url' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'url' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
                                             { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                                         ]
                                     }
@@ -96,8 +104,16 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                                     selectionSet: {
                                         kind: 'SelectionSet',
                                         selections: [
-                                            { kind: 'Field', name: { kind: 'Name', value: 'url' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'url' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
                                             { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                                         ]
                                     }

package/dist/short-videos/short-video-viewer/operations.graphql

@@ -7,8 +7,8 @@ fragment ShortVideoViewerPayloadFragment on Post {
     shortDescription
     link
     media {
-      url
-      thumbnailUrl
+      url(scale: SMALL)
+      thumbnailUrl(scale: SMALL)
       type
     }
     brand {
@@ -40,8 +40,8 @@ fragment ShortVideoViewerPayloadFragment on Post {
     }
     type
     media {
-      url
-      thumbnailUrl
+      url(scale: SMALL)
+      thumbnailUrl(scale: SMALL)
       type
     }
   }

package/dist/short-videos/short-video-viewer/types.d.ts

@@ -14,6 +14,7 @@ export type ShortVideoViewerModel = {
     enableSocialInteractions: boolean;
     products: ShortVideoProductCardModel[];
     ad: ShortVideoAdCardModel | null;
+    hasAttachments: boolean;
 };
 export type ShortVideoViewerHeadingModel = {
     image: string | null;

package/dist/short-videos/short-videos-player/controls.svelte

@@ -44,7 +44,7 @@ const changeShowAttachments = () => {
           <img src={playerLogo} class="short-videos-player-controls__logo-img" alt="Player Logo" />
         </div>
       {/if}
-      {#if shortVideo && uiManager.showAttachments}
+      {#if shortVideo?.hasAttachments && uiManager.showAttachments}
         <div class="short-videos-player-controls__short-video-attachments" transition:slideHorizontally|local>
           <ShortVideoViewerAttachments
             shortVideo={shortVideo}

package/dist/short-videos/short-videos-player/operations.generated.js

@@ -69,8 +69,16 @@ export const GetShortVideosDocument = {
                                     selectionSet: {
                                         kind: 'SelectionSet',
                                         selections: [
-                                            { kind: 'Field', name: { kind: 'Name', value: 'url' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'url' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
                                             { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                                         ]
                                     }
@@ -139,8 +147,16 @@ export const GetShortVideosDocument = {
                                     selectionSet: {
                                         kind: 'SelectionSet',
                                         selections: [
-                                            { kind: 'Field', name: { kind: 'Name', value: 'url' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'url' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
+                                            },
                                             { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                                         ]
                                     }

package/dist/streams/layout/models/mapper.js

@@ -17,6 +17,7 @@ export const mapToShortVideoViewerModel = (model) => {
             viewsCount: model.header.postViewsCount
         },
         enableSocialInteractions: model.enableSocialInteractions,
+        hasAttachments: !!(model.products.length || model.ad),
         ad: model.ad ? mapToAdViewModel(model.ad) : null,
         products: model.products.map(mapToProductCardModel)
         // uncomment if you want to test many products behavior

package/dist/ui/player/cmp.player-slider.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { createWheelPeakDetector } from './wheel-peak-detector';
+<script lang="ts">import { createWheelAdapter } from './wheel-gestures-adapter';
 import { onDestroy, onMount, untrack } from 'svelte';
 let { buffer, on, children } = $props();
 let slidesRef;
@@ -115,7 +115,7 @@ const styles = $derived.by(() => {
     ];
     return values.join(';');
 });
-const peakDetectorCallbacks = {
+const wheelCallbacks = {
     canLoadNext: () => buffer.canLoadNext,
     canLoadPrevious: () => buffer.canLoadPrevious,
     onTrigger: (direction) => {
@@ -132,7 +132,7 @@ const peakDetectorCallbacks = {
 </script>
 
 <div class="player-slider">
-  <div class="player-slider__slides" bind:this={slidesRef} use:createWheelPeakDetector={{ cbs: peakDetectorCallbacks }} style={styles}>
+  <div class="player-slider__slides" bind:this={slidesRef} use:createWheelAdapter={{ cbs: wheelCallbacks }} style={styles}>
     {#each buffer.loaded as item, index (item)}
       <div class="player-slider__slide">
         {#if index >= activeIndex - 1 && index <= activeIndex + 1}

package/dist/ui/player/player-buffer.svelte.d.ts

@@ -8,7 +8,7 @@ export declare class PlayerBuffer<T extends {
     readonly canLoadNext: boolean;
     readonly canLoadPrevious: boolean;
     readonly navigationDisabled: boolean;
-    readonly animationDuration = 300;
+    readonly animationDuration = 500;
     private _currentIndex;
     private _loaded;
     private loadMoreFn;

package/dist/ui/player/player-buffer.svelte.js

@@ -6,7 +6,7 @@ export class PlayerBuffer {
     canLoadNext = $derived(this.currentIndex < this.loaded.length - 1);
     canLoadPrevious = $derived(this.currentIndex > 0);
     navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
-    animationDuration = 300;
+    animationDuration = 500;
     _currentIndex = $state(-1);
     _loaded = $state.raw([]);
     loadMoreFn;

package/dist/ui/player/wheel-gestures-adapter.d.ts

@@ -0,0 +1,17 @@
+export type WheelAdapterCallbacks = {
+    canLoadNext: () => boolean;
+    canLoadPrevious: () => boolean;
+    onTrigger: (direction: number) => void;
+    getAnimationDurationMs: () => number;
+};
+/**
+ * Minimal, robust wheel adapter:
+ * - EMA over axisVelocity[1] to smooth noisy streams (esp. on Windows)
+ * - Cooldown blocks triggers while animation runs
+ * - Mouse fallback: if velocity is near zero but delta is large, treat as a discrete "kick"
+ */
+export declare const createWheelAdapter: (target: HTMLElement, params: {
+    cbs: WheelAdapterCallbacks;
+}) => {
+    destroy(): void;
+};

package/dist/ui/player/wheel-gestures-adapter.js

@@ -0,0 +1,79 @@
+// wheel-gestures-adapter.ts
+import { WheelGestures } from 'wheel-gestures';
+/**
+ * Minimal, robust wheel adapter:
+ * - EMA over axisVelocity[1] to smooth noisy streams (esp. on Windows)
+ * - Cooldown blocks triggers while animation runs
+ * - Mouse fallback: if velocity is near zero but delta is large, treat as a discrete "kick"
+ */
+export const createWheelAdapter = (target, params) => {
+    const { cbs } = params;
+    // Tunables
+    const PEAK_THRESHOLD = 0.4; // EMA magnitude threshold to consider as a "peak"
+    const ACCEL_THRESHOLD = 0.02; // minimal directional EMA rise to count as real acceleration
+    const EMA_ALPHA = 0.35; // EMA smoothing factor (0..1); higher = snappier, noisier
+    const MOUSE_DELTA_KICK = 12; // mouse: large delta step (≈12 mac / ≈100 win)
+    const MOUSE_STEP_RATIO_KICK = 350; // dimensionless; tune 200–500 if needed
+    const wheelGestures = WheelGestures({ preventWheelAction: true, reverseSign: false });
+    wheelGestures.observe(target);
+    let isAnimating = false;
+    let cooldownTimer = null;
+    // EMA state
+    let emaVelocity = 0;
+    let previousEmaVelocity = 0;
+    const startCooldown = () => {
+        if (cooldownTimer) {
+            clearTimeout(cooldownTimer);
+        }
+        cooldownTimer = window.setTimeout(() => {
+            isAnimating = false;
+        }, cbs.getAnimationDurationMs() + 100);
+    };
+    const fire = (direction) => {
+        // Respect external guards (e.g., paging boundaries)
+        if ((direction > 0 && !cbs.canLoadNext()) || (direction < 0 && !cbs.canLoadPrevious())) {
+            return;
+        }
+        isAnimating = true;
+        cbs.onTrigger(direction);
+        startCooldown();
+    };
+    wheelGestures.on('wheel', ({ axisDelta: [, axisDeltaY], axisVelocity: [, axisVelocityY] }) => {
+        const velocityY = axisVelocityY || 0;
+        const deltaY = axisDeltaY || 0;
+        // Tracking only: always update EMA and compute signs/acceleration
+        previousEmaVelocity = emaVelocity;
+        emaVelocity += (velocityY - emaVelocity) * EMA_ALPHA;
+        const emaMagnitude = Math.abs(emaVelocity);
+        const velocitySign = Math.sign(emaVelocity) || Math.sign(velocityY);
+        const emaAcceleration = emaVelocity - previousEmaVelocity;
+        // During animation we only track; no arming, no triggering
+        if (isAnimating) {
+            return;
+        }
+        // Path 1: mouse-like discrete kick (platform-agnostic via delta/velocity ratio)
+        const absDelta = Math.abs(deltaY);
+        const absVel = Math.abs(velocityY);
+        const stepRatio = absDelta / Math.max(1e-6, absVel);
+        const isMouseLikeKick = absDelta >= MOUSE_DELTA_KICK && stepRatio >= MOUSE_STEP_RATIO_KICK;
+        if (isMouseLikeKick) {
+            const direction = deltaY > 0 ? 1 : -1; // 1 = next/down, -1 = previous/up
+            fire(direction);
+            return;
+        }
+        // Path 2: trackpad/inertia via EMA acceleration and peak gating
+        const isAcceleratingInDirection = velocitySign !== 0 && emaAcceleration * velocitySign > ACCEL_THRESHOLD;
+        if (isAcceleratingInDirection && emaMagnitude > PEAK_THRESHOLD) {
+            const direction = velocitySign > 0 ? 1 : -1; // 1 = next/down, -1 = previous/up
+            fire(direction);
+        }
+    });
+    return {
+        destroy() {
+            wheelGestures.unobserve(target);
+            if (cooldownTimer) {
+                clearTimeout(cooldownTimer);
+            }
+        }
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "6.0.4",
+  "version": "6.2.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -157,6 +157,7 @@
     "vite-tsconfig-paths": "^5.1.4"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.8"
+    "@popperjs/core": "^2.11.8",
+    "wheel-gestures": "^2.2.48"
   }
 }

package/dist/ui/player/wheel-peak-detector.d.ts

@@ -1,22 +0,0 @@
-export type PeakDetectorConfig = {
-    mouseGapMs?: number;
-    mouseDeltaThreshold?: number;
-    interEventTimeout?: number;
-    minPeakToTrigger?: number;
-    waveMaxAgeMs?: number;
-    directionFlipEndsWave?: boolean;
-    animationCooldownMs?: number;
-    directionChangeMinAbsDelta?: number;
-};
-export type PeakDetectorCallbacks = {
-    canLoadNext: () => boolean;
-    canLoadPrevious: () => boolean;
-    onTrigger: (direction: number) => void;
-    getAnimationDurationMs: () => number;
-};
-export declare const createWheelPeakDetector: (target: HTMLElement, params: {
-    cbs: PeakDetectorCallbacks;
-    cfg?: PeakDetectorConfig;
-}) => {
-    destroy(): void;
-};

package/dist/ui/player/wheel-peak-detector.js

@@ -1,157 +0,0 @@
-import { isScrollingPrevented } from './prevent-slider-scroll';
-export const createWheelPeakDetector = (target, params) => {
-    const { cbs, cfg } = params;
-    // Defaults tuned for smooth touchpads; adjust in caller if needed.
-    const config = {
-        mouseGapMs: cfg?.mouseGapMs ?? 120,
-        mouseDeltaThreshold: cfg?.mouseDeltaThreshold ?? 12,
-        interEventTimeout: cfg?.interEventTimeout ?? 180,
-        minPeakToTrigger: cfg?.minPeakToTrigger ?? 6,
-        waveMaxAgeMs: cfg?.waveMaxAgeMs ?? 1800,
-        directionFlipEndsWave: cfg?.directionFlipEndsWave ?? true,
-        animationCooldownMs: cfg?.animationCooldownMs ?? 100, // extra after CSS transition
-        directionChangeMinAbsDelta: cfg?.directionChangeMinAbsDelta ?? 2 // ignore tiny opposite spikes
-    };
-    let wave = null;
-    let lastWheelTime = 0;
-    let lastDelta = 0;
-    let isAnimating = false;
-    let cooldownTimer = null;
-    const clearWave = () => {
-        wave = null;
-    };
-    const setAnimatingWithCooldown = () => {
-        isAnimating = true;
-        const total = cbs.getAnimationDurationMs() + config.animationCooldownMs;
-        if (cooldownTimer) {
-            clearTimeout(cooldownTimer);
-        }
-        cooldownTimer = window.setTimeout(() => {
-            isAnimating = false;
-            cooldownTimer = null;
-        }, total);
-    };
-    const trigger = (direction) => {
-        if (direction > 0 && !cbs.canLoadNext()) {
-            return;
-        }
-        if (direction < 0 && !cbs.canLoadPrevious()) {
-            return;
-        }
-        setAnimatingWithCooldown();
-        cbs.onTrigger(direction);
-    };
-    const canHandle = (node) => {
-        while (node && node !== target) {
-            if (isScrollingPrevented(node)) {
-                return false;
-            }
-            node = node.parentElement;
-        }
-        return true;
-    };
-    const finalizeWaveWithTrigger = () => {
-        if (wave && !isAnimating) {
-            if (wave.maxAbsDelta >= config.minPeakToTrigger) {
-                trigger(wave.direction);
-            }
-        }
-        clearWave();
-    };
-    const finalizeWaveSilently = () => {
-        // Finish the wave without triggering (used on direction flip to avoid ghost slide)
-        clearWave();
-    };
-    const onWheel = (e) => {
-        e.preventDefault();
-        if (!canHandle(e.target)) {
-            return;
-        }
-        const now = Date.now();
-        const dy = e.deltaY;
-        const absDelta = Math.abs(dy);
-        console.warn(absDelta);
-        const dir = Math.sign(dy);
-        // Mouse branch: big, sparse deltas
-        const timeSinceLast = now - lastWheelTime;
-        if (absDelta >= config.mouseDeltaThreshold && timeSinceLast > config.mouseGapMs && !isAnimating) {
-            trigger(dir);
-            clearWave();
-            lastWheelTime = now;
-            lastDelta = dy;
-            return;
-        }
-        // Determine direction change with hysteresis to avoid micro flips
-        const directionChanged = !!wave && dir !== 0 && dir !== wave.direction && absDelta >= config.directionChangeMinAbsDelta;
-        const inactiveTooLong = wave && now - wave?.lastEventTime > config.interEventTimeout;
-        const waveTooOld = wave && now - wave?.startTime > config.waveMaxAgeMs;
-        // If direction flip should end the wave, do it silently (no trigger of the old direction)
-        if (wave && config.directionFlipEndsWave && directionChanged) {
-            finalizeWaveSilently();
-            // Start a new wave immediately in the new direction
-            wave = {
-                startTime: now,
-                lastEventTime: now,
-                direction: dir,
-                maxAbsDelta: absDelta,
-                sumAbsDelta: absDelta,
-                events: 1
-            };
-            lastWheelTime = now;
-            lastDelta = dy;
-            return;
-        }
-        // Finalize by inactivity or age (these DO trigger)
-        if (inactiveTooLong || waveTooOld) {
-            finalizeWaveWithTrigger();
-        }
-        // Start condition for new wave:
-        // - no wave
-        // - current amplitude grows vs previous
-        // - long gap since last wheel
-        const growing = absDelta > Math.abs(lastDelta);
-        const longGap = timeSinceLast > config.interEventTimeout;
-        if (!wave || growing || longGap) {
-            // Opportunistic finalize only if not animating and not caused by a flip
-            // (flip branch handled earlier and is silent)
-            if (wave && !isAnimating) {
-                if (wave.maxAbsDelta >= config.minPeakToTrigger) {
-                    trigger(wave.direction);
-                }
-            }
-            wave = {
-                startTime: now,
-                lastEventTime: now,
-                direction: dir || (wave?.direction ?? 0),
-                maxAbsDelta: absDelta,
-                sumAbsDelta: absDelta,
-                events: 1
-            };
-            lastWheelTime = now;
-            lastDelta = dy;
-            return;
-        }
-        // Continue current wave
-        if (wave) {
-            wave.lastEventTime = now;
-            wave.events += 1;
-            wave.sumAbsDelta += absDelta;
-            if (absDelta > wave.maxAbsDelta) {
-                wave.maxAbsDelta = absDelta; // peak update
-            }
-        }
-        lastWheelTime = now;
-        lastDelta = dy;
-    };
-    target.addEventListener('wheel', onWheel, { passive: false });
-    return {
-        destroy() {
-            target.removeEventListener('wheel', onWheel);
-            if (cooldownTimer) {
-                clearTimeout(cooldownTimer);
-                cooldownTimer = null;
-            }
-            wave = null;
-        }
-    };
-};