@streamscloud/kit 0.1.12-1772032209109 → 0.1.12-1772041668184

package/dist/ui/dialog/dialogs.svelte.js

@@ -62,14 +62,14 @@ export class DialogsContainer {
         if (this._savedOverflow !== null) {
             return;
         }
-        this._savedOverflow = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
+        this._savedOverflow = document.documentElement.style.overflow;
+        document.documentElement.style.overflow = 'hidden';
     };
     unlockBodyScroll = () => {
         if (this._savedOverflow === null) {
             return;
         }
-        document.body.style.overflow = this._savedOverflow;
+        document.documentElement.style.overflow = this._savedOverflow;
         this._savedOverflow = null;
     };
 }

package/dist/ui/media-viewer-dialog/cmp.media-viewer-dialog.svelte

@@ -18,7 +18,7 @@ $effect(() => untrack(() => {
     {#if data.items.length === 1}
       <MediaViewerItem item={data.items[0]} />
     {:else}
-      <Carousel items={data.items} initialIndex={data.index} mode="arrows-with-counts" on={{ indexChanged: () => {} }}>
+      <Carousel items={data.items} initialIndex={data.index} mode={data.carouselMode ?? 'arrows-with-counts'} wheelNavigation on={{ indexChanged: () => {} }}>
         {#snippet children(item)}
           <MediaViewerItem item={item} />
         {/snippet}

package/dist/ui/media-viewer-dialog/index.d.ts

@@ -8,6 +8,7 @@ import type { MediaViewerData } from './types';
  * - `items` — array of media items to display
  * - `index` — zero-based index of the initially visible item
  * - `backgroundOpacity` — backdrop opacity (default `0.6`)
+ * - `carouselMode` — carousel navigation mode (default `'arrows-with-counts'`)
  */
 export declare const openMediaViewer: (data: MediaViewerData) => Promise<DialogResult<void>>;
 export type { MediaViewerData, MediaViewerItem, MediaViewerItemType } from './types';

package/dist/ui/media-viewer-dialog/index.js

@@ -8,6 +8,7 @@ import { default as MediaViewerDialog } from './cmp.media-viewer-dialog.svelte';
  * - `items` — array of media items to display
  * - `index` — zero-based index of the initially visible item
  * - `backgroundOpacity` — backdrop opacity (default `0.6`)
+ * - `carouselMode` — carousel navigation mode (default `'arrows-with-counts'`)
  */
 export const openMediaViewer = (data) => {
     return Dialogs.open({

package/dist/ui/media-viewer-dialog/types.d.ts

@@ -1,3 +1,4 @@
+import type { CarouselMode } from '../player/carousel';
 export type MediaViewerItemType = 'image' | 'video';
 export type MediaViewerItem = {
     url: string;
@@ -10,4 +11,5 @@ export type MediaViewerData = {
     items: MediaViewerItem[];
     index: number;
     backgroundOpacity?: number;
+    carouselMode?: CarouselMode;
 };

package/dist/ui/player/carousel/cmp.carousel.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" generics="T">import { Utils, isBrowser } from '../../../core/utils';
 import { Icon } from '../../icon';
-import { TouchSynchronizer } from '../utils';
+import { TouchSynchronizer, createWheelAdapter } from '../utils';
 import { CarouselLocalization } from './carousel-localization';
 import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_20_regular.svg?raw';
 import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
 import { onDestroy, onMount, untrack } from 'svelte';
-let { items, mode = 'arrows-with-counts', initialIndex, autoSlideMs = 0, on, dot, children } = $props();
+let { items, mode = 'arrows-with-counts', initialIndex, autoSlideMs = 0, wheelNavigation = false, on, dot, children } = $props();
 const localization = new CarouselLocalization();
 const itemIndices = $derived(items.map((_, index) => index));
 const animationDuration = 300;
@@ -17,6 +17,20 @@ let slidesRef;
 let sliderWidth = $state(0);
 let swipeTransition = $state(0);
 let resizeObserver;
+let wheelAdapter = null;
+const wheelCallbacks = {
+    canLoadNext: () => items.length > 1,
+    canLoadPrevious: () => items.length > 1,
+    onTrigger: (direction) => {
+        if (direction === 'next') {
+            loadNext();
+        }
+        else {
+            loadPrevious();
+        }
+    },
+    getAnimationDurationMs: () => animationDuration
+};
 onMount(() => {
     notifyIndexChanged();
     setTimeout(() => {
@@ -132,6 +146,12 @@ onMount(() => {
     if (isBrowser()) {
         window.addEventListener(`keydown`, onKeyPress);
     }
+    if (wheelNavigation) {
+        wheelAdapter = createWheelAdapter(slidesRef, {
+            axis: 'x',
+            cbs: wheelCallbacks
+        });
+    }
 });
 onDestroy(() => {
     if (resizeObserver) {
@@ -143,6 +163,7 @@ onDestroy(() => {
             window.clearInterval(interval);
         }
     }
+    wheelAdapter?.destroy();
 });
 const onKeyPress = Utils.throttle((e) => {
     if (e.key === 'ArrowLeft') {

package/dist/ui/player/carousel/cmp.carousel.svelte.d.ts

@@ -10,6 +10,8 @@ declare function $$render<T>(): {
         mode?: CarouselMode;
         /** Auto-advance interval in ms; 0 disables auto-sliding @default 0 */
         autoSlideMs?: number;
+        /** Convert vertical mouse wheel scroll to slide navigation @default false */
+        wheelNavigation?: boolean;
         on?: {
             /** Fires after the active slide changes */
             indexChanged: (index: number) => void;

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

@@ -1,5 +1,4 @@
-<script lang="ts" generics="T extends { id: string }">import { TouchSynchronizer } from '../utils';
-import { createWheelAdapter } from './wheel-gestures-adapter';
+<script lang="ts" generics="T extends { id: string }">import { TouchSynchronizer, createWheelAdapter } from '../utils';
 import { onDestroy, onMount, untrack } from 'svelte';
 let { buffer, on, children } = $props();
 let slidesRef;
@@ -142,11 +141,10 @@ const wheelCallbacks = {
     canLoadNext: () => buffer.canLoadNext,
     canLoadPrevious: () => buffer.canLoadPrevious,
     onTrigger: (direction) => {
-        // direction: 1 -> next, -1 -> previous
-        if (direction > 0) {
+        if (direction === 'next') {
             buffer.loadNext();
         }
-        else if (direction < 0) {
+        else {
             buffer.loadPrevious();
         }
     },

package/dist/ui/player/utils/index.d.ts

@@ -1 +1,2 @@
 export { TouchSynchronizer } from './touch-synchronizer';
+export * from './wheel-gestures-adapter';

package/dist/ui/player/utils/index.js

@@ -1 +1,2 @@
 export { TouchSynchronizer } from './touch-synchronizer';
+export * from './wheel-gestures-adapter';

package/dist/ui/player/{feed-slider → utils}/wheel-gestures-adapter.d.ts

@@ -1,16 +1,20 @@
+export type WheelAdapterAxis = 'x' | 'y';
+export type WheelAdapterDirection = 'next' | 'previous';
 export type WheelAdapterCallbacks = {
     canLoadNext: () => boolean;
     canLoadPrevious: () => boolean;
-    onTrigger: (direction: number) => void;
+    onTrigger: (direction: WheelAdapterDirection) => void;
     getAnimationDurationMs: () => number;
 };
 /**
  * Minimal, robust wheel adapter:
- * - EMA over axisVelocity[1] to smooth noisy streams (esp. on Windows)
+ * - Configurable axis: 'y' reads Y only; 'x' prefers X but remaps Y when X is negligible
+ * - EMA over velocity 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: {
+    axis?: WheelAdapterAxis;
     cbs: WheelAdapterCallbacks;
 }) => {
     destroy(): void;

package/dist/ui/player/{feed-slider → utils}/wheel-gestures-adapter.js

@@ -2,12 +2,13 @@
 import { WheelGestures } from 'wheel-gestures';
 /**
  * Minimal, robust wheel adapter:
- * - EMA over axisVelocity[1] to smooth noisy streams (esp. on Windows)
+ * - Configurable axis: 'y' reads Y only; 'x' prefers X but remaps Y when X is negligible
+ * - EMA over velocity 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;
+    const { axis = 'y', 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
@@ -30,41 +31,49 @@ export const createWheelAdapter = (target, params) => {
         }, cbs.getAnimationDurationMs() + 100);
     };
     const fire = (direction) => {
-        // Respect external guards (e.g., paging boundaries)
-        if ((direction > 0 && !cbs.canLoadNext()) || (direction < 0 && !cbs.canLoadPrevious())) {
+        if ((direction === 'next' && !cbs.canLoadNext()) || (direction === 'previous' && !cbs.canLoadPrevious())) {
             return;
         }
         isAnimating = true;
         cbs.onTrigger(direction);
         startCooldown();
     };
-    wheelGestures.on('wheel', ({ axisDelta: [, axisDeltaY], axisVelocity: [, axisVelocityY] }) => {
-        const velocityY = axisVelocityY || 0;
-        const deltaY = axisDeltaY || 0;
+    const getAxisValues = (axisDelta, axisVelocity) => {
+        if (axis === 'y') {
+            return [axisDelta[1], axisVelocity[1]];
+        }
+        // axis === 'x': prefer X, fall back to Y (remap vertical scroll to horizontal)
+        if (Math.abs(axisDelta[0]) >= Math.abs(axisDelta[1])) {
+            return [axisDelta[0], axisVelocity[0]];
+        }
+        return [axisDelta[1], axisVelocity[1]];
+    };
+    wheelGestures.on('wheel', ({ axisDelta, axisVelocity }) => {
+        const [delta, velocity] = getAxisValues(axisDelta, axisVelocity);
         // Tracking only: always update EMA and compute signs/acceleration
         previousEmaVelocity = emaVelocity;
-        emaVelocity += (velocityY - emaVelocity) * EMA_ALPHA;
+        emaVelocity += (velocity - emaVelocity) * EMA_ALPHA;
         const emaMagnitude = Math.abs(emaVelocity);
-        const velocitySign = Math.sign(emaVelocity) || Math.sign(velocityY);
+        const velocitySign = Math.sign(emaVelocity) || Math.sign(velocity);
         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 absDelta = Math.abs(delta);
+        const absVel = Math.abs(velocity);
         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
+            const direction = delta > 0 ? 'next' : 'previous';
             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
+            const direction = velocitySign > 0 ? 'next' : 'previous';
             fire(direction);
         }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.1.12-1772032209109",
+  "version": "0.1.12-1772041668184",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",